feat!: v5 release (#965)

* chore: replace useLogger with logger utility functions (#964)

- Removed useLogger imports from various composables and directives.
- Introduced logError and logWarning functions from the new logger utility.
- Updated relevant code to utilize the new logging methods for improved clarity and maintainability.

* feat!: update package.json and vite.config.ts for build configuration (#960)

BREAKING CHANGE: Tres is now ESM only

- Removed UMD build configuration from package.json and adjusted exports to only include ES module.
- Updated vite.config.ts to specify the output format as ES, enhancing compatibility with modern module systems.

* fix: export logger utility from utils in index.ts (#966)

- Added export for the logger utility from './utils/logger' to enhance logging capabilities across the ecosystem

* refactor: update utility imports in composables and core files (#973)

- Changed import statements in various files to directly import specific utility functions from './utils/is' instead of importing the entire module.
- This improves clarity and reduces potential namespace conflicts, ensuring that only the necessary functions are imported for use.
- Updated related logic in composables and core operations to utilize the new import structure for better maintainability.

* feat: 974-createsetup-devtools (#975)

* feat: integrate devtools setup for performance monitoring

- Added a new `setupDevtools` function to manage performance metrics such as FPS and memory usage.
- Integrated the `setupDevtools` function into the `useTresContextProvider` to enhance the development experience.
- Updated the `index.vue` page to utilize the `useControls` for FPS graphing.
- Cleaned up unused performance-related code to streamline the context provider logic.

* Update src/devtools/setupDevtools.ts

Co-authored-by: Damien Montastier <montastier.damien@gmail.com>

* Update src/devtools/setupDevtools.ts

Co-authored-by: Damien Montastier <montastier.damien@gmail.com>

* refactor: improve readability in setupDevtools.ts

- Adjusted indentation and formatting in the `setupDevtools` function to enhance code clarity.
- Ensured consistent use of braces for conditional statements to improve maintainability and readability.

* refactor: added boundedPush util

- Introduced a new utility function `boundedPush` in `perf.ts` to streamline the logic for maintaining a fixed-length array for performance metrics.
- Updated `setupDevtools.ts` to utilize `boundedPush` for both FPS and memory usage tracking, enhancing code clarity and reducing redundancy.

---------

Co-authored-by: Damien Montastier <montastier.damien@gmail.com>

* feat(deps): update @vue/devtools-api and @tresjs/cientos dependencies (#977)

- Upgraded @vue/devtools-api from version 6.6.3 to 7.7.2 for improved functionality.
- Updated @tresjs/cientos dependency to a specific version hosted at a new URL for better version control.
- Enabled Vue DevTools in the Vite configuration for enhanced development experience.
- Adjusted the homepage link in the devtools plugin for accurate documentation reference.

* feat(loader)!: refactor useLoader to a true composable (#959)

* feat(loader): introduce useLoader composable and documentation

- Added `useLoader` composable for loading resources with THREE.js, supporting single and multiple resource loading, loading state tracking, and error handling.
- Created comprehensive documentation for `useLoader`, detailing its features, usage examples, and API reference.
- Updated various playground components to utilize the new `useLoader` composable for loading GLTF and FBX models.
- Added new demo pages for loading multiple models and using the `UseLoader` component in templates.

* feat(loader)!: introduce useLoader composable and documentation

BREAKING CHANGE: useLoader no longer returns the plain obj, it now returns and object with reactive data (resource|s), isLoading, error) and a load method, can be used both sync and async (suspense)

- Added `useLoader` composable for loading resources with THREE.js, supporting single and multiple resource loading, loading state tracking, and error handling.
- Created comprehensive documentation for `useLoader`, detailing its features, usage examples, and API reference.
- Updated various playground components to utilize the new `useLoader` composable for loading GLTF and FBX models.
- Added new demo pages for loading multiple models and using the `UseLoader` component in templates.

* chore(loader): simplify useLoader implementation and clean up imports

- Updated the `UseLoader` component in documentation to remove unnecessary destructuring of the slot props.
- Cleaned up imports in `BlenderCube.vue`, `Suzanne.vue`, and `TheExperience.vue` by removing unused types.
- Added eslint-disable comments for console logging in `Suzanne.vue` and `TheExperience.vue` to improve code readability while debugging.

* feat: useGraph to generate named object material collections

* feat: useAsyncState for useLoader

- Added documentation for the `useLoader` composable, detailing its features, usage examples, and API reference.
- Updated the navigation in the VitePress configuration to include a link to the new `useLoader` documentation.
- Enhanced the `useLoader` composable to support better type safety and resource management.
- Removed the `Suzanne.vue` component as part of the cleanup process.

* feat: enhance useLoader and useGraph composables

- Updated the `useLoader` composable to improve type safety and support loading textures alongside models.
- Refactored the `useGraph` composable to accept both Object3D and TresObject types, enhancing its flexibility.
- Added new examples and documentation for loading multiple models and textures, including progress tracking.
- Cleaned up and organized playground components to demonstrate the new features effectively.

* refactor(useLoader.test): clean up imports by removing unused `nextTick` import

- Removed the unused `nextTick` import from the `useLoader.test.ts` file to streamline the code and improve readability.

* docs: remove trailing spaces in team.md for consistency

- Cleaned up trailing spaces in the `team.md` file to improve code consistency and readability.

* fix(graph): export also types from graph utils

* refactor(index.ts): remove unused export of buildGraph

- Removed the unused `buildGraph` export from `index.ts` to streamline the code and improve maintainability.

* feat: enhance resources loading with progress tracking

- Enhanced the `useLoader` composable to return progress information, allowing for better user feedback during model loading.
- Updated `TheModel.vue` to utilize the new progress tracking feature from the `useLoader` composable.
- Removed the unused `LoadingManager` and integrated progress updates directly into the component's state.
- Updated docs

* feat: added tests to load and progress

* chore: release v5.0.0-next.0

* chore: type checking in ci (#988)

* added typecheck script

* added typecheck to ci

* ts error fixes

* fixed import

* docs: added cientos next to docs to fix build

* merged lint and typecheck workflow

* added eol

* removed shit added by ai

* improved workflow dependencies

* lint fix

* made pkg.pr.new dependent on lint and typecheck

* added branch filters to workflow_run triggers in pkg.pr.new.yml and test.yml

* trying to get workflow to run

* merged workflows

* adjusted triggers for ci

* restored pkg.pr.new.yml

* trying again

* restored pkg.pr.new.yml again

---------

Co-authored-by: alvarosabu <alvaro.saburido@gmail.com>

* refactor: reorganize devtools setup and imports (#991)

* refactor: reorganize devtools setup and imports

- Moved the `registerTresDevtools` import in `TresCanvas.vue` to improve clarity and ensure proper registration of devtools.
- Renamed `setupDevtools` to `setupTresDevtools` in `setupDevtools.ts` for consistency with the new naming convention.
- Updated the `registerTresDevtools` function in `plugin.ts` to call the renamed `setupTresDevtools`, ensuring proper integration of the devtools setup.
- Removed the unused `setupDevtools` call from `useTresContextProvider` to streamline the context provider logic.

* refactor: remove unused setupDevtools import from useTresContextProvider

- Eliminated the unused `setupDevtools` import from `useTresContextProvider` to streamline the context provider logic and improve code clarity.

* feat!: deprecate useSeek composable and update documentation (#990)

* feat!: deprecate useSeek composable and update documentation

BREAKING CHANGE: `useSeek` is deprecated

- Marked the `useSeek` composable as deprecated in the documentation, indicating its removal in v5.0.0.
- Removed the `useSeek` composable implementation and its associated tests from the codebase to streamline the composables directory.
- Updated the documentation to reflect the deprecation status and provide guidance for users.

* Update docs/api/composables.md

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

---------

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

* chore: update-cientos-next-for-playground-docs (#996)

* chore: fix some stuff for playground on next

- Updated `@tresjs/cientos` and `@tresjs/leches` dependencies to specific versions in `pnpm-lock.yaml` and `package.json`.
- Refactored `BlenderCube.vue` to utilize computed properties for model handling and removed unused controls.
- Replaced `GraphPane.vue` with `TresLeches` for rendering performance metrics in `OnDemandRendering.vue` and `experience.vue`.
- Introduced `BrownianDistribution.vue` for a new demo showcasing Brownian distribution.
- Cleaned up unused state management code and removed `GraphPane.vue` and `state.ts` to streamline the codebase.
- Updated routing to reflect new component structure and added a route for the new Brownian distribution demo.

* chore: remove unused import from index.vue

- Eliminated the unused `useControls` import from `index.vue` to streamline the code and improve clarity.

* refactor!: 979 move renderer logic from usetrescontextprovider to userenderer 2 (#993)

* added typecheck script

* added typecheck to ci

* ts error fixes

* fixed import

* moved render state stuff to useRenderer

* chore!: stripped unnecessarily returned elements from useRenderer

BREAKING CHANGE:

- useRenderer now returns invalidate and advance
- useTresContextProvider no longer contains render state

* chore: removed internal renderer ref

* refactor!: the renderer instance is now returned from useRenderer, made renderer being wrapped inside the context

BREAKING CHANGE:

- invalidate, advance, canBeInvalidated and the renderer instance are now accessed through the context via `renderer`
- the renderer instance in the context is now readonly

* refactor: removed one emit dependency

* tofo cleanup

* merge fix

* refactor: updated other parts to match structural changes

* worked around loop errors

* fixes concerning changes in playground

* updated english docs

* fix: wrong render mode in docs

* removed obsolete todo

* fix: added null check

* fix: removed deprecated toValue import

* chore: restored renderer tyope in LoopCallbackWithCtx

* refactor: renamed useRenderer

* fix: test

* fix: lint fix

---------

Co-authored-by: Alvaro Saburido <alvaro.saburido@gmail.com>

* refactor!: 992 removal of emit from usetrescontextprovider composable (#999)

* added typecheck script

* added typecheck to ci

* ts error fixes

* fixed import

* moved render state stuff to useRenderer

* chore!: stripped unnecessarily returned elements from useRenderer

BREAKING CHANGE:

- useRenderer now returns invalidate and advance
- useTresContextProvider no longer contains render state

* chore: removed internal renderer ref

* refactor!: the renderer instance is now returned from useRenderer, made renderer being wrapped inside the context

BREAKING CHANGE:

- invalidate, advance, canBeInvalidated and the renderer instance are now accessed through the context via `renderer`
- the renderer instance in the context is now readonly

* refactor: removed one emit dependency

* tofo cleanup

* merge fix

* refactor: updated other parts to match structural changes

* worked around loop errors

* fixes concerning changes in playground

* updated english docs

* fix: wrong render mode in docs

* removed obsolete todo

* fix: added null check

* fix: removed deprecated toValue import

* feat: remove emit from useTresEventManager

* renamed type

* chore: got rid of emit concerning TresReady

* refactor!: removed emit from useTresContextProvider and useTresEventManager

BREAKING CHANGE:

- the type `EmitEventName` is no longer exported from @tresjs/core
- the type `EmitEventFn` is no longer exported from @tresjs/core

* chore: restored renderer tyope in LoopCallbackWithCtx

* refactor: renamed useRenderer

* fix: test

* cleanup

---------

Co-authored-by: Alvaro Saburido <alvaro.saburido@gmail.com>

* fix: added forgotten ready emit

* refactor!: removed useTresReady, added isReady to the renderer in the… (#1000)

* refactor!: removed useTresReady, added isReady to the renderer in the context

BREAKING CHANGE:

- useTresReady is no longer available, it has been replaced by isReady in the renderer in the context
- onTresReady is no longer available. renderer.isReady should be leveraged instead

* chore: removed playground files concerning useTresReady

* chore: removed ready pages from playground routes

* feature: made isReady dependency clearer by leveraging triggerRef

* fix: add initial value support to useLoader(#1007)

* fix: add initial value support to useLoader

- Enhanced the `useLoader` composable to accept an `initialValue` option, allowing users to provide a default state while resources are loading.
- Updated documentation to reflect the new `initialValue` feature, improving user experience by preventing null states during loading.
- Modified examples in the documentation and playground to demonstrate the usage of `initialValue` with textures and models.

* fix: update import order in use-loader documentation for consistency

- Adjusted the import order of `Texture` and `TextureLoader` from 'three' to maintain a consistent style across documentation examples.
- Minor formatting change in the example code for better readability.

* fix: ensure initialValue in useLoader defaults to null

- Updated the `useLoader` composable to default the `initialValue` option to `null` if not provided, enhancing robustness and preventing potential undefined states during loading.
- This change improves the composable's usability by ensuring a consistent default behavior.

* feat!: 986 remove usetexture (#1008)

* feat!: remove useTexture composable and update documentation

BREAKING CHANGE: `useTexture` composable has been refactored and moved to `@tresjs/cientos` package

- Deleted the `useTexture` composable and its associated files as it has been refactored and moved to the `@tresjs/cientos` package.
- Updated documentation to reflect the changes, including a warning about the deprecation and a link to the new `cientos` documentation for `useTexture`.
- Adjusted examples in the cookbook to utilize the new `useTexture` from `@tresjs/cientos`, ensuring users are directed to the correct implementation.

* fix: clean up texture loading examples in documentation

- Removed unnecessary line breaks and improved formatting in the `load-textures.md` documentation.
- Streamlined the example code for `TresMeshStandardMaterial` to enhance readability and maintain consistency with coding standards.

* docs: update composables documentation to reflect removal of useTexture

- Removed deprecated `useTexture` section from the documentation, indicating its refactor to the `@tresjs/cientos` package.
- Added a warning about the deprecation and provided a link to the new `cientos` documentation for user guidance.
- Ensured that the remaining documentation is clear and concise, maintaining consistency with the latest changes in the codebase.

* refactor!: context camera is now a state (#1004)

* refactor!: context camera is now a state

BREAKING CHANGE: camera ctx property is now an object with the camera manager instead of the active camera

* fix: remove camera manual check

* chore: remove reset onUnmounted

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

* chore: remove unused comment

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

* chore: omit previous reordering of cameras

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

* refactor: update camera handling to use Three.js Camera type

- Replaced instances of TresCamera with Three.js Camera type across the codebase for better compatibility and consistency.
- Updated camera management logic in useCamera composable and related components to reflect the new type.
- Simplified currentCamera logic to use computed properties instead of watch.

* refactor: enhance orthographic camera setup and controls

- Updated the orthographic camera initialization to correctly calculate frustum dimensions based on the aspect ratio.
- Introduced zoom functionality for the orthographic camera.
- Simplified the useControls setup by removing unnecessary properties and focusing on essential controls.
- Adjusted the camera update logic to reflect the new control structure, ensuring proper projection matrix updates.

* chore(playground): streamline camera implementation with TresJS components

- Removed manual camera initialization in favor of using TresJS components for perspective and orthographic cameras.
- Updated the template to conditionally render the appropriate camera based on the selected camera type.
- Enhanced readability and maintainability by leveraging TresJS's built-in camera properties and methods.

* refactor(playground): remove unused camera imports in index.vue

- Eliminated unused imports for OrthographicCamera and PerspectiveCamera from Three.js to streamline the code.
- This change enhances code clarity and reduces unnecessary dependencies, aligning with the recent updates to utilize TresJS components for camera management.

* refactor(useCamera): improve camera management logic (#1009)

---------

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

* chore: update @tresjs/cientos dependency to version 14afe95 and adjust ESLint auto-imports

- Updated the @tresjs/cientos dependency in package.json and pnpm-lock.yaml to the latest version (14afe95).
- Added Slot and Slots to ESLint auto-imports for improved type support in Vue components.
- Removed the Textures.vue component as it is no longer needed in the project.
- Simplified the Text3D component by using useLoader for font loading and updated the template to reflect the new structure.
- Cleaned up the basic routes by removing the reference to the deleted Textures.vue component.

* chore: remove unused fontOptions

* chore: remove PbrSphere component and its references from NoCamera and multipleCameras pages

* refactor!: removal of performance state from useTresContextProvider (#1003)

* refactor!: removed useTresReady, added isReady to the renderer in the context

BREAKING CHANGE:

- useTresReady is no longer available, it has been replaced by isReady in the renderer in the context
- onTresReady is no longer available. renderer.isReady should be leveraged instead

* chore: removed playground files concerning useTresReady

* chore: removed ready pages from playground routes

* feature: made isReady dependency clearer by leveraging triggerRef

* ˆ

---------

Co-authored-by: Alvaro Saburido <alvaro.saburido@gmail.com>

* feat: introduce useTres composable and update related documentation (#1017)

* feat: introduce useTres composable and update related documentation

- Added the `useTres` composable to provide a simplified API for accessing the TresJS context, including methods for `invalidate` and `advance`.
- Updated various components and documentation to utilize the new `useTres` composable, enhancing code clarity and maintainability.
- Included a new documentation page for `useTres` detailing its usage and properties.

* fix: clean up TresCanvas template and update useFBO imports

- Removed unnecessary line breaks in the TresCanvas template for improved readability.
- Updated the import statement in useFBO.ts to remove unused useTresContext, streamlining the code and enhancing clarity.

* refactor: remove performance state from useTres composable

- Removed the `perf` property from the `useTres` composable, streamlining the context returned by `useTresContext`.
- Introduced a new `PerformanceState` interface in `setupDevtools.ts` to manage performance metrics, enhancing clarity and maintainability of performance-related data.

* feat: 1012 add context inspector devtools (#1013)

* feat: get the context object tree with max 4 leves deep

* feat: enhance context node creation and graph building

- Updated `createContextNode` to include an optional `parentKey` parameter for better context chaining.
- Modified `buildContextGraph` to utilize the new `parentKey` for constructing chained keys during recursion.
- Added handling for context nodes in the inspector state, allowing for dynamic traversal of context objects based on chained keys.
- Improved readability and maintainability of the context graph logic.

* fix: improve scene object handling in Tres Devtools

- Enhanced the logic for extracting UUIDs from scene node IDs to ensure proper handling of scene objects.
- Updated the inspector state editing to reflect the new UUID extraction method, improving reliability when editing scene objects.
- Set the `editable` property to false for certain inspector values to prevent unintended modifications.

* fix: lint issue with fonts

* feat: implement inspector handlers for Tres Devtools

- Added `inspectorHandlers.ts` to manage inspector tree and state updates, enhancing the interaction with the Tres context.
- Introduced functions for creating nodes in the inspector tree, building graphs for scene and context objects, and handling state edits.
- Updated `TresCanvas.vue` to ensure proper context handling when registering Tres Devtools.
- Refactored `plugin.ts` to utilize the new inspector handlers, improving code organization and maintainability.
- Created type definitions in `types.ts` for better clarity and type safety in inspector-related functionalities.

* refactor: remove uuid from TresContext and update UUID generation logic

- Removed the `uuid` property from the `TresContext` interface as it is no longer necessary.
- Updated the UUID generation in `buildContextGraph` to safely access the scene's UUID, ensuring compatibility with the new context structure.

* refactor: remove unused import from useTresContextProvider

- Removed the unused `MathUtils` import from `useTresContextProvider/index.ts` to clean up the code and improve maintainability.

* refactor: remove redundant error check in invalidate function of useRendererManager (#1023)

- Removed the error check for render mode in the `invalidate` function, as it is no longer necessary. This simplifies the logic and improves code clarity.

* chore: release v5.0.0-next.1

* feat!(events): new event system based on pmdrs/pointer-events

BREAKING CHANGE: Only first element intersected wil trigger the pointer event, no more need to stop propagation on occlusion

* feat: get the context object tree with max 4 leves deep

* feat: enhance context node creation and graph building

- Updated `createContextNode` to include an optional `parentKey` parameter for better context chaining.
- Modified `buildContextGraph` to utilize the new `parentKey` for constructing chained keys during recursion.
- Added handling for context nodes in the inspector state, allowing for dynamic traversal of context objects based on chained keys.
- Improved readability and maintainability of the context graph logic.

* fix: improve scene object handling in Tres Devtools

- Enhanced the logic for extracting UUIDs from scene node IDs to ensure proper handling of scene objects.
- Updated the inspector state editing to reflect the new UUID extraction method, improving reliability when editing scene objects.
- Set the `editable` property to false for certain inspector values to prevent unintended modifications.

* fix: lint issue with fonts

* feat: implement inspector handlers for Tres Devtools

- Added `inspectorHandlers.ts` to manage inspector tree and state updates, enhancing the interaction with the Tres context.
- Introduced functions for creating nodes in the inspector tree, building graphs for scene and context objects, and handling state edits.
- Updated `TresCanvas.vue` to ensure proper context handling when registering Tres Devtools.
- Refactored `plugin.ts` to utilize the new inspector handlers, improving code organization and maintainability.
- Created type definitions in `types.ts` for better clarity and type safety in inspector-related functionalities.

* feat!(events): new event system based on pmdrs/pointer-events

BREAKING CHANGE: Only first element intersected wil trigger the pointer event, no more need to stop propagation on occlusion

* refactor: update event handler parameter naming for clarity

- Renamed the parameter in the onPointerMove function from 'ev' to '_ev' to indicate that it is intentionally unused, improving code readability.
- Removed unused import 'TresObject' from useTresContextProvider to clean up the codebase.

* refactor: update type imports and event handling in TresCanvas

- Replaced the Camera type with TresCamera in TresCanvasProps for better type specificity.
- Cleaned up imports in TresCanvas.vue by removing unused imports.
- Updated event handling in useEventManager to use pointerEventsMap for onClick, with a TODO for future type improvements.
- Modified handlers in LocalState to accept both PointerEventType and string for enhanced flexibility.
- Adjusted deregistration method in doRemoveDeregister to use context.events for consistency.

* refactor: update useTres composable to replace raycaster with events

- Modified the `useTres` composable to return `events` instead of `raycaster`, aligning with the updated context structure.
- Removed the `uuid` property from the `TresContext` interface and cleaned up unused imports in `useTresContextProvider`, enhancing code maintainability.

* refactor: update useLoop composable to replace raycaster with events

- Modified the `useLoop` composable to utilize `events` instead of `raycaster`, aligning with the recent changes in the Tres context structure.
- This change enhances the integration with the updated event system, ensuring better context handling during the rendering loop.

* wip

* separated event utils

* beautified types

* type fixes

* moved update call

* added todos

* omitted potential memory leak and callback calls of gone objects

* refactor: fixed onRender naming

* restored playground example

* Updated the `offPointerMissed` assignment to create a separate listener for each object, preventing unintended shared calls.

* improved comment

* renamed eventManager in context

* removed obsolete code

* chore: update @tresjs/cientos dependency to version 5.0.0-next.0 in package.json and playground/vue/package.json

* chore(playground): streamline event handling and remove unused Box component

- Removed the `stopPropagation` control logic from event handlers in `index.vue` to simplify the code.
- Updated event logging messages for consistency in `index.vue` and `groups/index.vue`.
- Enhanced the `TresGroup` component in `groups/index.vue` to include a new `@pointermissed` event handler.
- Deleted the unused `Box.vue` and `index.vue` files from the propagation directory to clean up the codebase.

* went back to "events"

* removed pointermissed from nodeops

* fixed emits of canvas compoennt

* cleaned up types

* tiny readability improvement

* eslint fix

---------

Co-authored-by: alvarosabu <alvaro.saburido@gmail.com>

* feat: 982 refactor userenderer (#1022)

* refactor(TresCanvas): refactor prop types

* chore(playground): add controls to basic playground

* feat(playground): refactor useRenderer

* refactor(useRendererManager): remove unused watchEffect for render mode

* refactor(useRendererManager): replace watch with watchEffect to track instance.value

* refactor: making renderer instance a plain object (#1028)

* refactor: streamline renderer management and event handling

- Replaced the `instance` reference with `renderer` in `useRendererManager` for clarity and consistency.
- Updated event handling in `TresCanvas.vue` to utilize the new `onReady` method instead of `whenever`, improving readability.
- Cleaned up unused imports across multiple files, enhancing code maintainability.
- Adjusted inspector state handling to reflect the new renderer structure, ensuring accurate memory and rendering statistics.

* refactor: tiny performance improvement (maybe)

* refactor: tiny type improvement

* refactor: separate types for props and composable

- Updated references to `renderer.instance.value` to `renderer.instance` for consistency and clarity in `useLoop`, `TresCanvas`, and related components.
- Enhanced type definitions by introducing `RendererOptions` to encapsulate WebGL context options, improving type safety and maintainability.
- Cleaned up unused imports and adjusted prop types in `useTres` and `useTresContextProvider` for better alignment with the new renderer structure.
- This refactor aims to simplify the renderer management and improve overall code readability.

* fix(loop): update renderer reference in snapshot context

- Changed the renderer reference in the snapshot context from `context.renderer.instance` to `context.renderer` for consistency with recent refactors.
- This adjustment aligns with the updated renderer management structure, enhancing clarity and maintainability of the rendering loop.

---------

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

* feat: webgpu native support (#1029)

* chore: release v5.0.0-next.2

* feat: expose render mode (#1032)

* chore: release v5.0.0-next.3

* feat!: useLoop and useRenderLoop refactoring (#1035)

BREAKING CHANGE: onAfterRender has been renamed to onRender

* refactor: type improvements in createPriorityEventHook

* wip

* wip

* improved test

* added context to useCreateRenderLoop and tests

* fixed typing

* added clock

* wip

* refactor: remove deprecated loop implementation and update related composables

- Removed the old `useCreateRenderLoop` and its associated tests.
- Updated `useLoop` to utilize the new `useRenderLoop` for better event handling.
- Commented out `OrbitControls` in relevant Vue components for potential future use.
- Cleaned up unused code and comments in `useTresContextProvider`.

* added some todos

* refactor: removed redundant eventhook

* refactor: simplify renderer setup by removing loop parameter

* refactor: enhance useRenderLoop to accept notifyFrameRendered callback

* chore: removed obsolete comment

* chore: made TresCanvas use correct event hook

* refactor!: omitted frame in render manager return

* refactor: restored renderEventHook

* chore: added comments after meeting

* refactor: made render loop more generic in it's naming

* refactor: made useLoop use useTres context

* chore: added jsdoc description for useLoop

* refactor: rename LoopContext to RafLoopContext and update related references

* refactor: replaced setTimeout with useTimeout

* refactor: update useLoop tests to use useCreateRafLoop and adjust rendering logic

* test: enhance useLoop tests with fake timers and add new callback functionality

* chore: removed debug code

* fix: initialize frames based on renderMode to ensure correct rendering behavior

* refactor: fixed multiple playgrounds

* feat: added loop and beforeLoop events to canvas

* fix: fixed playground experience
rafactor: renamed replaceCycleFunction to replaceLoopFunction

* fix: fixed some more playgrounds

* fixed some more playgrounds

* refactor!: renamed onBeforeRender to onBeforeLoop and onRender to onLoop
fix: fixed playgrounds

* fixed test

* refactor: tiny code styling improvement

* refactor: omitted export of useCreateRafLoop

* linting fixes

* refactor: tiny improvement for fbo demo

* refactor: rename fboRef to groupRef for clarity in FBO demo

* refactor: renamed onBeforeLoop back to onBeforeRender and onLoop back to onRender

* restored usage of orbit controls

* more restoring of orbitcontrols usages

* refactor: updated loop handling by renaming onLoop to onRender in TakeOverRenderExperience.vue and adjusted related emit definitions in TresCanvas.vue

* removed obsolete comment

* chore(playground): fixed related playgrounds (#1039)

* refactor!: TresCanvas: changed type of event "render" to TresContext.

---------

Co-authored-by: Alvaro Saburido <alvaro.saburido@gmail.com>

* chore: release v5.0.0-next.4

* chore: update dependencies to latest versions (#1041)

- Updated `@types/three` from `^0.173.0` to `^0.177.0`.
- Updated `three` from `^0.173.0` to `^0.177.0`.
- Updated `vite-plugin-dts` from `4.5.0` to `4.5.4`.
- Updated `vue` from `3.5.13` to `3.5.17`.
- Updated related dependencies in `pnpm-lock.yaml` to reflect the changes in `package.json`.

* chore: release v5.0.0-next.5

* refactor: 1043 render function triggers too often (#1044)

* refactor!: moved function to replace render function to renderer manager

* removed test

* fixed test type stuff

* fix: take over render

* refactor: update attach demo to use useTresContext

* refactor: added render callback back to useLoop for less breaking changes

* removed deprecation message

* fix: update elapsed time retrieval in useCreateRafLoop to use the latest clock property (#1046)

* refactor: 983 refactor usetrescontextprovider to use createinjectionstate (#1042)

* refactor: updated TresCanvas and useTresContextProvider for improved context handling

* fixed comment grammar

* chore: add .claude to .gitignore

* chore: release v5.0.0-next.6

* feat: 1047 warn user if the canvas has no area (#1048)

* feat: add warning for non-existant canvas area in TresCanvas component

* Update src/components/TresCanvas.vue

Co-authored-by: Alvaro Saburido <alvaro.saburido@gmail.com>

---------

Co-authored-by: Alvaro Saburido <alvaro.saburido@gmail.com>

* chore: 1031 migrate docs to nuxt UI docs template (#1049)

* feat!: nuxt ui pro docs

* docs: update documentation and components for TresJS integration

- Updated package.json to rename the project to "tresjs-docs" and added dependencies for @tresjs/cientos and @tresjs/core.
- Enhanced nuxt.config.ts to include template compiler options from @tresjs/core.
- Introduced new components: HomeScene.vue and IntroScene.vue for showcasing 3D capabilities.
- Refactored AppHeader.vue and other components to align with the new branding and design.
- Updated main.css with new color palettes and styles for improved UI.
- Revised content in markdown files to reflect TresJS branding and features, enhancing the overall documentation experience.

* feat: implement navigation components and restructure documentation layout

- Added `AppSide.vue` for sidebar navigation, utilizing `useHeaderLinks` and `useNavigation` composables.
- Introduced `useNavigation.ts` for managing header and footer links.
- Created utility function `navPageFromPath` in `content.ts` for navigation structure.
- Updated `docs.vue` layout to incorporate the new `AppSide` component.
- Removed outdated `usage.md` file and added new API documentation structure.
- Enhanced navigation YAML files for better organization and icon representation.

* feat: enhance WebGPU support and update documentation

- Updated `main.css` to change the monospace font to 'JetBrains Mono'.
- Wrapped slot in `SceneWrapper.vue` with `ClientOnly` for better SSR handling.
- Added `HologramCube.vue` component for WebGPU rendering with dynamic glitch effects.
- Created `index.vue` to demonstrate the usage of `HologramCube` within a `TresCanvas`.
- Updated `docs.vue` layout for improved spacing and added a `UContainer` around the slot.
- Enhanced `[...slug].vue` to include custom UI properties for better styling.
- Introduced new navigation YAML files for API documentation structure.
- Added detailed documentation for the `TresCanvas` component and WebGPU capabilities.
- Removed outdated `tres-canvas.md` file to streamline documentation.

* docs: my first scene guide

- Created `Experience.vue` for the 3D scene, featuring a rotating donut using TresJS.
- Added `index.vue` to set up the main canvas component and include the experience.
- Developed comprehensive documentation in `3.your-first-scene.md` to guide users through creating their first 3D scene with TresJS, covering setup, camera configuration, visual helpers, and animation.

* chore: update documentation scripts and added missing navigation links

- Modified `package.json` to streamline documentation commands using pnpm filters.
- Updated `useNavigation.ts` to correct navigation paths for 'Essentials' and 'API' sections.
- Added new markdown files for 'Essentials' and 'Cookbook' sections, including metadata for better organization.
- Introduced a navigation YAML file for the 'Cookbook' section to improve documentation structure.

* chore: update documentation generation script in package.json

- Modified the `docs:generate` script to first run the build command before generating documentation, ensuring that the latest changes are reflected in the generated output.

* chore: update Netlify configuration and package.json for documentation build

- Changed the publish directory in `netlify.toml` to reflect the new output path.
- Updated the build command in `netlify.toml` to use `docs:generate` for generating documentation.
- Enhanced `package.json` to include development-specific exports and adjusted the `docs:prepare` script for better documentation preparation.

* chore: enhance package.json with postinstall script for automated build

- Added a `postinstall` script to `package.json` to automatically run the build command after installation, ensuring the latest build is always available.
- Maintained the existing `docs:prepare` script for documentation preparation.

* chore: update postinstall script for documentation preparation

- Modified the `postinstall` script in the root `package.json` to include `pnpm --filter='./docs' prepare`, ensuring that documentation is prepared automatically after the build process.
- Removed the `postinstall` script from the `docs/package.json` as it is now handled in the root package.

* chore: remove tsconfig extension for Nuxt Content/UI hydration issue

- Removed the extension of the TypeScript configuration from `tsconfig.json` that was previously addressing a hydration issue with Nuxt Content/UI. This change simplifies the configuration and resolves potential conflicts.

* chore: update dependencies in pnpm-lock.yaml and package.json

- Updated `@tresjs/core` to version `5.0.0-next.6` in `pnpm-lock.yaml` and `package.json`.
- Added `better-sqlite3` as a dependency in both `pnpm-lock.yaml` and `package.json`, ensuring compatibility with the latest packages.
- Adjusted various package versions in `pnpm-lock.yaml` to reflect the latest updates and maintain consistency across dependencies.

* chore: update Netlify configuration for documentation output path

- Changed the publish directory in `netlify.toml` from `docs/.output/public` to `docs/dist` to align with the new output structure.
- Updated the build command to ensure proper documentation generation.

* docs: add Tres Components documentation

- Created a new markdown file `tres-objects.md` detailing how TresJS maps Vue components to Three.js objects.
- Included examples of component usage, constructor arguments, and declarative properties for better understanding.
- Documented common patterns and property mappings to enhance user experience with TresJS.

* chore: add redirects for old VitePress URLs in Netlify configuration

- Implemented redirects in `netlify.toml` to map old VitePress documentation URLs to the new Nuxt structure, ensuring users are seamlessly directed to the updated content.
- Added multiple 301 redirects for key documentation pages to maintain accessibility and improve user experience.

* chore: migrate redirects from Netlify configuration to new _redirects file

- Removed old VitePress URL redirects from `netlify.toml` to streamline the configuration.
- Added a new `_redirects` file in the `docs/public` directory to maintain the same redirect functionality for the updated Nuxt structure.
- This change enhances organization and aligns with best practices for managing redirects in a dedicated file.

* docs: useLoop page and diagram components

- Introduced `DottedDiagram.vue` and `RenderLoop.vue` components to enhance the visual representation of diagrams.
- Updated `main.css` to include new CSS variables for dot patterns and background styles, ensuring better design consistency.
- Added new markdown files for composables documentation, detailing `useTres`, `useTresContext`, and `useLoop` functionalities.
- Included an SVG diagram for the render loop to visually support the documentation.
- Enhanced navigation structure for composables in the documentation.

* docs: correct Three.js capitalization in documentation

- Updated instances of "ThreeJS" to "Three.js" for consistency and accuracy across multiple markdown files.
- Ensured that the description and examples reflect the correct naming convention, enhancing clarity for users.

* docs: clarify animation system description in getting started guide

- Updated the description of the animation system to improve clarity, changing "The animation system works by:" to "The animation (system) consists of:". This enhances the understanding of the animation components for users.

* docs: fix lint

* docs: add type signature

* docs: enhance useLoop documentation with custom rendering details

- Added a new section on taking over the render loop using the `render` method from `useLoop`, allowing for custom rendering logic and post-processing effects.
- Included a detailed example demonstrating custom rendering with multiple passes using `EffectComposer` and `RenderPass`.
- Updated the warning section to clarify responsibilities when using custom rendering, ensuring users understand the implications of bypassing built-in render modes.

* docs: add ReadMore component and useTres documentation

- Introduced a new `ReadMore.vue` component for improved navigation and content engagement within the documentation.
- Expanded the `useTres` documentation with detailed usage examples, including a basic example, extending the catalogue, and manual rendering control.
- Clarified the differences between `useTres` and `useTresContext`, providing users with a better understanding of when to use each composable.

* docs: expand useTresContext documentation with detailed usage examples

- Added comprehensive documentation for the `useTresContext` composable, detailing its features and internal management systems, including camera management, renderer control, and event handling.
- Included practical usage examples demonstrating advanced camera management, renderer control, and event system integration.
- Clarified the differences between `useTresContext` and `useTres`, guiding users on when to utilize each composable for their specific needs.

* docs: add Primitives documentation for TresJS integration

- Introduced comprehensive documentation for the `<primitive />` component, detailing its usage for integrating Three.js objects directly within Vue applications.
- Included examples demonstrating basic usage, props, events, and performance considerations.
- Highlighted common use cases such as integrating third-party libraries, custom geometries, and particle systems, enhancing user understanding of the component's capabilities.

* docs: enhance `<primitive />` component documentation with new props and examples

- Updated the documentation for the `<primitive />` component to clarify the expected Three.js object type and its rendering behavior.
- Added new sections detailing the `dispose`, `attach`, `visible`, and event handlers props, including their types, defaults, and usage examples.
- Included practical examples demonstrating custom disposal functions, material and geometry attachments, and event handling to improve user understanding of the component's capabilities.

* docs: enhance useLoop documentation with success callback requirements and examples

- Updated the `useLoop` documentation to include the necessity of calling the `notifySuccess()` callback at the end of the render function for proper render loop functionality.
- Expanded the custom rendering examples to demonstrate conditional rendering, post-processing, and multi-pass rendering scenarios.
- Clarified the parameters of the `render` method, emphasizing the change from a context object to a single callback parameter.
- Added warnings and notes to guide users on responsibilities when taking over the render loop.

* docs: refine `<primitive />` component documentation for clarity

- Improved the wording in the documentation for the `<primitive />` component to enhance clarity and readability.
- Adjusted phrases to ensure consistency and better understanding, particularly regarding the rendering of Three.js objects and the use of slots for additional components.
- Made minor grammatical corrections to improve the overall flow of the documentation.

* docs: update index.md to reflect new features

- Revised the main title and feature descriptions to better highlight the benefits and functionalities of the documentation.
- Updated links to direct users to relevant resources, including the TresJS lab and Three.js website.
- Enhanced feature titles and descriptions to provide clearer insights into the capabilities of the framework, focusing on 3D scene building and developer experience.
- Removed outdated sections to streamline the content and improve overall readability.

* docs: update Tres docs metadata and site config
- Revised the `nuxt.config.ts` to reflect the new project title and description for TresJS documentation.
- Updated the `nuxt.schema.ts` to ensure consistency in required fields and default values.
- Enhanced the `app.config.ts` to align with the new branding and footer links for TresJS.
- Added new SVG assets for dark mode and updated favicon files to improve visual consistency across the documentation.
- Improved the navigation structure in `useNavigation.ts` to better reflect the updated content organization.
- Updated the `getting-started` and `api` documentation to enhance clarity and provide a better user experience.

* docs: add useGraph composable documentation and update navigation metadata

- Introduced new documentation for the `useGraph` composable, detailing its functionality for extracting and accessing named nodes, materials, and meshes from a Three.js object hierarchy.
- Included usage examples and best practices for working with loaded models and complex object hierarchies.
- Updated the navigation metadata to include a title template for better clarity in the TresJS documentation.

* docs: add examples for useLoader composable with GLTF and Texture loading

- Introduced new examples for the `useLoader` composable, demonstrating how to load GLTF models and textures in TresJS.
- Created `Experience.vue` components for both GLTF and texture loading, showcasing the integration of Three.js loaders with Vue's reactivity.
- Added documentation for the `useLoader` composable, detailing its functionality, usage, and best practices for loading 3D assets and textures.
- Enhanced the overall documentation structure to improve clarity and user experience.

* docs: fix lint

- Added trailing commas in various sections of `nuxt.config.ts`, `nuxt.schema.ts`, and `app.config.ts` for improved readability and consistency.
- Enhanced the structure of the `content` and `eslint` configurations in `nuxt.config.ts` to ensure proper formatting.
- Updated the `required` fields in `nuxt.schema.ts` to maintain uniformity across the schema definitions.
- Made minor adjustments in the `app.config.ts` to align with the updated branding and footer links.
- Improved overall documentation clarity by ensuring consistent formatting and structure across configuration files.

* docs: update API navigation links in index.md

- Revised navigation links in the API documentation to point to more specific routes, enhancing user accessibility to TresJS components and composables.
- Updated the links for "Components", "Composables", and "Advanced" sections to reflect the new structure, ensuring users can easily find relevant information.

* docs: scaling performance

* docs: added cookbook structure

- Removed trailing commas in `content.config.ts` and `nuxt.config.ts` for improved consistency.
- Added new `RecipesList.vue` component to display a list of recipes dynamically.
- Introduced `LocalOrbitControls.vue` and `index.vue` components for orbit controls examples using TresJS.
- Created new documentation for `OrbitControls` in the cookbook section, including usage examples and a thumbnail image.
- Enhanced the existing documentation structure for better clarity and user experience.

* docs: remove defautl essential guides and replace them with tresjs essentials

- Enhanced the `useNavigation.ts` file by removing trailing commas for improved consistency.
- Updated the footer links to ensure proper navigation and accessibility.
- Deleted outdated markdown files related to markdown syntax, code blocks, prose components, and images/embeds to streamline the documentation.
- Added new navigation metadata for the core architecture and key concepts sections to improve content organization and user experience.

* docs: add performance monitoring documentation and example component

- Introduced a new `index.vue` component for performance monitoring using `@tresjs/leches`, featuring an FPS graph for real-time performance insights.
- Added comprehensive documentation on Vue's reactivity system in the context of 3D rendering, detailing best practices for maintaining performance in high-frequency render loops.
- Included examples demonstrating the use of template refs and shallow reactivity to optimize performance in TresJS applications.

* docs: standardize formatting and improve consistency across configuration files

- Removed trailing commas in `nuxt.schema.ts`, `app.config.ts`, and various component files for improved readability.
- Ensured uniformity in the `required` fields and default values within the schema definitions.
- Updated component templates to use self-closing tags where applicable, enhancing code clarity.
- Added a new `GithubMagicLink.vue` component for improved GitHub link handling and display.
- Introduced `ProseA.vue` for enhanced content rendering, supporting both GitHub links and Nuxt links.
- Created documentation for the new `Custom Vue Renderer` to explain TresJS's integration with Vue 3's custom renderer API.

* docs: applied docs suggestions

* docs: standardize formatting and improve consistency across various files

- Added trailing commas in `content.config.ts`, `nuxt.config.ts`, and `nuxt.schema.ts` for improved readability and consistency.
- Ensured uniformity in the `required` fields and default values within the schema definitions.
- Updated component templates to use self-closing tags where applicable, enhancing code clarity.
- Made minor adjustments in various components to align with updated formatting standards.
- Improved overall documentation clarity by ensuring consistent formatting and structure across configuration files.

* feat: added quicklinks in navbar for home

* Update docs/content/4.cookbook/1.orbit-controls.md

Co-authored-by: colinscz <19342760+colinscz@users.noreply.github.com>

* refactor: enhance GitHubMagicLink component for improved URL handling

- Replaced reactive refs with computed properties for displayTitle, suffix, and icon to streamline the logic and improve performance.
- Utilized computedAsync from @vueuse/core for asynchronous title fetching, enhancing responsiveness.
- Updated the template to conditionally render the icon based on its availability, improving clarity and user experience.

* feat: replace LogoPro with TheLogo component in AppHeader

- Updated the AppHeader component to use the new TheLogo component for improved branding consistency.
- Introduced TheLogo component to encapsulate the logo rendering logic, enhancing modularity and maintainability.

* refactor: improve prop type definitions in ReadMore component

- Updated the ReadMore component to use TypeScript type annotations for props, enhancing type safety and clarity.
- Simplified the props definition by removing unnecessary default values and ensuring required fields are clearly defined.
- Adjusted the template to utilize self-closing tags for improved readability.

* refactor: update alt text and remove unused TemplateMenu component

- Changed the alt text for recipe thumbnails in RecipesList.vue for improved accessibility.
- Deleted the TemplateMenu.vue component as it was no longer in use, streamlining the codebase.

* refactor: enhance prop type definitions in ProseA component

- Updated the ProseA component to utilize TypeScript type annotations for props, improving type safety and clarity.
- Simplified the props definition by removing unnecessary default values and ensuring required fields are clearly defined.
- Adjusted the template to use self-closing tags for improved readability.

* refactor: navigation key symbol

* refactor: missing key file

* refactor: address comments

- Removed outdated command from package.json related to contributors.
- Improved clarity in various documentation files by correcting grammatical errors and enhancing descriptions.
- Standardized punctuation and formatting across multiple sections to ensure consistency.
- Updated descriptions to provide clearer context and improve readability for users.

* docs: Update docs/content/3.api/2.composables/3.use-loop.md

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

* docs: Update docs/content/2.essentials/2.concepts/1.declarative-vs-imperative.md

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

* refactor: enhance error handling and documentation in components

- Added null checks for recipe metadata in RecipesList.vue to prevent potential runtime errors.
- Improved material property access in Experience.vue by adding a conditional check to ensure the Material object exists before modifying its properties.
- Updated the useTres documentation to clarify its usage context within the TresCanvas component, enhancing user understanding.

* refactor: update navigationInjectionKey symbol for clarity

- Changed the navigationInjectionKey symbol to include a description ('navigation') for improved clarity and context in the codebase.

* refactor: standardize template syntax and improve readability

- Updated various Vue components to ensure consistent use of self-closing tags for improved readability.
- Added missing commas in object literals to maintain proper syntax.
- Enhanced the overall structure of the code by ensuring consistent formatting across multiple files.

* docs: clarify usage context for useTres composable

- Updated the documentation for the `useTres` composable to specify that it can only be used in child components of a `TresCanvas` component, enhancing clarity on its context and usage.

* refactor: streamline navigation links structure

- Removed unnecessary `active` properties from navigation links in the `useNavigation` composable to simplify the structure.
- Ensured consistent formatting by removing trailing commas and maintaining clean object definitions.
- Improved overall readability of the navigation links configuration.

* docs: improve clarity in documentation

- Corrected grammatical errors in the `declarative-vs-imperative.md` file by changing "Almost every time" to "almost every time" for consistency.
- Enhanced the description in the `tres-objects.md` file by rephrasing the example usage of the `PerspectiveCamera` component for better readability.

* fix: adjust AppHeader navigation visibility for responsive design

- Added a class to the `UNavigationMenu` component to ensure it is hidden on smaller screens and displayed on medium and larger screens, improving the responsive behavior of the header.

* refactor: clean up navigation composables and improve type safety

- Removed commented-out code in `AppSide.vue` to enhance code clarity.
- Introduced a `HeaderLink` interface in `useNavigation.ts` for better type safety and structure of header links.
- Streamlined header links definition by ensuring consistent formatting and removing unnecessary trailing commas.
- Updated the `_useNavigation` function to return only relevant properties, improving the overall readability and maintainability of the navigation logic.

* chore: turn off annoying stylistic rule from nuxt eslint

* docs: enhance documentation clarity and consistency

- Corrected grammatical errors in `index.md` for improved readability.
- Updated section titles in `performance.md` to better reflect content focus.
- Rephrased resource disposal guidance in `performance.md` for clarity.
- Removed outdated practical examples from `use-tres-context.md` to streamline documentation.

* refactor: simplify navigation injection in components (#1056)

- Removed type annotations from the `inject` function in `AppHeader.vue`, `AppSide.vue`, and `[...slug].vue` for cleaner code.
- Updated the `navigationInjectionKey` export in `content.ts` to include a more specific type definition, enhancing type safety.

* fix: correct syntax in component props and documentation

- Added a missing comma in the `ui` object of the `[...slug].vue` component to ensure proper syntax.
- Removed unnecessary blank lines in the `use-tres-context.md` and `primitives.md` documentation files for improved readability and consistency.

* feat: enhance GitHubMagicLink component to support wiki links

- Updated the `GitHubURLInfo` interface to include a new 'wiki' type and an optional 'page' property for wiki page names.
- Modified the `parseGitHubURL` function to handle wiki URLs, returning the appropriate type and page name.
- Enhanced the `displayTitle` and `suffix` computed properties to accommodate wiki links, providing better user experience.
- Improved styling in the component to ensure dark mode compatibility.

* docs: update useTres documentation to include invalidate function

- Added a note about the `invalidate()` function in the usage example to clarify its role in triggering a re-render in on-demand mode, enhancing the understanding of the composable's functionality.

* update docs/content/3.api/2.composables/3.use-loop.md

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

* docs docs/content/3.api/2.composables/5.use-loader.md

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

* refactor: remove unused navigation logic from useNavigation composable

- Eliminated the `_useNavigation` function and its associated logic from `useNavigation.ts` to streamline the codebase.
- This change enhances maintainability by focusing on the relevant properties returned by the `useHeaderLinks` function, improving overall clarity and reducing complexity.

---------

Co-authored-by: colinscz <19342760+colinscz@users.noreply.github.com>
Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

* feat: enhance Nuxt configuration and AppHeader to include package version

- Implemented a function to locate the monorepo root package.json, enabling dynamic retrieval of the package version.
- Updated `nuxt.config.ts` to include the package version in the runtime configuration.
- Modified `AppHeader.vue` to display the current package version using a new `UBadge` component, improving user awareness of the application version.

* chore: og docs (#1057)

* chore: remove nuxt-og-image dependency and update SEO metadata

- Deleted the `nuxt-og-image` dependency from `package.json` and `nuxt.config.ts` to streamline the project.
- Updated SEO metadata in `app.vue` and `index.vue` to include custom Open Graph and Twitter card properties, enhancing social media sharing capabilities.
- Removed the `OgImageDocs.vue` component as it was no longer needed, simplifying the codebase.
- Added a new `og-image.png` for improved visual representation in social media links.

* fix: remove unnecessary blank line in [...slug].vue for improved code clarity

* revert(docs): revert active navigation change (#1058)

* fix: enhance header link activation state in useNavigation composable

- Updated the `_useHeaderLinks` function to include an `active` property for each header link, utilizing the current route path to determine the active state.
- Removed unnecessary blank lines for cleaner code structure.

* refactor: lint

- Removed trailing commas from the header link definitions in the `_useHeaderLinks` function for improved consistency and readability.
- Ensured that the `active` property for each header link is correctly formatted, enhancing the overall clarity of the navigation logic.

* chore: 1059 fix typecheck errors in docs (#1060)

* refactor: fixed type errors in app.config.ts

* refactor: improve type safety and null handling in useGraph and related components

* refactor: enhance type safety and null handling in Experience and graph utilities

* refactor: enhance type safety in HologramCube component

* chore: added typecheck to ci job

* refactor: move type check for Mesh to a separate function in HologramCube component for improved clarity

* fix: smaller lint fixes

* docs: fixed javascript highlighting

* chore: 1061 fix eslint errors in docs (#1063)

* chore: applied lint fixes

* chore: add docs linting command to package.json and CI workflow

* chore: added eol

* chore: added tres lint config and applied lint fixes

* chore: removed duplicate dependency

* chore: restored withNuxt in eslint config

* chore: cleaned up ESLint configuration and remove unused dependencies

* chore: removed lint module

* docs: add pointer events examples and documentation (#1066)

- Introduced two new Vue components for demonstrating pointer events: `index.vue` and `propagation.vue`, showcasing click, pointer enter, and pointer leave interactions with TresJS.
- Added a new navigation entry for "Event handling" and created a detailed documentation page on pointer events, explaining their usage and available events in TresJS.
- Updated the existing `groups/index.vue` to handle pointer missed events, enhancing interactivity in the playground.
- Included performance considerations and best practices for using pointer events effectively in 3D applications.

* docs: migration guide (#1064)

* fix: enhance header link activation state in useNavigation composable

- Updated the `_useHeaderLinks` function to include an `active` property for each header link, utilizing the current route path to determine the active state.
- Removed unnecessary blank lines for cleaner code structure.

* refactor: lint

- Removed trailing commas from the header link definitions in the `_useHeaderLinks` function for improved consistency and readability.
- Ensured that the `active` property for each header link is correctly formatted, enhancing the overall clarity of the navigation logic.

* fix: default github magic link to normal link when criteria is not met

* docs: upgrade guide

* chore: update ESLint configuration to ignore markdown files

- Added an `ignores` entry to both `eslint.config.js` and `docs/eslint.config.mjs` to exclude markdown files from linting, improving the focus on relevant code files.
- Ensured consistent handling of file types across configurations.

* docs: typo on warning

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* docs: improve what changed part on useLoader, reasons vs features

* docs: update upgrade guide for pointer events changes

- Clarified that pointer events now follow native DOM event names, replacing dash-case with camelCase (e.g., '@pointer-down' to '@pointerdown').
- Added migration steps to assist users in adapting to the new event naming convention.
- Emphasized consistency with web standards and the pmndrs ecosystem.

* docs: clarify migration steps in upgrade guide

- Updated the language in the migration steps to specify that for most use cases, changing `useTresContext` to `useTres` is likely sufficient.
- Aimed to enhance clarity and user understanding of the migration process.

* docs: update upgrade guide with breaking changes and new composable usage

- Removed deprecated composables: `useTresReady`, `useSeek`, `useTresEventManager`, `useRaycaster`, `useRenderLoop`, and `useLogger`.
- Added detailed migration steps for replacing `useRenderLoop` with `useLoop`, including usage examples and warnings about component hierarchy.
- Enhanced clarity on the architectural improvements in TresJS v5, focusing on a simplified API surface.

* docs: update upgrade guide with TresCanvas props reactivity changes

- Added a section detailing the reactivity changes for several TresCanvas props, marking them as `@readonly` to improve WebGL context initialization.
- Included migration steps for setting context initialization props as static values and updating dynamic renderer options.
- Emphasized the architectural improvements in TresJS v5 and the rationale behind these changes.

* docs: ignore markdown files for linting due incorrect linting of code snippets

* docs: grammar

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

* docs: update docs/content/1.getting-started/4.upgrade-guide.md

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

* 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.

* feat: make some of the utility methods available to users (#1068)

* refactor: reorganize HTML tag handling and utility functions

- Moved the `HTML_TAGS` constant and `isHTMLTag` function from `src/utils/index.ts` to `src/utils/is.ts` for better modularity.
- Removed the `makeMap` function from `index.ts` and imported it in `is.ts`, enhancing code clarity and separation of concerns.
- Cleaned up unused code in `index.ts` to streamline the utility functions.

* fix: fixed import

* refactor: made use of radashis type guards and removed unused ones.

* refactor: structured type guards and made them smaller and more readable

* refactor: remove unused type guard tests and consolidate exports in utility files

* refactor: Refactor utility functions and improve equality checks in node operations, removed unused methods

* refactor: removed more unused code; added string util

* refactor: moved noop

* refactor: moved pixelRatio stuff

* refactor: replaced shuffle

* refactor: separated getObjectByUuid

* refactor: removed unused highlight material methods, moved used one

* chore: removed unused dependency

* refactor: moved filterInPlace

* moved extractBindingPosition

* refactor: moved hasMap

* chore: removed comment

* Add exports for three and tres utility modules

Export utility functions from utils/is/three and utils/is/tres to make them available for external use.

* fix: added null check

* chore: made use of isMesh in docs

* made use of type guards

* chore: beautified code a bit

* docs: added type guard docs

---------

Co-authored-by: alvarosabu <alvaro.saburido@gmail.com>

* docs: add quick start guide for TresJS installation (#1070)

- Introduced a new "Quick Start" section in the installation documentation, detailing the recommended approach using the interactive CLI wizard.
- Included commands for creating a new TresJS project with npm, yarn, and pnpm, along with an overview of the wizard's features such as template selection, ecosystem packages, TypeScript support, and ESLint integration.
- Emphasized the benefits of using the CLI for new projects, ensuring users have a streamlined setup experience.

* fix: avoid pierced props to setScalar when numerical (#1073)

* fix: avoid pierced props to setScalar when numerical

- Fixed `nodeOps` to directly assign pierced props with number values, ensuring proper handling of vector properties and added tests for verifying the integrity of node operations.
- Improved test coverage for `patchProp` to ensure that properties remain unchanged when not explicitly modified.

* refactor: clean up comments in nodeOps

- Removed redundant comments in `nodeOps` regarding the handling of pierced props with number values, streamlining the code for better readability while maintaining functionality.

* docs: update upgrade guide for useTexture composable changes (#1074)

- Modified the usage section to reflect that the `useTexture` composable now returns a reactive state along with a loading state, enhancing clarity for users.
- Updated the import statement to align with the new structure of the TresJS core library.

* chore: release v5.0.0-alpha.0

* fix: removed development exports from package.json (#1079)

* chore: release v5.0.0-alpha.1

* feat: devtools communication strategy (#1067)

* feat: integrate Tres DevTools messaging system

- Added a new `DevtoolsMessenger` class for handling communication with Tres DevTools, allowing for asset loading events and performance metrics to be sent to the devtools.
- Updated the `useLoader` composable to send asset loading progress and completion messages to the devtools.
- Implemented a subscription mechanism in the `gltf-loader` component to log asset load messages from the devtools.
- Enhanced the `setupTresDevtools` function to initialize the devtools messenger if it doesn't already exist on the window object, ensuring seamless integration with the Tres ecosystem.

* refactor: remove unused onMounted subscription in gltf-loader component playground

* fix: enhance asset loading progress reporting in useLoader composable

- Updated the `useLoader` function to improve the reporting of asset loading progress to Tres DevTools.
- Consolidated progress calculation and messaging logic, ensuring accurate tracking of loading status.
- Removed redundant progress event handling code for cleaner implementation.

* fix: simplify DevtoolsMessenger type reference in env.d.ts

- Updated the type reference for `__TRES__DEVTOOLS__` in the Window interface to directly use `DevtoolsMessenger`, improving clarity and reducing import complexity.

* chore: remove development type exports from package.json

- Eliminated the development type exports for `types`, `import`, and `default` in the package.json file, streamlining the export structure and focusing on the production-ready output.

* feat: add devtools export for enhanced integration

- Introduced export for `DevtoolsMessenger` in the devtools module, allowing for improved communication with Tres DevTools.
- Updated the main index file to include the new devtools export, streamlining the overall export structure.

* feat: enhance DevtoolsMessenger with message queuing and flushing

- Implemented message queuing in the `DevtoolsMessenger` class to handle scenarios where no subscribers are available, preventing message loss.
- Added a `flushQueue` method to deliver queued messages to new subscribers immediately upon subscription.
- Introduced a maximum queue size to prevent memory leaks, ensuring only the most recent messages are retained.
- Updated the `useLoader` composable to improve asset loading progress reporting, consolidating progress calculation and messaging logic for better clarity and accuracy.
- Added unit tests for `DevtoolsMessenger` to verify queuing behavior and message delivery.

* feat: refine message queuing in DevtoolsMessenger

- Updated the `DevtoolsMessenger` to queue only specific message types ('asset-load') when no subscribers are available, preventing unnecessary message accumulation.
- Enhanced unit tests to verify that non-queueable messages ('performance' and 'context') are not queued when no subscribers exist.
- Improved documentation within the code to clarify the queuing behavior and message handling logic.

* feat: enhance useLoader composable with total size tracking

- Added a `totalSize` variable to track the total size of assets being loaded, improving the accuracy of asset loading progress reporting.
- Updated the progress reporting logic to utilize the tracked `totalSize` instead of the previous method, ensuring more reliable completion event data.
- Enhanced inline comments for better understanding of the changes made to the loading progress logic.

* fix: update size reporting in useLoader composable

- Changed the `sizeKB` property to `size` in the `useLoader` composable to directly reflect the total size of the loaded asset, improving clarity in asset loading data.
- This adjustment enhances the accuracy of the asset loading progress reporting by providing the actual size instead of a converted value.

* feat: enhance asset load messaging in useLoader and DevtoolsMessenger

- Introduced a new `AssetLoadData` interface in `DevtoolsMessenger` to standardize asset loading messages sent to Tres DevTools.
- Updated the `useLoader` composable to send the actual loader constructor and improved the asset load message structure, enhancing clarity and consistency in reporting.
- Refined the `setupTresDevtools` function to utilize type annotations for context and performance messages, ensuring type safety and better integration with the devtools system.

* refactor: remove unused imports from setupDevtools.ts

* refactor: removed useLoader devtools communication since will be performed in a different way

* fix: add TODO comment for future implementation in AssetLoadData interface

* chore: update deps

* chore: release v5.0.0-alpha.2

* fix: docs ssg 404 issues (#1081)

* fix: update build publish path and command in netlify.toml

* fix: update publish path and command in netlify.toml

* fix: update publish path and command in netlify.toml

* fix: update build command and publish path in netlify.toml

* fix: update redirect path in netlify.toml to target docs directory

* fix: update redirect path in netlify.toml to handle all routes

* fix: refine error handling for missing page in [...slug].vue

* fix: remove 404 error handling for missing page in [...slug].vue

* fix: add error handling for missing page in [...slug].vue

* fix: add strict routing options in nuxt.config.ts and reorganize netlify.toml

* fix: add TypeScript error suppression for glitchStrength variable in HologramCube.vue

* feat: model and animation recipe (#1082)

* feat: add model animation examples and documentation

* fix: remove unused watch on animations and update thumbnail path in model animation documentation

* fix: add type annotation for TresObject in HologramCube component

* docs: add Tweakpane integration for interactive 3D controls

* chore: tweakpane recipe (#1086)

* docs: add Tweakpane integration for interactive 3D controls

* chore: update Tweakpane installation instructions and add core dependency

- Enhanced documentation for Tweakpane integration by providing installation commands for npm, yarn, and pnpm.
- Added a note for TypeScript users to install the @tweakpane/core package as a development dependency.
- Included a new image asset for Tweakpane in the recipes directory.

* refactor: simplify reset logic in TweakpaneDemo component

- Replaced individual property assignments with Object.assign for resetting control values, improving code readability and maintainability.
- This change enhances the clarity of the reset functionality while adhering to best practices for object manipulation in JavaScript.

* chore: add @tweakpane/core as a dev dependency

- Updated pnpm-lock.yaml and docs/package.json to include @tweakpane/core version 2.0.5 as a development dependency, ensuring proper integration for Tweakpane features in the project.

* docs: remove unused home-scene component from index.md, for now

* docs: update index.md with Tres v5 announcement and navigation link

- Added a navigation link to the "Getting Started" section for improved user experience.
- Included a badge for the Tres v5 announcement to highlight the new version.
- Enhanced the overall structure of the documentation for better clarity and accessibility.

* chore: cookbook animations (#1085)

* docs: basic animations recipe

* docs: add advanced GSAP animations examples and documentation

* docs: update lighting components and correct snippets

* fix: add type annotations for positions array in GSAP examples

* docs: correct arrow function syntax and add missing commas in GSAP examples

* doc: frame-rate typo

Co-authored-by: Colin S. <19342760+colinscz@users.noreply.github.com>

* docs: cookbook animations typo

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Colin S. <19342760+colinscz@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* docs: update community section and links

- Updated Discord link in the app configuration to the new invite.
- Changed version display in AppHeader to 'v5'.
- Added new community navigation section with links to Discord and resources.
- Updated description in the Awesome Resources page for clarity.

* docs: update version display in AppHeader to reflect dynamic versioning

- Changed the hardcoded version 'v5' to dynamically display the version from the runtime configuration, enhancing maintainability and accuracy of version representation.

* chore: update dependencies and package versions

- Upgraded pnpm from version 10.6.3 to 10.17.0 for improved package management.
- Updated @types/three from version 0.179.0 to 0.180.0 to ensure compatibility with the latest Three.js features.
- Upgraded jsdom from version 26.1.0 to 27.0.0 for enhanced testing capabilities.
- Updated three from version 0.179.1 to 0.180.0 to leverage the latest improvements and bug fixes.
- Upgraded vite from version 7.1.4 to 7.1.6 for better performance and stability.
- Adjusted pnpm-lock.yaml to reflect the updated package versions and dependencies.

* chore: release v5.0.0-rc.0

* fix: update time references in HologramCube component

- Replaced `timerGlobal()` with `time` for consistency and improved performance in the vertex shader calculations.
- Adjusted the calculation of `stripes` to use `time` instead of `timerGlobal(0.02)` for better synchronization with the animation loop.
- These changes enhance the rendering efficiency and maintainability of the HologramCube component.

---------

Co-authored-by: Damien Montastier <montastier.damien@gmail.com>
Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
Co-authored-by: colinscz <19342760+colinscz@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

.github/workflows/lint.yml → .github/workflows/ci.yml

@@ -1,14 +1,24 @@
-name: Run linters
-on: [push]
+name: CI
+on:
+  push:
+    branches:
+      - main
+      - next
+
+  pull_request:
+    branches:
+      - main
+      - next
+
+  merge_group: {}
 
 env:
   PNPM_CACHE_FOLDER: .pnpm-store
   HUSKY: 0 # Bypass husky commit hook for CI
 
 jobs:
-  lint:
-    name: Lint
-    runs-on: ubuntu-24.04
+  ci:
+    runs-on: ubuntu-latest
     strategy:
       matrix:
         node-version: [20]
@@ -24,5 +34,13 @@ jobs:
           cache: pnpm
       - name: Install dependencies
         run: pnpm install
-      - name: Run Lint
+      - name: Typecheck
+        run: pnpm run typecheck
+      - name: Lint
         run: pnpm run lint
+      - name: Unit tests
+        run: pnpm run test
+      - name: Docs lint
+        run: pnpm run docs:lint
+      - name: Docs typecheck
+        run: pnpm run docs:typecheck

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

@@ -1,10 +1,10 @@
 name: Publish Any Commit
 on:
   push:
-    branches:
-      - '**'
     tags:
       - '!**'
+    branches:
+      - '**'
 
 env:
   PNPM_CACHE_FOLDER: .pnpm-store

.github/workflows/test.yml

@@ -1,28 +0,0 @@
-name: Run Tests
-on: [push]
-
-env:
-  PNPM_CACHE_FOLDER: .pnpm-store
-  HUSKY: 0 # Bypass husky commit hook for CI
-
-jobs:
-  test:
-    name: Unit Test
-    runs-on: ubuntu-24.04
-    strategy:
-      matrix:
-        node-version: [20]
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: pnpm
-      - name: Install dependencies
-        run: pnpm install
-      - name: Run Unit Tests
-        run: pnpm run test

.gitignore

@@ -28,3 +28,4 @@ docs/.vitepress/cache/
 
 .env
 .env.local
+.claude

CHANGELOG.md

@@ -1,5 +1,879 @@
 # Changelog
 
+## [5.0.0-rc.0](https://github.com/Tresjs/tres/compare/5.0.0-alpha.2...5.0.0-rc.0) (2025-09-20)
+
+### Features
+
+* model and animation recipe ([#1082](https://github.com/Tresjs/tres/issues/1082)) ([078d7bc](https://github.com/Tresjs/tres/commit/078d7bce3c4d6496a78e80e6ec5302a208ef8931))
+
+### Bug Fixes
+
+* docs ssg 404 issues ([#1081](https://github.com/Tresjs/tres/issues/1081)) ([9e1fc89](https://github.com/Tresjs/tres/commit/9e1fc89d79ea995a005bb3fd09797c2c0391ce78))
+
+## [5.0.0-alpha.2](https://github.com/Tresjs/tres/compare/5.0.0-alpha.1...5.0.0-alpha.2) (2025-09-03)
+
+### Features
+
+* devtools communication strategy ([#1067](https://github.com/Tresjs/tres/issues/1067)) ([d8752bb](https://github.com/Tresjs/tres/commit/d8752bbdb330ea7c8d641164aab787abbb425ccb))
+
+## [5.0.0-alpha.1](https://github.com/Tresjs/tres/compare/5.0.0-alpha.0...5.0.0-alpha.1) (2025-08-30)
+
+### Bug Fixes
+
+* removed development exports from package.json ([#1079](https://github.com/Tresjs/tres/issues/1079)) ([1baca35](https://github.com/Tresjs/tres/commit/1baca351698d21240e47275d328a4a757b9edfd2))
+
+## [5.0.0-alpha.0](https://github.com/Tresjs/tres/compare/5.0.0-next.6...5.0.0-alpha.0) (2025-08-21)
+
+### Features
+
+* 1047 warn user if the canvas has no area ([#1048](https://github.com/Tresjs/tres/issues/1048)) ([4c06603](https://github.com/Tresjs/tres/commit/4c06603eef16d06ec045936d33b820d209c99eb0))
+* enhance Nuxt configuration and AppHeader to include package version ([7a8b53f](https://github.com/Tresjs/tres/commit/7a8b53f9e22b36cdd07b3499c845e61e737556a4))
+* make some of the utility methods available to users ([#1068](https://github.com/Tresjs/tres/issues/1068)) ([a225230](https://github.com/Tresjs/tres/commit/a225230cd61c87eeed30b1d86261b97649bfd2ae))
+
+### Bug Fixes
+
+* avoid pierced props to setScalar when numerical ([#1073](https://github.com/Tresjs/tres/issues/1073)) ([4e7ba85](https://github.com/Tresjs/tres/commit/4e7ba85d28b8aefa4a37cd336bfedd841c981e91))
+
+### Reverts
+
+* **docs:** revert active navigation change ([#1058](https://github.com/Tresjs/tres/issues/1058)) ([dd13115](https://github.com/Tresjs/tres/commit/dd13115bf2b13ce6e3b9ffad28d5c6056afdc2b6))
+
+## [5.0.0-next.6](https://github.com/Tresjs/tres/compare/5.0.0-next.5...5.0.0-next.6) (2025-06-22)
+
+### Bug Fixes
+
+* update elapsed time retrieval in useCreateRafLoop to use the latest clock property ([#1046](https://github.com/Tresjs/tres/issues/1046)) ([1b3971c](https://github.com/Tresjs/tres/commit/1b3971c27c56964c8cbc3f0528e1362a648c8b41))
+
+## [5.0.0-next.5](https://github.com/Tresjs/tres/compare/5.0.0-next.4...5.0.0-next.5) (2025-06-20)
+
+## [5.0.0-next.4](https://github.com/Tresjs/tres/compare/5.0.0-next.3...5.0.0-next.4) (2025-06-20)
+
+### ⚠ BREAKING CHANGES
+
+* onAfterRender has been renamed to onRender
+
+* refactor: type improvements in createPriorityEventHook
+
+* wip
+
+* wip
+
+* improved test
+
+* added context to useCreateRenderLoop and tests
+
+* fixed typing
+
+* added clock
+
+* wip
+
+* refactor: remove deprecated loop implementation and update related composables
+
+- Removed the old `useCreateRenderLoop` and its associated tests.
+- Updated `useLoop` to utilize the new `useRenderLoop` for better event handling.
+- Commented out `OrbitControls` in relevant Vue components for potential future use.
+- Cleaned up unused code and comments in `useTresContextProvider`.
+
+* added some todos
+
+* refactor: removed redundant eventhook
+
+* refactor: simplify renderer setup by removing loop parameter
+
+* refactor: enhance useRenderLoop to accept notifyFrameRendered callback
+
+* chore: removed obsolete comment
+
+* chore: made TresCanvas use correct event hook
+
+* refactor!: omitted frame in render manager return
+
+* refactor: restored renderEventHook
+
+* chore: added comments after meeting
+
+* refactor: made render loop more generic in it's naming
+
+* refactor: made useLoop use useTres context
+
+* chore: added jsdoc description for useLoop
+
+* refactor: rename LoopContext to RafLoopContext and update related references
+
+* refactor: replaced setTimeout with useTimeout
+
+* refactor: update useLoop tests to use useCreateRafLoop and adjust rendering logic
+
+* test: enhance useLoop tests with fake timers and add new callback functionality
+
+* chore: removed debug code
+
+* fix: initialize frames based on renderMode to ensure correct rendering behavior
+
+* refactor: fixed multiple playgrounds
+
+* feat: added loop and beforeLoop events to canvas
+
+* fix: fixed playground experience
+rafactor: renamed replaceCycleFunction to replaceLoopFunction
+
+* fix: fixed some more playgrounds
+
+* fixed some more playgrounds
+
+* refactor!: renamed onBeforeRender to onBeforeLoop and onRender to onLoop
+fix: fixed playgrounds
+
+* fixed test
+
+* refactor: tiny code styling improvement
+
+* refactor: omitted export of useCreateRafLoop
+
+* linting fixes
+
+* refactor: tiny improvement for fbo demo
+
+* refactor: rename fboRef to groupRef for clarity in FBO demo
+
+* refactor: renamed onBeforeLoop back to onBeforeRender and onLoop back to onRender
+
+* restored usage of orbit controls
+
+* more restoring of orbitcontrols usages
+
+* refactor: updated loop handling by renaming onLoop to onRender in TakeOverRenderExperience.vue and adjusted related emit definitions in TresCanvas.vue
+
+* removed obsolete comment
+
+### Features
+
+* useLoop and useRenderLoop refactoring ([#1035](https://github.com/Tresjs/tres/issues/1035)) ([db65f3f](https://github.com/Tresjs/tres/commit/db65f3f1ea723048d6851ed52a445d80a0d26f09)), closes [#1039](https://github.com/Tresjs/tres/issues/1039)
+
+## [5.0.0-next.3](https://github.com/Tresjs/tres/compare/5.0.0-next.2...5.0.0-next.3) (2025-06-15)
+
+### Features
+
+* expose render mode ([#1032](https://github.com/Tresjs/tres/issues/1032)) ([b5b9456](https://github.com/Tresjs/tres/commit/b5b94560fddcdcb65f3dec6692143867ed58914e))
+
+## [5.0.0-next.2](https://github.com/Tresjs/tres/compare/5.0.0-next.1...5.0.0-next.2) (2025-06-15)
+
+### ⚠ BREAKING CHANGES
+
+* Only first element intersected wil trigger the pointer event, no more need to stop propagation on occlusion
+
+* feat: get the context object tree with max 4 leves deep
+
+* feat: enhance context node creation and graph building
+
+- Updated `createContextNode` to include an optional `parentKey` parameter for better context chaining.
+- Modified `buildContextGraph` to utilize the new `parentKey` for constructing chained keys during recursion.
+- Added handling for context nodes in the inspector state, allowing for dynamic traversal of context objects based on chained keys.
+- Improved readability and maintainability of the context graph logic.
+
+* fix: improve scene object handling in Tres Devtools
+
+- Enhanced the logic for extracting UUIDs from scene node IDs to ensure proper handling of scene objects.
+- Updated the inspector state editing to reflect the new UUID extraction method, improving reliability when editing scene objects.
+- Set the `editable` property to false for certain inspector values to prevent unintended modifications.
+
+* fix: lint issue with fonts
+
+* feat: implement inspector handlers for Tres Devtools
+
+- Added `inspectorHandlers.ts` to manage inspector tree and state updates, enhancing the interaction with the Tres context.
+- Introduced functions for creating nodes in the inspector tree, building graphs for scene and context objects, and handling state edits.
+- Updated `TresCanvas.vue` to ensure proper context handling when registering Tres Devtools.
+- Refactored `plugin.ts` to utilize the new inspector handlers, improving code organization and maintainability.
+- Created type definitions in `types.ts` for better clarity and type safety in inspector-related functionalities.
+
+* feat!(events): new event system based on pmdrs/pointer-events
+* Only first element intersected wil trigger the pointer event, no more need to stop propagation on occlusion
+
+* refactor: update event handler parameter naming for clarity
+
+- Renamed the parameter in the onPointerMove function from 'ev' to '_ev' to indicate that it is intentionally unused, improving code readability.
+- Removed unused import 'TresObject' from useTresContextProvider to clean up the codebase.
+
+* refactor: update type imports and event handling in TresCanvas
+
+- Replaced the Camera type with TresCamera in TresCanvasProps for better type specificity.
+- Cleaned up imports in TresCanvas.vue by removing unused imports.
+- Updated event handling in useEventManager to use pointerEventsMap for onClick, with a TODO for future type improvements.
+- Modified handlers in LocalState to accept both PointerEventType and string for enhanced flexibility.
+- Adjusted deregistration method in doRemoveDeregister to use context.events for consistency.
+
+* refactor: update useTres composable to replace raycaster with events
+
+- Modified the `useTres` composable to return `events` instead of `raycaster`, aligning with the updated context structure.
+- Removed the `uuid` property from the `TresContext` interface and cleaned up unused imports in `useTresContextProvider`, enhancing code maintainability.
+
+* refactor: update useLoop composable to replace raycaster with events
+
+- Modified the `useLoop` composable to utilize `events` instead of `raycaster`, aligning with the recent changes in the Tres context structure.
+- This change enhances the integration with the updated event system, ensuring better context handling during the rendering loop.
+
+* wip
+
+* separated event utils
+
+* beautified types
+
+* type fixes
+
+* moved update call
+
+* added todos
+
+* omitted potential memory leak and callback calls of gone objects
+
+* refactor: fixed onRender naming
+
+* restored playground example
+
+* Updated the `offPointerMissed` assignment to create a separate listener for each object, preventing unintended shared calls.
+
+* improved comment
+
+* renamed eventManager in context
+
+* removed obsolete code
+
+* chore: update @tresjs/cientos dependency to version 5.0.0-next.0 in package.json and playground/vue/package.json
+
+* chore(playground): streamline event handling and remove unused Box component
+
+- Removed the `stopPropagation` control logic from event handlers in `index.vue` to simplify the code.
+- Updated event logging messages for consistency in `index.vue` and `groups/index.vue`.
+- Enhanced the `TresGroup` component in `groups/index.vue` to include a new `@pointermissed` event handler.
+- Deleted the unused `Box.vue` and `index.vue` files from the propagation directory to clean up the codebase.
+
+* went back to "events"
+
+* removed pointermissed from nodeops
+
+* fixed emits of canvas compoennt
+
+* cleaned up types
+
+* tiny readability improvement
+
+* eslint fix
+
+* feat!(events): new event system based on pmdrs/pointer-events ([f201378](https://github.com/Tresjs/tres/commit/f2013783ea528b0a230b03ec3334640ad3dd0227))
+
+### Features
+
+* 982 refactor userenderer ([#1022](https://github.com/Tresjs/tres/issues/1022)) ([cc8b752](https://github.com/Tresjs/tres/commit/cc8b752b717ca20f3da58b1a1890c5da2473f1cf)), closes [#1028](https://github.com/Tresjs/tres/issues/1028)
+* webgpu native support ([#1029](https://github.com/Tresjs/tres/issues/1029)) ([6f3d41d](https://github.com/Tresjs/tres/commit/6f3d41d1c73cb3113cd22321d9672a2907080652))
+## [5.0.0-next.1](https://github.com/Tresjs/tres/compare/5.0.0-next.1...5.0.0-next.2) (2025-06-06)
+
+### ⚠ BREAKING CHANGES
+
+* - useTresReady is no longer available, it has been replaced by isReady in the renderer in the context
+- onTresReady is no longer available. renderer.isReady should be leveraged instead
+
+* chore: removed playground files concerning useTresReady
+
+* chore: removed ready pages from playground routes
+
+* feature: made isReady dependency clearer by leveraging triggerRef
+
+* ˆ
+* camera ctx property is now an object with the camera manager instead of the active camera
+
+* fix: remove camera manual check
+
+* chore: remove reset onUnmounted
+
+Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
+
+* chore: remove unused comment
+
+Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
+
+* chore: omit previous reordering of cameras
+
+Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
+
+* refactor: update camera handling to use Three.js Camera type
+
+- Replaced instances of TresCamera with Three.js Camera type across the codebase for better compatibility and consistency.
+- Updated camera management logic in useCamera composable and related components to reflect the new type.
+- Simplified currentCamera logic to use computed properties instead of watch.
+
+* refactor: enhance orthographic camera setup and controls
+
+- Updated the orthographic camera initialization to correctly calculate frustum dimensions based on the aspect ratio.
+- Introduced zoom functionality for the orthographic camera.
+- Simplified the useControls setup by removing unnecessary properties and focusing on essential controls.
+- Adjusted the camera update logic to reflect the new control structure, ensuring proper projection matrix updates.
+
+* chore(playground): streamline camera implementation with TresJS components
+
+- Removed manual camera initialization in favor of using TresJS components for perspective and orthographic cameras.
+- Updated the template to conditionally render the appropriate camera based on the selected camera type.
+- Enhanced readability and maintainability by leveraging TresJS's built-in camera properties and methods.
+
+* refactor(playground): remove unused camera imports in index.vue
+
+- Eliminated unused imports for OrthographicCamera and PerspectiveCamera from Three.js to streamline the code.
+- This change enhances code clarity and reduces unnecessary dependencies, aligning with the recent updates to utilize TresJS components for camera management.
+* `useTexture` composable has been refactored and moved to `@tresjs/cientos` package
+
+- Deleted the `useTexture` composable and its associated files as it has been refactored and moved to the `@tresjs/cientos` package.
+- Updated documentation to reflect the changes, including a warning about the deprecation and a link to the new `cientos` documentation for `useTexture`.
+- Adjusted examples in the cookbook to utilize the new `useTexture` from `@tresjs/cientos`, ensuring users are directed to the correct implementation.
+
+* fix: clean up texture loading examples in documentation
+
+- Removed unnecessary line breaks and improved formatting in the `load-textures.md` documentation.
+- Streamlined the example code for `TresMeshStandardMaterial` to enhance readability and maintain consistency with coding standards.
+
+* docs: update composables documentation to reflect removal of useTexture
+
+- Removed deprecated `useTexture` section from the documentation, indicating its refactor to the `@tresjs/cientos` package.
+- Added a warning about the deprecation and provided a link to the new `cientos` documentation for user guidance.
+- Ensured that the remaining documentation is clear and concise, maintaining consistency with the latest changes in the codebase.
+* - useTresReady is no longer available, it has been replaced by isReady in the renderer in the context
+- onTresReady is no longer available. renderer.isReady should be leveraged instead
+
+* chore: removed playground files concerning useTresReady
+
+* chore: removed ready pages from playground routes
+
+* feature: made isReady dependency clearer by leveraging triggerRef
+* - useRenderer now returns invalidate and advance
+- useTresContextProvider no longer contains render state
+
+* chore: removed internal renderer ref
+
+* refactor!: the renderer instance is now returned from useRenderer, made renderer being wrapped inside the context
+* - invalidate, advance, canBeInvalidated and the renderer instance are now accessed through the context via `renderer`
+- the renderer instance in the context is now readonly
+
+* refactor: removed one emit dependency
+
+* tofo cleanup
+
+* merge fix
+
+* refactor: updated other parts to match structural changes
+
+* worked around loop errors
+
+* fixes concerning changes in playground
+
+* updated english docs
+
+* fix: wrong render mode in docs
+
+* removed obsolete todo
+
+* fix: added null check
+
+* fix: removed deprecated toValue import
+
+* feat: remove emit from useTresEventManager
+
+* renamed type
+
+* chore: got rid of emit concerning TresReady
+
+* refactor!: removed emit from useTresContextProvider and useTresEventManager
+* - the type `EmitEventName` is no longer exported from @tresjs/core
+- the type `EmitEventFn` is no longer exported from @tresjs/core
+
+* chore: restored renderer tyope in LoopCallbackWithCtx
+
+* refactor: renamed useRenderer
+
+* fix: test
+
+* cleanup
+* - useRenderer now returns invalidate and advance
+- useTresContextProvider no longer contains render state
+
+* chore: removed internal renderer ref
+
+* refactor!: the renderer instance is now returned from useRenderer, made renderer being wrapped inside the context
+* - invalidate, advance, canBeInvalidated and the renderer instance are now accessed through the context via `renderer`
+- the renderer instance in the context is now readonly
+
+* refactor: removed one emit dependency
+
+* tofo cleanup
+
+* merge fix
+
+* refactor: updated other parts to match structural changes
+
+* worked around loop errors
+
+* fixes concerning changes in playground
+
+* updated english docs
+
+* fix: wrong render mode in docs
+
+* removed obsolete todo
+
+* fix: added null check
+
+* fix: removed deprecated toValue import
+
+* chore: restored renderer tyope in LoopCallbackWithCtx
+
+* refactor: renamed useRenderer
+
+* fix: test
+
+* fix: lint fix
+* `useSeek` is deprecated
+
+- Marked the `useSeek` composable as deprecated in the documentation, indicating its removal in v5.0.0.
+- Removed the `useSeek` composable implementation and its associated tests from the codebase to streamline the composables directory.
+- Updated the documentation to reflect the deprecation status and provide guidance for users.
+
+* Update docs/api/composables.md
+
+Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
+
+### Features
+
+* 1012 add context inspector devtools ([#1013](https://github.com/Tresjs/tres/issues/1013)) ([ff6723c](https://github.com/Tresjs/tres/commit/ff6723cc7d91b229523220e7eb18d0e2b4a48efb))
+* 986 remove usetexture ([#1008](https://github.com/Tresjs/tres/issues/1008)) ([041b697](https://github.com/Tresjs/tres/commit/041b697bf77ad7b7f70b7d3f2bdeed99c5149abb))
+* deprecate useSeek composable and update documentation ([#990](https://github.com/Tresjs/tres/issues/990)) ([3d5ea13](https://github.com/Tresjs/tres/commit/3d5ea135911627ae3c9d4609c83f646a9cd793a9))
+* introduce useTres composable and update related documentation ([#1017](https://github.com/Tresjs/tres/issues/1017)) ([fd03f72](https://github.com/Tresjs/tres/commit/fd03f7241e9345f670ab64967007a40e3c1d80cd))
+
+### Bug Fixes
+
+* add initial value support to useLoader([#1007](https://github.com/Tresjs/tres/issues/1007)) ([be3280b](https://github.com/Tresjs/tres/commit/be3280b01185358558cd91aa7cfca4bc7a1507e8))
+* added forgotten ready emit ([8b97e85](https://github.com/Tresjs/tres/commit/8b97e850d19a9bba4dc1353e796859d209539fbe))
+
+### Code Refactoring
+
+* 979 move renderer logic from usetrescontextprovider to userenderer 2 ([#993](https://github.com/Tresjs/tres/issues/993)) ([36bcb1c](https://github.com/Tresjs/tres/commit/36bcb1c0c2e1ca97d09240bff2ce46d8da43896c))
+* 992 removal of emit from usetrescontextprovider composable ([#999](https://github.com/Tresjs/tres/issues/999)) ([090adf3](https://github.com/Tresjs/tres/commit/090adf30774daa90c1fef710b00cbac5480c0b94))
+* context camera is now a state ([#1004](https://github.com/Tresjs/tres/issues/1004)) ([d5daf5d](https://github.com/Tresjs/tres/commit/d5daf5dace31e27f293c49506302e3fa0c93483a)), closes [#1009](https://github.com/Tresjs/tres/issues/1009)
+* removal of performance state from useTresContextProvider ([#1003](https://github.com/Tresjs/tres/issues/1003)) ([79edf43](https://github.com/Tresjs/tres/commit/79edf431f61b5bd6876bc248ce88b8dcf220b64b))
+* removed useTresReady, added isReady to the renderer in the… ([#1000](https://github.com/Tresjs/tres/issues/1000)) ([ff35bfc](https://github.com/Tresjs/tres/commit/ff35bfce4964bb884faa0b3258f7f3a5450ec69c))
+## [5.0.0-next.0](https://github.com/Tresjs/tres/compare/5.0.0-next.1...5.0.0-next.2) (2025-04-12)
+
+### ⚠ BREAKING CHANGES
+
+* **loader:** useLoader no longer returns the plain obj, it now returns and object with reactive data (resource|s), isLoading, error) and a load method, can be used both sync and async (suspense)
+
+- Added `useLoader` composable for loading resources with THREE.js, supporting single and multiple resource loading, loading state tracking, and error handling.
+- Created comprehensive documentation for `useLoader`, detailing its features, usage examples, and API reference.
+- Updated various playground components to utilize the new `useLoader` composable for loading GLTF and FBX models.
+- Added new demo pages for loading multiple models and using the `UseLoader` component in templates.
+
+* chore(loader): simplify useLoader implementation and clean up imports
+
+- Updated the `UseLoader` component in documentation to remove unnecessary destructuring of the slot props.
+- Cleaned up imports in `BlenderCube.vue`, `Suzanne.vue`, and `TheExperience.vue` by removing unused types.
+- Added eslint-disable comments for console logging in `Suzanne.vue` and `TheExperience.vue` to improve code readability while debugging.
+
+* feat: useGraph to generate named object material collections
+
+* feat: useAsyncState for useLoader
+
+- Added documentation for the `useLoader` composable, detailing its features, usage examples, and API reference.
+- Updated the navigation in the VitePress configuration to include a link to the new `useLoader` documentation.
+- Enhanced the `useLoader` composable to support better type safety and resource management.
+- Removed the `Suzanne.vue` component as part of the cleanup process.
+
+* feat: enhance useLoader and useGraph composables
+
+- Updated the `useLoader` composable to improve type safety and support loading textures alongside models.
+- Refactored the `useGraph` composable to accept both Object3D and TresObject types, enhancing its flexibility.
+- Added new examples and documentation for loading multiple models and textures, including progress tracking.
+- Cleaned up and organized playground components to demonstrate the new features effectively.
+
+* refactor(useLoader.test): clean up imports by removing unused `nextTick` import
+
+- Removed the unused `nextTick` import from the `useLoader.test.ts` file to streamline the code and improve readability.
+
+* docs: remove trailing spaces in team.md for consistency
+
+- Cleaned up trailing spaces in the `team.md` file to improve code consistency and readability.
+
+* fix(graph): export also types from graph utils
+
+* refactor(index.ts): remove unused export of buildGraph
+
+- Removed the unused `buildGraph` export from `index.ts` to streamline the code and improve maintainability.
+
+* feat: enhance resources loading with progress tracking
+
+- Enhanced the `useLoader` composable to return progress information, allowing for better user feedback during model loading.
+- Updated `TheModel.vue` to utilize the new progress tracking feature from the `useLoader` composable.
+- Removed the unused `LoadingManager` and integrated progress updates directly into the component's state.
+- Updated docs
+
+* feat: added tests to load and progress
+* Tres is now ESM only
+
+- Removed UMD build configuration from package.json and adjusted exports to only include ES module.
+- Updated vite.config.ts to specify the output format as ES, enhancing compatibility with modern module systems.
+
+### Features
+
+* 974-createsetup-devtools ([#975](https://github.com/Tresjs/tres/issues/975)) ([1d83f7b](https://github.com/Tresjs/tres/commit/1d83f7b96e0f0c6b20a3c42a03599f86211e051f))
+* **deps:** update @vue/devtools-api and @tresjs/cientos dependencies ([#977](https://github.com/Tresjs/tres/issues/977)) ([4793f6b](https://github.com/Tresjs/tres/commit/4793f6b0cabd0a233e9008bd3b45fcef6c133945))
+* **loader:** refactor useLoader to a true composable ([#959](https://github.com/Tresjs/tres/issues/959)) ([430837f](https://github.com/Tresjs/tres/commit/430837f1aeeddb4f17620efb13975c23e0f67d6c))
+* update package.json and vite.config.ts for build configuration ([#960](https://github.com/Tresjs/tres/issues/960)) ([96a96f4](https://github.com/Tresjs/tres/commit/96a96f48a4b0097c34b2edb36babf745e97a9a6f))
+
+### Bug Fixes
+
+* export logger utility from utils in index.ts ([#966](https://github.com/Tresjs/tres/issues/966)) ([bb0b9e2](https://github.com/Tresjs/tres/commit/bb0b9e2f3843d2bd27cd46cfe982f433dca013b4))
+## [4.3.6](https://github.com/Tresjs/tres/compare/5.0.0-next.1...5.0.0-next.2) (2025-06-06)
+
+## [5.0.0-next.1](https://github.com/Tresjs/tres/compare/5.0.0-next.0...5.0.0-next.1) (2025-06-06)
+
+### ⚠ BREAKING CHANGES
+
+* - useTresReady is no longer available, it has been replaced by isReady in the renderer in the context
+- onTresReady is no longer available. renderer.isReady should be leveraged instead
+
+* chore: removed playground files concerning useTresReady
+
+* chore: removed ready pages from playground routes
+
+* feature: made isReady dependency clearer by leveraging triggerRef
+
+* ˆ
+* camera ctx property is now an object with the camera manager instead of the active camera
+
+* fix: remove camera manual check
+
+* chore: remove reset onUnmounted
+
+Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
+
+* chore: remove unused comment
+
+Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
+
+* chore: omit previous reordering of cameras
+
+Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
+
+* refactor: update camera handling to use Three.js Camera type
+
+- Replaced instances of TresCamera with Three.js Camera type across the codebase for better compatibility and consistency.
+- Updated camera management logic in useCamera composable and related components to reflect the new type.
+- Simplified currentCamera logic to use computed properties instead of watch.
+
+* refactor: enhance orthographic camera setup and controls
+
+- Updated the orthographic camera initialization to correctly calculate frustum dimensions based on the aspect ratio.
+- Introduced zoom functionality for the orthographic camera.
+- Simplified the useControls setup by removing unnecessary properties and focusing on essential controls.
+- Adjusted the camera update logic to reflect the new control structure, ensuring proper projection matrix updates.
+
+* chore(playground): streamline camera implementation with TresJS components
+
+- Removed manual camera initialization in favor of using TresJS components for perspective and orthographic cameras.
+- Updated the template to conditionally render the appropriate camera based on the selected camera type.
+- Enhanced readability and maintainability by leveraging TresJS's built-in camera properties and methods.
+
+* refactor(playground): remove unused camera imports in index.vue
+
+- Eliminated unused imports for OrthographicCamera and PerspectiveCamera from Three.js to streamline the code.
+- This change enhances code clarity and reduces unnecessary dependencies, aligning with the recent updates to utilize TresJS components for camera management.
+* `useTexture` composable has been refactored and moved to `@tresjs/cientos` package
+
+- Deleted the `useTexture` composable and its associated files as it has been refactored and moved to the `@tresjs/cientos` package.
+- Updated documentation to reflect the changes, including a warning about the deprecation and a link to the new `cientos` documentation for `useTexture`.
+- Adjusted examples in the cookbook to utilize the new `useTexture` from `@tresjs/cientos`, ensuring users are directed to the correct implementation.
+
+* fix: clean up texture loading examples in documentation
+
+- Removed unnecessary line breaks and improved formatting in the `load-textures.md` documentation.
+- Streamlined the example code for `TresMeshStandardMaterial` to enhance readability and maintain consistency with coding standards.
+
+* docs: update composables documentation to reflect removal of useTexture
+
+- Removed deprecated `useTexture` section from the documentation, indicating its refactor to the `@tresjs/cientos` package.
+- Added a warning about the deprecation and provided a link to the new `cientos` documentation for user guidance.
+- Ensured that the remaining documentation is clear and concise, maintaining consistency with the latest changes in the codebase.
+* - useTresReady is no longer available, it has been replaced by isReady in the renderer in the context
+- onTresReady is no longer available. renderer.isReady should be leveraged instead
+
+* chore: removed playground files concerning useTresReady
+
+* chore: removed ready pages from playground routes
+
+* feature: made isReady dependency clearer by leveraging triggerRef
+* - useRenderer now returns invalidate and advance
+- useTresContextProvider no longer contains render state
+
+* chore: removed internal renderer ref
+
+* refactor!: the renderer instance is now returned from useRenderer, made renderer being wrapped inside the context
+* - invalidate, advance, canBeInvalidated and the renderer instance are now accessed through the context via `renderer`
+- the renderer instance in the context is now readonly
+
+* refactor: removed one emit dependency
+
+* tofo cleanup
+
+* merge fix
+
+* refactor: updated other parts to match structural changes
+
+* worked around loop errors
+
+* fixes concerning changes in playground
+
+* updated english docs
+
+* fix: wrong render mode in docs
+
+* removed obsolete todo
+
+* fix: added null check
+
+* fix: removed deprecated toValue import
+
+* feat: remove emit from useTresEventManager
+
+* renamed type
+
+* chore: got rid of emit concerning TresReady
+
+* refactor!: removed emit from useTresContextProvider and useTresEventManager
+* - the type `EmitEventName` is no longer exported from @tresjs/core
+- the type `EmitEventFn` is no longer exported from @tresjs/core
+
+* chore: restored renderer tyope in LoopCallbackWithCtx
+
+* refactor: renamed useRenderer
+
+* fix: test
+
+* cleanup
+* - useRenderer now returns invalidate and advance
+- useTresContextProvider no longer contains render state
+
+* chore: removed internal renderer ref
+
+* refactor!: the renderer instance is now returned from useRenderer, made renderer being wrapped inside the context
+* - invalidate, advance, canBeInvalidated and the renderer instance are now accessed through the context via `renderer`
+- the renderer instance in the context is now readonly
+
+* refactor: removed one emit dependency
+
+* tofo cleanup
+
+* merge fix
+
+* refactor: updated other parts to match structural changes
+
+* worked around loop errors
+
+* fixes concerning changes in playground
+
+* updated english docs
+
+* fix: wrong render mode in docs
+
+* removed obsolete todo
+
+* fix: added null check
+
+* fix: removed deprecated toValue import
+
+* chore: restored renderer tyope in LoopCallbackWithCtx
+
+* refactor: renamed useRenderer
+
+* fix: test
+
+* fix: lint fix
+* `useSeek` is deprecated
+
+- Marked the `useSeek` composable as deprecated in the documentation, indicating its removal in v5.0.0.
+- Removed the `useSeek` composable implementation and its associated tests from the codebase to streamline the composables directory.
+- Updated the documentation to reflect the deprecation status and provide guidance for users.
+
+* Update docs/api/composables.md
+
+Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
+
+### Features
+
+* 1012 add context inspector devtools ([#1013](https://github.com/Tresjs/tres/issues/1013)) ([ff6723c](https://github.com/Tresjs/tres/commit/ff6723cc7d91b229523220e7eb18d0e2b4a48efb))
+* 986 remove usetexture ([#1008](https://github.com/Tresjs/tres/issues/1008)) ([041b697](https://github.com/Tresjs/tres/commit/041b697bf77ad7b7f70b7d3f2bdeed99c5149abb))
+* deprecate useSeek composable and update documentation ([#990](https://github.com/Tresjs/tres/issues/990)) ([3d5ea13](https://github.com/Tresjs/tres/commit/3d5ea135911627ae3c9d4609c83f646a9cd793a9))
+* introduce useTres composable and update related documentation ([#1017](https://github.com/Tresjs/tres/issues/1017)) ([fd03f72](https://github.com/Tresjs/tres/commit/fd03f7241e9345f670ab64967007a40e3c1d80cd))
+
+### Bug Fixes
+
+* add initial value support to useLoader([#1007](https://github.com/Tresjs/tres/issues/1007)) ([be3280b](https://github.com/Tresjs/tres/commit/be3280b01185358558cd91aa7cfca4bc7a1507e8))
+* added forgotten ready emit ([8b97e85](https://github.com/Tresjs/tres/commit/8b97e850d19a9bba4dc1353e796859d209539fbe))
+
+### Code Refactoring
+
+* 979 move renderer logic from usetrescontextprovider to userenderer 2 ([#993](https://github.com/Tresjs/tres/issues/993)) ([36bcb1c](https://github.com/Tresjs/tres/commit/36bcb1c0c2e1ca97d09240bff2ce46d8da43896c))
+* 992 removal of emit from usetrescontextprovider composable ([#999](https://github.com/Tresjs/tres/issues/999)) ([090adf3](https://github.com/Tresjs/tres/commit/090adf30774daa90c1fef710b00cbac5480c0b94))
+* context camera is now a state ([#1004](https://github.com/Tresjs/tres/issues/1004)) ([d5daf5d](https://github.com/Tresjs/tres/commit/d5daf5dace31e27f293c49506302e3fa0c93483a)), closes [#1009](https://github.com/Tresjs/tres/issues/1009)
+* removal of performance state from useTresContextProvider ([#1003](https://github.com/Tresjs/tres/issues/1003)) ([79edf43](https://github.com/Tresjs/tres/commit/79edf431f61b5bd6876bc248ce88b8dcf220b64b))
+* removed useTresReady, added isReady to the renderer in the… ([#1000](https://github.com/Tresjs/tres/issues/1000)) ([ff35bfc](https://github.com/Tresjs/tres/commit/ff35bfce4964bb884faa0b3258f7f3a5450ec69c))
+## [5.0.0-next.0](https://github.com/Tresjs/tres/compare/5.0.0-next.0...5.0.0-next.1) (2025-04-12)
+
+### ⚠ BREAKING CHANGES
+
+* **loader:** useLoader no longer returns the plain obj, it now returns and object with reactive data (resource|s), isLoading, error) and a load method, can be used both sync and async (suspense)
+
+- Added `useLoader` composable for loading resources with THREE.js, supporting single and multiple resource loading, loading state tracking, and error handling.
+- Created comprehensive documentation for `useLoader`, detailing its features, usage examples, and API reference.
+- Updated various playground components to utilize the new `useLoader` composable for loading GLTF and FBX models.
+- Added new demo pages for loading multiple models and using the `UseLoader` component in templates.
+
+* chore(loader): simplify useLoader implementation and clean up imports
+
+- Updated the `UseLoader` component in documentation to remove unnecessary destructuring of the slot props.
+- Cleaned up imports in `BlenderCube.vue`, `Suzanne.vue`, and `TheExperience.vue` by removing unused types.
+- Added eslint-disable comments for console logging in `Suzanne.vue` and `TheExperience.vue` to improve code readability while debugging.
+
+* feat: useGraph to generate named object material collections
+
+* feat: useAsyncState for useLoader
+
+- Added documentation for the `useLoader` composable, detailing its features, usage examples, and API reference.
+- Updated the navigation in the VitePress configuration to include a link to the new `useLoader` documentation.
+- Enhanced the `useLoader` composable to support better type safety and resource management.
+- Removed the `Suzanne.vue` component as part of the cleanup process.
+
+* feat: enhance useLoader and useGraph composables
+
+- Updated the `useLoader` composable to improve type safety and support loading textures alongside models.
+- Refactored the `useGraph` composable to accept both Object3D and TresObject types, enhancing its flexibility.
+- Added new examples and documentation for loading multiple models and textures, including progress tracking.
+- Cleaned up and organized playground components to demonstrate the new features effectively.
+
+* refactor(useLoader.test): clean up imports by removing unused `nextTick` import
+
+- Removed the unused `nextTick` import from the `useLoader.test.ts` file to streamline the code and improve readability.
+
+* docs: remove trailing spaces in team.md for consistency
+
+- Cleaned up trailing spaces in the `team.md` file to improve code consistency and readability.
+
+* fix(graph): export also types from graph utils
+
+* refactor(index.ts): remove unused export of buildGraph
+
+- Removed the unused `buildGraph` export from `index.ts` to streamline the code and improve maintainability.
+
+* feat: enhance resources loading with progress tracking
+
+- Enhanced the `useLoader` composable to return progress information, allowing for better user feedback during model loading.
+- Updated `TheModel.vue` to utilize the new progress tracking feature from the `useLoader` composable.
+- Removed the unused `LoadingManager` and integrated progress updates directly into the component's state.
+- Updated docs
+
+* feat: added tests to load and progress
+* Tres is now ESM only
+
+- Removed UMD build configuration from package.json and adjusted exports to only include ES module.
+- Updated vite.config.ts to specify the output format as ES, enhancing compatibility with modern module systems.
+
+### Features
+
+* 974-createsetup-devtools ([#975](https://github.com/Tresjs/tres/issues/975)) ([1d83f7b](https://github.com/Tresjs/tres/commit/1d83f7b96e0f0c6b20a3c42a03599f86211e051f))
+* **deps:** update @vue/devtools-api and @tresjs/cientos dependencies ([#977](https://github.com/Tresjs/tres/issues/977)) ([4793f6b](https://github.com/Tresjs/tres/commit/4793f6b0cabd0a233e9008bd3b45fcef6c133945))
+* **loader:** refactor useLoader to a true composable ([#959](https://github.com/Tresjs/tres/issues/959)) ([430837f](https://github.com/Tresjs/tres/commit/430837f1aeeddb4f17620efb13975c23e0f67d6c))
+* update package.json and vite.config.ts for build configuration ([#960](https://github.com/Tresjs/tres/issues/960)) ([96a96f4](https://github.com/Tresjs/tres/commit/96a96f48a4b0097c34b2edb36babf745e97a9a6f))
+
+### Bug Fixes
+
+* export logger utility from utils in index.ts ([#966](https://github.com/Tresjs/tres/issues/966)) ([bb0b9e2](https://github.com/Tresjs/tres/commit/bb0b9e2f3843d2bd27cd46cfe982f433dca013b4))
+## [4.3.5](https://github.com/Tresjs/tres/compare/5.0.0-next.0...5.0.0-next.1) (2025-05-16)
+
+### Bug Fixes
+
+* make sure key is camelCase when reached else on conditional ([#1011](https://github.com/Tresjs/tres/issues/1011)) ([2902d05](https://github.com/Tresjs/tres/commit/2902d05c600b0e2b02738d0ab5af292b4d75cc35))
+## [4.3.4](https://github.com/Tresjs/tres/compare/5.0.0-next.0...5.0.0-next.1) (2025-05-13)
+
+### Bug Fixes
+
+* **patchProp:** harden props inference ([#1006](https://github.com/Tresjs/tres/issues/1006)) ([6cdf28b](https://github.com/Tresjs/tres/commit/6cdf28b73a246b935f0b58a8b759a0aa1b925ff6))
+
+## [5.0.0-next.0](https://github.com/Tresjs/tres/compare/4.3.3...5.0.0-next.0) (2025-04-12)
+
+### ⚠ BREAKING CHANGES
+
+* **loader:** useLoader no longer returns the plain obj, it now returns and object with reactive data (resource|s), isLoading, error) and a load method, can be used both sync and async (suspense)
+
+- Added `useLoader` composable for loading resources with THREE.js, supporting single and multiple resource loading, loading state tracking, and error handling.
+- Created comprehensive documentation for `useLoader`, detailing its features, usage examples, and API reference.
+- Updated various playground components to utilize the new `useLoader` composable for loading GLTF and FBX models.
+- Added new demo pages for loading multiple models and using the `UseLoader` component in templates.
+
+* chore(loader): simplify useLoader implementation and clean up imports
+
+- Updated the `UseLoader` component in documentation to remove unnecessary destructuring of the slot props.
+- Cleaned up imports in `BlenderCube.vue`, `Suzanne.vue`, and `TheExperience.vue` by removing unused types.
+- Added eslint-disable comments for console logging in `Suzanne.vue` and `TheExperience.vue` to improve code readability while debugging.
+
+* feat: useGraph to generate named object material collections
+
+* feat: useAsyncState for useLoader
+
+- Added documentation for the `useLoader` composable, detailing its features, usage examples, and API reference.
+- Updated the navigation in the VitePress configuration to include a link to the new `useLoader` documentation.
+- Enhanced the `useLoader` composable to support better type safety and resource management.
+- Removed the `Suzanne.vue` component as part of the cleanup process.
+
+* feat: enhance useLoader and useGraph composables
+
+- Updated the `useLoader` composable to improve type safety and support loading textures alongside models.
+- Refactored the `useGraph` composable to accept both Object3D and TresObject types, enhancing its flexibility.
+- Added new examples and documentation for loading multiple models and textures, including progress tracking.
+- Cleaned up and organized playground components to demonstrate the new features effectively.
+
+* refactor(useLoader.test): clean up imports by removing unused `nextTick` import
+
+- Removed the unused `nextTick` import from the `useLoader.test.ts` file to streamline the code and improve readability.
+
+* docs: remove trailing spaces in team.md for consistency
+
+- Cleaned up trailing spaces in the `team.md` file to improve code consistency and readability.
+
+* fix(graph): export also types from graph utils
+
+* refactor(index.ts): remove unused export of buildGraph
+
+- Removed the unused `buildGraph` export from `index.ts` to streamline the code and improve maintainability.
+
+* feat: enhance resources loading with progress tracking
+
+- Enhanced the `useLoader` composable to return progress information, allowing for better user feedback during model loading.
+- Updated `TheModel.vue` to utilize the new progress tracking feature from the `useLoader` composable.
+- Removed the unused `LoadingManager` and integrated progress updates directly into the component's state.
+- Updated docs
+
+* feat: added tests to load and progress
+* Tres is now ESM only
+
+- Removed UMD build configuration from package.json and adjusted exports to only include ES module.
+- Updated vite.config.ts to specify the output format as ES, enhancing compatibility with modern module systems.
+
+### Features
+
+* 974-createsetup-devtools ([#975](https://github.com/Tresjs/tres/issues/975)) ([1d83f7b](https://github.com/Tresjs/tres/commit/1d83f7b96e0f0c6b20a3c42a03599f86211e051f))
+* **deps:** update @vue/devtools-api and @tresjs/cientos dependencies ([#977](https://github.com/Tresjs/tres/issues/977)) ([4793f6b](https://github.com/Tresjs/tres/commit/4793f6b0cabd0a233e9008bd3b45fcef6c133945))
+* **loader:** refactor useLoader to a true composable ([#959](https://github.com/Tresjs/tres/issues/959)) ([430837f](https://github.com/Tresjs/tres/commit/430837f1aeeddb4f17620efb13975c23e0f67d6c))
+* update package.json and vite.config.ts for build configuration ([#960](https://github.com/Tresjs/tres/issues/960)) ([96a96f4](https://github.com/Tresjs/tres/commit/96a96f48a4b0097c34b2edb36babf745e97a9a6f))
+
+### Bug Fixes
+
+* export logger utility from utils in index.ts ([#966](https://github.com/Tresjs/tres/issues/966)) ([bb0b9e2](https://github.com/Tresjs/tres/commit/bb0b9e2f3843d2bd27cd46cfe982f433dca013b4))
 ## [4.3.6](https://github.com/Tresjs/tres/compare/4.3.5...4.3.6) (2025-06-06)
 
 ## [4.3.5](https://github.com/Tresjs/tres/compare/4.3.4...4.3.5) (2025-05-16)

docs/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

docs/.env.example

@@ -0,0 +1,5 @@
+# Production license for @nuxt/ui-pro, get one at https://ui.nuxt.com/pro/purchase
+NUXT_UI_PRO_LICENSE=
+
+# Public URL, used for OG Image when running nuxt generate
+NUXT_PUBLIC_SITE_URL=

docs/.eslintrc-auto-import.json

@@ -1,67 +0,0 @@
-{
-  "globals": {
-    "Component": true,
-    "ComponentPublicInstance": true,
-    "ComputedRef": true,
-    "EffectScope": true,
-    "InjectionKey": true,
-    "PropType": true,
-    "Ref": true,
-    "VNode": true,
-    "WritableComputedRef": true,
-    "computed": true,
-    "createApp": true,
-    "customRef": true,
-    "defineAsyncComponent": true,
-    "defineComponent": true,
-    "effectScope": true,
-    "getCurrentInstance": true,
-    "getCurrentScope": true,
-    "h": true,
-    "inject": true,
-    "isProxy": true,
-    "isReactive": true,
-    "isReadonly": true,
-    "isRef": true,
-    "markRaw": true,
-    "nextTick": true,
-    "onActivated": true,
-    "onBeforeMount": true,
-    "onBeforeUnmount": true,
-    "onBeforeUpdate": true,
-    "onDeactivated": true,
-    "onErrorCaptured": true,
-    "onMounted": true,
-    "onRenderTracked": true,
-    "onRenderTriggered": true,
-    "onScopeDispose": true,
-    "onServerPrefetch": true,
-    "onUnmounted": true,
-    "onUpdated": true,
-    "provide": true,
-    "reactive": true,
-    "readonly": true,
-    "ref": true,
-    "resolveComponent": true,
-    "shallowReactive": true,
-    "shallowReadonly": true,
-    "shallowRef": true,
-    "toRaw": true,
-    "toRef": true,
-    "toRefs": true,
-    "toValue": true,
-    "triggerRef": true,
-    "unref": true,
-    "useAttrs": true,
-    "useCssModule": true,
-    "useCssVars": true,
-    "useSlots": true,
-    "watch": true,
-    "watchEffect": true,
-    "watchPostEffect": true,
-    "watchSyncEffect": true,
-    "ExtractDefaultPropTypes": true,
-    "ExtractPropTypes": true,
-    "ExtractPublicPropTypes": true
-  }
-}

docs/.gitignore

@@ -0,0 +1,28 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+.vitepress
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+# VSC
+.history

docs/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

docs/.vitepress/config/de.ts

@@ -1,191 +0,0 @@
-import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
-
-export const deConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
-  themeConfig: {
-    editLink: {
-      pattern: 'https://github.com/tresjs/tres/edit/main/docs/:path',
-      text: 'Änderungen an dieser Seite vorschlagen',
-    },
-    sidebar: [
-      {
-        text: 'Anleitung',
-        items: [
-          // Dies zeigt die Seite `/guide/index.md`.
-          { text: 'Einführung', link: '/de/guide/' },
-          { text: 'Loslegen', link: '/de/guide/getting-started' },
-          { text: 'Deine erste Szene', link: '/de/guide/your-first-scene' },
-          { text: 'Nuxt', link: '/de/guide/nuxt' },
-          { text: 'Fehlerbehebung', link: '/de/guide/troubleshooting' },
-          { text: 'Migration von v1', link: '/de/guide/migration-guide' },
-        ],
-      },
-      {
-        text: 'API',
-        items: [
-          { text: 'TresCanvas', link: '/de/api/tres-canvas' },
-          {
-            text: 'Instanzen, Argumente und Props',
-            link: '/de/api/instances-arguments-and-props',
-          },
-          {
-            text: 'Composables',
-            link: '/de/api/composables',
-          },
-          {
-            text: 'Events',
-            link: '/de/api/events',
-          },
-        ],
-      },
-
-      {
-        text: 'Fortgeschritten',
-        items: [
-          { text: 'Erweitern', link: '/de/advanced/extending' },
-          { text: 'Primitive', link: '/de/advanced/primitive' },
-          {
-            text: 'Warnhinweise',
-            link: '/de/advanced/caveats',
-          },
-        ],
-      },
-      {
-        text: 'Debugging',
-        items: [
-          { text: 'Entwicklungstools', link: '/de/debug/devtools' },
-        ],
-      },
-      {
-        text: 'Kochbuch 🍳🧑‍🍳',
-        link: '/de/cookbook/',
-        items: [
-          { text: 'Orbit-Controls', link: '/de/cookbook/orbit-controls' },
-          { text: 'Einfache Animationen', link: '/de/cookbook/basic-animations' },
-          { text: 'Fortgeschrittene Animationen', link: '/de/cookbook/advanced-animations' },
-          { text: 'Gruppen', link: '/de/cookbook/groups' },
-          { text: 'Texturen laden', link: '/de/cookbook/load-textures' },
-          { text: 'Modelle laden', link: '/de/cookbook/load-models' },
-          { text: 'Text laden', link: '/de/cookbook/text-3d' },
-          { text: 'Lichter und Schatten', link: '/de/cookbook/lights-shadows' },
-          { text: 'Shaders', link: '/de/cookbook/shaders' },
-        ],
-      },
-      {
-        text: 'Direktiven',
-        collapsed: true,
-        items: [
-          { text: 'v-log', link: '/de/directives/v-log' },
-          { text: 'v-light-helper', link: '/de/directives/v-light-helper' },
-          { text: 'v-distance-to', link: '/de/directives/v-distance-to' },
-        ],
-      },
-      {
-        text: 'Ökosystem',
-        items: [
-          {
-            text: 'Cientos 💛',
-            link: 'https://cientos.tresjs.org/',
-          },
-          {
-            text: 'Nuxt-Modul',
-            link: 'https://github.com/Tresjs/nuxt',
-          },
-          {
-            text: 'TresLeches 🍰',
-            link: 'https://tresleches.tresjs.org/',
-          },
-          {
-            text: 'Nachbearbeitung',
-            link: 'https://post-processing.tresjs.org/',
-          },
-        ],
-      },
-      {
-        text: 'Community',
-        items: [
-          { text: 'Tolle Resourcen', link: '/de/community/awesome-resources' },
-        ],
-      },
-    ],
-    nav: [
-      { text: 'Anleitung', link: '/de/guide/' },
-      { text: 'API', link: '/de/api/tres-canvas' },
-      /*       { text: 'API', link: '/de/api/' },
-      { text: 'Konfiguration', link: '/de/config/' }, */
-      {
-        text: 'Ressourcen',
-        items: [
-          { text: 'Team', link: '/de/team' },
-          { text: 'Versionen', link: 'https://github.com/Tresjs/tres/releases' },
-          {
-            text: 'Spielplatz',
-            link: 'https://play.tresjs.org/',
-          },
-          {
-            text: 'Github',
-            link: 'https://github.com/Tresjs/tres/',
-          },
-          {
-            text: 'Probleme',
-            link: 'https://github.com/Tresjs/tres/issues',
-          },
-          {
-            text: 'Beitragen',
-            link: 'https://github.com/Tresjs/.github/blob/main/CONTRIBUTING.md',
-          },
-          {
-            text: 'Ökosystem',
-            items: [
-              {
-                text: 'Cientos 💛',
-                link: 'https://cientos.tresjs.org/',
-              },
-              {
-                text: 'Nuxt-Modul',
-                link: 'https://github.com/Tresjs/nuxt',
-              },
-              {
-                text: 'TresLeches 🍰',
-                link: 'https://tresleches.tresjs.org/',
-              },
-              {
-                text: 'Nachbearbeitung',
-                link: 'https://post-processing.tresjs.org/',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-    search: {
-      provider: 'local',
-      options: {
-        locales: {
-          de: {
-            translations: {
-              button: {
-                buttonText: 'Suchen',
-                buttonAriaLabel: 'Suchen',
-              },
-              modal: {
-                displayDetails: 'Detaillierte Liste anzeigen',
-                resetButtonTitle: 'Suche zurücksetzen',
-                backButtonTitle: 'Suche schließen',
-                noResultsText: 'Keine Ergebnisse für',
-                footer: {
-                  selectText: 'zur Auswahl',
-                  selectKeyAriaLabel: 'enter',
-                  navigateText: 'zum Navigieren',
-                  navigateUpKeyAriaLabel: 'Pfeil nach oben',
-                  navigateDownKeyAriaLabel: 'Pfeil nach unten',
-                  closeText: 'zum Schließen',
-                  closeKeyAriaLabel: 'escape',
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-}

docs/.vitepress/config/en.ts

@@ -1,171 +0,0 @@
-import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
-
-export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
-  themeConfig: {
-    editLink: {
-      pattern: 'https://github.com/tresjs/tres/edit/main/docs/:path',
-      text: 'Suggest changes to this page',
-    },
-    sidebar: [
-      {
-        text: 'Guide',
-        items: [
-          // This shows `/guide/index.md` page.
-          { text: 'Introduction', link: '/guide/' },
-          { text: 'Getting Started', link: '/guide/getting-started' },
-          { text: 'Your first Scene', link: '/guide/your-first-scene' },
-          { text: 'Nuxt', link: '/guide/nuxt' },
-          { text: 'Troubleshooting', link: '/guide/troubleshooting' },
-          { text: 'Migrate from v1', link: '/guide/migration-guide' },
-        ],
-      },
-      {
-        text: 'API',
-        items: [
-          { text: 'TresCanvas', link: '/api/tres-canvas' },
-          {
-            text: 'Instances, arguments and props',
-            link: '/api/instances-arguments-and-props',
-          },
-          {
-            text: 'Composables',
-            link: '/api/composables',
-          },
-          {
-            text: 'Events',
-            link: '/api/events',
-          },
-        ],
-      },
-
-      {
-        text: 'Advanced',
-
-        items: [
-          { text: 'Extending', link: '/advanced/extending' },
-          { text: 'Primitives', link: '/advanced/primitive' },
-          { text: 'Scaling Performance 🚀', link: '/advanced/performance' },
-          { text: 'Attach', link: '/advanced/attach' },
-          {
-            text: 'Caveats',
-            link: '/advanced/caveats',
-          },
-        ],
-      },
-      {
-        text: 'Debug',
-        items: [
-          { text: 'Devtools', link: '/debug/devtools' },
-        ],
-      },
-      {
-        text: 'Cookbook 🍳🧑‍🍳',
-        link: '/cookbook/',
-        items: [
-          { text: 'Orbit Controls', link: '/cookbook/orbit-controls' },
-          { text: 'Basic Animations', link: '/cookbook/basic-animations' },
-          { text: 'Advanced Animations', link: '/cookbook/advanced-animations' },
-          { text: 'Groups', link: '/cookbook/groups' },
-          { text: 'Load Textures', link: '/cookbook/load-textures' },
-          { text: 'Load Models', link: '/cookbook/load-models' },
-          { text: 'Load Text', link: '/cookbook/text-3d' },
-          { text: 'Lights & Shadows', link: '/cookbook/lights-shadows' },
-          { text: 'Shaders', link: '/cookbook/shaders' },
-          { text: 'Tweakpane', link: '/cookbook/tweakpane' },
-        ],
-      },
-      {
-        text: 'Directives',
-        collapsed: true,
-        items: [
-          { text: 'v-log', link: '/directives/v-log' },
-          { text: 'v-light-helper', link: '/directives/v-light-helper' },
-          { text: 'v-distance-to', link: '/directives/v-distance-to' },
-        ],
-      },
-      {
-        text: 'Ecosystem',
-        items: [
-          {
-            text: 'Cientos 💛',
-            link: 'https://cientos.tresjs.org/',
-          },
-          {
-            text: 'Nuxt module',
-            link: 'https://github.com/Tresjs/nuxt',
-          },
-          {
-            text: 'TresLeches 🍰',
-            link: 'https://tresleches.tresjs.org/',
-          },
-          {
-            text: 'Post-processing',
-            link: 'https://post-processing.tresjs.org/',
-          },
-        ],
-      },
-      {
-        text: 'Community',
-        items: [
-          { text: 'Awesome Resources', link: '/community/awesome-resources' },
-        ],
-      },
-      {
-        text: 'Contributing',
-        items: [
-          { text: 'Contribute', link: '/contribute/contributing' },
-        ],
-      },
-    ],
-    nav: [
-      { text: 'Guide', link: '/guide/' },
-      { text: 'API', link: '/api/tres-canvas' },
-      /*       { text: 'API', link: '/api/' },
-      { text: 'Config', link: '/config/' }, */
-      {
-        text: 'Resources',
-        items: [
-          { text: 'Team', link: '/team' },
-          { text: 'Releases', link: 'https://github.com/Tresjs/tres/releases' },
-          {
-            text: 'Playground',
-            link: 'https://play.tresjs.org/',
-          },
-          {
-            text: 'Github',
-            link: 'https://github.com/Tresjs/tres/',
-          },
-          {
-            text: 'Issues',
-            link: 'https://github.com/Tresjs/tres/issues',
-          },
-          {
-            text: 'Contributing',
-            link: 'https://github.com/Tresjs/.github/blob/main/CONTRIBUTING.md',
-          },
-          {
-            text: 'Ecosystem',
-            items: [
-              {
-                text: 'Cientos 💛',
-                link: 'https://cientos.tresjs.org/',
-              },
-              {
-                text: 'Nuxt module',
-                link: 'https://github.com/Tresjs/nuxt',
-              },
-              {
-                text: 'TresLeches 🍰',
-                link: 'https://tresleches.tresjs.org/',
-              },
-              {
-                text: 'Post-processing',
-                link: 'https://post-processing.tresjs.org/',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-}

docs/.vitepress/config/es.ts

@@ -1,192 +0,0 @@
-import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
-
-export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
-  themeConfig: {
-    editLink: {
-      pattern: 'https://github.com/tresjs/tres/edit/main/docs/:path',
-      text: 'Sugerir cambios a esta página',
-    },
-    sidebar: [
-      {
-        text: 'Guía',
-        items: [
-          // Esto muestra la página `/guide/index.md`.
-          { text: 'Introducción', link: '/es/guide/' },
-          { text: 'Empezando', link: '/es/guide/getting-started' },
-          { text: 'Tu primera Escena', link: '/es/guide/your-first-scene' },
-          { text: 'Nuxt', link: '/es/guide/nuxt' },
-          { text: 'Solución de problemas', link: '/es/guide/troubleshooting' },
-          { text: 'Migración desde v1', link: '/es/guide/migration-guide' },
-        ],
-      },
-      {
-        text: 'API',
-        items: [
-          { text: 'TresCanvas', link: '/es/api/tres-canvas' },
-          {
-            text: 'Instancias, argumentos y props',
-            link: '/es/api/instances-arguments-and-props',
-          },
-          {
-            text: 'Composables',
-            link: '/es/api/composables',
-          },
-          {
-            text: 'Eventos',
-            link: '/es/api/events',
-          },
-        ],
-      },
-
-      {
-        text: 'Avanzado',
-
-        items: [
-          { text: 'Extender', link: '/es/advanced/extending' },
-          { text: 'Primitive', link: '/es/advanced/primitive' },
-          {
-            text: 'Advertencias',
-            link: '/es/advanced/caveats',
-          },
-        ],
-      },
-      {
-        text: 'Depuración',
-        items: [
-          { text: 'Herramientas de desarrollo', link: '/es/debug/devtools' },
-        ],
-      },
-      {
-        text: 'Recetario 🍳🧑‍🍳',
-        link: '/es/cookbook/',
-        items: [
-          { text: 'Controles de órbita', link: '/es/cookbook/orbit-controls' },
-          { text: 'Animaciones básicas', link: '/es/cookbook/basic-animations' },
-          { text: 'Advanced Animations', link: '/es/cookbook/advanced-animations' },
-          { text: 'Grupos', link: '/es/cookbook/groups' },
-          { text: 'Cargar texturas', link: '/es/cookbook/load-textures' },
-          { text: 'Cargar modelos', link: '/es/cookbook/load-models' },
-          { text: 'Cargar texto', link: '/es/cookbook/text-3d' },
-          { text: 'Luces y sombras', link: '/es/cookbook/lights-shadows' },
-          { text: 'Shaders', link: '/es/cookbook/shaders' },
-        ],
-      },
-      {
-        text: 'Directivas',
-        collapsed: true,
-        items: [
-          { text: 'v-log', link: '/es/directives/v-log' },
-          { text: 'v-light-helper', link: '/es/directives/v-light-helper' },
-          { text: 'v-distance-to', link: '/es/directives/v-distance-to' },
-        ],
-      },
-      {
-        text: 'Ecosistema',
-        items: [
-          {
-            text: 'Cientos 💛',
-            link: 'https://cientos.tresjs.org/',
-          },
-          {
-            text: 'Módulo Nuxt',
-            link: 'https://github.com/Tresjs/nuxt',
-          },
-          {
-            text: 'TresLeches 🍰',
-            link: 'https://tresleches.tresjs.org/',
-          },
-          {
-            text: 'Post-procesamiento',
-            link: 'https://post-processing.tresjs.org/',
-          },
-        ],
-      },
-      {
-        text: 'Comunidad',
-        items: [
-          { text: 'Recursos increíbles', link: '/es/community/awesome-resources' },
-        ],
-      },
-    ],
-    nav: [
-      { text: 'Guía', link: '/es/guide/' },
-      { text: 'API', link: '/es/api/tres-canvas' },
-      /*       { text: 'API', link: '/es/api/' },
-      { text: 'Configuración', link: '/es/config/' }, */
-      {
-        text: 'Recursos',
-        items: [
-          { text: 'Equipo', link: '/es/team' },
-          { text: 'Versiones', link: 'https://github.com/Tresjs/tres/releases' },
-          {
-            text: 'Playground',
-            link: 'https://play.tresjs.org/',
-          },
-          {
-            text: 'Github',
-            link: 'https://github.com/Tresjs/tres/',
-          },
-          {
-            text: 'Problemas',
-            link: 'https://github.com/Tresjs/tres/issues',
-          },
-          {
-            text: 'Contribuir',
-            link: 'https://github.com/Tresjs/.github/blob/main/CONTRIBUTING.md',
-          },
-          {
-            text: 'Ecosistema',
-            items: [
-              {
-                text: 'Cientos 💛',
-                link: 'https://cientos.tresjs.org/',
-              },
-              {
-                text: 'Módulo Nuxt',
-                link: 'https://github.com/Tresjs/nuxt',
-              },
-              {
-                text: 'TresLeches 🍰',
-                link: 'https://tresleches.tresjs.org/',
-              },
-              {
-                text: 'Post-procesamiento',
-                link: 'https://post-processing.tresjs.org/',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-    search: {
-      provider: 'local',
-      options: {
-        locales: {
-          es: {
-            translations: {
-              button: {
-                buttonText: 'Buscar',
-                buttonAriaLabel: 'Buscar',
-              },
-              modal: {
-                displayDetails: 'Mostrar lista detallada',
-                resetButtonTitle: 'Restablecer búsqueda',
-                backButtonTitle: 'Cerrar búsqueda',
-                noResultsText: 'Sin resultados para',
-                footer: {
-                  selectText: 'para seleccionar',
-                  selectKeyAriaLabel: 'entrar',
-                  navigateText: 'para navegar',
-                  navigateUpKeyAriaLabel: 'flecha arriba',
-                  navigateDownKeyAriaLabel: 'flecha abajo',
-                  closeText: 'para cerrar',
-                  closeKeyAriaLabel: 'escape',
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-}

docs/.vitepress/config/fr.ts

@@ -1,183 +0,0 @@
-import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
-
-export const frConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
-  themeConfig: {
-    editLink: {
-      pattern: 'https://github.com/tresjs/tres/edit/main/docs/:path',
-      text: 'Suggérer un changement à cette page.',
-    },
-    sidebar: [
-      {
-        text: 'Guide',
-        items: [
-          // This shows `/guide/index.md` page.
-          { text: 'Introduction', link: '/fr/guide/' },
-          { text: 'Commencer', link: '/fr/guide/getting-started' },
-          { text: 'Votre première scene', link: '/fr/guide/your-first-scene' },
-          { text: 'Nuxt', link: '/fr/guide/nuxt' },
-          { text: 'Résolution de problèmes', link: '/fr/guide/troubleshooting' },
-          { text: 'Migration depuis la v1', link: '/fr/guide/migration-guide' },
-        ],
-      },
-      {
-        text: 'API',
-        items: [
-          { text: 'TresCanvas', link: '/fr/api/tres-canvas' },
-          {
-            text: 'Instances, arguments et props',
-            link: '/fr/api/instances-arguments-and-props',
-          },
-          {
-            text: 'Composables',
-            link: '/fr/api/composables',
-          },
-          {
-            text: 'Évenements',
-            link: '/fr/api/events',
-          },
-        ],
-      },
-
-      {
-        text: 'Avancé',
-
-        items: [
-          { text: 'Étendre', link: '/fr/advanced/extending' },
-          { text: 'primitive', link: '/fr/advanced/primitive' },
-          {
-            text: 'Mise en garde',
-            link: '/fr/advanced/caveats',
-          },
-        ],
-      },
-      {
-        text: 'Debug',
-        items: [
-          { text: 'Outils de développement', link: '/fr/debug/devtools' },
-        ],
-      },
-      {
-        text: 'Cookbook',
-        link: '/fr/cookbook/',
-        collapsed: true,
-        items: [
-          { text: 'Controles des orbites', link: '/fr/cookbook/orbit-controls' },
-          { text: 'Animations de base', link: '/fr/cookbook/basic-animations' },
-          { text: 'Groupes', link: '/fr/cookbook/groups' },
-          { text: 'Charger des textures', link: '/fr/cookbook/load-textures' },
-          { text: 'Charger des modèles', link: '/fr/cookbook/load-models' },
-          { text: 'Charger du texte', link: '/fr/cookbook/text-3d' },
-          { text: 'Éclairages et ombres', link: '/fr/cookbook/lights-shadows' },
-          { text: 'Shaders', link: '/fr/cookbook/shaders' },
-        ],
-      },
-      {
-        text: 'Directives',
-        collapsed: true,
-        items: [
-          { text: 'v-log', link: '/fr/directives/v-log' },
-          { text: 'v-light-helper', link: '/fr/directives/v-light-helper' },
-          { text: 'v-distance-to', link: '/fr/directives/v-distance-to' },
-        ],
-      },
-      {
-        text: 'Ecosystème',
-        items: [
-          {
-            text: 'Cientos 💛',
-            link: 'https://cientos.tresjs.org/',
-          },
-          {
-            text: 'Module Nuxt',
-            link: 'https://github.com/Tresjs/nuxt',
-          },
-          {
-            text: 'TresLeches 🍰',
-            link: 'https://tresleches.tresjs.org/',
-          },
-          {
-            text: 'Post-processing',
-            link: 'https://post-processing.tresjs.org/',
-          },
-        ],
-      },
-    ],
-    nav: [
-      { text: 'Guide', link: '/fr/guide/' },
-      { text: 'API', link: '/fr/api/tres-canvas' },
-      /*       { text: 'API', link: '/api/' },
-      { text: 'Config', link: '/config/' }, */
-      { text: 'Resources', items: [
-        { text: 'Équipe', link: '/fr/team.md' },
-        { text: 'Versions', link: 'https://github.com/Tresjs/tres/releases' },
-        {
-          text: 'Playground',
-          link: 'https://play.tresjs.org/',
-        },
-        {
-          text: 'Github',
-          link: 'https://github.com/Tresjs/tres/',
-        },
-        {
-          text: 'Problèmes',
-          link: 'https://github.com/Tresjs/tres/issues',
-        },
-        {
-          text: 'Contribuer',
-          link: 'https://github.com/Tresjs/.github/blob/main/CONTRIBUTING.md',
-        },
-        {
-          text: 'Ecosystème',
-          items: [
-            {
-              text: 'Cientos 💛',
-              link: 'https://cientos.tresjs.org/',
-            },
-            {
-              text: 'Module Nuxt',
-              link: 'https://github.com/Tresjs/nuxt',
-            },
-            {
-              text: 'TresLeches 🍰',
-              link: 'https://tresleches.tresjs.org/',
-            },
-            {
-              text: 'Post-processing',
-              link: 'https://post-processing.tresjs.org/',
-            },
-          ],
-        },
-      ] },
-    ],
-    search: {
-      provider: 'local',
-      options: {
-        locales: {
-          fr: {
-            translations: {
-              button: {
-                buttonText: 'Chercher',
-                buttonAriaLabel: 'Chercher',
-              },
-              modal: {
-                displayDetails: 'Afficher la liste détaillée',
-                resetButtonTitle: 'Réinitialiser la recherche',
-                backButtonTitle: 'Fermer la recherche',
-                noResultsText: 'Aucun résultat pour',
-                footer: {
-                  selectText: 'Pour selectionner',
-                  selectKeyAriaLabel: 'entrer',
-                  navigateText: 'Pour naviguer',
-                  navigateUpKeyAriaLabel: 'Flèche du haut',
-                  navigateDownKeyAriaLabel: 'Flèche du bas',
-                  closeText: 'Pour fermer',
-                  closeKeyAriaLabel: 'quitter',
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-}

docs/.vitepress/config/index.ts

@@ -1,21 +0,0 @@
-import { defineConfig } from 'vitepress'
-import { deConfig } from './de'
-import { enConfig } from './en'
-import { esConfig } from './es'
-import { frConfig } from './fr'
-import { nlConfig } from './nl'
-import { sharedConfig } from './shared'
-import { zhConfig } from './zh'
-
-export default defineConfig({
-  ...sharedConfig,
-
-  locales: {
-    root: { label: 'English', lang: 'en-US', link: '/', ...enConfig },
-    es: { label: 'Español', lang: 'es-ES', link: '/es/', ...esConfig },
-    fr: { label: 'Français', lang: 'fr-FR', link: '/fr/', ...frConfig },
-    de: { label: 'Deutsch', lang: 'de-DE', link: '/de/', ...deConfig },
-    zh: { label: '简体中文', lang: 'zh-CN', link: '/zh/', ...zhConfig },
-    nl: { label: 'Nederlands', lang: 'nl-NL', link: '/nl/', ...nlConfig },
-  },
-})

docs/.vitepress/config/nl.ts

@@ -1,182 +0,0 @@
-import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
-
-export const nlConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
-  themeConfig: {
-    editLink: {
-      pattern: 'https://github.com/tresjs/tres/edit/main/docs/:path',
-      text: 'Stel wijzigingen op deze pagina voor',
-    },
-    sidebar: [
-      {
-        text: 'Gids',
-        items: [
-          // This shows `/guide/index.md` page.
-          { text: 'Introductie', link: '/nl/guide/' },
-          { text: 'Aan de slag', link: '/nl/guide/getting-started' },
-          { text: 'Je eerste scene', link: '/nl/guide/your-first-scene' },
-          { text: 'Nuxt', link: '/nl/guide/nuxt' },
-          { text: 'Problemen oplossen', link: '/nl/guide/troubleshooting' },
-          { text: 'Migreren vanaf v1', link: '/nl/guide/migration-guide' },
-        ],
-      },
-      {
-        text: 'API',
-        items: [
-          { text: 'TresCanvas', link: '/nl/api/tres-canvas' },
-          {
-            text: 'Instanties, argumenten en props',
-            link: '/nl/api/instances-arguments-and-props',
-          },
-          {
-            text: 'Composables',
-            link: '/nl/api/composables',
-          },
-          {
-            text: 'Events',
-            link: '/nl/api/events',
-          },
-        ],
-      },
-
-      {
-        text: 'Geavanceerd',
-
-        items: [
-          { text: 'Uitbreiden', link: '/nl/advanced/extending' },
-          { text: 'Primitive', link: '/nl/advanced/primitive' },
-          {
-            text: 'Waarschuwingen',
-            link: '/nl/advanced/caveats',
-          },
-        ],
-      },
-      {
-        text: 'Foutopsporing',
-        items: [
-          { text: 'Ontwikkelingstools', link: '/nl/debug/devtools' },
-        ],
-      },
-      {
-        text: 'Kookboek 🍳🧑‍🍳',
-        link: '/nl/cookbook/',
-        items: [
-          { text: 'Orbit Controls', link: '/nl/cookbook/orbit-controls' },
-          { text: 'Basis Animaties', link: '/nl/cookbook/basic-animations' },
-          { text: 'Groepen', link: '/nl/cookbook/groups' },
-          { text: 'Textures laden', link: '/nl/cookbook/load-textures' },
-          { text: 'Modellen laden', link: '/nl/cookbook/load-models' },
-          { text: 'Text laden', link: '/nl/cookbook/text-3d' },
-          { text: 'Lichten en Schaduwen', link: '/nl/cookbook/lights-shadows' },
-          { text: 'Shaders', link: '/nl/cookbook/shaders' },
-        ],
-      },
-      {
-        text: 'Richtlijnen',
-        collapsed: true,
-        items: [
-          { text: 'v-log', link: '/nl/directives/v-log' },
-          { text: 'v-light-helper', link: '/nl/directives/v-light-helper' },
-          { text: 'v-distance-to', link: '/nl/directives/v-distance-to' },
-        ],
-      },
-      {
-        text: 'Ecosysteem',
-        items: [
-          {
-            text: 'Cientos 💛',
-            link: 'https://cientos.tresjs.org/',
-          },
-          {
-            text: 'Nuxt module',
-            link: 'https://github.com/Tresjs/nuxt',
-          },
-          {
-            text: 'TresLeches 🍰',
-            link: 'https://tresleches.tresjs.org/',
-          },
-          {
-            text: 'Nabewerking',
-            link: 'https://post-processing.tresjs.org/',
-          },
-        ],
-      },
-    ],
-    nav: [
-      { text: 'Guide', link: '/nl/guide/' },
-      { text: 'API', link: '/nl/api/tres-canvas' },
-      /*       { text: 'API', link: '/nl/api/' },
-      { text: 'Config', link: '/nl/config/' }, */
-      { text: 'Resources', items: [
-        { text: 'Team', link: '/nl/team' },
-        { text: 'Releases', link: 'https://github.com/Tresjs/tres/releases' },
-        {
-          text: 'Speelplaats',
-          link: 'https://play.tresjs.org/',
-        },
-        {
-          text: 'Github',
-          link: 'https://github.com/Tresjs/tres/',
-        },
-        {
-          text: 'Problemen',
-          link: 'https://github.com/Tresjs/tres/issues',
-        },
-        {
-          text: 'Bijdragen',
-          link: 'https://github.com/Tresjs/.github/blob/main/CONTRIBUTING.md',
-        },
-        {
-          text: 'Ecosysteem',
-          items: [
-            {
-              text: 'Cientos 💛',
-              link: 'https://cientos.tresjs.org/',
-            },
-            {
-              text: 'Nuxt module',
-              link: 'https://github.com/Tresjs/nuxt',
-            },
-            {
-              text: 'TresLeches 🍰',
-              link: 'https://tresleches.tresjs.org/',
-            },
-            {
-              text: 'Nabewerking',
-              link: 'https://post-processing.tresjs.org/',
-            },
-          ],
-        },
-      ] },
-    ],
-    search: {
-      provider: 'local',
-      options: {
-        locales: {
-          nl: {
-            translations: {
-              button: {
-                buttonText: 'Zoeken',
-                buttonAriaLabel: 'Zoeken',
-              },
-              modal: {
-                displayDetails: 'Gedetailleerde lijst bekijken',
-                resetButtonTitle: 'Zoeken resetten',
-                backButtonTitle: 'Zoeken sluiten',
-                noResultsText: 'Geen resultaten voor',
-                footer: {
-                  selectText: 'Selecteren',
-                  selectKeyAriaLabel: 'enter',
-                  navigateText: 'Navigeren naar',
-                  navigateUpKeyAriaLabel: 'Pijl omhoog',
-                  navigateDownKeyAriaLabel: 'Pijl omlaag',
-                  closeText: 'Sluiten',
-                  closeKeyAriaLabel: 'escape',
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-}

docs/.vitepress/config/shared.ts

@@ -1,100 +0,0 @@
-import { resolve } from 'pathe'
-import { defineConfig } from 'vitepress'
-import { groupIconMdPlugin } from 'vitepress-plugin-group-icons'
-
-export const sharedConfig = defineConfig({
-  title: 'TresJS',
-  description: 'Declarative ThreeJS using Vue Components',
-  head: [
-    ['link', { rel: 'icon', type: 'image/svg', href: '/favicon.svg' }],
-    ['meta', { name: 'theme-color', content: '#82DBC5' }],
-    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
-    ['meta', { name: 'twitter:site', content: '@tresjs_dev' }],
-    ['meta', { name: 'twitter:creator', content: '@tresjs_dev' }],
-    ['meta', { property: 'og:type', content: 'website' }],
-    ['meta', { property: 'og:site_name', content: 'TresJS' }],
-    [
-      'meta',
-      {
-        property: 'og:image',
-        content: 'https://repository-images.githubusercontent.com/571314349/10996566-7f70-473b-a8e5-4e56fc0ca850',
-      },
-    ],
-    [
-      'meta',
-      {
-        property: 'twitter:image',
-        content: 'https://repository-images.githubusercontent.com/571314349/10996566-7f70-473b-a8e5-4e56fc0ca850',
-      },
-    ],
-    ['script', { 'defer': 'true', 'data-domain': 'tresjs.org', 'src': 'https://plausible.io/js/script.js' }],
-  ],
-  themeConfig: {
-    logo: '/logo.svg',
-    search: {
-      provider: 'local',
-      options: {
-        locales: {
-          root: {
-            translations: {
-              button: {
-                buttonText: 'Search',
-                buttonAriaLabel: 'Search',
-              },
-              modal: {
-                displayDetails: 'Display detailed list',
-                resetButtonTitle: 'Reset search',
-                backButtonTitle: 'Close search',
-                noResultsText: 'No results for',
-                footer: {
-                  selectText: 'to select',
-                  selectKeyAriaLabel: 'enter',
-                  navigateText: 'to navigate',
-                  navigateUpKeyAriaLabel: 'up arrow',
-                  navigateDownKeyAriaLabel: 'down arrow',
-                  closeText: 'to close',
-                  closeKeyAriaLabel: 'escape',
-                },
-              },
-            },
-          },
-
-        },
-      },
-    },
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/tresjs/tres' },
-      { icon: 'x', link: 'https://twitter.com/tresjs_dev' },
-      { icon: 'discord', link: 'https://discord.gg/UCr96AQmWn' },
-    ],
-  },
-  vite: {
-    optimizeDeps: {
-      exclude: ['vitepress'],
-      include: ['@tresjs/cientos', '@stackblitz/sdk', '@vueuse/core', 'three'],
-    },
-    server: {
-      hmr: {
-        overlay: false,
-      },
-    },
-    resolve: {
-      alias: {
-        '@tresjs/core': resolve(__dirname, '../../../dist/tres.js'),
-      },
-      dedupe: ['@tresjs/cientos', 'three'],
-    },
-  },
-  vue: {
-    template: {
-      compilerOptions: {
-        isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
-      },
-    },
-  },
-  markdown: {
-    config: (md) => {
-      md.use(groupIconMdPlugin)
-    },
-  },
-})

docs/.vitepress/config/zh.ts

@@ -1,194 +0,0 @@
-import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
-
-export const zhConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
-  themeConfig: {
-    editLink: {
-      pattern: 'https://github.com/tresjs/tres/edit/main/docs/:path',
-      text: '对本页内容给出建议',
-    },
-    sidebar: [
-      {
-        text: '使用指南',
-        items: [
-          { text: '简介', link: '/zh/guide/' },
-          { text: '入门指南', link: '/zh/guide/getting-started' },
-          { text: '你的第一个场景', link: '/zh/guide/your-first-scene' },
-          { text: 'Nuxt', link: '/zh/guide/nuxt' },
-          { text: '故障排除', link: '/zh/guide/troubleshooting' },
-          { text: '从 v1 迁移', link: '/zh/guide/migration-guide' },
-        ],
-      },
-      {
-        text: 'API',
-        items: [
-          { text: 'TresCanvas', link: '/zh/api/tres-canvas' },
-          {
-            text: '实例, 参数和 props',
-            link: '/zh/api/instances-arguments-and-props',
-          },
-          {
-            text: '组合式函数',
-            link: '/zh/api/composables',
-          },
-          {
-            text: '事件',
-            link: '/zh/api/events',
-          },
-        ],
-      },
-
-      {
-        text: '进阶',
-
-        items: [
-          { text: '扩展', link: '/zh/advanced/extending' },
-          { text: '原语', link: '/zh/advanced/primitive' },
-          {
-            text: '注意事项',
-            link: '/zh/advanced/caveats',
-          },
-        ],
-      },
-      {
-        text: 'Debug',
-        items: [
-          { text: 'Devtools', link: '/zh/debug/devtools' },
-        ],
-      },
-      {
-        text: '专题手册 🍳🧑‍🍳',
-        link: '/zh/cookbook/',
-        items: [
-          { text: '轨道控制器', link: '/zh/cookbook/orbit-controls' },
-          { text: '基础动画', link: '/zh/cookbook/basic-animations' },
-          { text: '组', link: '/zh/cookbook/groups' },
-          { text: '加载纹理', link: '/zh/cookbook/load-textures' },
-          { text: '加载模型', link: '/zh/cookbook/load-models' },
-          { text: '加载文本', link: '/zh/cookbook/text-3d' },
-          { text: '光照和阴影', link: '/zh/cookbook/lights-shadows' },
-          { text: '着色器', link: '/zh/cookbook/shaders' },
-        ],
-      },
-      {
-        text: '指令',
-        collapsed: true,
-        items: [
-          { text: 'v-log', link: '/zh/directives/v-log' },
-          { text: 'v-light-helper', link: '/zh/directives/v-light-helper' },
-          { text: 'v-distance-to', link: '/zh/directives/v-distance-to' },
-        ],
-      },
-      {
-        text: '生态系统',
-        items: [
-          {
-            text: 'Cientos 💛',
-            link: 'https://cientos.tresjs.org/',
-          },
-          {
-            text: 'Nuxt module',
-            link: 'https://github.com/Tresjs/nuxt',
-          },
-          {
-            text: 'TresLeches 🍰',
-            link: 'https://tresleches.tresjs.org/',
-          },
-          {
-            text: 'Post-processing',
-            link: 'https://post-processing.tresjs.org/',
-          },
-        ],
-      },
-    ],
-    nav: [
-      { text: '使用指南', link: '/zh/guide/' },
-      { text: 'API', link: '/zh/api/tres-canvas' },
-      /*       { text: 'API', link: '/api/' },
-      { text: 'Config', link: '/config/' }, */
-      {
-        text: '资源',
-        items: [
-          { text: '团队', link: '/zh/team' },
-          { text: '版本发布', link: 'https://github.com/Tresjs/tres/releases' },
-          {
-            text: '演练场',
-            link: 'https://play.tresjs.org/',
-          },
-          {
-            text: 'Github',
-            link: 'https://github.com/Tresjs/tres/',
-          },
-          {
-            text: '议题',
-            link: 'https://github.com/Tresjs/tres/issues',
-          },
-          {
-            text: '贡献',
-            link: 'https://github.com/Tresjs/.github/blob/main/CONTRIBUTING.md',
-          },
-          {
-            text: '生态系统',
-            items: [
-              {
-                text: 'Cientos 💛',
-                link: 'https://cientos.tresjs.org/',
-              },
-              {
-                text: 'Nuxt 模块',
-                link: 'https://github.com/Tresjs/nuxt',
-              },
-              {
-                text: 'TresLeches 🍰',
-                link: 'https://tresleches.tresjs.org/',
-              },
-              {
-                text: 'Post-processing',
-                link: 'https://post-processing.tresjs.org/',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-    search: {
-      provider: 'local',
-      options: {
-        locales: {
-          zh: {
-            translations: {
-              button: {
-                buttonText: '搜索',
-                buttonAriaLabel: '搜索',
-              },
-              modal: {
-                displayDetails: '显示详细列表',
-                resetButtonTitle: '重制搜索',
-                backButtonTitle: '关闭搜索',
-                noResultsText: '没有找到相关结果',
-                footer: {
-                  selectText: '选择',
-                  selectKeyAriaLabel: 'enter',
-                  navigateText: '切换',
-                  navigateUpKeyAriaLabel: '上方向键',
-                  navigateDownKeyAriaLabel: '下方向键',
-                  closeText: '关闭',
-                  closeKeyAriaLabel: 'esc',
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-    darkModeSwitchLabel: '外观',
-    sidebarMenuLabel: '菜单',
-    returnToTopLabel: '返回顶部',
-    langMenuLabel: '更改语言',
-    lastUpdatedText: '最近更新',
-    outlineTitle: '此页面上',
-    docFooter: {
-      next: '下一页',
-      prev: '上一页',
-    },
-  },
-}

docs/.vitepress/theme/TresLayout.vue

@@ -1,18 +0,0 @@
-<script setup>
-import Theme from 'vitepress/theme'
-import HomeSponsors from './components/HomeSponsors.vue'
-import LoveVueThreeJS from './components/LoveVueThreeJS.vue'
-
-const { Layout } = Theme
-</script>
-
-<template>
-  <Layout>
-    <template #home-hero-image>
-      <LoveVueThreeJS />
-    </template>
-    <template #home-features-after>
-      <HomeSponsors />
-    </template>
-  </Layout>
-</template>

docs/.vitepress/theme/assets/blender-cube.svg

@@ -1,3 +0,0 @@
-<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C1.79086 0 0 1.79086 0 4V156C0 158.209 1.79086 160 4 160H156C158.209 160 160 158.209 160 156V4C160 1.79086 158.209 0 156 0H4ZM29 129C26.7909 129 25 130.791 25 133C25 135.209 26.7909 137 29 137H132C134.209 137 136 135.209 136 133C136 130.791 134.209 129 132 129H29ZM59 80C59 89.3888 51.3888 97 42 97C32.6112 97 25 89.3888 25 80C25 70.6112 32.6112 63 42 63C51.3888 63 59 70.6112 59 80ZM119 97C128.389 97 136 89.3888 136 80C136 70.6112 128.389 63 119 63C109.611 63 102 70.6112 102 80C102 89.3888 109.611 97 119 97Z" fill="#4F4F4F"/>
-</svg>

docs/.vitepress/theme/assets/cat.svg

@@ -1,5 +0,0 @@
-<svg width="173" height="186" viewBox="0 0 173 186" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24 26C14.0589 26 6 34.0589 6 44V182C6 184.209 7.79086 186 10 186H148C157.941 186 166 177.941 166 168V44C166 34.0589 157.941 26 148 26H24ZM82.5448 148.077C84.0883 150.723 87.9115 150.723 89.455 148.077L96.4909 136.015C98.0464 133.349 96.1229 130 93.0358 130H78.9641C75.8769 130 73.9534 133.349 75.5089 136.015L82.5448 148.077ZM115.5 132.402C114.672 130.967 115.163 129.132 116.598 128.304L133.919 118.304C135.353 117.475 137.188 117.967 138.017 119.402C138.845 120.837 138.353 122.672 136.919 123.5L119.598 133.5C118.163 134.328 116.328 133.837 115.5 132.402ZM54.9185 155.696C56.3534 154.868 56.845 153.033 56.0166 151.598C55.1882 150.163 53.3534 149.672 51.9185 150.5L34.598 160.5C33.1631 161.328 32.6715 163.163 33.4999 164.598C34.3284 166.033 36.1631 166.525 37.598 165.696L54.9185 155.696ZM114.5 149.402C115.328 147.967 117.163 147.475 118.598 148.304L135.919 158.304C137.353 159.132 137.845 160.967 137.017 162.402C136.188 163.837 134.353 164.328 132.919 163.5L115.598 153.5C114.163 152.672 113.672 150.837 114.5 149.402ZM52.9185 135.696C54.3534 136.525 56.1882 136.033 57.0166 134.598C57.845 133.163 57.3534 131.328 55.9185 130.5L38.598 120.5C37.1631 119.672 35.3284 120.163 34.4999 121.598C33.6715 123.033 34.1631 124.868 35.598 125.696L52.9185 135.696ZM45 73C43.8954 73 43 73.8954 43 75V82V82C43 82.5002 43.0333 83.0025 43.0111 83.5022C43.0037 83.6672 43 83.8332 43 84C43 90.0751 47.9249 95 54 95C60.0751 95 65 90.0751 65 84V75C65 73.8954 64.1046 73 63 73H54H45ZM107 75C107 73.8954 107.895 73 109 73H118H127C128.105 73 129 73.8954 129 75V84C129 90.0751 124.075 95 118 95C111.925 95 107 90.0751 107 84C107 83.8332 107.004 83.6672 107.011 83.5022C107.033 83.0025 107 82.5002 107 82V82V75Z" fill="#FBB03B"/>
-<path d="M24.4378 10.5C27.1321 5.83334 33.8679 5.83333 36.5622 10.5L50.8516 35.25C53.5459 39.9167 50.178 45.75 44.7894 45.75H16.2106C10.822 45.75 7.4541 39.9167 10.1484 35.25L24.4378 10.5Z" fill="#FBB03B"/>
-<path d="M136.438 10.5C139.132 5.83334 145.868 5.83333 148.562 10.5L162.852 35.25C165.546 39.9167 162.178 45.75 156.789 45.75H128.211C122.822 45.75 119.454 39.9167 122.148 35.25L136.438 10.5Z" fill="#FBB03B"/>
-</svg>

docs/.vitepress/theme/assets/cross.svg

@@ -1,4 +0,0 @@
-<svg width="156" height="157" viewBox="0 0 156 157" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M135.188 21L21.0002 135.187" stroke="#4F4F4F" stroke-width="41" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M135.435 136.092L21.2473 21.9043" stroke="#4F4F4F" stroke-width="41" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

docs/.vitepress/theme/assets/cube.svg

@@ -1,3 +0,0 @@
-<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="160" height="160" rx="4" fill="#4F4F4F"/>
-</svg>

docs/.vitepress/theme/assets/face.svg

@@ -1,3 +0,0 @@
-<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M80 160C124.183 160 160 124.183 160 80C160 35.8172 124.183 0 80 0C35.8172 0 0 35.8172 0 80C0 124.183 35.8172 160 80 160ZM94.8262 121C94.8262 123.209 93.0353 125 90.8262 125H69.174C66.9649 125 65.174 123.209 65.174 121V108.826V107.478H65.2344C65.9154 99.9217 72.2662 94 80.0001 94C87.734 94 94.0848 99.9217 94.7657 107.478H94.8262V108.826V121ZM100 75.5C100 73.0147 102.015 71 104.5 71H127.5C129.985 71 132 73.0147 132 75.5C132 77.9853 129.985 80 127.5 80H104.5C102.015 80 100 77.9853 100 75.5ZM44.5 87C52.5081 87 59 80.5081 59 72.5C59 64.4919 52.5081 58 44.5 58C36.4919 58 30 64.4919 30 72.5C30 80.5081 36.4919 87 44.5 87Z" fill="#4F4F4F"/>
-</svg>

docs/.vitepress/theme/assets/heart.svg

@@ -1,3 +0,0 @@
-<svg width="166" height="153" viewBox="0 0 166 153" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M82.9167 152.152L70.8938 141.207C28.1917 102.485 0 76.8638 0 45.6042C0 19.9829 20.0658 0 45.6042 0C60.0317 0 73.8788 6.71625 82.9167 17.2467C91.9546 6.71625 105.802 0 120.229 0C145.768 0 165.833 19.9829 165.833 45.6042C165.833 76.8638 137.642 102.485 94.9396 141.207L82.9167 152.152ZM69 65.5C69 71.299 64.299 76 58.5 76C52.701 76 48 71.299 48 65.5C48 59.701 52.701 55 58.5 55C64.299 55 69 59.701 69 65.5ZM108.5 76C114.299 76 119 71.299 119 65.5C119 59.701 114.299 55 108.5 55C102.701 55 98 59.701 98 65.5C98 71.299 102.701 76 108.5 76Z" fill="#FBB03B"/>
-</svg>

docs/.vitepress/theme/assets/play.svg

@@ -1,3 +0,0 @@
-<svg width="160" height="192" viewBox="0 0 160 192" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M154.283 92.5706C156.873 94.1243 156.873 97.877 154.283 99.4306L6.05799 188.366C3.39189 189.965 1.05032e-06 188.045 1.01325e-06 184.936L-1.10784e-06 7.06538C-1.14492e-06 3.95621 3.39188 2.03576 6.05798 3.63542L154.283 92.5706Z" fill="#FBB03B"/>
-</svg>

docs/.vitepress/theme/assets/second-row copy.svg

@@ -1,128 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="107" height="1293" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round">
-  <g id="shape-cecb00c8-e6c7-8042-8001-e06443884b22">
-    <g id="square">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0644388c4e0">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e06443897ed5">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e0644389ad4a">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e0644389ad4a" d="M100 1204a4 4 0 0 0-4.001-4H11.001A4 4 0 0 0 7 1204v85a4 4 0 0 0 4.001 4h84.998a4 4 0 0 0 4.001-4v-85Z" style="fill:#4f4f4f"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="lightning">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0644389d68c">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e0644389d68d">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438a6859">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438a6859" d="m59.794 1050.84-26.61 48.82a1.49 1.49 0 0 0 .045 1.51c.142.23.342.42.582.55.24.13.511.2.786.2h12.316c.233 0 .464.05.675.14.212.1.4.24.55.41.305.34.435.81.351 1.26l-6.771 37.46c-.049.27-.022.55.078.8.099.26.269.49.49.66.455.36 1.062.45 1.601.24.346-.14.634-.39.812-.7l29.11-51.73c.382-.69.175-1.55-.477-1.99l-.64-.46a1.725 1.725 0 0 0-.96-.29l-13.198.27c-.235 0-.47-.05-.684-.14a1.46 1.46 0 0 1-.558-.41 1.488 1.488 0 0 1-.357-1.27l6.222-34.04c.048-.26.025-.53-.067-.79-.093-.25-.25-.47-.455-.65l-.356-.3a1.86 1.86 0 0 0-.634-.34 1.764 1.764 0 0 0-.723-.03c-.24.05-.467.14-.662.29a1.55 1.55 0 0 0-.466.53Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="wheel">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438a685b">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438aa039">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438b75df">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438b75df" d="m5.774 941.685 9.784.482a38.556 38.556 0 0 1 4.863-14.948 38.22 38.22 0 0 1 10.41-11.717l-5.345-8.278c-1.289-2.311-.621-5.247 1.766-6.594 2.385-1.3 5.201-.53 6.538 1.78l4.438 8.76a38.38 38.38 0 0 1 30.545 0l4.439-8.76c1.335-2.31 4.151-3.08 6.538-1.78 2.386 1.347 3.054 4.283 1.766 6.594l-5.345 8.278a38.204 38.204 0 0 1 10.409 11.717 38.54 38.54 0 0 1 4.863 14.948l9.783-.482c1.266 0 2.48.507 3.376 1.41a4.842 4.842 0 0 1 0 6.807 4.754 4.754 0 0 1-3.376 1.41l-9.783-.482a38.522 38.522 0 0 1-4.863 14.948 38.267 38.267 0 0 1-10.409 11.721l5.345 8.27c1.288 2.311.62 5.251-1.766 6.601-2.387 1.3-5.203.53-6.538-1.78l-4.439-8.761a38.41 38.41 0 0 1-15.273 3.17 38.409 38.409 0 0 1-15.272-3.17l-4.438 8.761c-1.337 2.31-4.153 3.08-6.538 1.78-2.387-1.35-3.055-4.29-1.766-6.601l5.345-8.27a38.259 38.259 0 0 1-10.41-11.721 38.54 38.54 0 0 1-4.863-14.948l-9.784.482a4.752 4.752 0 0 1-3.375-1.41 4.84 4.84 0 0 1 0-6.807 4.752 4.752 0 0 1 3.375-1.41Zm33.742 1.685c.622-2.936 2.196-5.535 4.44-7.509l-7.923-12.225a28.895 28.895 0 0 0-10.929 19.012l14.412.722ZM53.5 932.059c1.528 0 2.96.241 4.296.674l6.586-12.947A28.138 28.138 0 0 0 53.5 917.62c-3.866 0-7.541.77-10.881 2.166l6.586 12.947a13.86 13.86 0 0 1 4.295-.674Zm13.984 11.311 14.413-.722a28.891 28.891 0 0 0-10.929-19.012l-7.922 12.225c2.243 1.974 3.818 4.573 4.438 7.509Zm0 6.257c-.62 2.936-2.195 5.535-4.438 7.509l7.922 12.225a28.891 28.891 0 0 0 10.929-19.012l-14.413-.722ZM53.5 960.938a14.39 14.39 0 0 1-4.342-.674l-6.539 12.944a28.06 28.06 0 0 0 10.881 2.17c3.866 0 7.541-.77 10.882-2.17l-6.539-12.944a14.386 14.386 0 0 1-4.343.674Zm-13.984-11.311-14.412.722c1.05 7.701 5.058 14.487 10.929 19.012l7.923-12.225c-2.244-1.974-3.818-4.573-4.44-7.509Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="umbrella">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438bac38">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438bac39">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438bac3a">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438c0cc1">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438c0cc1" d="M86.379 766.938A46.14 46.14 0 0 0 58.08 753.54a1.686 1.686 0 0 1-1.429-1.167 3.28 3.28 0 0 0-6.302 0 1.68 1.68 0 0 1-1.429 1.167C25.166 755.891 7.049 775.848 7 799.72a3.4 3.4 0 0 0 1.504 2.879 3.317 3.317 0 0 0 4.166-.431c4.201-4.202 11.01-4.208 15.218-.013a3.312 3.312 0 0 0 4.692.031 12.99 12.99 0 0 1 16.916-1.218c.429.323.682.83.683 1.368v30.603c0 1.786-1.371 3.322-3.154 3.414a3.305 3.305 0 0 1-1.321-.203 3.31 3.31 0 0 1-1.899-1.805 3.33 3.33 0 0 1-.269-1.31 3.324 3.324 0 0 0-3.382-3.321c-1.868.033-3.3 1.683-3.259 3.549A9.978 9.978 0 0 0 46.728 843c5.581.07 10.093-4.553 10.093-10.133v-30.531c0-.538.253-1.045.684-1.368a12.991 12.991 0 0 1 16.897 1.2 3.323 3.323 0 0 0 4.695 0c4.208-4.204 11.025-4.204 15.233 0a3.322 3.322 0 0 0 4.056.5 3.41 3.41 0 0 0 1.614-2.95 46.207 46.207 0 0 0-13.621-32.78Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-            </g>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="zombie">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438c7f12">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438c7f13">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438cadb5">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438cadb5" d="M53.5 693c25.681 0 46.5-20.819 46.5-46.5S79.181 600 53.5 600 7 620.819 7 646.5 27.819 693 53.5 693Zm8.618-24.344a4 4 0 0 1-4 4h-9.235a4 4 0 0 1-4-4v-6.185h.035a8.618 8.618 0 0 1 17.164 0h.036v6.185Zm3.006-26.657a4.5 4.5 0 0 1 4.501-4.5h9.599a4.5 4.5 0 1 1 0 9.001h-9.599a4.5 4.5 0 0 1-4.501-4.501Zm-32.259 8.57a8.428 8.428 0 1 0 0-16.857 8.428 8.428 0 0 0 0 16.857Z" style="fill:#4f4f4f"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="cross">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce13d">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce13e">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce13f">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce140">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438ce140" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-        </g>
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb1">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb2">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb3">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438d1bb3" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb4">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb5">
-              <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb6">
-                <path id="fills-cecb00c8-e6c7-8042-8001-e064438d1bb6" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero"/>
-                <path id="strokes-cecb00c8-e6c7-8042-8001-e064438d1bb6" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero;stroke:#4f4f4f;stroke-width:41px"/>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475c">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475d">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475e">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475f">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438d475f" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-        </g>
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438d4760">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac3d">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac3e">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438dac3e" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac3f">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac40">
-              <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac41">
-                <path id="fills-cecb00c8-e6c7-8042-8001-e064438dac41" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero"/>
-                <path id="strokes-cecb00c8-e6c7-8042-8001-e064438dac41" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero;stroke:#4f4f4f;stroke-width:41px"/>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="skull">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438de3a4">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438de3a5">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438e1fc0">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438e1fc0" d="M81.4 374.401v13.949a4.651 4.651 0 0 1-4.65 4.65h-46.5a4.651 4.651 0 0 1-4.65-4.65v-13.949H11.65A4.651 4.651 0 0 1 7 369.75V346.5C7 320.819 27.818 300 53.5 300s46.5 20.819 46.5 46.5v23.25a4.652 4.652 0 0 1-4.65 4.651H81.4ZM32.575 355.8a6.966 6.966 0 0 0 4.932-2.043 6.972 6.972 0 0 0 0-9.863 6.972 6.972 0 0 0-4.932-2.044 6.976 6.976 0 0 0 0 13.95Zm41.85 0a6.983 6.983 0 0 0 6.445-4.305 6.983 6.983 0 0 0-1.513-7.601 6.975 6.975 0 1 0-4.932 11.906Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="triangle">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438e1fc2">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438e1fc3">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438e5256">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438e5256" d="M50.085 151.938c1.547-2.584 5.283-2.584 6.83 0l21.644 36.148 26.867 44.87c1.593 2.66-.319 6.044-3.415 6.044H4.989c-3.096 0-5.008-3.384-3.415-6.044l48.511-81.018Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="robot">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438e808a">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438e808b">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438ec86f">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438ec86f" d="M11.001 0A4 4 0 0 0 7 4.001v84.998A4 4 0 0 0 11.001 93h84.998A4 4 0 0 0 100 88.999V4.001A4 4 0 0 0 95.999 0H11.001Zm14.53 71.63a4 4 0 0 0 0 8.001H82.05a4 4 0 0 0 0-8.001H25.531ZM41.293 46.5c0 5.457-4.423 9.881-9.881 9.881-5.457 0-9.881-4.424-9.881-9.881 0-5.458 4.424-9.881 9.881-9.881a9.88 9.88 0 0 1 9.881 9.881Zm34.876 9.881c5.457 0 9.881-4.424 9.881-9.881 0-5.458-4.424-9.881-9.881-9.881a9.88 9.88 0 0 0-9.881 9.881c0 5.457 4.423 9.881 9.881 9.881Z" style="fill:#4f4f4f"/>
-          </g>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>

docs/.vitepress/theme/assets/second-row.svg

@@ -1,128 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="107" height="1293" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round">
-  <g id="shape-cecb00c8-e6c7-8042-8001-e06443884b22">
-    <g id="square">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0644388c4e0">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e06443897ed5">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e0644389ad4a">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e0644389ad4a" d="M100 1204a4 4 0 0 0-4.001-4H11.001A4 4 0 0 0 7 1204v85a4 4 0 0 0 4.001 4h84.998a4 4 0 0 0 4.001-4v-85Z" style="fill:#4f4f4f"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="lightning">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0644389d68c">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e0644389d68d">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438a6859">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438a6859" d="m59.794 1050.84-26.61 48.82a1.49 1.49 0 0 0 .045 1.51c.142.23.342.42.582.55.24.13.511.2.786.2h12.316c.233 0 .464.05.675.14.212.1.4.24.55.41.305.34.435.81.351 1.26l-6.771 37.46c-.049.27-.022.55.078.8.099.26.269.49.49.66.455.36 1.062.45 1.601.24.346-.14.634-.39.812-.7l29.11-51.73c.382-.69.175-1.55-.477-1.99l-.64-.46a1.725 1.725 0 0 0-.96-.29l-13.198.27c-.235 0-.47-.05-.684-.14a1.46 1.46 0 0 1-.558-.41 1.488 1.488 0 0 1-.357-1.27l6.222-34.04c.048-.26.025-.53-.067-.79-.093-.25-.25-.47-.455-.65l-.356-.3a1.86 1.86 0 0 0-.634-.34 1.764 1.764 0 0 0-.723-.03c-.24.05-.467.14-.662.29a1.55 1.55 0 0 0-.466.53Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="wheel">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438a685b">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438aa039">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438b75df">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438b75df" d="m5.774 941.685 9.784.482a38.556 38.556 0 0 1 4.863-14.948 38.22 38.22 0 0 1 10.41-11.717l-5.345-8.278c-1.289-2.311-.621-5.247 1.766-6.594 2.385-1.3 5.201-.53 6.538 1.78l4.438 8.76a38.38 38.38 0 0 1 30.545 0l4.439-8.76c1.335-2.31 4.151-3.08 6.538-1.78 2.386 1.347 3.054 4.283 1.766 6.594l-5.345 8.278a38.204 38.204 0 0 1 10.409 11.717 38.54 38.54 0 0 1 4.863 14.948l9.783-.482c1.266 0 2.48.507 3.376 1.41a4.842 4.842 0 0 1 0 6.807 4.754 4.754 0 0 1-3.376 1.41l-9.783-.482a38.522 38.522 0 0 1-4.863 14.948 38.267 38.267 0 0 1-10.409 11.721l5.345 8.27c1.288 2.311.62 5.251-1.766 6.601-2.387 1.3-5.203.53-6.538-1.78l-4.439-8.761a38.41 38.41 0 0 1-15.273 3.17 38.409 38.409 0 0 1-15.272-3.17l-4.438 8.761c-1.337 2.31-4.153 3.08-6.538 1.78-2.387-1.35-3.055-4.29-1.766-6.601l5.345-8.27a38.259 38.259 0 0 1-10.41-11.721 38.54 38.54 0 0 1-4.863-14.948l-9.784.482a4.752 4.752 0 0 1-3.375-1.41 4.84 4.84 0 0 1 0-6.807 4.752 4.752 0 0 1 3.375-1.41Zm33.742 1.685c.622-2.936 2.196-5.535 4.44-7.509l-7.923-12.225a28.895 28.895 0 0 0-10.929 19.012l14.412.722ZM53.5 932.059c1.528 0 2.96.241 4.296.674l6.586-12.947A28.138 28.138 0 0 0 53.5 917.62c-3.866 0-7.541.77-10.881 2.166l6.586 12.947a13.86 13.86 0 0 1 4.295-.674Zm13.984 11.311 14.413-.722a28.891 28.891 0 0 0-10.929-19.012l-7.922 12.225c2.243 1.974 3.818 4.573 4.438 7.509Zm0 6.257c-.62 2.936-2.195 5.535-4.438 7.509l7.922 12.225a28.891 28.891 0 0 0 10.929-19.012l-14.413-.722ZM53.5 960.938a14.39 14.39 0 0 1-4.342-.674l-6.539 12.944a28.06 28.06 0 0 0 10.881 2.17c3.866 0 7.541-.77 10.882-2.17l-6.539-12.944a14.386 14.386 0 0 1-4.343.674Zm-13.984-11.311-14.412.722c1.05 7.701 5.058 14.487 10.929 19.012l7.923-12.225c-2.244-1.974-3.818-4.573-4.44-7.509Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="umbrella">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438bac38">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438bac39">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438bac3a">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438c0cc1">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438c0cc1" d="M86.379 766.938A46.14 46.14 0 0 0 58.08 753.54a1.686 1.686 0 0 1-1.429-1.167 3.28 3.28 0 0 0-6.302 0 1.68 1.68 0 0 1-1.429 1.167C25.166 755.891 7.049 775.848 7 799.72a3.4 3.4 0 0 0 1.504 2.879 3.317 3.317 0 0 0 4.166-.431c4.201-4.202 11.01-4.208 15.218-.013a3.312 3.312 0 0 0 4.692.031 12.99 12.99 0 0 1 16.916-1.218c.429.323.682.83.683 1.368v30.603c0 1.786-1.371 3.322-3.154 3.414a3.305 3.305 0 0 1-1.321-.203 3.31 3.31 0 0 1-1.899-1.805 3.33 3.33 0 0 1-.269-1.31 3.324 3.324 0 0 0-3.382-3.321c-1.868.033-3.3 1.683-3.259 3.549A9.978 9.978 0 0 0 46.728 843c5.581.07 10.093-4.553 10.093-10.133v-30.531c0-.538.253-1.045.684-1.368a12.991 12.991 0 0 1 16.897 1.2 3.323 3.323 0 0 0 4.695 0c4.208-4.204 11.025-4.204 15.233 0a3.322 3.322 0 0 0 4.056.5 3.41 3.41 0 0 0 1.614-2.95 46.207 46.207 0 0 0-13.621-32.78Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-            </g>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="zombie">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438c7f12">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438c7f13">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438cadb5">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438cadb5" d="M53.5 693c25.681 0 46.5-20.819 46.5-46.5S79.181 600 53.5 600 7 620.819 7 646.5 27.819 693 53.5 693Zm8.618-24.344a4 4 0 0 1-4 4h-9.235a4 4 0 0 1-4-4v-6.185h.035a8.618 8.618 0 0 1 17.164 0h.036v6.185Zm3.006-26.657a4.5 4.5 0 0 1 4.501-4.5h9.599a4.5 4.5 0 1 1 0 9.001h-9.599a4.5 4.5 0 0 1-4.501-4.501Zm-32.259 8.57a8.428 8.428 0 1 0 0-16.857 8.428 8.428 0 0 0 0 16.857Z" style="fill:#4f4f4f"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="cross">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce13d">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce13e">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce13f">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce140">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438ce140" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-        </g>
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb1">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb2">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb3">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438d1bb3" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb4">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb5">
-              <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb6">
-                <path id="fills-cecb00c8-e6c7-8042-8001-e064438d1bb6" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero"/>
-                <path id="strokes-cecb00c8-e6c7-8042-8001-e064438d1bb6" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero;stroke:#4f4f4f;stroke-width:41px"/>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475c">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475d">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475e">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475f">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438d475f" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-        </g>
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438d4760">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac3d">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac3e">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438dac3e" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac3f">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac40">
-              <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac41">
-                <path id="fills-cecb00c8-e6c7-8042-8001-e064438dac41" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero"/>
-                <path id="strokes-cecb00c8-e6c7-8042-8001-e064438dac41" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero;stroke:#4f4f4f;stroke-width:41px"/>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="skull">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438de3a4">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438de3a5">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438e1fc0">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438e1fc0" d="M81.4 374.401v13.949a4.651 4.651 0 0 1-4.65 4.65h-46.5a4.651 4.651 0 0 1-4.65-4.65v-13.949H11.65A4.651 4.651 0 0 1 7 369.75V346.5C7 320.819 27.818 300 53.5 300s46.5 20.819 46.5 46.5v23.25a4.652 4.652 0 0 1-4.65 4.651H81.4ZM32.575 355.8a6.966 6.966 0 0 0 4.932-2.043 6.972 6.972 0 0 0 0-9.863 6.972 6.972 0 0 0-4.932-2.044 6.976 6.976 0 0 0 0 13.95Zm41.85 0a6.983 6.983 0 0 0 6.445-4.305 6.983 6.983 0 0 0-1.513-7.601 6.975 6.975 0 1 0-4.932 11.906Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="triangle">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438e1fc2">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438e1fc3">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438e5256">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438e5256" d="M50.085 151.938c1.547-2.584 5.283-2.584 6.83 0l21.644 36.148 26.867 44.87c1.593 2.66-.319 6.044-3.415 6.044H4.989c-3.096 0-5.008-3.384-3.415-6.044l48.511-81.018Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="robot">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438e808a">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438e808b">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438ec86f">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438ec86f" d="M11.001 0A4 4 0 0 0 7 4.001v84.998A4 4 0 0 0 11.001 93h84.998A4 4 0 0 0 100 88.999V4.001A4 4 0 0 0 95.999 0H11.001Zm14.53 71.63a4 4 0 0 0 0 8.001H82.05a4 4 0 0 0 0-8.001H25.531ZM41.293 46.5c0 5.457-4.423 9.881-9.881 9.881-5.457 0-9.881-4.424-9.881-9.881 0-5.458 4.424-9.881 9.881-9.881a9.88 9.88 0 0 1 9.881 9.881Zm34.876 9.881c5.457 0 9.881-4.424 9.881-9.881 0-5.458-4.424-9.881-9.881-9.881a9.88 9.88 0 0 0-9.881 9.881c0 5.457 4.423 9.881 9.881 9.881Z" style="fill:#4f4f4f"/>
-          </g>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>

docs/.vitepress/theme/assets/skull.svg

@@ -1,3 +0,0 @@
-<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M128 128V152C128 154.122 127.157 156.157 125.657 157.657C124.157 159.157 122.122 160 120 160H40C37.8783 160 35.8434 159.157 34.3431 157.657C32.8429 156.157 32 154.122 32 152V128H8C5.87827 128 3.84344 127.157 2.34315 125.657C0.842854 124.157 0 122.122 0 120V80C0 35.816 35.816 0 80 0C124.184 0 160 35.816 160 80V120C160 122.122 159.157 124.157 157.657 125.657C156.157 127.157 154.122 128 152 128H128ZM44 96C45.5759 96 47.1363 95.6896 48.5922 95.0866C50.0481 94.4835 51.371 93.5996 52.4853 92.4853C53.5996 91.371 54.4835 90.0481 55.0866 88.5922C55.6896 87.1363 56 85.5759 56 84C56 82.4241 55.6896 80.8637 55.0866 79.4078C54.4835 77.9519 53.5996 76.629 52.4853 75.5147C51.371 74.4004 50.0481 73.5165 48.5922 72.9134C47.1363 72.3104 45.5759 72 44 72C40.8174 72 37.7652 73.2643 35.5147 75.5147C33.2643 77.7652 32 80.8174 32 84C32 87.1826 33.2643 90.2348 35.5147 92.4853C37.7652 94.7357 40.8174 96 44 96V96ZM116 96C117.576 96 119.136 95.6896 120.592 95.0866C122.048 94.4835 123.371 93.5996 124.485 92.4853C125.6 91.371 126.483 90.0481 127.087 88.5922C127.69 87.1363 128 85.5759 128 84C128 82.4241 127.69 80.8637 127.087 79.4078C126.483 77.9519 125.6 76.629 124.485 75.5147C123.371 74.4004 122.048 73.5165 120.592 72.9134C119.136 72.3104 117.576 72 116 72C112.817 72 109.765 73.2643 107.515 75.5147C105.264 77.7652 104 80.8174 104 84C104 87.1826 105.264 90.2348 107.515 92.4853C109.765 94.7357 112.817 96 116 96V96Z" fill="#4F4F4F"/>
-</svg>

docs/.vitepress/theme/assets/spark.svg

@@ -1,3 +0,0 @@
-<svg width="71" height="160" viewBox="0 0 71 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M46.0487 1.44933L0.31669 85.4277C0.0961505 85.8324 -0.0125389 86.2853 0.00115029 86.7425C0.0148395 87.1997 0.150442 87.6457 0.394826 88.0374C0.63921 88.4291 0.984097 88.7532 1.39609 88.9783C1.80809 89.2034 2.27323 89.3218 2.74649 89.3222H23.9111C24.3123 89.3218 24.7087 89.4064 25.0725 89.5698C25.4363 89.7333 25.7586 89.9718 26.0169 90.2685C26.2752 90.5652 26.4631 90.913 26.5675 91.2873C26.6719 91.6617 26.6903 92.0536 26.6213 92.4356L14.9835 156.888C14.8997 157.354 14.946 157.833 15.1177 158.276C15.2893 158.718 15.5801 159.109 15.9599 159.407C16.3397 159.704 16.7949 159.899 17.2785 159.97C17.762 160.041 18.2564 159.986 18.7107 159.811C19.3069 159.58 19.8009 159.155 20.107 158.61L70.1324 69.6054C70.4531 69.0353 70.5469 68.3715 70.396 67.7392C70.2451 67.1069 69.86 66.5498 69.3133 66.1731L68.2138 65.3921C67.7322 65.0625 67.1547 64.8895 66.5646 64.898L43.8828 65.3496C43.4778 65.3556 43.0765 65.275 42.7075 65.1136C42.3385 64.9522 42.011 64.714 41.7483 64.416C41.4857 64.118 41.2944 63.7676 41.1883 63.3898C41.0821 63.0121 41.0636 62.6163 41.1341 62.2308L51.8264 3.66488C51.9095 3.21417 51.8706 2.75035 51.7136 2.31841C51.5566 1.88648 51.2868 1.50108 50.9303 1.19962L50.3201 0.66831C50.006 0.399316 49.6324 0.203403 49.2278 0.0955845C48.8233 -0.0122335 48.3985 -0.0290945 47.9862 0.0463015C47.5739 0.121697 47.1849 0.287347 46.849 0.530547C46.5132 0.773746 46.2394 1.08804 46.0487 1.44933V1.44933Z" fill="#4F4F4F"/>
-</svg>

docs/.vitepress/theme/assets/third-row copy.svg

@@ -1,80 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="screenshot-cecb00c8-e6c7-8042-8001-e0554a46bb12" width="105.468" height="1892.988" fill="none" style="-webkit-print-color-adjust:exact" version="1.1">
-  <g id="shape-cecb00c8-e6c7-8042-8001-e0554a46bb12" style="fill:#000">
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a48036c">
-      <circle id="fills-cecb00c8-e6c7-8042-8001-e0554a48036c" cx="52.734" cy="1846.494" r="46.494" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0568ca17794">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0568ca17795">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0568ca17795" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1670-50 50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0568ca17795" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1670-50 50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0568ca17796">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0568ca17796" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1720-50-50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0568ca17796" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1720-50-50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0567f9fe93c">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0567f9fe93c" d="M90.993 1544.41c2.322 1.4 2.322 4.78 0 6.179l-72.826 43.892c-2.391 1.441-5.433-.288-5.433-3.09v-87.783c0-2.8 3.042-4.53 5.433-3.089l72.826 43.891Z" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0567b140126">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0567b140126" fill-rule="evenodd" d="m52.734 1438.427-6.987-6.361c-24.818-22.505-41.202-37.395-41.202-55.562 0-14.891 11.662-26.504 26.504-26.504 8.385 0 16.433 3.903 21.685 10.023 5.253-6.12 13.3-10.023 21.685-10.023 14.842 0 26.504 11.613 26.504 26.504 0 18.167-16.384 33.057-41.201 55.562l-6.988 6.361Zm-8.088-50.36a6.102 6.102 0 1 1-12.204 0 6.102 6.102 0 0 1 12.204 0Zm22.957 6.102a6.102 6.102 0 1 0 0-12.204 6.102 6.102 0 0 0 0 12.204Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74c">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74d">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e05675c7d74d" d="M17.109 1203.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H19.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74e">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e05675c7d74e" d="M78.109 1203.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H80.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74f">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e05675c7d74f" fill-rule="evenodd" d="M26.075 1208c-9.301 0-16.841 7.54-16.841 16.841v66.417a3.743 3.743 0 0 0 3.743 3.742h66.416c9.301 0 16.841-7.54 16.841-16.841v-53.318c0-9.301-7.54-16.841-16.841-16.841H26.075Zm23.426 64.058c1.445 2.476 5.022 2.476 6.466 0l1.096-1.881c1.456-2.494-.344-5.627-3.232-5.627h-2.194c-2.888 0-4.688 3.133-3.232 5.627l1.096 1.881Zm18.686-7.22a2.807 2.807 0 0 1 1.027-3.834l7.382-4.263a2.808 2.808 0 0 1 2.807 4.863l-7.382 4.261a2.806 2.806 0 0 1-3.834-1.027Zm-32.196 16.308a2.806 2.806 0 1 0-2.807-4.862l-7.382 4.263a2.807 2.807 0 1 0 2.807 4.861l7.382-4.262Zm32.828-7.064a2.806 2.806 0 0 1 3.834-1.028l7.382 4.262a2.807 2.807 0 0 1-2.807 4.862l-7.382-4.262a2.807 2.807 0 0 1-1.027-3.834Zm-36.267-4.987a2.807 2.807 0 1 0 2.807-4.861l-7.382-4.262a2.807 2.807 0 0 0-2.806 4.861l7.381 4.262Zm-1.328-35.539a1.87 1.87 0 0 0-1.871 1.871v1.455c0 .777.048 1.567.008 2.342a5.981 5.981 0 1 0 11.95.091c-.007-.186.004-.375.004-.562v-3.326a1.87 1.87 0 0 0-1.871-1.871h-8.22Zm32.929 1.871a1.87 1.87 0 0 1 1.871-1.871h8.22a1.87 1.87 0 0 1 1.871 1.871v3.326c0 .187-.011.376-.004.562a5.981 5.981 0 1 1-11.95-.091c.04-.775-.008-1.565-.008-2.342v-1.455Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4aeab2" clip-path="url(#01eb2006-bdb3-80d7-8001-e05f4ced6213-clip0_330_90)" style="fill:#000">
-      <defs>
-        <clipPath id="01eb2006-bdb3-80d7-8001-e05f4ced6213-clip0_330_90" class="svg-def" transform="translate(-4.859 -50.74)">
-          <path fill="#fff" d="M11.1 1100.74h92.987v92.987H11.1z"/>
-        </clipPath>
-      </defs>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4b502b">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4b502b" d="M85.61 1066.94a46.111 46.111 0 0 0-28.297-13.39 1.795 1.795 0 0 1-.889-.37 1.716 1.716 0 0 1-.539-.8 3.316 3.316 0 0 0-1.178-1.72 3.335 3.335 0 0 0-1.973-.66c-.712 0-1.404.24-1.973.66a3.316 3.316 0 0 0-1.178 1.72c-.098.31-.286.59-.539.8-.254.2-.563.33-.889.37a46.47 46.47 0 0 0-29.846 15.01 46.51 46.51 0 0 0-12.069 31.16 3.423 3.423 0 0 0 1.503 2.88c.639.41 1.401.6 2.16.52a3.375 3.375 0 0 0 2.006-.95 10.755 10.755 0 0 1 7.606-3.16c2.852 0 5.589 1.13 7.61 3.14.306.31.669.56 1.071.73.401.17.832.26 1.268.26.436.01.868-.08 1.272-.24.403-.17.771-.41 1.08-.72a13.053 13.053 0 0 1 8.231-3.75c3.104-.22 6.185.68 8.683 2.54.212.15.384.36.503.6.118.24.18.5.18.76v30.6c0 1.79-1.37 3.32-3.153 3.41-.449.03-.899-.04-1.321-.2-.423-.15-.809-.4-1.135-.71a3.34 3.34 0 0 1-.764-1.09 3.356 3.356 0 0 1-.269-1.31c0-.44-.088-.88-.258-1.29-.171-.4-.421-.77-.736-1.08a3.27 3.27 0 0 0-2.387-.95c-1.868.03-3.3 1.68-3.259 3.55a9.963 9.963 0 0 0 2.954 6.84 9.977 9.977 0 0 0 6.878 2.89c5.58.07 10.092-4.55 10.092-10.13v-30.53c0-.26.062-.52.18-.76.119-.24.291-.45.503-.6a12.964 12.964 0 0 1 16.895 1.2 3.33 3.33 0 0 0 4.695 0 10.778 10.778 0 0 1 7.616-3.16c2.856 0 5.595 1.14 7.615 3.16a3.33 3.33 0 0 0 1.942.94c.735.09 1.479-.06 2.114-.44.501-.31.913-.75 1.196-1.27.282-.51.426-1.1.417-1.68a46.206 46.206 0 0 0-13.618-32.78Z" style="fill:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a47ea14">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a47ea14" d="M90.993 944.41c2.322 1.4 2.322 4.78 0 6.179l-72.826 43.892c-2.391 1.441-5.433-.288-5.433-3.09v-87.783c0-2.8 3.042-4.53 5.433-3.089l72.826 43.891Z" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4aeab1">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4aeab1" fill-rule="evenodd" d="m52.734 838.427-6.987-6.361c-24.818-22.505-41.202-37.395-41.202-55.562C4.545 761.613 16.207 750 31.049 750c8.385 0 16.433 3.903 21.685 10.023 5.253-6.12 13.3-10.023 21.685-10.023 14.842 0 26.504 11.613 26.504 26.504 0 18.167-16.384 33.057-41.201 55.562l-6.988 6.361Zm-8.088-50.36a6.102 6.102 0 1 1-12.204 0 6.102 6.102 0 0 1 12.204 0Zm22.957 6.102a6.102 6.102 0 1 0 0-12.204 6.102 6.102 0 0 0 0 12.204Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e055d85aedd9">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4a4555">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4a4555" d="M17.109 603.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H19.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4ab72e">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4ab72e" d="M78.109 603.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H80.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4a4554">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4a4554" fill-rule="evenodd" d="M26.075 608c-9.301 0-16.841 7.54-16.841 16.841v66.417A3.743 3.743 0 0 0 12.977 695h66.416c9.301 0 16.841-7.54 16.841-16.841v-53.318c0-9.301-7.54-16.841-16.841-16.841H26.075Zm23.426 64.058c1.445 2.476 5.022 2.476 6.466 0l1.096-1.881c1.456-2.494-.344-5.627-3.232-5.627h-2.194c-2.888 0-4.688 3.133-3.232 5.627l1.096 1.881Zm18.686-7.22a2.807 2.807 0 0 1 1.027-3.834l7.382-4.263a2.808 2.808 0 0 1 2.807 4.863l-7.382 4.261a2.806 2.806 0 0 1-3.834-1.027Zm-32.196 16.308a2.806 2.806 0 1 0-2.807-4.862l-7.382 4.263a2.807 2.807 0 1 0 2.807 4.861l7.382-4.262Zm32.828-7.064a2.806 2.806 0 0 1 3.834-1.028l7.382 4.262a2.807 2.807 0 0 1-2.807 4.862l-7.382-4.262a2.807 2.807 0 0 1-1.027-3.834Zm-36.267-4.987a2.807 2.807 0 1 0 2.807-4.861l-7.382-4.262a2.807 2.807 0 0 0-2.806 4.861l7.381 4.262Zm-1.328-35.539a1.87 1.87 0 0 0-1.871 1.871v1.455c0 .777.048 1.567.008 2.342a5.981 5.981 0 1 0 11.95.091c-.007-.186.004-.375.004-.562v-3.326a1.87 1.87 0 0 0-1.871-1.871h-8.22Zm32.929 1.871a1.87 1.87 0 0 1 1.871-1.871h8.22a1.87 1.87 0 0 1 1.871 1.871v3.326c0 .187-.011.376-.004.562a5.981 5.981 0 1 1-11.95-.091c.04-.775-.008-1.565-.008-2.342v-1.455Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a49a0ca">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a49a0ca" fill-rule="evenodd" d="M49.304 451.942c1.554-2.589 5.307-2.589 6.86 0l48.729 81.213c1.599 2.666-.321 6.058-3.43 6.058H4.006c-3.109 0-5.029-3.392-3.43-6.058l48.728-81.213Zm12.147 40.777a8.718 8.718 0 1 1-17.435 0 8.718 8.718 0 0 1 17.435 0Zm-22.084 21.76a2 2 0 0 1 2-2H63.52a2 2 0 0 1 2 2v8.205c0 .258-.049.504-.138.731.091.414.138.838.138 1.269 0 4.815-5.855 8.718-13.077 8.718-7.222 0-13.076-3.903-13.076-8.718 0-.431.047-.855.137-1.27a2.007 2.007 0 0 1-.137-.73v-8.205Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e055877aa3c7">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a492a2b">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a492a2b" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 320-50 50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0554a492a2b" stroke-linecap="round" stroke-linejoin="round" d="m77.734 320-50 50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a497e94">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a497e94" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 370-50-50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0554a497e94" stroke-linecap="round" stroke-linejoin="round" d="m77.734 370-50-50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a48e83e">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a48e83e" d="m59.02 150.843-26.578 48.806a1.502 1.502 0 0 0 .045 1.516c.142.228.343.416.582.547.239.131.51.2.785.2h12.3c.233 0 .464.049.675.144.212.095.399.234.549.406.15.172.259.375.32.592.061.218.071.445.031.667l-6.763 37.459a1.49 1.49 0 0 0 .078.806c.099.257.268.484.489.657a1.634 1.634 0 0 0 1.599.235c.346-.134.633-.381.811-.698l29.074-51.727c.186-.331.241-.717.153-1.084a1.547 1.547 0 0 0-.629-.911l-.639-.454a1.661 1.661 0 0 0-.959-.287l-13.182.263a1.668 1.668 0 0 1-.683-.137 1.597 1.597 0 0 1-.557-.406 1.492 1.492 0 0 1-.357-1.27l6.214-34.037a1.488 1.488 0 0 0-.066-.782 1.55 1.55 0 0 0-.455-.651l-.355-.308a1.646 1.646 0 0 0-2.017-.08 1.558 1.558 0 0 0-.465.534Z" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a47ea15">
-      <circle id="fills-cecb00c8-e6c7-8042-8001-e0554a47ea15" cx="52.734" cy="46.494" r="46.494" style="fill:#fbb03b"/>
-    </g>
-  </g>
-</svg>

docs/.vitepress/theme/assets/third-row.svg

@@ -1,80 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="screenshot-cecb00c8-e6c7-8042-8001-e0554a46bb12" width="105.468" height="1892.988" fill="none" style="-webkit-print-color-adjust:exact" version="1.1">
-  <g id="shape-cecb00c8-e6c7-8042-8001-e0554a46bb12" style="fill:#000">
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a48036c">
-      <circle id="fills-cecb00c8-e6c7-8042-8001-e0554a48036c" cx="52.734" cy="1846.494" r="46.494" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0568ca17794">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0568ca17795">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0568ca17795" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1670-50 50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0568ca17795" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1670-50 50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0568ca17796">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0568ca17796" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1720-50-50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0568ca17796" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1720-50-50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0567f9fe93c">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0567f9fe93c" d="M90.993 1544.41c2.322 1.4 2.322 4.78 0 6.179l-72.826 43.892c-2.391 1.441-5.433-.288-5.433-3.09v-87.783c0-2.8 3.042-4.53 5.433-3.089l72.826 43.891Z" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0567b140126">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0567b140126" fill-rule="evenodd" d="m52.734 1438.427-6.987-6.361c-24.818-22.505-41.202-37.395-41.202-55.562 0-14.891 11.662-26.504 26.504-26.504 8.385 0 16.433 3.903 21.685 10.023 5.253-6.12 13.3-10.023 21.685-10.023 14.842 0 26.504 11.613 26.504 26.504 0 18.167-16.384 33.057-41.201 55.562l-6.988 6.361Zm-8.088-50.36a6.102 6.102 0 1 1-12.204 0 6.102 6.102 0 0 1 12.204 0Zm22.957 6.102a6.102 6.102 0 1 0 0-12.204 6.102 6.102 0 0 0 0 12.204Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74c">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74d">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e05675c7d74d" d="M17.109 1203.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H19.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74e">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e05675c7d74e" d="M78.109 1203.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H80.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74f">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e05675c7d74f" fill-rule="evenodd" d="M26.075 1208c-9.301 0-16.841 7.54-16.841 16.841v66.417a3.743 3.743 0 0 0 3.743 3.742h66.416c9.301 0 16.841-7.54 16.841-16.841v-53.318c0-9.301-7.54-16.841-16.841-16.841H26.075Zm23.426 64.058c1.445 2.476 5.022 2.476 6.466 0l1.096-1.881c1.456-2.494-.344-5.627-3.232-5.627h-2.194c-2.888 0-4.688 3.133-3.232 5.627l1.096 1.881Zm18.686-7.22a2.807 2.807 0 0 1 1.027-3.834l7.382-4.263a2.808 2.808 0 0 1 2.807 4.863l-7.382 4.261a2.806 2.806 0 0 1-3.834-1.027Zm-32.196 16.308a2.806 2.806 0 1 0-2.807-4.862l-7.382 4.263a2.807 2.807 0 1 0 2.807 4.861l7.382-4.262Zm32.828-7.064a2.806 2.806 0 0 1 3.834-1.028l7.382 4.262a2.807 2.807 0 0 1-2.807 4.862l-7.382-4.262a2.807 2.807 0 0 1-1.027-3.834Zm-36.267-4.987a2.807 2.807 0 1 0 2.807-4.861l-7.382-4.262a2.807 2.807 0 0 0-2.806 4.861l7.381 4.262Zm-1.328-35.539a1.87 1.87 0 0 0-1.871 1.871v1.455c0 .777.048 1.567.008 2.342a5.981 5.981 0 1 0 11.95.091c-.007-.186.004-.375.004-.562v-3.326a1.87 1.87 0 0 0-1.871-1.871h-8.22Zm32.929 1.871a1.87 1.87 0 0 1 1.871-1.871h8.22a1.87 1.87 0 0 1 1.871 1.871v3.326c0 .187-.011.376-.004.562a5.981 5.981 0 1 1-11.95-.091c.04-.775-.008-1.565-.008-2.342v-1.455Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4aeab2" clip-path="url(#01eb2006-bdb3-80d7-8001-e05f4ced6213-clip0_330_90)" style="fill:#000">
-      <defs>
-        <clipPath id="01eb2006-bdb3-80d7-8001-e05f4ced6213-clip0_330_90" class="svg-def" transform="translate(-4.859 -50.74)">
-          <path fill="#fff" d="M11.1 1100.74h92.987v92.987H11.1z"/>
-        </clipPath>
-      </defs>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4b502b">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4b502b" d="M85.61 1066.94a46.111 46.111 0 0 0-28.297-13.39 1.795 1.795 0 0 1-.889-.37 1.716 1.716 0 0 1-.539-.8 3.316 3.316 0 0 0-1.178-1.72 3.335 3.335 0 0 0-1.973-.66c-.712 0-1.404.24-1.973.66a3.316 3.316 0 0 0-1.178 1.72c-.098.31-.286.59-.539.8-.254.2-.563.33-.889.37a46.47 46.47 0 0 0-29.846 15.01 46.51 46.51 0 0 0-12.069 31.16 3.423 3.423 0 0 0 1.503 2.88c.639.41 1.401.6 2.16.52a3.375 3.375 0 0 0 2.006-.95 10.755 10.755 0 0 1 7.606-3.16c2.852 0 5.589 1.13 7.61 3.14.306.31.669.56 1.071.73.401.17.832.26 1.268.26.436.01.868-.08 1.272-.24.403-.17.771-.41 1.08-.72a13.053 13.053 0 0 1 8.231-3.75c3.104-.22 6.185.68 8.683 2.54.212.15.384.36.503.6.118.24.18.5.18.76v30.6c0 1.79-1.37 3.32-3.153 3.41-.449.03-.899-.04-1.321-.2-.423-.15-.809-.4-1.135-.71a3.34 3.34 0 0 1-.764-1.09 3.356 3.356 0 0 1-.269-1.31c0-.44-.088-.88-.258-1.29-.171-.4-.421-.77-.736-1.08a3.27 3.27 0 0 0-2.387-.95c-1.868.03-3.3 1.68-3.259 3.55a9.963 9.963 0 0 0 2.954 6.84 9.977 9.977 0 0 0 6.878 2.89c5.58.07 10.092-4.55 10.092-10.13v-30.53c0-.26.062-.52.18-.76.119-.24.291-.45.503-.6a12.964 12.964 0 0 1 16.895 1.2 3.33 3.33 0 0 0 4.695 0 10.778 10.778 0 0 1 7.616-3.16c2.856 0 5.595 1.14 7.615 3.16a3.33 3.33 0 0 0 1.942.94c.735.09 1.479-.06 2.114-.44.501-.31.913-.75 1.196-1.27.282-.51.426-1.1.417-1.68a46.206 46.206 0 0 0-13.618-32.78Z" style="fill:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a47ea14">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a47ea14" d="M90.993 944.41c2.322 1.4 2.322 4.78 0 6.179l-72.826 43.892c-2.391 1.441-5.433-.288-5.433-3.09v-87.783c0-2.8 3.042-4.53 5.433-3.089l72.826 43.891Z" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4aeab1">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4aeab1" fill-rule="evenodd" d="m52.734 838.427-6.987-6.361c-24.818-22.505-41.202-37.395-41.202-55.562C4.545 761.613 16.207 750 31.049 750c8.385 0 16.433 3.903 21.685 10.023 5.253-6.12 13.3-10.023 21.685-10.023 14.842 0 26.504 11.613 26.504 26.504 0 18.167-16.384 33.057-41.201 55.562l-6.988 6.361Zm-8.088-50.36a6.102 6.102 0 1 1-12.204 0 6.102 6.102 0 0 1 12.204 0Zm22.957 6.102a6.102 6.102 0 1 0 0-12.204 6.102 6.102 0 0 0 0 12.204Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e055d85aedd9">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4a4555">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4a4555" d="M17.109 603.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H19.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4ab72e">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4ab72e" d="M78.109 603.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H80.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4a4554">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4a4554" fill-rule="evenodd" d="M26.075 608c-9.301 0-16.841 7.54-16.841 16.841v66.417A3.743 3.743 0 0 0 12.977 695h66.416c9.301 0 16.841-7.54 16.841-16.841v-53.318c0-9.301-7.54-16.841-16.841-16.841H26.075Zm23.426 64.058c1.445 2.476 5.022 2.476 6.466 0l1.096-1.881c1.456-2.494-.344-5.627-3.232-5.627h-2.194c-2.888 0-4.688 3.133-3.232 5.627l1.096 1.881Zm18.686-7.22a2.807 2.807 0 0 1 1.027-3.834l7.382-4.263a2.808 2.808 0 0 1 2.807 4.863l-7.382 4.261a2.806 2.806 0 0 1-3.834-1.027Zm-32.196 16.308a2.806 2.806 0 1 0-2.807-4.862l-7.382 4.263a2.807 2.807 0 1 0 2.807 4.861l7.382-4.262Zm32.828-7.064a2.806 2.806 0 0 1 3.834-1.028l7.382 4.262a2.807 2.807 0 0 1-2.807 4.862l-7.382-4.262a2.807 2.807 0 0 1-1.027-3.834Zm-36.267-4.987a2.807 2.807 0 1 0 2.807-4.861l-7.382-4.262a2.807 2.807 0 0 0-2.806 4.861l7.381 4.262Zm-1.328-35.539a1.87 1.87 0 0 0-1.871 1.871v1.455c0 .777.048 1.567.008 2.342a5.981 5.981 0 1 0 11.95.091c-.007-.186.004-.375.004-.562v-3.326a1.87 1.87 0 0 0-1.871-1.871h-8.22Zm32.929 1.871a1.87 1.87 0 0 1 1.871-1.871h8.22a1.87 1.87 0 0 1 1.871 1.871v3.326c0 .187-.011.376-.004.562a5.981 5.981 0 1 1-11.95-.091c.04-.775-.008-1.565-.008-2.342v-1.455Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a49a0ca">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a49a0ca" fill-rule="evenodd" d="M49.304 451.942c1.554-2.589 5.307-2.589 6.86 0l48.729 81.213c1.599 2.666-.321 6.058-3.43 6.058H4.006c-3.109 0-5.029-3.392-3.43-6.058l48.728-81.213Zm12.147 40.777a8.718 8.718 0 1 1-17.435 0 8.718 8.718 0 0 1 17.435 0Zm-22.084 21.76a2 2 0 0 1 2-2H63.52a2 2 0 0 1 2 2v8.205c0 .258-.049.504-.138.731.091.414.138.838.138 1.269 0 4.815-5.855 8.718-13.077 8.718-7.222 0-13.076-3.903-13.076-8.718 0-.431.047-.855.137-1.27a2.007 2.007 0 0 1-.137-.73v-8.205Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e055877aa3c7">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a492a2b">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a492a2b" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 320-50 50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0554a492a2b" stroke-linecap="round" stroke-linejoin="round" d="m77.734 320-50 50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a497e94">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a497e94" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 370-50-50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0554a497e94" stroke-linecap="round" stroke-linejoin="round" d="m77.734 370-50-50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a48e83e">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a48e83e" d="m59.02 150.843-26.578 48.806a1.502 1.502 0 0 0 .045 1.516c.142.228.343.416.582.547.239.131.51.2.785.2h12.3c.233 0 .464.049.675.144.212.095.399.234.549.406.15.172.259.375.32.592.061.218.071.445.031.667l-6.763 37.459a1.49 1.49 0 0 0 .078.806c.099.257.268.484.489.657a1.634 1.634 0 0 0 1.599.235c.346-.134.633-.381.811-.698l29.074-51.727c.186-.331.241-.717.153-1.084a1.547 1.547 0 0 0-.629-.911l-.639-.454a1.661 1.661 0 0 0-.959-.287l-13.182.263a1.668 1.668 0 0 1-.683-.137 1.597 1.597 0 0 1-.557-.406 1.492 1.492 0 0 1-.357-1.27l6.214-34.037a1.488 1.488 0 0 0-.066-.782 1.55 1.55 0 0 0-.455-.651l-.355-.308a1.646 1.646 0 0 0-2.017-.08 1.558 1.558 0 0 0-.465.534Z" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a47ea15">
-      <circle id="fills-cecb00c8-e6c7-8042-8001-e0554a47ea15" cx="52.734" cy="46.494" r="46.494" style="fill:#fbb03b"/>
-    </g>
-  </g>
-</svg>

docs/.vitepress/theme/assets/triangle copy.svg

@@ -1,3 +0,0 @@
-<svg width="112" height="93" viewBox="0 0 112 93" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M52.5737 5.69079C54.1285 3.10866 57.8722 3.10866 59.4271 5.6908L108.349 86.9366C109.955 89.6026 108.035 93 104.923 93H7.07816C3.96616 93 2.04612 89.6026 3.65144 86.9366L52.5737 5.69079Z" fill="#82DBC5"/>
-</svg>

docs/.vitepress/theme/assets/triangle.svg

@@ -1,3 +0,0 @@
-<svg width="112" height="93" viewBox="0 0 112 93" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M52.5737 5.69079C54.1285 3.10866 57.8722 3.10866 59.4271 5.6908L108.349 86.9366C109.955 89.6026 108.035 93 104.923 93H7.07816C3.96616 93 2.04612 89.6026 3.65144 86.9366L52.5737 5.69079Z" fill="#82DBC5"/>
-</svg>

docs/.vitepress/theme/assets/trianglle-face.svg

@@ -1,3 +0,0 @@
-<svg width="186" height="157" viewBox="0 0 186 157" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M89.5114 1.94202C91.0651 -0.647335 94.8178 -0.647343 96.3714 1.94201L185.307 150.167C186.906 152.833 184.986 156.225 181.877 156.225H4.00618C0.896997 156.225 -1.02345 152.833 0.576207 150.167L89.5114 1.94202ZM107.941 76.2254C107.941 84.5097 101.225 91.2254 92.9408 91.2254C84.6565 91.2254 77.9408 84.5097 77.9408 76.2254C77.9408 67.9411 84.6565 61.2254 92.9408 61.2254C101.225 61.2254 107.941 67.9411 107.941 76.2254ZM69.9408 112.226C69.9408 111.121 70.8362 110.226 71.9408 110.226H112.941C114.045 110.226 114.941 111.121 114.941 112.226V129.226C114.941 129.439 114.907 129.644 114.846 129.837C114.909 130.294 114.941 130.757 114.941 131.226C114.941 139.51 104.867 146.226 92.4408 146.226C80.0144 146.226 69.9408 139.51 69.9408 131.226C69.9408 130.757 69.973 130.294 70.0359 129.837C69.9742 129.644 69.9408 129.439 69.9408 129.226V112.226Z" fill="#FBB03B"/>
-</svg>

docs/.vitepress/theme/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

docs/.vitepress/theme/components/BlenderCube.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
-import { useTresContext } from '@tresjs/core'
-
-const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
-const model = nodes.Cube
-
-model.position.set(0, 1, 0)
-
-const state = useTresContext()
-
-state.invalidate()
-</script>
-
-<template>
-  <primitive :object="model" />
-</template>

docs/.vitepress/theme/components/Cookbook.vue

@@ -1,41 +0,0 @@
-<script setup>
-import { useData } from 'vitepress'
-import { computed } from 'vue'
-import { data as recipes } from '../recipes.data.ts'
-
-const { lang } = useData()
-
-const filteredRecipes = computed(() => recipes.filter(recipe => recipe.lang === lang.value.split('-')[0]))
-</script>
-
-<template>
-  <ul class="grid grid-cols-1 sm:grid-cols-2 gap-8 -mx-4 pt-8">
-    <li
-      v-for="recipe of filteredRecipes"
-      :key="recipe.title"
-      class="list-none important-m-0"
-    >
-      <a
-        :href="recipe.url"
-      >
-        <img
-          :src="recipe.thumbnail"
-          :alt="recipe.title"
-          class="aspect-video object-cover rounded-lg"
-        />
-
-        <h3>
-          {{ recipe.title }}
-          <span
-            v-for="n in recipe.difficulty"
-            :key="n"
-            aria-label="chili"
-            role="img"
-            class="text-sm"
-          >🌶️</span>
-
-        </h3></a>
-      <p>{{ recipe.excerpt }}</p>
-    </li>
-  </ul>
-</template>

docs/.vitepress/theme/components/DonutExample.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import { TresCanvas } from '@tresjs/core'
-
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-
-const gl = {
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-}
-</script>
-
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera
-      :position="[3, 3, 3]"
-      :fov="45"
-      :look-at="[0, 0, 0]"
-    />
-    <OrbitControls />
-    <TresMesh>
-      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
-      <TresMeshBasicMaterial color="orange" />
-    </TresMesh>
-    <TresAmbientLight :intensity="1" />
-  </TresCanvas>
-</template>

docs/.vitepress/theme/components/EmbedExperiment.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  url: string
-}>()
-</script>
-
-<template>
-  <iframe
-    frameborder="0"
-    class="w-full aspect-video border-inset-0 b-1 b-gray-500 border-opacity-50 rounded"
-    src="https://playground.tresjs.org/experiments/tres-donut/"
-  ></iframe>
-</template>

docs/.vitepress/theme/components/ExtendExample.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { useTresContext } from '@tresjs/core'
-
-const styles = {
-  width: '100%',
-  height: '550px',
-  border: '1px solid #e2e2e2',
-  borderRadius: '8px',
-  overflow: 'hidden',
-}
-
-const { camera, renderer } = useTresContext()
-</script>
-
-<template>
-  <ClientOnly>
-    <TresCanvas
-      shadows
-      clear-color="#fff"
-      :style="styles"
-    >
-      <TresPerspectiveCamera :position="[0, 2, 4]" />
-      <TresScene>
-        <TresOrbitControls
-          v-if="renderer"
-          :args="[camera, renderer?.domElement]"
-        />
-
-        <TresDirectionalLight
-          :position="[0, 2, 4]"
-          :intensity="2"
-          cast-shadow
-        />
-        <TresMesh :rotation="[-Math.PI / 4, -Math.PI / 4, Math.PI / 4]">
-          <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
-          <TresMeshToonMaterial color="#FBB03B" />
-        </TresMesh>
-      </TresScene>
-    </TresCanvas>
-  </ClientOnly>
-</template>

docs/.vitepress/theme/components/FirstSceneLightToon.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-
-/* import { OrbitControls } from '@tresjs/cientos' */
-
-const styles = {
-  width: '100%',
-  height: '550px',
-  border: '1px solid #e2e2e2',
-  borderRadius: '8px',
-  overflow: 'hidden',
-}
-</script>
-
-<template>
-  <ClientOnly>
-    <TresCanvas
-      shadows
-      clear-color="#fff"
-      :style="styles"
-    >
-      <TresPerspectiveCamera :position="[0, 2, 4]" />
-      <OrbitControls />
-      <TresDirectionalLight
-        :position="[0, 2, 4]"
-        :intensity="2"
-        cast-shadow
-      />
-      <TresMesh :rotation="[-Math.PI / 4, -Math.PI / 4, Math.PI / 4]">
-        <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
-        <TresMeshToonMaterial color="#FBB03B" />
-      </TresMesh>
-    </TresCanvas>
-  </ClientOnly>
-</template>

docs/.vitepress/theme/components/GraphPane.vue

@@ -1,101 +0,0 @@
-<script lang="ts" setup>
-import { useRafFn } from '@vueuse/core'
-import { ref } from 'vue'
-import { useState } from '../composables/state'
-
-const width = 160
-const height = 40
-const strokeWidth = 2
-const updateInterval = 100 // Update interval in milliseconds
-const topOffset = 0 // Offset from the top
-
-const points = ref('')
-const frameTimes = ref([])
-const maxFrames = ref(width / strokeWidth)
-
-let lastUpdateTime = performance.now()
-
-const { renderingTimes } = useState()
-
-useRafFn(({ timestamp }) => {
-  if (timestamp - lastUpdateTime >= updateInterval) {
-    lastUpdateTime = timestamp
-
-    frameTimes.value.push(renderingTimes?.value)
-    renderingTimes.value = 0
-
-    if (frameTimes.value.length > maxFrames.value) {
-      frameTimes.value.shift()
-    }
-
-    points.value = frameTimes.value
-      .map(
-        (value, index) =>
-          `${index * strokeWidth},${
-            height + topOffset - strokeWidth / 2 - (value * (height + topOffset - strokeWidth)) / 2
-          }`,
-      )
-      .join(' ')
-  }
-})
-</script>
-
-<template>
-  <div
-    class="absolute
-      right-2
-      top-2
-      flex
-      px-4
-      py-1
-      justify-between
-      gap-4
-      items-center
-      mb-2
-      z-10
-      bg-white
-      dark:bg-dark
-      shadow-xl
-      rounded
-      border-4
-      border-solid
-      bg-primary
-      border-primary
-      pointer-events-none
-      overflow-hidden"
-  >
-    <label class="text-secondary text-xs w-1/3">Rendering Activity</label>
-
-    <div
-      class="
-        bg-gray-100
-        dark:bg-gray-600
-        relative
-        w-2/3
-        p-1
-        rounded
-        text-right
-        text-xs
-        focus:border-gray-200
-        outline-none
-        border-none
-        font-sans
-      "
-    >
-      <svg
-        :width="width"
-        :height="height"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-      >
-        <polyline
-          :points="points"
-          stroke="lightgray"
-          :stroke-width="strokeWidth"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </div>
-  </div>
-</template>

docs/.vitepress/theme/components/HomeSponsors.vue

@@ -1,147 +0,0 @@
-<script setup lang="ts">
-import { VPHomeSponsors } from 'vitepress/theme'
-
-/* const { data } = useSponsor() */
-</script>
-
-<template>
-  <VPHomeSponsors
-    message="TresJS is free and open source, made possible by wonderful sponsors."
-    :data="[]"
-  />
-  <div class="action">
-    <a
-      class="sponsor"
-      href="https://github.com/sponsors/tresjs"
-      target="_blank"
-      rel="noreferrer"
-    >
-      Become a sponsor
-    </a>
-  </div>
-  <div class="action">
-    <p class="message">Consider supporting our friends</p>
-  </div>
-  <ul class="action flex flex-wrap w-full sm:w-2/3 md:1/3 mx-auto">
-    <li>
-      <a
-        class="sponsor"
-        href="https://github.com/sponsors/vitejs"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Vite <i class="i-logos-vitejs ml-2"></i>
-      </a>
-    </li>
-    <li>
-      <a
-        class="sponsor"
-        href="https://github.com/sponsors/patak-dev"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Patak <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/583075?v=4" alt="" />
-      </a>
-    </li>
-    <li>
-      <a
-        class="sponsor"
-        href="https://github.com/sponsors/antfu"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Anthony Fu <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/11247099?v=4" alt="" />
-      </a>
-    </li>
-    <li>
-      <a
-        class="sponsor"
-        href="https://github.com/sponsors/posva"
-        target="_blank"
-        rel="noreferrer"
-      >
-        posva <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/664177?v=4" alt="" />
-      </a>
-    </li>
-    <li>
-      <a
-        class="sponsor"
-        href="https://github.com/sponsors/johnsoncodehk"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Johnson Chu <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/16279759?v=4" alt="" />
-      </a>
-    </li>
-    <li>
-      <a
-        class="sponsor"
-        href="https://github.com/sponsors/CodyJasonBennett"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Cody Bennett <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/23324155?v=4" alt="" />
-      </a>
-    </li>
-    <li>
-      <a
-        class="sponsor"
-        href="https://github.com/sponsors/danielroe "
-        target="_blank"
-        rel="noreferrer"
-      >
-        Daniel Roe <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/28706372?v=4" alt="" />
-      </a>
-    </li>
-    <li>
-      <a
-        class="sponsor"
-        href="https://github.com/sponsors/nuxt"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Nuxt <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/23360933?s=160&v=4" alt="" />
-      </a>
-    </li>
-  </ul>
-</template>
-
-<style scoped>
-.action {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-  padding-top: 4rem;
-}
-
-.sponsor {
-  /* .VPButton */
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border: 1px solid transparent;
-  text-align: center;
-  font-weight: 600;
-  white-space: nowrap;
-  transition:
-    color 0.25s,
-    border-color 0.25s,
-    background-color 0.25s;
-  /* .VPButton.medium */
-  border-radius: 20px;
-  padding: 0 20px;
-  line-height: 38px;
-  font-size: 14px;
-  /* .VPButton.sponsor */
-  border-color: var(--vp-button-sponsor-border);
-  color: var(--vp-button-sponsor-text);
-  background-color: var(--vp-button-sponsor-bg);
-}
-
-.sponsor:hover {
-  /* .VPButton.sponsor:hover */
-  border-color: var(--vp-button-sponsor-hover-border);
-  color: var(--vp-button-sponsor-hover-text);
-  background-color: var(--vp-button-sponsor-hover-bg);
-}
-</style>

docs/.vitepress/theme/components/LocalOrbitControls.vue

@@ -1,316 +0,0 @@
-<script lang="ts" setup>
-import type { TresVector3 } from '@tresjs/core'
-import type { Camera } from 'three'
-import { extend, useRenderLoop, useTresContext } from '@tresjs/core'
-import { useEventListener } from '@vueuse/core'
-import { OrbitControls } from 'three-stdlib'
-import { onMounted, onUnmounted, shallowRef, unref } from 'vue'
-
-export interface OrbitControlsProps {
-  /**
-   * Whether to make this the default controls.
-   *
-   * @default false
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   */
-  makeDefault?: boolean
-  /**
-   * The camera to control.
-   *
-   * @type {Camera}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.camera
-   */
-  camera?: Camera
-  /**
-   * The dom element to listen to.
-   *
-   * @type {HTMLElement}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.domElement
-   */
-  domElement?: HTMLElement
-  /**
-   * The target to orbit around.
-   *
-   * @type {TresVector3}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.target
-   */
-  target?: TresVector3
-  /**
-   * Whether to enable damping (inertia)
-   *
-   * @default false
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableDamping
-   */
-  enableDamping?: boolean
-  /**
-   * The damping inertia used if `.enableDamping` is set to true
-   *
-   * @default 0.05
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.dampingFactor
-   */
-  dampingFactor?: number
-  /**
-   * Set to true to automatically rotate around the target.
-   *
-   * @default false
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotate
-   */
-  autoRotate?: boolean
-  /**
-   * How fast to rotate around the target if `.autoRotate` is true.
-   *
-   * @default 2
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotateSpeed
-   */
-  autoRotateSpeed?: number
-  /**
-   * Whether to enable panning.
-   *
-   * @default true
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enablePan
-   */
-  enablePan?: boolean
-  /**
-   * How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.
-   *
-   * @default 7.0
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keyPanSpeed
-   */
-  keyPanSpeed?: number
-  /**
-   * This object contains references to the keycodes for controlling camera panning.
-   * Default is the 4 arrow keys.
-   *
-   * @default `{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }`
-   * @type Record<string, string>
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keys
-   */
-  keys?: Record<string, string>
-  /**
-   * How far you can orbit horizontally, upper limit.
-   * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
-   * with ( max - min < 2 PI ). Default is Infinity.
-   *
-   * @default Infinity
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxAzimuthAngle
-   */
-  maxAzimuthAngle?: number
-  /**
-   * How far you can orbit horizontally, lower limit.
-   * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
-   * with ( max - min < 2 PI ).
-   * Default is - Infinity.
-   *
-   * @default -Infinity
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minAzimuthAngle
-   */
-  minAzimuthAngle?: number
-  /**
-   * How far you can orbit vertically, upper limit.
-   * Range is 0 to Math.PI radians, and default is Math.PI.
-   *
-   * @default Math.PI
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxPolarAngle
-   */
-  maxPolarAngle?: number
-  /**
-   * How far you can orbit vertically, lower limit.
-   * Range is 0 to Math.PI radians, and default is 0.
-   *
-   * @default 0
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minPolarAngle
-   */
-  minPolarAngle?: number
-  /**
-   * The minimum distance of the camera to the target.
-   * Default is 0.
-   *
-   * @default 0
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minDistance
-   */
-  minDistance?: number
-  /**
-   * The maximum distance of the camera to the target.
-   * Default is Infinity.
-   *
-   * @default Infinity
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxDistance
-   */
-  maxDistance?: number
-  /**
-   * The minimum field of view angle, in radians.
-   * Default is 0.
-   *
-   * @default 0
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minZoom
-   */
-  minZoom?: number
-  /**
-   * The maximum field of view angle, in radians.
-   * ( OrthographicCamera only ).
-   * Default is Infinity.
-   *
-   * @default Infinity
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxZoom
-   */
-  maxZoom?: number
-  touches?: {
-    ONE?: number
-    TWO?: number
-  }
-  /**
-   * Whether to enable zooming.
-   *
-   * @default true
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableZoom
-   */
-  enableZoom?: boolean
-  /**
-   * How fast to zoom in and out. Default is 1.
-   *
-   * @default 1
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.zoomSpeed
-   */
-  zoomSpeed?: number
-  /**
-   * Whether to enable rotating.
-   *
-   * @default true
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableRotate
-   */
-  enableRotate?: boolean
-  /**
-   * How fast to rotate around the target. Default is 1.
-   *
-   * @default 1
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.rotateSpeed
-   */
-  rotateSpeed?: number
-}
-
-// TODO: remove disable once eslint is updated to support vue 3.3
-
-const {
-  autoRotate = false,
-  autoRotateSpeed = 2,
-  enableDamping = false,
-  dampingFactor = 0.05,
-  enablePan = true,
-  keyPanSpeed = 7,
-  maxAzimuthAngle = Number.POSITIVE_INFINITY,
-  minAzimuthAngle = Number.NEGATIVE_INFINITY,
-  maxPolarAngle = Math.PI,
-  minPolarAngle = 0,
-  minDistance = 0,
-  maxDistance = Number.POSITIVE_INFINITY,
-  minZoom = 0,
-  maxZoom = Number.POSITIVE_INFINITY,
-  enableZoom = true,
-  zoomSpeed = 1,
-  enableRotate = true,
-  rotateSpeed = 1,
-  target = [0, 0, 0],
-} = defineProps<OrbitControlsProps>()
-
-const emit = defineEmits(['change', 'start', 'end'])
-
-const { renderer, camera: activeCamera } = useTresContext()
-
-const controls = shallowRef<OrbitControls | null>(null)
-
-extend({ OrbitControls })
-
-function addEventListeners() {
-  useEventListener(controls.value as any, 'change', () => emit('change', controls.value))
-  useEventListener(controls.value as any, 'start', () => emit('start', controls.value))
-  useEventListener(controls.value as any, 'end', () => emit('end', controls.value))
-}
-
-const { onLoop } = useRenderLoop()
-
-onLoop(() => {
-  if (controls.value && (enableDamping || autoRotate)) {
-    controls.value.update()
-  }
-})
-
-onMounted(() => {
-  addEventListeners()
-})
-
-onUnmounted(() => {
-  if (controls.value) {
-    controls.value.dispose()
-  }
-})
-</script>
-
-<template>
-  <TresOrbitControls
-    v-if="activeCamera && renderer"
-    ref="controls"
-    :target="target"
-    :auto-rotate="autoRotate"
-    :auto-rotate-speed="autoRotateSpeed"
-    :enable-damping="enableDamping"
-    :damping-factor="dampingFactor"
-    :enable-pan="enablePan"
-    :key-pan-speed="keyPanSpeed"
-    :keys="keys"
-    :max-azimuth-angle="maxAzimuthAngle"
-    :min-azimuth-angle="minAzimuthAngle"
-    :max-polar-angle="maxPolarAngle"
-    :min-polar-angle="minPolarAngle"
-    :min-distance="minDistance"
-    :max-distance="maxDistance"
-    :min-zoom="minZoom"
-    :max-zoom="maxZoom"
-    :touches="touches"
-    :enable-zoom="enableZoom"
-    :zoom-speed="zoomSpeed"
-    :enable-rotate="enableRotate"
-    :rotate-speed="rotateSpeed"
-    :args="[unref(activeCamera) || camera, renderer?.domElement || domElement]"
-  />
-</template>

docs/.vitepress/theme/components/LoveVueThreeJS.vue

@@ -1,62 +0,0 @@
-<script setup lang="ts">
-/// <reference types="vite-svg-loader" />
-import { gsap } from 'gsap'
-import { onMounted, shallowRef } from 'vue'
-import SecondRow from '../assets/second-row.svg'
-import ThirdRow from '../assets/third-row.svg'
-import Triangle from '../assets/triangle.svg'
-
-const triangleRef = shallowRef()
-const secondRowRef = shallowRef()
-const thirdRowRef = shallowRef()
-
-const tl2r = gsap.timeline()
-const tl3r = gsap.timeline()
-
-const heightOfSingleSvg = 150
-
-async function restartAnimation() {
-  gsap.to(secondRowRef.value.$el, {
-    duration: 1,
-    y: 0,
-    ease: 'elastic.out(0.7, 0.2)',
-  })
-  await gsap.to(thirdRowRef.value.$el, {
-    delay: 0.65,
-    duration: 1,
-    y: 0,
-    ease: 'steps(4)',
-  })
-
-  tl2r.restart()
-  tl3r.restart()
-}
-
-onMounted(() => {
-  tl2r.to(secondRowRef.value.$el, {
-    delay: 1,
-    duration: 2,
-    y: -(8 * heightOfSingleSvg),
-    ease: 'elastic.easeOut',
-  })
-  tl3r.to(thirdRowRef.value.$el, {
-    delay: 1.25,
-    duration: 2,
-    y: -(12 * heightOfSingleSvg),
-    ease: 'power1.out',
-  })
-})
-</script>
-
-<template>
-  <div
-    class="grid items-center w-full min-w-370px -translate-x-20px md:translate-x-20px h-full scale-75"
-    @click="restartAnimation"
-  >
-    <div class="grid grid-cols-3 gap-8 overflow-hidden h-93px">
-      <Triangle ref="triangleRef" />
-      <SecondRow ref="secondRowRef" />
-      <ThirdRow ref="thirdRowRef" />
-    </div>
-  </div>
-</template>

docs/.vitepress/theme/components/OnDemandRendering.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { useState } from '../composables/state'
-import BlenderCube from './BlenderCube.vue'
-import GraphPane from './GraphPane.vue'
-import RenderingLogger from './RenderingLogger.vue'
-
-const { renderingTimes } = useState()
-
-function onRender() {
-  renderingTimes.value = 1
-}
-</script>
-
-<template>
-  <GraphPane />
-  <TresCanvas
-    render-mode="on-demand"
-    clear-color="#82DBC5"
-    @render="onRender"
-  >
-    <TresPerspectiveCamera
-      :position="[5, 5, 5]"
-      :look-at="[0, 0, 0]"
-    />
-    <Suspense>
-      <BlenderCube />
-    </Suspense>
-    <TresGridHelper />
-    <RenderingLogger />
-    <TresAmbientLight :intensity="1" />
-    <TresDirectionalLight
-      :position="[0, 8, 4]"
-      :intensity="0.7"
-    />
-  </TresCanvas>
-</template>

docs/.vitepress/theme/components/RenderingLogger.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import { useTresContext } from '@tresjs/core'
-import { onMounted } from 'vue'
-
-/* const { renderingTimes } = useState() */
-
-const state = useTresContext()
-
-function manualInvalidate() {
-  state.invalidate()
-}
-
-onMounted(() => {
-  manualInvalidate()
-})
-</script>
-
-<template>
-  <OrbitControls
-    @change="manualInvalidate"
-  />
-</template>

docs/.vitepress/theme/components/SandboxDemo.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-defineProps<{ url: string }>()
-</script>
-
-<template>
-  <iframe
-    :src="url"
-    class="w-full my-16 rounded shadow-lg outline-none border-none aspect-4/3"
-  ></iframe>
-</template>

docs/.vitepress/theme/components/StackBlitzEmbed.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import type { EmbedOptions } from '@stackblitz/sdk'
-import sdk from '@stackblitz/sdk'
-import { ref, watch } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    projectId: string
-    options: EmbedOptions
-  }>(),
-  {
-    options: {
-      openFile: 'src/components/TheExperience.vue',
-      view: 'preview',
-      forceEmbedLayout: true,
-      hideExplorer: true,
-      hideNavigation: true,
-    },
-  },
-)
-
-const embed = ref(null)
-const isSnippetLoaded = ref(false)
-
-watch(
-  () => embed.value,
-  (value) => {
-    if (value) {
-      sdk.embedProjectId(value, props.projectId, props.options)
-    }
-  },
-)
-</script>
-
-<template>
-  <div
-    ref="embed"
-    class="stackblitz-embed"
-  >
-    <div
-      v-if="!isSnippetLoaded"
-      class="text-gray-500 text-2xl"
-    >
-      Loading...
-    </div>
-  </div>
-</template>
-
-<style>
-.stackblitz-embed {
-  margin: 2rem 0;
-  border-radius: 8px;
-  overflow: hidden;
-  border: none;
-  min-height: 500px;
-}
-</style>

docs/.vitepress/theme/composables/sponsor.ts

@@ -1,20 +0,0 @@
-import { onMounted, ref } from 'vue'
-
-const data = ref()
-
-export function useSponsor() {
-  onMounted(async () => {
-    if (data.value) {
-      return
-    }
-    /*
-    const result = await fetch(dataUrl)
-    const json = await result.json() */
-
-    data.value = []
-  })
-
-  return {
-    data,
-  }
-}

docs/.vitepress/theme/composables/state.ts

@@ -1,11 +0,0 @@
-import { reactive, toRefs } from 'vue'
-
-const state = reactive({
-  renderingTimes: 0,
-})
-export function useState() {
-  return {
-    ...toRefs(state),
-
-  }
-}

docs/.vitepress/theme/custom.css

@@ -1,107 +0,0 @@
-:root {
-  --vp-home-hero-name-color: #82dbc5;
-  --vp-c-brand: #82dbc5;
-  --vp-c-brand-1: #75c5b1;
-  --vp-c-dark: #1f1f1e;
-}
-
-/**
- * Component: Button
- * -------------------------------------------------------------------------- */
-
-:root {
-  --vp-button-brand-border: var(--vp-c-brand-light);
-  --vp-button-brand-text: var(--vp-c-dark);
-  --vp-button-brand-bg: var(--vp-c-brand);
-  --vp-button-brand-hover-border: var(--vp-c-brand-light);
-  --vp-button-brand-hover-text: var(--vp-c-dark);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
-  --vp-button-brand-active-border: var(--vp-c-brand-light);
-  --vp-button-brand-active-text: var(--vp-c-dark);
-  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
-
-  --vp-button-alt-border: var(--vp-c-border);
-  --vp-button-alt-text: var(--vp-c-neutral);
-  --vp-button-alt-bg: var(--vp-c-mute);
-  --vp-button-alt-hover-border: var(--vp-c-border);
-  --vp-button-alt-hover-text: var(--vp-c-neutral);
-  --vp-button-alt-hover-bg: var(--vp-c-mute-dark);
-  --vp-button-alt-active-border: var(--vp-c-border);
-  --vp-button-alt-active-text: var(--vp-c-neutral);
-  --vp-button-alt-active-bg: var(--vp-c-mute-darker);
-
-  --vp-button-sponsor-border: var(--vp-c-gray-light-3);
-  --vp-button-sponsor-text: var(--vp-c-text-light-2);
-  --vp-button-sponsor-bg: transparent;
-  --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
-  --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
-  --vp-button-sponsor-hover-bg: transparent;
-  --vp-button-sponsor-active-border: var(--vp-c-sponsor);
-  --vp-button-sponsor-active-text: var(--vp-c-sponsor);
-  --vp-button-sponsor-active-bg: transparent;
-}
-
-.VPSidebar .link.active span {
-  font-weight: bold;
-}
-
-.vp-doc a {
-  text-decoration: dashed;
-  font-weight: bold;
-}
-
-.VPButton.medium.brand {
-  color: var(--vp-button-brand-text);
-}
-.VPButton.medium.alt {
-  border-color: var(--vp-button-alt-border);
-  color: var(--vp-button-alt-text);
-  background-color: var(--vp-button-alt-bg);
-}
-
-.VPButton.medium.egghead-cta {
-  border-color: var(--vp-c-border);
-  position: relative;
-}
-
-.VPButton.medium.egghead-cta:hover {
-  border-color: var(--vp-c-border);
-  color: var(--vp-button-brand-text);
-  background-color: var(--vp-c-brand-light);
-}
-
-.VPButton.medium.egghead-cta::before {
-  content: url('/egghead-icon.png');
-  display: inline-block;
-  transform: translateY(0.1rem);
-  margin-right: 0.5rem;
-}
-
-.VPButton.medium.egghead-cta:hover::after {
-  animation: none;
-}
-.VPButton.medium.egghead-cta::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  /*  background-color: var( --vp-c-dark); */
-  border: 1px solid var(--vp-c-brand);
-  border-radius: 20px;
-  animation: ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
-  z-index: -1;
-}
-
-@keyframes ping {
-  15%,
-  to {
-    transform: scale(1.25, 2);
-    opacity: 0;
-  }
-}
-
-.VPHomeSponsors {
-  margin-bottom: 0px !important;
-}

docs/.vitepress/theme/index.ts

@@ -1,28 +0,0 @@
-import type { Theme } from 'vitepress'
-import VPTheme from 'vitepress/theme'
-
-import TresLayout from './TresLayout.vue'
-import './custom.css'
-
-import 'uno.css'
-import 'virtual:group-icons.css'
-
-/* const plausible = createPlausible({
-  init: {
-    trackLocalhost: false,
-  },
-  settings: {
-    enableAutoOutboundTracking: true,
-    enableAutoPageviews: true,
-  },
-  partytown: false,
-}) */
-
-export default {
-  ...VPTheme,
-
-  /* enhanceApp(ctx) {
-    ctx.app.use(plausible)
-  }, */
-  Layout: TresLayout,
-} satisfies Theme

docs/.vitepress/theme/recipes.data.ts

@@ -1,29 +0,0 @@
-import { createContentLoader } from 'vitepress'
-
-export interface Recipe {
-  title: string
-  url: string
-  excerpt: string | undefined
-  thumbnail?: string
-  difficulty?: number
-}
-
-declare const data: Recipe[]
-export { data }
-
-export default createContentLoader('/**/cookbook/*.md', {
-  excerpt: true,
-  transform(raw): Recipe[] {
-    return raw
-      .map(({ url, frontmatter, excerpt }) => ({
-        title: frontmatter.title,
-        url,
-        lang: url.split('/')[1].length === 2 ? url.split('/')[1] : 'en',
-        thumbnail: frontmatter.thumbnail,
-        difficulty: frontmatter.difficulty,
-        excerpt: frontmatter.excerpt || frontmatter.description || excerpt,
-      }))
-      .filter(recipe => recipe.title)
-      .sort((a, b) => b.title - a.title)
-  },
-})

docs/README.md

@@ -0,0 +1,81 @@
+# Nuxt Docs Template
+
+[![Nuxt UI Pro](https://img.shields.io/badge/Made%20with-Nuxt%20UI%20Pro-00DC82?logo=nuxt&labelColor=020420)](https://ui.nuxt.com/pro)
+[![Deploy to NuxtHub](https://img.shields.io/badge/Deploy%20to-NuxtHub-00DC82?logo=nuxt&labelColor=020420)](https://hub.nuxt.com/new?repo=nuxt-ui-pro/docs)
+
+This template lets you build a documentation with [Nuxt UI Pro](https://ui.nuxt.com/pro) quickly.
+
+- [Live demo](https://docs-template.nuxt.dev/)
+- [Documentation](https://ui.nuxt.com/getting-started/installation/pro/nuxt)
+
+<a href="https://docs-template.nuxt.dev/" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RvY3MtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjM0MTd9.ltVAqPgKG38O01X1zl6MXfrJc55nf9OewXNFjpZ_2JY.jpg?theme=dark">
+    <source media="(prefers-color-scheme: light)" srcset="https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RvY3MtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjM0MTd9.ltVAqPgKG38O01X1zl6MXfrJc55nf9OewXNFjpZ_2JY.jpg?theme=light">
+    <img alt="Nuxt Docs Template" src="https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RvY3MtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjM0MTd9.ltVAqPgKG38O01X1zl6MXfrJc55nf9OewXNFjpZ_2JY.jpg">
+  </picture>
+</a>
+
+## Quick Start
+
+```bash [Terminal]
+npx nuxi init -t github:nuxt-ui-pro/docs
+```
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+Locally preview production build:
+
+```bash
+pnpm preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+
+## Nuxt Studio integration
+
+Studio is an intuitive CMS interface to edit your Nuxt Content websites.
+
+It take advantage of the Preview API included in Nuxt Content to propose the best editing experience for your content files. Editors can benefit from a user-friendly interface to edit their Markdown, YAML or JSON files.
+
+You can import your project on the platform without any extra setup.
+
+However to enable the live preview on the platform, you just need to activate studio in the content configuration of your `nuxt.config.ts` file.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  content: {
+    preview: {
+      api: 'https://api.nuxt.studio'
+    }
+  }
+})
+```
+
+Read more on [Nuxt Studio docs](https://content.nuxt.com/studio/setup).
+
+## Renovate integration
+
+Install [Renovate GitHub app](https://github.com/apps/renovate/installations/select_target) on your repository and you are good to go.

docs/_data/team.js

@@ -1,69 +0,0 @@
-export const core = [
-  {
-    avatar: 'https://www.github.com/alvarosabu.png',
-    name: 'Alvaro Sabu',
-    title: 'Creative Engineer | Content Creator',
-    org: 'TresJS',
-    orgLink: 'https://tresjs.org/',
-    desc: 'TresJS author, DevRel Engineer at @storyblok',
-    links: [
-      { icon: 'github', link: 'https://github.com/alvarosabu' },
-      { icon: 'twitter', link: 'https://twitter.com/alvarosabu' },
-      { icon: 'bluesky', link: 'https://bsky.app/profile/alvarosaburido.dev' },
-      { icon: 'youtube', link: 'https://www.youtube.com/channel/UC6D2KveNVcuuPqOKp0YWO3w' },
-    ],
-    sponsor: 'https://github.com/sponsors/alvarosabu',
-  },
-  {
-    avatar: 'https://github.com/garrlker.png',
-    name: 'Garrett Walker',
-    title: 'Frontend Engineer',
-    links: [
-      { icon: 'github', link: 'https://github.com/garrlker' },
-      { icon: 'twitter', link: 'https://twitter.com/garrlker' },
-    ],
-  },
-  {
-    avatar: 'https://www.github.com/Tinoooo.png',
-    name: 'Tino Koch',
-    title: 'Frontend Engineer',
-    links: [
-      { icon: 'github', link: 'https://github.com/Tinoooo' },
-      { icon: 'twitter', link: 'https://twitter.com/@ichbintino' },
-      { icon: 'bluesky', link: 'https://bsky.app/profile/iamtino.bsky.social' },
-    ],
-    sponsor: 'https://github.com/sponsors/Tinoooo',
-  },
-]
-export const maintainers = [
-  {
-    avatar: 'https://www.github.com/damienmontastier.png',
-    name: 'Damien Montastier',
-    title: 'Freelance Frontend Developer',
-    links: [
-      { icon: 'github', link: 'https://github.com/damienmontastier' },
-      { icon: 'twitter', link: 'https://twitter.com/dammontastier' },
-      { icon: 'bluesky', link: 'https://bsky.app/profile/dammontastier.bsky.social' },
-    ],
-  },
-]
-export const alumni = [
-  {
-    avatar: 'https://www.github.com/JaimeTorrealba.png',
-    name: 'Jaime Torrealba',
-    title: 'Frontend Engineer',
-    links: [
-      { icon: 'github', link: 'https://github.com/JaimeTorrealba' },
-      { icon: 'twitter', link: 'https://twitter.com/jaimebboyjt' },
-    ],
-    sponsor: 'https://github.com/sponsors/JaimeTorrealba',
-  },
-  {
-    avatar: 'https://www.github.com/andretchen0.png',
-    name: 'Andretchen0',
-    title: 'Frontend Engineer',
-    links: [
-      { icon: 'github', link: 'https://github.com/andretchen0' },
-    ],
-  },
-]

docs/advanced/attach.md

@@ -1,190 +0,0 @@
-# `attach` 🖇
-
-Using the `attach` prop, you can tell Tres exactly where you want to insert a child into its parent.
-
-:::info
-
-The `attach` prop is not required for many common cases. For instance:
-
-* adding a single `<Material>` to a `<Mesh>`
-* adding a `<Geometry>` to a `<Mesh>`
-* adding one or more `<Mesh>`s to a parent `<Mesh>`
-
-:::
-
-## Background
-
-Tres tries to automatically determine where to insert a child tag into its parent. For example, in this code, Tres will:
-
-* automatically insert the geometry into `parent.geometry`
-* automatically insert the material into `parent.material`
-
-```vue
-<template>
-  <TresMesh name="parent">
-    <TresBoxGeometry />
-    <TresMeshNormalMaterial />
-  </TresMesh>
-</template>
-```
-
-## Problem
-
-Tres covers common cases, like above. But it doesn't cover every possible case.
-
-When Tres doesn't automatically choose the proper insertion location for a child, one solution is to fall back to procedural code in `<script>`.
-
-Here's how you might add multiple materials to a mesh using `<script>`:
-
-```vue
-<script setup lang="ts">
-import { MeshBasicMaterial } from 'three'
-import { onMounted, shallowRef } from 'vue'
-
-const meshRef = shallowRef()
-onMounted(() => {
-  meshRef.value.material = [
-    new MeshBasicMaterial({ color: 'red' }),
-    new MeshBasicMaterial({ color: 'orange' }),
-    new MeshBasicMaterial({ color: 'yellow' }),
-    new MeshBasicMaterial({ color: 'green' }),
-    new MeshBasicMaterial({ color: 'blue' }),
-    new MeshBasicMaterial({ color: 'purple' }),
-  ]
-})
-</script>
-
-<template>
-  <TresMesh ref="meshRef">
-    <TresBoxGeometry />
-  </TresMesh>
-</template>
-```
-
-But this workaround means:
-
-* your materials aren't managed by Tres
-* your code is imperative, not declarative
-* your code is non-reactive by default
-
-## Solution
-
-The `attach` prop lets you specify where an object will be added to the parent object using declarative code.
-
-## Usage
-
-Here's the example above, rewritten declaratively using `attach`:
-
-```vue
-<template>
-  <TresMesh>
-    <TresBoxGeometry />
-    <TresMeshBasicMaterial color="red" attach="material-0" />
-    <TresMeshBasicMaterial color="orange" attach="material-1" />
-    <TresMeshBasicMaterial color="yellow" attach="material-2" />
-    <TresMeshBasicMaterial color="green" attach="material-3" />
-    <TresMeshBasicMaterial color="blue" attach="material-4" />
-    <TresMeshBasicMaterial color="purple" attach="material-5" />
-  </TresMesh>
-</template>
-```
-
-## "Pierced" `attach`
-
-You can deeply attach a child to a parent by "piercing" – i.e., using a kebab-case string.
-
-### Pseudocode
-
-First, here are a few simple pseudocode examples. This will attach `bar` at `foo.ab.cd`:
-
-```vue
-<foo>
-  <bar attach="ab-cd" />
-</foo>
-```
-
-This will attach `bar` at `foo.ab.cd.ef`:
-
-```vue
-<foo>
-  <bar attach="ab-cd-ef" />
-</foo>
-```
-
-### Usage
-
-As a concrete example, you can use "pierced" `attach` to add custom `BufferAttribute`s:
-
-```vue
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-
-const positions = new Float32Array([-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0])
-</script>
-
-<template>
-  <TresCanvas clear-color="gray">
-    <TresMesh :scale="0.3333">
-      <TresBufferGeometry>
-        <TresBufferAttribute
-          attach="attributes-position"
-          :count="positions.length / 3"
-          :array="positions"
-          :itemSize="3"
-        />
-      </TresBufferGeometry>
-      <TresMeshBasicMaterial color="red" />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-## Arrays
-
-You can attach within arrays by using array indices in the `attach` string.
-
-### Usage
-
-For example, you can use array indices to attach `THREE` post-processing passes to the `THREE.EffectComposer.passes` array:
-
-```vue
-<script lang="ts" setup>
-import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
-import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
-import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass'
-import { UnrealBloomPass } from 'three-stdlib'
-import { extend, useLoop, useTres } from '@tresjs/core'
-import { shallowRef } from 'vue'
-
-extend({ EffectComposer, OutputPass, UnrealBloomPass, RenderPass })
-const { renderer, scene, camera, sizes } = useTres()
-const composer = shallowRef<EffectComposer>()
-
-useLoop().render(() => {
-  if (composer.value) {
-    composer.value!.render()
-  }
-})
-</script>
-
-<template>
-  <TresEffectComposer
-    ref="composer"
-    :args="[renderer]"
-    :set-size="[sizes.width.value, sizes.height.value]"
-  >
-    <TresRenderPass
-      :args="[scene, camera]"
-      attach="passes-0"
-    />
-    <TresUnrealBloomPass
-      :args="[undefined, 0.5, 0.1, 0]"
-      attach="passes-1"
-    />
-    <TresOutputPass
-      attach="passes-2"
-      :set-size="[sizes.width.value, sizes.height.value]"
-    />
-  </TresEffectComposer>
-</template>
-```

docs/advanced/caveats.md

@@ -1,109 +0,0 @@
-# Caveats 😱
-
-Our aim is to provide a simple way of using ThreeJS in VueJS with the best developer experience possible. However, there are some caveats that you should be aware of.
-
-## ~~HMR and ThreeJS~~
-
-:::info
-
-This has been fixed in **TresJS** v1.7.0 🎉. You can now use HMR without reloading the page 🥹.
-
-:::
-
-Hot module replacement (HMR) is a feature that allows you to update your code without reloading the page. This is a great feature that makes development much faster. **TresJS** uses [Vite](https://vitejs.dev/). However, is really tricky to make it work correctly with ThreeJS.
-
-Why? Because Tres builds the scene in a declarative way. This means that it creates the instance and add it to the scene when the component is mounted. The complexity comes to know when to remove the instance from the scene and when to add it again.
-
-Although a minimal disposal workflow is implemented, it is not perfect. This means that sometimes you will have to reload the page to see the changes correctly, especially when you are referencing an instances using [Template Refs](https://v3.vuejs.org/guide/component-template-refs.html)
-
-```vue
-<script setup lang="ts">
-const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
-
-onLoop(({ _delta, elapsed }) => {
-  if (boxRef.value) {
-    boxRef.value.rotation.y += 0.01
-    boxRef.value.rotation.z = elapsed * 0.2
-  }
-})
-</script>
-
-<template>
-  <TresMesh ref="boxRef" :scale="1" cast-shadow>
-    <TresBoxGeometry :args="[1, 1, 1]" />
-    <TresMeshStandardMaterial color="teal" />
-  </TresMesh>
-</template>
-```
-
-If you change the `color` attribute of the `TresMeshStandardMaterial` component, you will see that the change is applied but the rotation is not working anymore. This is because the instance is disposed and created again.
-
-:::tip
-So as **rule of thumb** you should reload the page whenever you don't see your changes reflected.
-:::
-
-That being said we are working on a better solution for this 😁. If you have any idea on how to solve this, please let us know.
-
-You can follow the discussion in [HMR Disposal Discussion](https://github.com/Tresjs/tres/issues/23)
-
-## Reactivity
-
-We all love reactivity 💚. It is one of the most powerful features of VueJS. However, we need to be mindful of it when using ThreeJS.
-
-Vue reactivity is based on [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). This allows Vue 3 to automatically track changes to data objects and update the corresponding DOM elements whenever the data changes.
-
-Since we are rendering a scene and updating it in every frame, for example with a rate of 60FPS this means that we are updating the scene 60 times per second. If the object to be updated is reactive, Vue will try to update set object 60 times. This is not a good idea 😅 and will be detrimental for performance.
-
-Here is a benchmark of the difference between using a Proxy object and a plain object.
-
-<figure>
-  <img src="/proxy-benchmark.png" alt="Proxy vs Plain" style="width:100%">
-  <figcaption>Fig.1 - Executions per second Plan Object vs Proxy. </figcaption>
-</figure>
-
-Source: [Proxy vs Plain Object](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter)
-
-If you are forced to use reactivity, use [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref)
-
-Unlike `ref()`, the inner value of a shallow ref is stored and exposed as-is, and will not be made deeply reactive. Only the .value access is reactive. Source [VueJS Docs](https://vuejs.org/api/reactivity-advanced.html#shallowref)
-
-### Example
-
-❌ Incorrect
-
-```vue
-<script setup lang="ts">
-const position = reactive({ x: 0, y: 0, z: 0 })
-
-onLoop(({ _delta, elapsed }) => {
-  position.x = Math.sin(elapsed * 0.1) * 3
-})
-</script>
-
-<template>
-  <TresMesh :position="position" cast-shadow>
-    <TresBoxGeometry :args="[1, 1, 1]" />
-    <TresMeshStandardMaterial color="teal" />
-  </TresMesh>
-</template>
-```
-
-✅ Correct
-
-```vue
-<script setup lang="ts">
-const position = { x: 0, y: 0, z: 0 }
-const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
-
-onLoop(({ _delta, elapsed }) => {
-  boxRef.value.position.x = Math.sin(elapsed * 0.1) * 3
-})
-</script>
-
-<template>
-  <TresMesh ref="boxRef" :position="position" cast-shadow>
-    <TresBoxGeometry :args="[1, 1, 1]" />
-    <TresMeshStandardMaterial color="teal" />
-  </TresMesh>
-</template>
-```

docs/advanced/extending.md

@@ -1,35 +0,0 @@
-# Extend 🔌
-
-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/addons/controls/OrbitControls` module.
-
-```js
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
-```
-
-## Extending an element dynamically
-
-Or you can also add it dynamically in your components:
-
-```vue {2,3,4,7,13,15}
-<script setup lang="ts">
-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 })
-</script>
-
-<template>
-  <TresCanvas shadows alpha>
-    <TresPerspectiveCamera :position="[5, 5, 5]" />
-    <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
-    <TresMesh>
-      <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
-      <TresMeshMatcapMaterial :matcap="matcapTexture" />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```

docs/advanced/performance.md

@@ -1,159 +0,0 @@
-# Scaling performance 🚀
-
-> Quick guide with tips to improve performance of your Tres.js application.
-
-We are running WebGL on the browser, which can be quite expensive and it will depend on how powerful the user's device is. To make 3D accessible to everyone, we need to make sure our applications are optimized to run also on low-end devices. This guide will provide some tips to improve the performance of your Tres.js application.
-
-## On-demand rendering <Badge type="tip" text="^4.0.0" />
-
-By default, Tres.js will render your scene on every frame. This is great for most applications, but if you are building a game or a complex application, you might want to control when the scene is rendered.
-
-Otherwise it might drain your device battery 🔋 🔜 🪫 and make your computer sound like an airplane 🛫.
-
-Ideally, you only want to **render the scene when necessary**, for example when the user interacts with the scene and the camera moves, or when objects in the scene are animated.
-
-You can do that by setting the `renderMode` prop to `on-demand` or `manual`:
-
-### Mode `on-demand`
-
-<ClientOnly>
-  <div style="position: relative; aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;">
-    <onDemandRendering />
-  </div>
-</ClientOnly>
-
-```vue
-<TresCanvas render-mode="on-demand">
-  <!-- Your scene goes here -->
-</TresCanvas>
-```
-
-#### Automatic Invalidation
-
-When using `render-mode="on-demand"`, Tres.js will automatically invalidate the current frame by observing component props and lifecycle hooks like `onMounted` and `onUnmounted`. It will also invalidate the frame when resizing the window or changing any prop from the `<TresCanvas>` component like `clearColor` or `antialias`.
-
-The code below updates TresMesh's position-x prop every second, triggering a new render.
-
-```vue
-<script setup>
-import { ref } from 'vue'
-
-const positionX = ref(0)
-
-setTimeout(() => {
-  positionX.value = 1
-}, 1000)
-</script>
-
-<template>
-  <TresCanvas render-mode="on-demand">
-    <TresMesh :position-x="positionX">
-      <TresBoxGeometry />
-      <TresMeshBasicMaterial color="teal" />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-#### Manual Invalidation
-
-Since it is not really possible to observe all the possible changes in your application, you can also manually invalidate the frame by calling the `invalidate()` method from the [`useTresContext` composable](../api/composables.md#usetrescontext):
-
-::: code-group
-
-```vue [App.vue]
-<script setup>
-import { TresCanvas } from '@tresjs/core'
-import Scene from './Scene.vue'
-</script>
-
-<template>
-  <TresCanvas
-    render-mode="manual"
-  >
-    <Scene />
-  </TresCanvas>
-</template>
-```
-
-```vue [Scene.vue]
-<script setup>
-import { useTres } from '@tresjs/core'
-import { shallowRef, watch } from 'vue'
-
-const boxRef = shallowRef(null)
-const { invalidate } = useTres()
-
-watch(boxRef, () => {
-  if (boxRef.value?.position) {
-    boxRef.value.position.x = 1
-  }
-  invalidate()
-})
-</script>
-
-<template>
-  <TresMesh ref="boxRef">
-    <TresBoxGeometry />
-    <TresMeshBasicMaterial color="teal" />
-  </TresMesh>
-</template>
-```
-
-:::
-
-### Mode `always`
-
-In this rendering mode, Tres will continously render the scene on every frame. This is the default mode and the easiest to use, but it's also the most resource expensive one.
-
-### Mode `manual`
-
-If you want to have full control of when the scene is rendered, you can set the `render-mode` prop to `manual`:
-
-```vue
-<TresCanvas render-mode="manual">
-  <!-- Your scene goes here -->
-</TresCanvas>
-```
-
-In this mode, Tres will not render the scene automatically. You will need to call the `advance()` method from the [`useTresContext` composable](../api/composables.md#usetrescontext) to render the scene:
-
-```vue
-<script setup>
-import { useTres } from '@tresjs/core'
-
-const { advance } = useTres()
-
-advance()
-</script>
-```
-
-## Dispose resources `dispose()` <Badge type="tip" text="^4.0.0" />
-
-When you are done with a resource, like a texture, geometry, or material, you should dispose of it to free up memory. This is especially important when you are creating and destroying resources frequently, like in a game.
-
-TresJS will automatically dispose of resources recursively when the component is unmounted, but you can also perform this manually by calling the `dispose()` directly from the package:
-
-::: warning
-To avoid errors and unwanted sideeffects, resources created programatically with the use of `primitives` need to be manually disposed.
-:::
-
-```html {2,12}
-<script setup lang="ts">
-  import { dispose } from '@tresjs/core'
-  import { useGLTF } from '@tresjs/cientos'
-
-  const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', {
-    draco: true,
-  })
-  const model = nodes.Cube
-
-  onUnmounted(() => {
-    dispose(model)
-  })
-</script>
-
-<template>
-  <primitive :object="model" />
-</template>
-```

docs/advanced/primitive.md

@@ -1,67 +0,0 @@
-# Primitives
-
-The `<primitive />` component is a versatile low-level component in TresJS that allows you to directly use any [three.js](https://threejs.org/) object within your Vue application without an abstraction. It acts as a bridge between Vue's reactivity system and THREE's scene graph.
-
-## Usage
-
-```html
-<script setup lang="ts">
-  // Import necessary three.js classes
-  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three'
-
-  // Create a box geometry and a basic material
-  const geometry = new BoxGeometry(1, 1, 1)
-  const material = new MeshBasicMaterial({ color: 0x00ff00 })
-
-  // Create a mesh with the geometry and material
-  const meshWithMaterial = new Mesh(geometry, material)
-</script>
-
-<template>
-  <primitive :object="meshWithMaterial" />
-</template>
-```
-
-## Props
-
-- `object`: This prop expects either a plain or a reactive three.js [Object3D](https://threejs.org/docs/index.html?q=Object#api/en/core/Object3D) (preferably a [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref)) or any of its derived classes. It is the primary object that the `<primitive />` component will render. In the updated example, a `Mesh` object with an associated `Material` is passed to this prop.
-
-## Events
-
-The same pointer events available on the TresJS components are available on the `<primitive />` component. You can use these events to interact with the object in the scene. See the complete list of events [here](/api/events).
-
-```html
-<template>
-  <primitive :object="meshWithMaterial" @click="onClick" @pointermove="onPointerMove" />
-</template>
-```
-
-## Passing childrens via slots
-
-You can also pass children to the `<primitive />` component using slots. This is useful when you want to add additional objects to the scene that are not part of the main object.
-
-```html
-<template>
-  <primitive :object="meshWithOnlyGeometry">
-    <MeshBasicMaterial :color="0xff0000" />
-  </primitive>
-</template>
-```
-
-## Usage with Models
-
-The `<primitive />` component is especially useful for rendering complex objects like models loaded from external sources. The following example shows how to load a model from a GLTF file and render it using the `<primitive />` component.
-
-```html
-<script lang="ts" setup>
-  import { useGLTF } from '@tresjs/cientos'
-
-  const { nodes } = await useGLTF('/models/AkuAku.gltf')
-</script>
-
-<TresCanvas>
-  <Suspense>
-    <primitive :object="nodes.AkuAku" />
-  </Suspense>
-</TresCanvas>
-```

docs/api/composables.md

@@ -1,472 +0,0 @@
-# Composables
-
-Vue 3 [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api) allows you to create reusable logic that can be shared across components. It also allows you to create custom hooks that can be used in your components.
-
-**TresJS** takes huge advantage of this API to create a set of composable functions that can be used to create animations, interact with the scene and more. It also allows you to create more complex scenes that might not be possible using just the Vue Components (Textures, Loaders, etc.).
-
-The core of **TresJS** uses these composables internally, so you would be using the same API that the core uses.
-
-## useTresContext
-This composable aims to provide access to the state model which contains multiple useful properties.
-
-```ts
-const { camera, renderer, camera, cameras } = useTresContext()
-```
-
-::: warning
-`useTresContext` can be only be used inside of a `TresCanvas` since this component acts as the provider for the context data.
-:::
-
-::: code-group
-
-```vue [App.vue]
-<script setup>
-import { TresCanvas } from '@tresjs/core'
-import SubComponent from './SubComponent.vue'
-</script>
-
-<template>
-  <TresCanvas
-    render-mode="manual"
-  >
-    <SubComponent />
-  </TresCanvas>
-</template>
-```
-
-```vue [SubComponent.vue]
-<script lang="ts" setup>
-import { useTresContext } from '@tresjs/core'
-
-const context = useTresContext()
-</script>
-```
-
-:::
-
-### Properties of context
-| Property | Description |
-| --- | --- |
-| **camera** | The currently active camera |
-| **cameras** | The cameras that exist in the scene |
-| **controls** | The controls of your scene |
-| **deregisterCamera** | A method to deregister a camera. This is only required if you manually create a camera. Cameras in the template are deregistered automatically. |
-| **extend** | Extends the component catalogue. See [extending](/advanced/extending) |
-| **raycaster** | the global raycaster used for pointer events |
-| **registerCamera** | a method to register a camera. This is only required if you manually create a camera. Cameras in the template are registered automatically. |
-| **renderer** | the [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) of your scene |
-| **scene** | the [scene](https://threejs.org/docs/?q=sce#api/en/scenes/Scene). |
-| **setCameraActive** | a method to set a camera active |
-| **sizes** | contains width, height and aspect ratio of your canvas |
-| **invalidate** | a method to invalidate the render loop. This is only required if you set the `render-mode` prop to `on-demand`. |
-| **advance** | a method to advance the render loop. This is only required if you set the `render-mode` prop to `manual`. |
-| **loop** | the renderer loop |
-
-## useLoop <Badge text="v4.0.0" />
-
-This composable allows you to execute a callback on every rendered frame, similar to `useRenderLoop` but unique to each `TresCanvas` instance and with access to the [context](#usetrescontext).
-
-::: warning
-`useLoop` can be only be used inside of a `TresCanvas` since this component acts as the provider for the context data.
-:::
-
-#### Register update callbacks
-
-The user can register update callbacks (such as animations, fbo, etc) using the `onBeforeRender`
-
-::: code-group
-
-```vue [App.vue]
-<script setup>
-import { TresCanvas } from '@tresjs/core'
-import AnimatedBox from './AnimatedBox.vue'
-</script>
-
-<template>
-  <TresCanvas>
-    <AnimatedBox />
-  </TresCanvas>
-</template>
-```
-
-```vue [AnimatedBox.vue]
-<script setup>
-import { useLoop } from '@tresjs/core'
-import { shallowRef } from 'vue'
-
-const boxRef = shallowRef()
-
-const { onBeforeRender } = useLoop()
-
-onBeforeRender(({ delta }) => {
-  boxRef.value.rotation.y += delta
-})
-</script>
-
-<template>
-  <TresMesh ref="boxRef">
-    <TresBoxGeometry />
-    <TresMeshBasicMaterial color="teal" />
-  </TresMesh>
-</template>
-```
-
-:::
-
-Your callback function will be triggered just before a frame is rendered and it will be deregistered automatically when the component is destroyed.
-
-#### Take over the render loop
-
-You can take over the render call by using the `render` method.
-
-```ts
-const { render } = useLoop()
-
-render(({ renderer, scene, camera }) => {
-  renderer.render(scene, camera)
-})
-```
-
-::: warning
-Consider that if you take over the render loop, you will need to manually render the scene and take care of features like the conditional rendering yourself.
-:::
-
-#### Register after render callbacks (ex physics calculations)
-
-You can also register callbacks which are invoked after rendring by using the `onAfterRender` method.
-
-```ts
-const { onAfterRender } = useLoop()
-
-onAfterRender(({ renderer }) => {
-  // Calculations
-})
-```
-
-#### Render priority
-
-Both useBeforeRender and useAfteRender provide an optional priority number. This number could be anything from `Number.NEGATIVE_INFINITY` to `Number.POSITIVE_INFINITY` being the 0 by default. The lower the number, the earlier the callback will be executed.
-
-```ts
-onBeforeRender(() => {
-  console.count('triggered first')
-}, -1)
-
-onBeforeRender(() => {
-  console.count('triggered second')
-}, 1)
-```
-
-#### Params of the callback
-
-All callbacks receive an object with the following properties:
-
-- `delta`: The delta time between the current and the last frame. This is the time in seconds since the last frame.
-- `elapsed`: The elapsed time since the start of the render loop.
-- `clock`: The [THREE clock](https://threejs.org/docs/?q=clock#api/en/core/Clock) instance.
-- `renderer`: The [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) of your scene.
-- `scene`: The [scene](https://threejs.org/docs/?q=sce#api/en/scenes/Scene) of your scene.
-- `camera`: The currently active camera.
-- `raycaster`: The global raycaster used for pointer events.
-- `controls`: The controls of your scene.
-- `invalidate`: A method to invalidate the render loop. This is only required if you set the `render-mode` prop to `on-demand`.
-- `advance`: A method to advance the render loop. This is only required if you set the `render-mode` prop to `manual`.
-
-#### Pausing and resuming the update loop
-
-You can use `pause` and `resume` methods:
-
-```ts
-const { onBeforeRender, pause, resume } = useLoop()
-
-onBeforeRender(({ elapsed }) => {
-  sphereRef.value.position.y += Math.sin(elapsed) * 0.01
-})
-
-pause() // This will pause the loop
-resume() // This will resume the loop
-```
-
-#### Pausing and resuming the render
-
-You can use `pauseRender` and `resumeRender` methods:
-
-```ts
-const { pauseRender, resumeRender } = useLoop()
-
-onBeforeRender(({ elapse }) => {
-  sphereRef.value.position.y += Math.sin(elapsed) * 0.01
-})
-
-pauseRender() // This will pause the renderer
-resumeRender() // This will resume the renderer
-```
-
-#### Unregistering callbacks
-
-You can unregister a callback by calling the method `off` returned by the `onBeforeRender` or `onAfterRender` method.
-
-```ts
-const { onBeforeRender } = useLoop()
-
-const { off } = onBeforeRender(({ elapsed }) => {
-  sphereRef.value.position.y += Math.sin(elapsed) * 0.01
-})
-```
-
-## useLoader
-
-The `useLoader` composable allows you to load assets using the [THREE.js loaders](https://threejs.org/docs/#manual/en/introduction/Loading-3D-models). It returns a promise with loaded asset.
-
-```ts
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
-
-const { scene } = await useLoader(GLTFLoader, 'path/to/asset.gltf')
-```
-
-Since the `useLoader` 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. See [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) for more information.
-
-```vue
-<template>
-  <Suspense>
-    <TheComponentUsingLoader />
-  </Suspense>
-</template>
-```
-
-### UseLoader as component
-
-You can also use `UseLoader` (with uppercase) as component like so:
-
-```vue
-<script setup lang="ts">
-import { UseLoader } from '@tresjs/core'
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
-</script>
-
-<template>
-  <Suspense>
-    <UseLoader v-slot="{ data }" :loader="GLTFLoader" url="path/to/asset.gltf">
-      <primitive :object="data.scene" />
-    </UseLoader>
-  </Suspense>
-</template>
-```
-
-### Props
-
-| Prop | type |
-| ---- | --- |
-| **loader** | `THREE.Loader` |
-| **url** | `String` |
-
-::: warning
-The `UseLoader` component needs to be wrapped in a `Suspense` component in order to work
-:::
-
-## useTexture
-
-The `useTexture` composable allows you to load textures using the [THREE.js texture loader](https://threejs.org/docs/#api/en/loaders/TextureLoader). It returns a promise with the loaded texture(s).
-
-```ts
-const texture = await useTexture(['path/to/texture.png'])
-```
-
-**useTexture** also accepts an object with the following properties:
-
-- `map`: a basic texture that is applied to the surface of an object
-- `displacementMap`: a texture that is used to add bumps or indentations to the object's surface
-- `normalMap`: a texture that is used to add surface detail to and variations in shading to the object
-- `roughnessMap`: a texture that is used to add roughness or a matte finish to the object's surface
-- `metalnessMap`: a texture that is used to add a metallic effect to the object's surface
-- `aoMap`: a texture that is used to add ambient occlusion (shading in areas where light is blocked by other objects) to the object.
-- `alphaMap`: a texture that is used to add alpha (the black part render as transparent) to the object. It's necessary to set :trasparent="true" on the material to use this map
-- `matcap`: this textures encodes the material color and shading.
-
-In that case it will return an object with the loaded textures.
-
-```ts
-const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap, alphaMap, matcap } = await useTexture({
-  map: 'path/to/albedo.png',
-  displacementMap: 'path/to/height.png',
-  normalMap: 'path/to/normal.png',
-  roughnessMap: 'path/to/roughness.png',
-  metalnessMap: 'path/to/metalness.png',
-  aoMap: 'path/to/ambien-occlusion.png',
-  alphaMap: 'path/to/alpha.png',
-  matcap: 'path/to/matcap.png',
-})
-```
-
-Then you can bind the textures to the material.
-
-```vue
-<template>
-  <TresCanvas>
-    <TresMesh>
-      <TresSphereGeometry />
-      <TresMeshStandardMaterial
-        :map="map"
-        :displacement-map="displacementMap"
-        :normal-map="normalMap"
-        :roughness-map="roughnessMap"
-        :metalness-map="metalnessMap"
-        :ao-map="aoMap"
-        :alpha-map="alphaMap"
-      />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-`useTexture` by default takes the second argument 'manager' as LoadingManager. When omitted, it will automatically be added to `THREE.DefaultLoadingManager`. Of course, you can also add your own LoadingManager, like this:
-```ts
-const loadingManager = new LoadingManager()
-const texture = await useTexture({ map: 'path/to/texture.png' }, loadingManager)
-```
-
-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.
-
-### UseTexture as component
-
-You can also use `UseTexture` (with uppercase) as component like so:
-
-```html
-<Suspense>
-  <UseTexture v-slot="{ textures }" map="path/to/texture.png">
-    <TresMesh>
-      <TresBoxGeometry />
-      <TresMeshStandardMaterial :map="textures.map" />
-    </TresMesh>
-  </UseTexture>
-</Suspense>
-```
-
-### Props
-
-| Prop | type |
-| ---- | --- |
-| **map?** | `String` |
-| **displacementMap?** | `String` |
-| **normalMap?** | `String` |
-| **roughnessMap?** | `String` |
-| **metalnessMap?** | `String` |
-| **aoMap?** | `String` |
-| **alphaMap?** | `String` |
-| **matcap?** | `String` |
-
-::: warning
-The `UseTexture` component needs to be wrapped in a `Suspense` component in order to work
-:::
-
-## useSeek
-
-The `useSeek` composable provides utilities to easily traverse and navigate through complex ThreeJS scenes and object children graphs. It exports 4 functions which allow you to find child objects based on specific properties.
-
-```ts
-const { seek, seekByName, seekAll, seekAllByName } = useSeek()
-```
-
-The seek function accepts three parameters:
-
-- `parent`: A ThreeJS scene or Object3D.
-- `property`: The property to be used in the search condition.
-- `value`: The value of the property to match.
-
-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.
-
-```ts
-const carRef = shallowRef(null)
-
-watch(carRef, ({ model }) => {
-  if (model) {
-    const car = model.children[0]
-
-    const body = seek(car, 'name', 'Octane_Octane_Body_0')
-    body.color.set(new Color('blue'))
-  }
-})
-```
-
-Similarly, the `seekAll` and `seekAllByName` functions return an array of child objects whose property includes the given value. If no matches are found, then they return an empty array and a warning is logged.
-
-```ts
-const character = shallowRef(null)
-
-watch(character, ({ model }) => {
-  if (model) {
-    const bones = seekAll(character, type, 'Bone')
-  }
-})
-```
-
-## useRenderLoop
-
-The `useRenderLoop` composable can be use for animations that don't require access to the [context](#usetrescontext). It allows you to register a callback that will be called on native refresh rate.
-
-::: warning
- Since v4.0.0, `useRenderLoop` is no longer used internally to control the rendering, if you want to use conditional rendering, multiple canvases or need access to state please `useLoop` instead. [Read why](#useloop)
-:::
-
-```ts
-const { onLoop, resume } = useRenderLoop()
-
-onLoop(({ delta, elapsed, clock }) => {
-  // I will run at every frame ~60FPS (depending of your monitor)
-})
-```
-
-::: warning
-Be mindful of the performance implications of using this composable. It will run at every frame, so if you have a lot of logic in your callback, it might impact the performance of your app. Specially if you are updating reactive states or references.
-:::
-
-The `onLoop` callback receives an object with the following properties based on the [THREE clock](https://threejs.org/docs/?q=clock#api/en/core/Clock):
-
-- `delta`: The delta time between the current and the last frame. This is the time in seconds since the last frame.
-- `elapsed`: The elapsed time since the start of the render loop.
-
-This composable is based on `useRafFn` from [vueuse](https://vueuse.org/core/useRafFn/). Thanks to [@wheatjs](https://github.com/wheatjs) for the amazing contribution.
-
-### Before and after render
-
-You can also register a callback that will be called before and after the renderer updates the scene. This is useful if you add a profiler to measure the FPS for example.
-
-```ts
-const { onBeforeLoop, onAfterLoop } = useRenderLoop()
-
-onBeforeLoop(({ delta, elapsed }) => {
-  // I will run before the renderer updates the scene
-  fps.begin()
-})
-
-onAfterLoop(({ delta, elapsed }) => {
-  // I will run after the renderer updates the scene
-  fps.end()
-})
-```
-
-### Pause and resume
-
-You can pause and resume the render loop using the exposed `pause` and `resume` methods.
-
-```ts
-const { pause, resume } = useRenderLoop()
-
-// Pause the render loop
-pause()
-
-// Resume the render loop
-resume()
-```
-
-Also you can get the active state of the render loop using the `isActive` property.
-
-```ts
-const { resume, isActive } = useRenderLoop()
-
-console.log(isActive.value) // false
-
-resume()
-
-console.log(isActive.value) // true
-```

docs/api/events.md

@@ -1,67 +0,0 @@
-# Events
-
-**TresJS** components emit pointer events when they are interacted with. This is the case for the components that represent three.js classes that derive from [THREE.Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) (like meshes, groups,...).
-
-<StackBlitzEmbed project-id="tresjs-events" />
-
-## Pointer Events
-
-The following pointer events are available on `v3` and previous:
-
-- `click`
-- `pointer-move`
-- `pointer-enter`
-- `pointer-leave`
-
-From `v4.x` on, the following pointer events are been added to the list:
-
-- `context-menu` (right click)
-- `double-click`
-- `pointer-down`
-- `pointer-up`
-- `wheel`
-- `pointer-missed`
-
-```html
-<TresMesh
-  @click="(event) => console.log('click')"
-  @context-menu="(event) => console.log('context-menu (right click)')"
-  @double-click="(event) => console.log('double-click')"
-  @pointer-move="(event) => console.log('pointer-move')"
-  @pointer-enter="(event) => console.log('pointer-enter')"
-  @pointer-leave="(event) => console.log('pointer-leave')"
-  @pointer-down="(event) => console.log('pointer-down')"
-  @pointer-up="(event) => console.log('pointer-up')"
-  @wheel="(event) => console.log('wheel')"
-  @pointer-missed="(event) => console.log('pointer-missed')"
-/>
-```
-
-| <div style="width:160px">Event</div>            | fires when ...                                                                       | Event Handler Parameter Type(s)                                                                                                                                                                       |
-| ---------------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| click            | the events pointerdown and pointerup fired on the same object one after the other    | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
-| contextMenu <Badge type="warning" text="4.0.0" />     | the user triggers a context menu, often by right-clicking                            | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)                                                                                                                         |
-| double-click <Badge type="warning" text="4.0.0" />      | the user clicks the mouse button twice in quick succession on the same object        | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
-| wheel <Badge type="warning" text="4.0.0" />              | the mouse wheel or similar device is rotated                                         | [WheelEvent](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent)                                                                                                                             |
-| pointer-down <Badge type="warning" text="4.0.0" />       | the pointer is pressed down over the object                                          | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
-| pointer-up <Badge type="warning" text="4.0.0" />        | the pointer is released over the object                                              | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
-| pointer-leave    | the pointer is leaves the object                                                     | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)                                                                                                                         |
-| pointer-move     | the pointer is moving above the object                                               | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
-| pointer-missed <Badge type="warning" text="4.0.0" />    | the pointer interaction is attempted but misses the object                           | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)                                                                                                                         |
-
-## Event Propagation (Bubbling 🫧) <Badge type="warning" text="^4.0.0" />
-
-Propagation of events on 3D scenes works differently than in the DOM because objects can **occlude each other in 3D**. The `intersections` array contains all the objects that the raycaster intersects with, sorted by distance from the camera. The first object in the array is the closest one to the camera.
-
-When an event is triggered, the event is propagated to the closest object in the `intersections` array. If the event is not handled by the object, it will be propagated to the next object in the array.
-
-`event.stopPropagation()` can be used to stop the event from propagating to the next object in the array, stoping the event from bubbling up and reaching to farther objects (the oens behind the first one).
-
-```html
-<TresMesh
-  @pointer-down="(event) => {
-    console.log('pointer-down')
-    event.stopPropagation()
-  }"
-/>
-```

docs/api/instances-arguments-and-props.md

@@ -1,144 +0,0 @@
-# Instances
-
-The core idea of **Tres** is an _autogenerated catalogue_ of all the ThreeJS elements. This catalogue is generated from the ThreeJS source code, so it's always up to date.
-
-When using ThreeJS, you need to import the elements you want to use. For example, if you want to use a `PerspectiveCamera`, you need to import it from the `three` package:
-
-```js
-import { PerspectiveCamera } from 'three'
-
-const camera = new PerspectiveCamera(45, width / height, 1, 1000)
-```
-
-With **Tres** you don't need to import anything, that's because **Tres** automatically generate a **Vue Component based of the Three Object you want to use in PascalCase with a Tres prefix**. For example, if you want to use a `PerspectiveCamera` you would use `<TresPerspectiveCamera />` component.
-
-```vue
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera />
-    <!-- Your scene goes here -->
-  </TresCanvas>
-</template>
-```
-
-This means that you can use the same [documentation](https://threejs.org/docs/) as you would when using plain ThreeJS, but with the power of Vue.
-
-## Declaring objects
-
-If we follow this argument, you should be able to lay out an instance like this: ❌
-
-```vue
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera visible :position="new THREE.Vector3(1, 2, 3)" />
-    <!-- Your scene goes here -->
-  </TresCanvas>
-</template>
-```
-
-But with **Tres** this is not needed, you can define properties declaratively like this: ✅
-
-```vue
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera visible :position="[1, 2, 3]" />
-    <!-- Your scene goes here -->
-  </TresCanvas>
-</template>
-```
-
-## Arguments
-
-Some ThreeJS objects have arguments, for example, the `PerspectiveCamera` constructor has the following arguments:
-
-- `fov` - Camera frustum vertical field of view.
-- `aspect` - Camera frustum aspect ratio.
-- `near` - Camera frustum near plane.
-- `far` - Camera frustum far plane.
-
-To pass these arguments to the `TresPerspectiveCamera` component, you can use the `args` prop:
-
-```vue
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <!-- Your scene goes here -->
-  </TresCanvas>
-</template>
-```
-
-This is the same as doing this:
-
-```ts
-const camera = new PerspectiveCamera(45, 1, 0.1, 1000)
-```
-
-## Props
-
-You can also pass props to the component, for example, the `TresAmbientLight` has a `intensity` property, so you can pass it to the component like this:
-
-```html
-<TresAmbientLight :intensity="0.5" />
-```
-
-### Set
-
-All properties whose underlying object has a `.set()` method have a shortcut to receive the value as an array. For example, the `TresPerspectiveCamera` has a `position` property, which is a `Vector3` object, so you can pass it to the component like this:
-
-```html
-<TresPerspectiveCamera :position="[1, 2, 3]" />
-```
-
-To specify transformation properties such as position, rotation, and scale, a shorthand is available that allows you to directly indicate the axis you wish to set within the props. A similar shorthand is also available for color property.
-
-<!-- I changed color syntax from vue to html, because vue seems broken and does not color nested components -->
-```html
-<TresMesh :position-x="1" :scale-y="2" :rotation-x="Math.PI * 2">
-  <TresMeshBasicMaterial :color-r="0.7" :color-b="0.3" />
-</TresMesh>
-```
-
-::: warning
-When you set the rotation property in [three.js](https://threejs.org/docs/index.html#api/en/math/Euler), it will use the 'XYZ' order by default.
-It is important to note that when setting the rotation property with the shorthand, the order in which you set the angles matters. For more information on this topic, please refer to  [Euler angles](https://en.wikipedia.org/wiki/Euler_angles)
-:::
-
-```vue
-<TresMesh :rotation-x="1" :rotation-y="2" :rotation-z="Math.PI * 2" />
-
-<TresMesh :rotation-z="Math.PI * 2" :rotation-x="1" :rotation-y="2" />
-
-<!-- Note that the order of the rotation properties matters, and swapping the order can result in different outcomes. -->
-```
-
-### Scalar
-
-Another shortcut you can use is pass a scalar value to a property that expects a `Vector3` object, using the same value for the rest of the Vector:
-
-```html
-<TresPerspectiveCamera :position="5" /> ✅
-```
-
-```html
-<TresPerspectiveCamera :position="[5, 5, 5]" /> ✅
-```
-
-### Colors
-
-You can pass colors to the components using the `color` prop, which accepts a string with the color name or a hex value:
-
-```html
-<TresAmbientLight color="teal" /> ✅
-```
-
-```html
-<TresAmbientLight color="#008080" /> ✅
-```
-
-### Methods
-
-Some underlying properties are actually methods, the `TresPerspectiveCamera` has a `lookAt` method inherit from [Object3d](https://threejs.org/docs/#api/en/core/Object3D.lookAt), so you can pass it the coords to the component like this:
-
-```html
-<TresPerspectiveCamera :look-at="[1, 2, 3]" />
-```

docs/api/tres-canvas.md

@@ -1,105 +0,0 @@
-# TresCanvas
-
-The `TresCanvas` component is the main component of Tres. It's the one that creates the ThreeJS `WebGLRenderer`.
-
-```vue{2,5}
-<template>
-  <TresCanvas shadows :output-encoding="SRGBColorSpace">
-    <TresPerspectiveCamera />
-      <!-- Your scene goes here -->
-  </TresCanvas>
-</template>
-```
-
-## Canvas size
-
-The `TresCanvas` component will use the parent element size as the canvas size. If you want to use the window size as the canvas size, you can set the `window-size` prop to `true`.
-
-```vue
-<template>
-  <TresCanvas window-size>
-    <!-- Your scene goes here -->
-  </TresCanvas>
-</template>
-```
-
-Or you can use CSS to set your canvas size.
-
-```css
-html,
-body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  width: 100%;
-}
-#canvas {
-  height: 100%;
-  width: 100%;
-}
-```
-
-## Presets
-
-Tres comes with a few presets for the `TresCanvas` component. You can use them by setting the `preset` prop.
-
-### Realistic
-
-The `realistic` preset makes it easy to setup the renderer for more realistic 3D scenes.
-
-```vue
-<template>
-  <TresCanvas preset="realistic">
-    <!-- Your scene goes here -->
-  </TresCanvas>
-</template>
-```
-
-It's equivalent to:
-
-```ts
-renderer.shadows = true
-renderer.physicallyCorrectLights = true
-renderer.outputColorSpace = SRGBColorSpace
-renderer.toneMapping = ACESFilmicToneMapping
-renderer.toneMappingExposure = 3
-renderer.shadowMap.enabled = true
-renderer.shadowMap.type = PCFSoftShadowMap
-```
-
-## Props
-
-| Prop | Description | Default |
-| ---- | ---- | --- |
-| **alpha** | Controls the default clear alpha value. When set to true, the value is 0. Otherwise it's 1. | false |
-| **antialias** | Whether to perform antialiasing. | `true` |
-| **camera** | A manual camera to be used by the renderer. | |
-| **clearColor** | The color the renderer will use to clear the canvas. | `#000000` |
-| **context** | This can be used to attach the renderer to an existing [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) | |
-| **depth** | Whether the drawing buffer has a [depth buffer](https://en.wikipedia.org/wiki/Z-buffering) of at least 16 bits. | `true` |
-| **renderMode** | Render mode, can be `always`, `on-demand` or `manual`. See [Performance](../advanced/performance)  | `always` |
-| **failIfMajorPerformanceCaveat** | Whether the renderer creation will fail upon low performance is detected. See [WebGL spec](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) for details. | `false` |
-| **logarithmicDepthBuffer** | Whether to use a logarithmic depth buffer. It may be necessary to use this if dealing with huge differences in scale in a single scene. Note that this setting uses gl_FragDepth if available which disables the [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) optimization and can cause a decrease in performance. | `false` |
-| **outputColorSpace** | Defines the output encoding | `LinearEncoding` |
-| **powerPreference** | Provides a hint to the user agent indicating what configuration of GPU is suitable for this WebGL context. Can be `high-performance`, `low-power` or `default`. | `default` |
-| **precision** | Shader precision. Can be `highp`, `mediump` or `lowp`. | "highp" if supported by the device |
-| **premultipliedAlpha** | Whether the renderer will assume that colors have [premultiplied alpha](https://en.wikipedia.org/wiki/Glossary_of_computer_graphics#premultiplied_alpha). | `true` |
-| **preserveDrawingBuffer** | Whether to preserve the buffers until manually cleared or overwritten.. | `false` |
-| **shadows** | Enable shadows in the renderer | `false` |
-| **shadowMapType** | Set the shadow map type | `PCFSoftShadowMap` |
-| **stencil** | Whether the drawing buffer has a [stencil buffer](https://en.wikipedia.org/wiki/Stencil_buffer) of at least 8 bits. | `true` |
-| **toneMapping** | Defines the tone mapping exposure used by the renderer. | `ACESFilmicToneMapping` |
-| **toneMappingExposure** | Exposure level of tone mapping. | `1` |
-| **useLegacyLights** | Whether to use the legacy lighting mode or not | `true` |
-| **windowSize** | Whether to use the window size as the canvas size or the parent element. | `false` |
-| **enableProvideBridge** | Enables the provide/inject bridge between Vue context and TresCanvas. | `true` |
-
-### Defaults
-
-Tres tries to be as little opinionated as possible. That's why it doesn't set almost any default value for the `TresCanvas` component. It uses the defaults from [three.js](https://threejs.org/). The only exception is the `antialias` prop. It's set to `true` by default.
-
-## Exposed public properties
-
-| Property | Description |
-| ---- | ---- |
-| context | see [useTresContext](composables#usetrescontext) |

docs/app/app.config.ts

@@ -0,0 +1,97 @@
+import type { AppConfigInput } from 'nuxt/schema'
+
+const newLocal = {
+  ui: {
+    colors: {
+      primary: 'teal',
+      neutral: 'zinc',
+    },
+    card: {
+      slots: {
+        root: 'hover:bg-linear-[115deg,#272727 .06%,#171717]',
+        body: 'p-2 sm:p-3',
+      },
+    },
+  },
+  uiPro: {
+    footer: {
+      slots: {
+        root: 'border-t border-default',
+        left: 'text-sm text-muted',
+      },
+    },
+  },
+  seo: {
+    siteName: 'TresJS Docs',
+  },
+  header: {
+    title: '',
+    to: '/',
+    logo: {
+      alt: '',
+      light: '',
+      dark: '',
+    },
+    search: true,
+    colorMode: true,
+    links: [
+      {
+        icon: 'i-simple-icons-github',
+        to: 'https://github.com/tresjs/tres',
+        target: '_blank',
+        ariaLabel: 'GitHub',
+      },
+      {
+        icon: 'i-simple-icons-discord',
+        to: 'https://discord.com/invite/UCr96AQmWn',
+        target: '_blank',
+        ariaLabel: 'Discord',
+      },
+    ],
+  },
+  footer: {
+    credits: `Copyright © ${new Date().getFullYear()} TresJS`,
+    colorMode: false,
+    links: [{
+      'icon': 'i-lucide-globe',
+      'to': 'https://tresjs.org',
+      'target': '_blank',
+      'aria-label': 'TresJS Website',
+    }, {
+      'icon': 'i-simple-icons-discord',
+      'to': 'https://discord.gg/WTpvaxr5',
+      'target': '_blank',
+      'aria-label': 'TresJS on Discord',
+    }, {
+      'icon': 'i-simple-icons-x',
+      'to': 'https://x.com/tresjs_dev',
+      'target': '_blank',
+      'aria-label': 'TresJS on X',
+    }, {
+      'icon': 'i-simple-icons-github',
+      'to': 'https://github.com/tresjs/tres',
+      'target': '_blank',
+      'aria-label': 'TresJS on GitHub',
+    }],
+  },
+  toc: {
+    title: 'Table of Contents',
+    bottom: {
+      title: 'Community',
+      edit: 'https://github.com/tresjs/tres/edit/main/docs/content',
+      links: [{
+        icon: 'i-lucide-heart',
+        label: 'Become a sponsor',
+        to: 'https://github.com/sponsors/tresjs',
+        target: '_blank',
+      }, {
+        icon: 'i-lucide-star',
+        label: 'Star on GitHub',
+        to: 'https://github.com/tresjs/tres',
+        target: '_blank',
+      }],
+    },
+  },
+} satisfies AppConfigInput
+
+export default defineAppConfig(newLocal)

docs/app/app.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+const { seo } = useAppConfig()
+const colorMode = useColorMode()
+
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set(_isDark) {
+    colorMode.preference = _isDark ? 'dark' : 'light'
+  },
+})
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+  server: false,
+})
+
+useHead({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+  ],
+  link: [
+    { rel: 'icon', href: isDark.value ? '/favicon-dark.svg' : '/favicon.svg' },
+  ],
+  htmlAttrs: {
+    lang: 'en',
+  },
+})
+
+useSeoMeta({
+  titleTemplate: title => title ? `${title} · TresJS` : 'TresJS: Building 3D scenes with Vue',
+  ogSiteName: seo?.siteName,
+  twitterCard: 'summary_large_image',
+  ogImage: '/og-image.png',
+  twitterImage: '/og-image.png',
+  ogUrl: 'https://tresjs.org',
+  twitterTitle: 'TresJS: Building 3D scenes with Vue',
+  twitterDescription: 'TresJS is a library for building 3D scenes with Vue. It provides a set of components and utilities for creating and managing 3D scenes.',
+})
+
+provide(navigationInjectionKey, navigation)
+</script>
+
+<template>
+  <UApp>
+    <NuxtLoadingIndicator />
+
+    <AppHeader />
+
+    <UMain class="pattern-bg">
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </UMain>
+
+    <AppFooter />
+
+    <ClientOnly>
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation"
+      />
+    </ClientOnly>
+  </UApp>
+</template>

docs/app/assets/css/main.css

@@ -0,0 +1,70 @@
+@import 'tailwindcss';
+@import '@nuxt/ui-pro';
+
+@source "../../../content/**/*";
+
+@theme static {
+  --font-display: 'Manrope', sans-serif;
+  --font-sans: 'Inter', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+  --breakpoint-3xl: 1920px;
+  --ui-pattern-fg: color-mix(in oklab, var(--ui-text) 5%, transparent);
+  --ui-pattern-bg: repeating-linear-gradient(
+    315deg,
+    var(--ui-pattern-fg) 0,
+    var(--ui-pattern-fg) 1px,
+    transparent 0,
+    transparent 50%
+  );
+  --ui-pattern-dot-fg: color-mix(in oklab, oklch(0.18 0.04 266.75) 5%, transparent);
+  --ui-pattern-dot-bg: radial-gradient(var(--ui-pattern-dot-fg) 1px, transparent 0);
+  --ui-header-height: 3rem;
+  /* Technical blueprint styles */
+  --ui-line-gap: 5px;
+  --ui-line-width: 1px;
+  --ui-line-offset: 172px;
+  --ui-line-color: var(--color-gray-200);
+
+  /* Teal Palette */
+  --color-teal-50: #f2fbf8;
+  --color-teal-100: #d3f4ea;
+  --color-teal-200: #a6e9d6;
+  --color-teal-300: #82dbc5;
+  --color-teal-400: #44bda2;
+  --color-teal-500: #2ba189;
+  --color-teal-600: #20816f;
+  --color-teal-700: #1d685b;
+  --color-teal-800: #1c534b;
+  --color-teal-900: #1b463f;
+  --color-teal-950: #0a2925;
+
+  /* Yellow/Brown Palette */
+  --color-yellow-50: #fff8eb;
+  --color-yellow-100: #feeac7;
+  --color-yellow-200: #fdd48a;
+  --color-yellow-300: #fbb03b;
+  --color-yellow-400: #fa9e25;
+  --color-yellow-500: #f47a0c;
+  --color-yellow-600: #b85607;
+  --color-yellow-700: #b3390a;
+  --color-yellow-800: #922b0e;
+  --color-yellow-900: #78250f;
+  --color-yellow-950: #451003;
+}
+
+.dark {
+  --ui-line-color: var(--color-gray-800);
+  --ui-pattern-dot-fg: color-mix(in oklab, var(--color-gray-200) 5%, transparent);
+}
+
+.pattern-bg {
+  background-image: var(--ui-pattern-bg);
+  background-size: 10px 10px;
+  background-attachment: fixed;
+}
+
+.pattern-dot-bg {
+  background-image: var(--ui-pattern-dot-bg);
+  background-size: 10px 10px;
+  background-attachment: fixed;
+}

docs/app/components/AppFooter.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { footer } = useAppConfig()
+</script>
+
+<template>
+  <UFooter>
+    <template #left>
+      {{ footer.credits }}
+    </template>
+
+    <template #right>
+      <UColorModeButton v-if="footer?.colorMode" />
+
+      <template v-if="footer?.links">
+        <UButton
+          v-for="(link, index) of footer?.links"
+          :key="index"
+          v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
+        />
+      </template>
+    </template>
+  </UFooter>
+</template>

docs/app/components/AppHeader.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const navigation = inject(navigationInjectionKey)
+
+const { header } = useAppConfig()
+
+const navItems: NavigationMenuItem[] = [
+  {
+    label: 'Guide',
+    to: '/getting-started/installation',
+  },
+  {
+    label: 'API',
+    to: '/api',
+  },
+]
+
+const route = useRoute()
+
+const version = useRuntimeConfig().public.pkgVersion
+</script>
+
+<template>
+  <UHeader
+    :ui="{ center: 'flex-1' }"
+    :to="header?.to || '/'"
+  >
+    <UContentSearchButton
+      v-if="header?.search"
+      :collapsed="false"
+      class="w-full"
+      variant="subtle"
+    />
+
+    <template
+      v-if="header?.logo?.dark || header?.logo?.light || header?.title"
+      #title
+    >
+      <UColorModeImage
+        v-if="header?.logo?.dark || header?.logo?.light"
+        :light="header?.logo?.light!"
+        :dark="header?.logo?.dark!"
+        :alt="header?.logo?.alt"
+        class="h-6 w-auto shrink-0"
+      />
+
+      <span v-else-if="header?.title">
+        {{ header.title }}
+      </span>
+    </template>
+
+    <template
+      v-else
+      #left
+    >
+      <NuxtLink
+        :to="header?.to || '/'"
+        class="mr-2"
+      >
+        <TheLogo class="w-auto h-6 shrink-0" />
+      </NuxtLink>
+      <UBadge
+        color="primary"
+        variant="subtle"
+        size="sm"
+      >
+        {{ version }}
+      </UBadge>
+    </template>
+
+    <template #right>
+      <UContentSearchButton
+        v-if="header?.search"
+        class="lg:hidden"
+        variant="subtle"
+      />
+
+      <UNavigationMenu
+        v-if="route.path === '/'"
+        :items="navItems"
+        class="hidden md:flex"
+      />
+
+      <UColorModeButton v-if="header?.colorMode" />
+
+      <template v-if="header?.links">
+        <UButton
+          v-for="(link, index) of header.links"
+          :key="index"
+          class="hidden md:flex"
+          v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
+        />
+      </template>
+    </template>
+
+    <template #body>
+      <UContentNavigation
+        highlight
+        :navigation="navigation"
+      />
+    </template>
+  </UHeader>
+</template>

docs/app/components/AppSide.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const navigation = inject(navigationInjectionKey)
+
+const route = useRoute()
+
+const { headerLinks } = useHeaderLinks()
+const links = computed(() => headerLinks.value ?? [])
+
+const asideNavigation = computed(() => {
+  const localPath = [route.params.slug?.[0]].filter(Boolean).join('/')
+
+  const result = navPageFromPath(`/${localPath}`, navigation?.value || [])?.children || []
+
+  return result
+})
+</script>
+
+<template>
+  <UPageAside>
+    <UPageAnchors :links="links" />
+    <USeparator
+      type="dashed"
+      class="my-6"
+    />
+    <UContentNavigation
+      class="pr-4"
+      highlight
+      :navigation="asideNavigation"
+    />
+  </UPageAside>
+</template>

docs/app/components/DottedDiagram.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="aspect-video p-2 my-8 w-full rounded-lg border border-gray-100 dark:border-gray-800 pattern-dot-bg bg-neutral-50 dark:bg-neutral-900 flex justify-center items-center">
+    <slot></slot>
+  </div>
+</template>

docs/app/components/GithubMagicLink.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { computedAsync } from '@vueuse/core'
+
+interface GitHubURLInfo {
+  type: 'permalink' | 'issue' | 'pr' | 'repo' | 'wiki' | 'unknown' // Only declare 'type' once, including 'wiki'
+  owner: string
+  repo: string
+  path?: string
+  lines?: string
+  number?: string
+  title?: string
+  page?: string // For wiki page name
+}
+
+const props = defineProps<{
+  href: string
+  target: string
+}>()
+
+// Parse GitHub URL to determine type and extract information
+const parseGitHubURL = (url: string): GitHubURLInfo => {
+  try {
+    const urlObj = new URL(url)
+    if (urlObj.hostname !== 'github.com') {
+      return { type: 'unknown', owner: '', repo: '' }
+    }
+    const pathParts = urlObj.pathname.split('/').filter(Boolean)
+    // Repo root: https://github.com/owner/repo
+    if (pathParts.length === 2) {
+      return { type: 'repo', owner: pathParts[0] || '', repo: pathParts[1] || '' }
+    }
+    if (pathParts.length < 2) {
+      return { type: 'unknown', owner: '', repo: '' }
+    }
+    const owner = pathParts[0] || ''
+    const repo = pathParts[1] || ''
+    // Check for issue URL
+    if (pathParts[2] === 'issues' && pathParts[3]) {
+      return {
+        type: 'issue',
+        owner,
+        repo,
+        number: pathParts[3]!,
+      }
+    }
+    // Check for PR URL
+    if (pathParts[2] === 'pull' && pathParts[3]) {
+      return {
+        type: 'pr',
+        owner,
+        repo,
+        number: pathParts[3]!,
+      }
+    }
+    // Check for wiki URL
+    if (pathParts[2] === 'wiki' && pathParts[3]) {
+      // Handles links like https://github.com/owner/repo/wiki/Page-Name
+      return {
+        type: 'wiki',
+        owner,
+        repo,
+        page: pathParts[3],
+      }
+    }
+    // Check for permalink URL (blob/commit/tree)
+    if (pathParts[2] === 'blob' && pathParts.length > 4) {
+      const filePath = pathParts.slice(4).join('/')
+      const hashLines = urlObj.hash ? urlObj.hash.substring(1) : ''
+      return {
+        type: 'permalink',
+        owner,
+        repo,
+        path: filePath,
+        lines: hashLines || undefined,
+      }
+    }
+    return { type: 'unknown', owner, repo }
+  }
+  catch {
+    return { type: 'unknown', owner: '', repo: '' }
+  }
+}
+
+// Fetch issue or PR title from GitHub API
+const fetchGitHubTitle = async (owner: string, repo: string, type: 'issue' | 'pr', number: string): Promise<string> => {
+  try {
+    const endpoint = type === 'issue' ? 'issues' : 'pulls'
+    const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/${endpoint}/${number}`)
+    if (!response.ok) {
+      throw new Error(`GitHub API error: ${response.status}`)
+    }
+    const data = await response.json()
+    return data.title || `${type === 'issue' ? 'Issue' : 'PR'} #${number}`
+  }
+  catch (error) {
+    console.warn('Failed to fetch GitHub title:', error)
+    return `${type === 'issue' ? 'Issue' : 'PR'} #${number}`
+  }
+}
+
+// Parse URL and get display information
+const urlInfo = computed(() => parseGitHubURL(props.href))
+
+const displayTitle = computedAsync(async () => {
+  if (urlInfo.value.type === 'permalink') {
+    return `${urlInfo.value.repo}/${urlInfo.value.path}`
+  }
+  else if (urlInfo.value.type === 'repo') {
+    return `${urlInfo.value.owner}/${urlInfo.value.repo}`
+  }
+  else if (urlInfo.value.type === 'issue' || urlInfo.value.type === 'pr') {
+    return await fetchGitHubTitle(urlInfo.value.owner, urlInfo.value.repo, urlInfo.value.type, urlInfo.value.number!)
+  }
+  else if (urlInfo.value.type === 'wiki') {
+    // For wiki, use the page slug (replace dashes with spaces for readability)
+    // Optionally, you could fetch the actual page title from the HTML, but this is a simple fallback
+    return urlInfo.value.page ? urlInfo.value.page.replace(/-/g, ' ') : 'Wiki Page'
+  }
+  else {
+    return props.href
+  }
+})
+
+const suffix = computed(() => {
+  if (urlInfo.value.type === 'permalink') {
+    return urlInfo.value.lines ? `#${urlInfo.value.lines}` : ''
+  }
+  else if (urlInfo.value.type === 'issue' || urlInfo.value.type === 'pr') {
+    return `#${urlInfo.value.number}`
+  }
+  else if (urlInfo.value.type === 'wiki') {
+    // For wiki links, always show 'wiki' as the suffix
+    return 'wiki'
+  }
+  else {
+    return ''
+  }
+})
+
+const icon = computed(() => {
+  if (urlInfo.value.type === 'issue') {
+    return 'octicon:issue-opened-16'
+  }
+  else if (urlInfo.value.type === 'pr') {
+    return 'octicon:git-pull-request-16'
+  }
+  else {
+    return 'i-simple-icons-github'
+  }
+})
+</script>
+
+<template>
+  <a
+    v-if="urlInfo.type !== 'unknown'"
+    :href="props.href"
+    :target="props.target"
+    class="inline-flex translate-y-0.5 items-center gap-1 bg-gray-100 hover:bg-gray-200 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 rounded-md text-xs text-muted no-underline transition-colors"
+  >
+    <span class="flex items-center gap-1 px-1 py-0.5">
+      <UIcon
+        v-if="icon"
+        :name="icon"
+      />
+      {{ displayTitle }}
+    </span>
+    <span
+      v-if="suffix"
+      class="bg-gray-300 dark:bg-gray-700 px-1 py-0.5 rounded-r-md"
+    >
+      {{ suffix }}
+    </span>
+  </a>
+  <NuxtLink
+    v-else
+    class="text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary"
+    :href="props.href"
+    :target="props.target"
+  >
+    <slot></slot>
+  </NuxtLink>
+</template>

docs/app/components/HomeScene.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <div class="w-full aspect-video">
+    <ClientOnly>
+      <TresCanvas alpha>
+        <TresPerspectiveCamera
+          :position="[5, 5, 5]"
+          :look-at="[0, 0, 0]"
+        />
+        <TresMesh>
+          <TresBoxGeometry />
+          <TresMeshNormalMaterial />
+        </TresMesh>
+      </TresCanvas>
+    </ClientOnly>
+  </div>
+</template>

docs/.vitepress/theme/components/FirstScene.vue → docs/app/components/IntroScene.vue

@@ -1,21 +1,15 @@
 <script setup lang="ts">
+import { NoToneMapping } from 'three'
 import { OrbitControls } from '@tresjs/cientos'
-
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-
-const gl = {
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-}
 </script>
 
 <template>
-  <TresCanvas v-bind="gl">
+  <TresCanvas
+    clear-color="#82DBC5"
+    shadows
+    :tone-mapping="NoToneMapping"
+  >
     <TresPerspectiveCamera
       :position="[11, 11, 11]"
       :fov="45"

docs/app/components/ReadMore.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { splitByCase, upperFirst } from 'scule'
+
+const props = defineProps<{
+  to: string
+  title: string
+}>()
+
+const createBreadcrumb = (link: string = 'Missing link') => {
+  if (link.startsWith('http')) {
+    return link
+  }
+  return link
+    .split('/')
+    .filter(Boolean)
+    .map(part =>
+      splitByCase(part)
+        .map(p => upperFirst(p))
+        .join(' '),
+    )
+    .join(' > ')
+    .replace('Api', 'API')
+}
+
+const computedTitle = computed<string>(() => props.title || createBreadcrumb(props.to))
+</script>
+
+<template>
+  <ProseCallout
+    icon="i-lucide-bookmark"
+    :to="to"
+    :aria-label="computedTitle"
+  >
+    <slot mdc-unwrap="p">
+      Read more in <span
+        class="font-bold"
+        v-text="computedTitle"
+      ></span>.
+    </slot>
+  </ProseCallout>
+</template>

docs/app/components/RecipesList.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const { data } = await useAsyncData(() => queryCollection('docs').where('path', 'LIKE', '/cookbook/%').where('extension', '=', 'md').all())
+
+const recipes = computed(() => Array.from(data.value || []))
+</script>
+
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <UPageCard
+      v-for="recipe in recipes"
+      :key="recipe.id"
+      :title="recipe.title"
+      :description="recipe.description"
+      :to="recipe.path"
+      reverse
+      spotlight
+    >
+      <img
+        v-if="recipe.meta"
+        :src="recipe.meta.thumbnail as string"
+        alt="recipe thumbnail"
+        class="w-full h-full object-cover"
+      />
+    </UPageCard>
+  </div>
+</template>

docs/app/components/SceneWrapper.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="w-full relative aspect-video rounded-lg overflow-hidden">
+    <ClientOnly>
+      <slot></slot>
+    </ClientOnly>
+  </div>
+</template>

docs/app/components/TheGraph.vue

@@ -0,0 +1,332 @@
+<script setup lang="ts">
+// I was trying to make this a generic graph component that could be reused in the docs
+// but it got a bit out of hand. Still, it might be useful for future stuff
+// so I'm keeping it here for now.
+import { useElementSize } from '@vueuse/core'
+
+interface DataPoint {
+  x: number
+  y: number
+}
+
+interface Dataset {
+  label: string
+  points: DataPoint[]
+  color: string
+  strokeWidth?: number
+  strokeDasharray?: string | number
+  strokeDashoffset?: string | number
+}
+
+interface UIConfig {
+  strokeWidth?: number
+  fillColor?: string
+  backgroundColor?: string
+  gridColor?: string
+  showGrid?: boolean
+  showAxes?: [boolean, boolean] // [x-axis, y-axis]
+  showLabels?: [boolean, boolean] // [x-labels, y-labels]
+  axisColor?: string
+  labelColor?: string
+  fontSize?: number
+  padding?: number
+  dataPadding?: [number, number] // [x-padding %, y-padding %] - extends data bounds
+  labelIntervals?: [number, number] // [x-interval, y-interval] - step size for labels
+}
+
+const props = withDefaults(defineProps<{
+  data: Dataset[]
+  ui?: UIConfig
+}>(), {
+  ui: () => ({}),
+})
+
+const defaultUI: Required<UIConfig> = {
+  strokeWidth: 1.5,
+  fillColor: 'transparent',
+  backgroundColor: 'transparent',
+  gridColor: '#e5e7eb',
+  showGrid: false,
+  showAxes: [false, false], // [x-axis, y-axis]
+  showLabels: [false, false], // [x-labels, y-labels]
+  axisColor: '#6b7280',
+  labelColor: '#374151',
+  fontSize: 12,
+  padding: 40,
+  dataPadding: [5, 10], // [x-padding %, y-padding %] - 5% x, 10% y
+  labelIntervals: [1, 0.5], // [x-interval, y-interval] - auto-calculated if not set
+}
+
+const config = computed(() => ({ ...defaultUI, ...props.ui }))
+
+const containerRef = ref<HTMLElement>()
+const { width, height } = useElementSize(containerRef)
+
+const viewBox = computed(() => `0 0 ${width.value} ${height.value}`)
+
+const bounds = computed(() => {
+  if (props.data.length === 0) {
+    return { minX: 0, maxX: 1, minY: 0, maxY: 1 }
+  }
+
+  const allPoints = props.data.flatMap(dataset => dataset.points)
+  const xs = allPoints.map(d => d.x)
+  const ys = allPoints.map(d => d.y)
+
+  const rawMinX = Math.min(...xs)
+  const rawMaxX = Math.max(...xs)
+  const rawMinY = Math.min(...ys)
+  const rawMaxY = Math.max(...ys)
+
+  // Apply data padding (percentage of range)
+  const [xPaddingPercent, yPaddingPercent] = config.value.dataPadding
+
+  const xRange = rawMaxX - rawMinX
+  const yRange = rawMaxY - rawMinY
+
+  const xPadding = (xRange * xPaddingPercent) / 100
+  const yPadding = (yRange * yPaddingPercent) / 100
+
+  return {
+    minX: rawMinX - xPadding,
+    maxX: rawMaxX + xPadding,
+    minY: rawMinY - yPadding,
+    maxY: rawMaxY + yPadding,
+  }
+})
+
+const scale = computed(() => {
+  const { minX, maxX, minY, maxY } = bounds.value
+  const { padding } = config.value
+
+  const dataWidth = maxX - minX
+  const dataHeight = maxY - minY
+
+  return {
+    x: (width.value - 2 * padding) / (dataWidth || 1),
+    y: (height.value - 2 * padding) / (dataHeight || 1),
+  }
+})
+
+const transformPoint = (point: DataPoint) => {
+  const { minX, minY } = bounds.value
+  const { padding } = config.value
+
+  return {
+    x: padding + (point.x - minX) * scale.value.x,
+    y: height.value - padding - (point.y - minY) * scale.value.y,
+  }
+}
+
+const createPathData = (points: DataPoint[]) => {
+  if (points.length === 0) {
+    return ''
+  }
+
+  const transformedPoints = points.map(transformPoint)
+
+  return transformedPoints.reduce((path, point, index) => {
+    const command = index === 0 ? 'M' : 'L'
+    return `${path} ${command} ${point.x} ${point.y}`
+  }, '').trim()
+}
+
+const gridLines = computed(() => {
+  const { padding } = config.value
+  const lines = []
+
+  // Vertical grid lines
+  for (let i = 1; i < 10; i++) {
+    const x = padding + (width.value - 2 * padding) * (i / 10)
+    lines.push({ x1: x, y1: padding, x2: x, y2: height.value - padding })
+  }
+
+  // Horizontal grid lines
+  for (let i = 1; i < 5; i++) {
+    const y = padding + (height.value - 2 * padding) * (i / 5)
+    lines.push({ x1: padding, y1: y, x2: width.value - padding, y2: y })
+  }
+
+  return lines
+})
+
+const axisLabels = computed(() => {
+  const { minX, maxX, minY, maxY } = bounds.value
+  const { padding, fontSize, labelIntervals } = config.value
+  const [xInterval, yInterval] = labelIntervals
+  const labels = []
+
+  // Y-axis labels (left side) - use interval
+  if (yInterval > 0) {
+    const startY = Math.ceil(minY / yInterval) * yInterval
+    const endY = Math.floor(maxY / yInterval) * yInterval
+
+    for (let value = startY; value <= endY; value += yInterval) {
+      // Handle floating point precision
+      const roundedValue = Math.round(value / yInterval) * yInterval
+      const y = height.value - padding - (roundedValue - minY) * scale.value.y
+
+      labels.push({
+        type: 'y',
+        x: padding - 10,
+        y: y + fontSize / 3,
+        text: roundedValue.toFixed(yInterval < 1 ? 1 : 0),
+      })
+    }
+  }
+
+  // X-axis labels (bottom) - use interval
+  if (xInterval > 0) {
+    const startX = Math.ceil(minX / xInterval) * xInterval
+    const endX = Math.floor(maxX / xInterval) * xInterval
+
+    for (let value = startX; value <= endX; value += xInterval) {
+      // Handle floating point precision
+      const roundedValue = Math.round(value / xInterval) * xInterval
+      const x = padding + (roundedValue - minX) * scale.value.x
+
+      labels.push({
+        type: 'x',
+        x,
+        y: height.value - padding + fontSize + 5,
+        text: roundedValue.toFixed(xInterval < 1 ? 1 : 0),
+      })
+    }
+  }
+
+  return labels
+})
+</script>
+
+<template>
+  <div ref="containerRef" class="graph-container">
+    <svg
+      :viewBox="viewBox"
+      :width="width"
+      :height="height"
+      class="svg-graph"
+      :style="{ backgroundColor: config.backgroundColor }"
+    >
+      <!-- Background -->
+      <rect
+        :width="width"
+        :height="height"
+        :fill="config.backgroundColor"
+      />
+
+      <!-- Grid -->
+      <g v-if="config.showGrid" class="grid">
+        <line
+          v-for="(line, index) in gridLines"
+          :key="`grid-${index}`"
+          :x1="line.x1"
+          :y1="line.y1"
+          :x2="line.x2"
+          :y2="line.y2"
+          :stroke="config.gridColor"
+          stroke-width="1"
+          opacity="0.3"
+        />
+      </g>
+
+      <!-- Axes -->
+      <g class="axes">
+        <!-- X axis (y=0 line) -->
+        <line
+          v-if="config.showAxes[0]"
+          :x1="config.padding"
+          :y1="transformPoint({ x: 0, y: 0 }).y"
+          :x2="width - config.padding"
+          :y2="transformPoint({ x: 0, y: 0 }).y"
+          :stroke="config.axisColor"
+          stroke-width="2"
+        />
+
+        <!-- Y axis (x=0 line) -->
+        <line
+          v-if="config.showAxes[1]"
+          :x1="transformPoint({ x: 0, y: 0 }).x"
+          :y1="config.padding"
+          :x2="transformPoint({ x: 0, y: 0 }).x"
+          :y2="height - config.padding"
+          :stroke="config.axisColor"
+          stroke-width="2"
+        />
+      </g>
+
+      <!-- Axis labels -->
+      <g class="labels">
+        <text
+          v-for="(label, index) in axisLabels"
+          v-show="(label.type === 'x' && config.showLabels[0]) || (label.type === 'y' && config.showLabels[1])"
+          :key="`label-${index}`"
+          :x="label.x"
+          :y="label.y"
+          :fill="config.labelColor"
+          :font-size="config.fontSize"
+          :text-anchor="label.type === 'x' ? 'middle' : 'end'"
+          font-family="system-ui, sans-serif"
+        >
+          {{ label.text }}
+        </text>
+      </g>
+
+      <!-- Data paths and points for each dataset -->
+      <g v-for="(dataset, datasetIndex) in data" :key="`dataset-${datasetIndex}`">
+        <!-- Data path -->
+        <path
+          v-if="createPathData(dataset.points)"
+          :d="createPathData(dataset.points)"
+          :stroke="dataset.color"
+          :stroke-width="dataset.strokeWidth ?? config.strokeWidth"
+          v-bind="{
+            ...(dataset.strokeDasharray ? { 'stroke-dasharray': dataset.strokeDasharray } : {}),
+            ...(dataset.strokeDashoffset ? { 'stroke-dashoffset': dataset.strokeDashoffset } : {}),
+          }"
+          :fill="config.fillColor"
+          vector-effect="non-scaling-stroke"
+        />
+
+        <!-- Data points -->
+        <!-- <g class="data-points">
+          <circle
+            v-for="(point, index) in dataset.points"
+            :key="`point-${datasetIndex}-${index}`"
+            :cx="transformPoint(point).x"
+            :cy="transformPoint(point).y"
+            :r="(dataset.strokeWidth ?? config.strokeWidth) + 1"
+            :fill="dataset.color"
+          />
+        </g> -->
+      </g>
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.graph-container {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+}
+
+.svg-graph {
+  width: 100%;
+  height: 100%;
+  transition: all 0.3s ease;
+}
+
+.grid line {
+  transition: opacity 0.3s ease;
+}
+
+path {
+  transition: d 0.5s ease;
+}
+
+circle {
+  transition:
+    cx 0.5s ease,
+    cy 0.5s ease;
+}
+</style>

docs/app/components/TheLogo.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="flex items-center">
+    <img
+      src="/logo.svg"
+      alt="Tres.js"
+      class="h-3 mr-4"
+    />
+    <a
+      class="font-bold text-dark font-sans text-sm"
+      href="/"
+      title="Home"
+    >Tres<span class="text-primary-300">JS</span></a>
+  </div>
+</template>

docs/app/components/content/ProseA.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const props = defineProps<
+  {
+    href: string
+    target: '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined
+  }
+>()
+
+const type = computed(() => {
+  if (props.href.startsWith('https://github.com/')) {
+    return 'github-at'
+  }
+  return 'link'
+})
+</script>
+
+<template>
+  <GithubMagicLink
+    v-if="type === 'github-at'"
+    :href="href"
+    target="_blank"
+  >
+    <slot></slot>
+  </GithubMagicLink>
+  <NuxtLink
+    v-else
+    class="text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary"
+    :href="href"
+    :target="target"
+  >
+    <slot></slot>
+  </NuxtLink>
+</template>

docs/app/components/examples/advanced-gsap-animations/Experience.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { shallowRef, watch } from 'vue'
+import { OrbitControls } from '@tresjs/cientos'
+import gsap from 'gsap'
+import type { TresObject } from '@tresjs/core'
+
+const boxesRef = shallowRef<TresObject>()
+const zs: number[] = []
+for (let z = -4.5; z <= 4.5; z++) {
+  zs.push(z)
+}
+
+watch(boxesRef, () => {
+  if (!boxesRef.value) { return }
+
+  // Getting positions for all the boxes
+  const positions = Array.from(boxesRef.value.children as TresObject[]).map(
+    child => child.position,
+  )
+  // Getting rotations for all the boxes
+  const rotations = Array.from(boxesRef.value.children as TresObject[]).map(
+    child => child.rotation,
+  )
+
+  const animProperties = {
+    ease: 'power1.inOut',
+    duration: 1,
+    stagger: {
+      each: 0.25,
+      repeat: -1,
+      yoyo: true,
+    },
+  }
+  gsap.to(positions, {
+    y: 2.5,
+    ...animProperties,
+  })
+  gsap.to(rotations, {
+    x: 2,
+    ...animProperties,
+  })
+})
+</script>
+
+<template>
+  <TresPerspectiveCamera :position="[-10, 5, 10]" />
+  <OrbitControls />
+  <TresGroup ref="boxesRef">
+    <TresMesh v-for="(z, i) of zs" :key="i" :position="[0, 0.5, z]">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+  </TresGroup>
+  <TresGridHelper :args="[10, 10, 0x444444, 'teal']" />
+</template>

docs/app/components/examples/advanced-gsap-animations/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import TheExperience from './Experience.vue'
+</script>
+
+<template>
+  <SceneWrapper>
+    <TresCanvas
+      clear-color="#82DBC5"
+    >
+      <TheExperience />
+    </TresCanvas>
+  </SceneWrapper>
+</template>

docs/app/components/examples/advanced-gsap-timeline/Experience.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { onMounted, shallowRef, watch } from 'vue'
+import { OrbitControls } from '@tresjs/cientos'
+import gsap from 'gsap'
+import type { TresObject } from '@tresjs/core'
+
+const groupRef = shallowRef<TresObject>()
+const timeline = gsap.timeline({ paused: true })
+
+// Create array of positions for multiple objects
+const positions: [number, number, number][] = [
+  [-3, 0.5, 0],
+  [-1, 0.5, 0],
+  [1, 0.5, 0],
+  [3, 0.5, 0],
+]
+
+watch(groupRef, () => {
+  if (!groupRef.value) { return }
+
+  const children = Array.from(groupRef.value.children) as TresObject[]
+
+  // Clear existing timeline
+  timeline.clear()
+
+  // Add multiple animations to timeline
+  timeline
+    .to(children.map(child => child.position), {
+      y: 3,
+      duration: 1,
+      ease: 'back.out(1.7)',
+      stagger: 0.1,
+    })
+    .to(children.map(child => child.rotation), {
+      y: Math.PI * 2,
+      duration: 2,
+      ease: 'power2.inOut',
+      stagger: 0.1,
+    }, '-=0.5') // Start 0.5s before previous animation ends
+    .to(children.map(child => child.scale), {
+      x: 1.5,
+      y: 1.5,
+      z: 1.5,
+      duration: 0.5,
+      ease: 'elastic.out(1, 0.3)',
+      stagger: 0.05,
+    })
+    .to(children.map(child => child.position), {
+      y: 0.5,
+      duration: 1,
+      ease: 'bounce.out',
+      stagger: 0.1,
+    })
+    .to(children.map(child => child.scale), {
+      x: 1,
+      y: 1,
+      z: 1,
+      duration: 0.5,
+      ease: 'power2.out',
+      stagger: 0.05,
+    }, '-=0.8')
+})
+
+// Auto-play the timeline on mount
+onMounted(() => {
+  setTimeout(() => {
+    if (timeline) {
+      timeline.play()
+      // Restart timeline when it completes
+      timeline.repeat(-1).yoyo(false)
+    }
+  }, 500) // Small delay to ensure refs are ready
+})
+</script>
+
+<template>
+  <TresPerspectiveCamera :position="[-8, 6, 8]" />
+  <OrbitControls />
+  <TresGroup ref="groupRef">
+    <TresMesh v-for="(pos, i) of positions" :key="i" :position="pos">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+  </TresGroup>
+  <TresGridHelper :args="[10, 10, 0x444444, 'teal']" />
+</template>

docs/app/components/examples/advanced-gsap-timeline/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import TheExperience from './Experience.vue'
+</script>
+
+<template>
+  <SceneWrapper>
+    <TresCanvas
+      clear-color="#82DBC5"
+    >
+      <TheExperience />
+    </TresCanvas>
+  </SceneWrapper>
+</template>

docs/app/components/examples/basic-animation-120fps/Experience.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useLoop } from '@tresjs/core'
+import type { Mesh } from 'three'
+
+const cubeRef = ref<Mesh | null>(null)
+
+const { onBeforeRender } = useLoop()
+
+let lastTime = 0
+const targetFPS = 120
+const frameInterval = 1000 / targetFPS
+
+onBeforeRender(({ elapsed }) => {
+  const currentTime = elapsed * 1000
+
+  if (currentTime - lastTime >= frameInterval) {
+    if (cubeRef.value) {
+      // Fixed rotation per frame (not time-based) - 120 FPS (faster)
+      cubeRef.value.rotation.x += 0.02
+      cubeRef.value.rotation.y += 0.02
+    }
+    lastTime = currentTime
+  }
+})
+</script>
+
+<template>
+  <TresPerspectiveCamera :position="[0, 1, 5]" />
+  <TresAmbientLight :intensity="0.5" />
+  <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" />
+  <TresMesh ref="cubeRef" :position="[0, 1, 0]">
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshStandardMaterial color="#4ecdc4" />
+  </TresMesh>
+</template>

docs/app/components/examples/basic-animation-120fps/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import TheExperience from './Experience.vue'
+</script>
+
+<template>
+  <SceneWrapper class="!rounded-none">
+    <TresCanvas
+      clear-color="#82DBC5"
+    >
+      <TheExperience />
+    </TresCanvas>
+  </SceneWrapper>
+</template>

docs/app/components/examples/basic-animation-60fps/Experience.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useLoop } from '@tresjs/core'
+import type { Mesh } from 'three'
+
+const cubeRef = ref<Mesh | null>(null)
+
+const { onBeforeRender } = useLoop()
+
+let lastTime = 0
+const targetFPS = 60
+const frameInterval = 1000 / targetFPS
+
+onBeforeRender(({ elapsed }) => {
+  const currentTime = elapsed * 1000
+
+  if (currentTime - lastTime >= frameInterval) {
+    if (cubeRef.value) {
+      // Fixed rotation per frame (not time-based) - 60 FPS
+      cubeRef.value.rotation.x += 0.02
+      cubeRef.value.rotation.y += 0.02
+    }
+    lastTime = currentTime
+  }
+})
+</script>
+
+<template>
+  <TresPerspectiveCamera :position="[0, 1, 5]" />
+  <TresAmbientLight :intensity="0.5" />
+  <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" />
+  <TresMesh ref="cubeRef" :position="[0, 1, 0]">
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshStandardMaterial color="#ff6b6b" />
+  </TresMesh>
+</template>

docs/app/components/examples/basic-animation-60fps/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import TheExperience from './Experience.vue'
+</script>
+
+<template>
+  <SceneWrapper class="!rounded-none">
+    <TresCanvas
+      clear-color="#82DBC5"
+    >
+      <TheExperience />
+    </TresCanvas>
+  </SceneWrapper>
+</template>

docs/app/components/examples/basic-animation-elapsed/Experience.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useLoop } from '@tresjs/core'
+import type { Mesh } from 'three'
+
+const cubeRef = ref<Mesh | null>(null)
+
+const { onBeforeRender } = useLoop()
+
+onBeforeRender(({ elapsed }) => {
+  const positionValue = Math.sin(elapsed) * 0.005
+
+  if (cubeRef.value) {
+    cubeRef.value.position.y += positionValue
+  }
+})
+</script>
+
+<template>
+  <TresPerspectiveCamera :position="[0, 1, 5]" :look-at="[0, 1, 0]" />
+  <TresMesh
+    ref="cubeRef"
+    :position="[0, 1, 0]"
+  >
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshNormalMaterial />
+  </TresMesh>
+</template>

docs/app/components/examples/basic-animation-elapsed/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import TheExperience from './Experience.vue'
+</script>
+
+<template>
+  <SceneWrapper>
+    <TresCanvas
+      clear-color="#82DBC5"
+    >
+      <TheExperience />
+    </TresCanvas>
+  </SceneWrapper>
+</template>

docs/app/components/examples/basic-animation/Experience.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useLoop } from '@tresjs/core'
+import type { Mesh } from 'three'
+
+const cubeRef = ref<Mesh | null>(null)
+
+const { onBeforeRender } = useLoop()
+
+onBeforeRender(({ delta }) => {
+  if (cubeRef.value) {
+    cubeRef.value.rotation.x += delta
+    cubeRef.value.rotation.y += delta
+  }
+})
+</script>
+
+<template>
+  <TresPerspectiveCamera :position="[0, 1, 5]" />
+  <TresMesh ref="cubeRef" :position="[0, 1, 0]">
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshNormalMaterial />
+  </TresMesh>
+</template>

docs/app/components/examples/basic-animation/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import TheExperience from './Experience.vue'
+</script>
+
+<template>
+  <SceneWrapper>
+    <TresCanvas
+      clear-color="#82DBC5"
+    >
+      <TheExperience />
+    </TresCanvas>
+  </SceneWrapper>
+</template>

docs/app/components/examples/model-animation/Experience.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { Environment, OrbitControls } from '@tresjs/cientos'
+import KnightCharacter from './Knight.vue'
+</script>
+
+<template>
+  <TresPerspectiveCamera
+    :position="[3, 2, 3]"
+    :look-at="[0, 1, 0]"
+  />
+  <OrbitControls :target="[0, 1, 0]" />
+  <TresAmbientLight :intensity="1" />
+  <Suspense>
+    <Environment preset="sunset" background :blur="1" />
+  </Suspense>
+  <KnightCharacter />
+  <!-- Render the animated model here -->
+</template>

docs/app/components/examples/model-animation/Knight.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useAnimations, useGLTF } from '@tresjs/cientos'
+import { computed } from 'vue'
+import type { AnimationAction } from 'three'
+import { LoopOnce } from 'three'
+
+const { state: model, nodes } = useGLTF('/models/knight/Knight.glb')
+const rig = computed(() => nodes.value.Rig)
+
+const animations = computed(() => model.value?.animations || [])
+
+const { actions } = useAnimations(animations, rig)
+const currentAction = ref<AnimationAction>()
+
+watch(actions, (actions) => {
+  if (!actions) { return }
+
+  // Play the idle animation by default
+  currentAction.value = actions.Cheer
+  currentAction.value?.setLoop(LoopOnce, 1)
+  currentAction.value?.play()
+
+  const nextAnimation = actions.Idle as AnimationAction
+
+  if (nextAnimation) {
+    nextAnimation.setEffectiveWeight(1)
+    nextAnimation.enabled = true
+    nextAnimation.play()
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <primitive v-if="rig" :object="rig" />
+</template>

docs/app/components/examples/model-animation/index.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import TheExperience from './Experience.vue'
+
+import { useProgress } from '@tresjs/cientos'
+
+const { hasFinishLoading, progress } = await useProgress()
+</script>
+
+<template>
+  <SceneWrapper>
+    <Transition
+      name="fade-overlay"
+      enter-active-class="opacity-1 transition-opacity duration-200"
+      leave-active-class="opacity-0 transition-opacity duration-200"
+    >
+      <div
+        v-show="!hasFinishLoading"
+        class="absolute bg-default t-0 l-0 w-full h-full z-20 flex justify-center items-center font-mono"
+      >
+        <div class="w-200px">
+          Loading... {{ progress }} %
+          <i class="i-lucide-loading animate-rotate-in"></i>
+        </div>
+      </div>
+    </Transition>
+    <TresCanvas
+      clear-color="#82DBC5"
+    >
+      <TheExperience />
+    </TresCanvas>
+  </SceneWrapper>
+</template>