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>

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,27 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# 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,185 +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/',
-          },
-        ],
-      },
-    ],
-    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,173 +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: 'Composables',
-        link: '/api/composables',
-        items: [
-          { text: 'useTres', link: '/composables/use-tres' },
-          { text: 'useLoader', link: '/composables/use-loader' },
-          { text: 'useGraph', link: '/composables/use-graph' },
-        ],
-      },
-      {
-        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: '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,186 +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/',
-          },
-        ],
-      },
-    ],
-    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.renderer.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,48 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { TresCanvas } from '@tresjs/core'
-import BlenderCube from './BlenderCube.vue'
-import { TresLeches, useControls } from '@tresjs/leches'
-import RenderingLogger from './RenderingLogger.vue'
-
-const renderTimes = ref(0)
-
-useControls({
-  renderTimes: {
-    value: renderTimes,
-    type: 'graph',
-    label: 'Render Times (ms)',
-    onUpdate: () => {
-      renderTimes.value = 0
-    },
-  },
-})
-
-function onRender() {
-  renderTimes.value = 1
-}
-</script>
-
-<template>
-  <TresLeches />
-  <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.instance]"
-    :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 `renderer` provided by 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="on-demand"
-  >
-    <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 `renderer` provided by the [`useTresContext` composable](../api/composables.md#usetrescontext) to render the scene:
-
-```vue
-<script setup>
-import { useTres } from '@tresjs/core'
-
-const { renderer } = useTres()
-
-renderer.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,379 +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** | Contains the [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) instance of your scene, a method the invalidate the render loop (only required if you set the `render-mode` prop to `on-demand`), a computed that indicates whether invalidating is possible and a method to advance the render loop (only required if you set the `render-mode` prop to `manual`). |
-| **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 |
-| **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.instance.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
-:::
-
-## useSeek <Badge text="deprecated" />
-
-::: danger
-This composable is deprecated as of version 5.0.0.
-:::
-
-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,104 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'teal',
+      accent: 'yellow',
+      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,
+    navigation: [
+      {
+        label: 'Guide',
+        to: '/getting-started/installation',
+      },
+      {
+        label: 'API',
+        to: '/api',
+      },
+    ],
+    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/Q6ncbJdQ',
+      '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',
+      }],
+    },
+  },
+})

docs/app/app.vue

@@ -0,0 +1,60 @@
+<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',
+})
+
+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,86 @@
+<script setup lang="ts">
+const navigation = inject(navigationInjectionKey)
+
+const { header } = useAppConfig()
+
+const route = useRoute()
+</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 || '/'">
+        <TheLogo class="w-auto h-6 shrink-0" />
+      </NuxtLink>
+    </template>
+
+    <template #right>
+      <UContentSearchButton
+        v-if="header?.search"
+        class="lg:hidden"
+        variant="subtle"
+      />
+
+      <!-- <template v-if="header?.navigation">
+        <UButton
+          v-for="(item, index) of header.navigation"
+          :key="index"
+          v-bind="{ color: 'neutral', variant: 'ghost', ...item }"
+        />
+      </template> -->
+
+      <UNavigationMenu
+        v-if="route.path === '/'"
+        :items="header?.navigation"
+        class="hidden md:flex"
+      />
+
+      <UColorModeButton v-if="header?.colorMode" />
+
+      <template v-if="header?.links">
+        <UButton
+          v-for="(link, index) of header.links"
+          :key="index"
+          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 items-center">
+    <slot></slot>
+  </div>
+</template>

docs/app/components/GithubMagicLink.vue

@@ -0,0 +1,173 @@
+<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
+    :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>
+</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/OgImage/OgImageDocs.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
+  title: 'title',
+  description: 'description',
+})
+
+const title = computed(() => (props.title || '').slice(0, 60))
+const description = computed(() => (props.description || '').slice(0, 200))
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-center bg-[#020420]">
+    <svg
+      class="absolute right-0 top-0"
+      width="629"
+      height="593"
+      viewBox="0 0 629 593"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_f_199_94966)">
+        <path
+          d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+          fill="#00DC82"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_199_94966"
+          x="0.873535"
+          y="-659"
+          width="1255.25"
+          height="1251.52"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood
+            flood-opacity="0"
+            result="BackgroundImageFix"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="40.5"
+            result="effect1_foregroundBlur_199_94966"
+          />
+        </filter>
+      </defs>
+    </svg>
+
+    <div class="pl-[100px]">
+      <p
+        v-if="headline"
+        class="uppercase text-[24px] text-[#00DC82] mb-4 font-semibold"
+      >
+        {{ headline }}
+      </p>
+      <h1
+        v-if="title"
+        class="m-0 text-[75px] font-semibold mb-4 text-white flex items-center"
+      >
+        <span>{{ title }}</span>
+      </h1>
+      <p
+        v-if="description"
+        class="text-[32px] text-[#E4E4E7] leading-tight w-[700px]"
+      >
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>

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/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,31 @@
+<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"
+  />
+  <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/my-first-scene/Experience.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useLoop } from '@tresjs/core'
+import { ref } from 'vue'
+
+// Reference to our donut mesh for animation
+const donutRef = ref()
+
+// Animation loop
+const { onBeforeRender } = useLoop()
+
+onBeforeRender(({ elapsed }) => {
+  if (donutRef.value) {
+    // Rotate the donut on both X and Y axes
+    donutRef.value.rotation.x = elapsed * 0.5
+    donutRef.value.rotation.y = elapsed * 0.3
+  }
+})
+</script>
+
+<template>
+  <!-- Camera Setup -->
+  <TresPerspectiveCamera
+    :position="[7, 7, 7]"
+    :look-at="[0, 0, 0]"
+  />
+
+  <!-- The Donut -->
+  <TresMesh
+    ref="donutRef"
+    :position="[0, 2, 0]"
+  >
+    <TresTorusGeometry :args="[1, 0.4, 16, 32]" />
+    <TresMeshBasicMaterial color="#ff6b35" />
+  </TresMesh>
+
+  <TresAxesHelper />
+  <TresGridHelper />
+</template>

docs/app/components/examples/my-first-scene/index.vue

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

docs/app/components/examples/on-demand/Experience.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useGraph, useLoader } from '@tresjs/core'
+import { type GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
+import { computed } from 'vue'
+import { Environment, OrbitControls } from '@tresjs/cientos'
+import { Color } from 'three'
+
+// Setup DRACO loader for compressed GLTFs
+const dracoLoader = new DRACOLoader()
+dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/')
+
+// Load a GLTF model
+const { state: model } = useLoader<GLTF>(
+  GLTFLoader,
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb',
+  {
+    extensions: (loader) => {
+      if (loader instanceof GLTFLoader) {
+        loader.setDRACOLoader(dracoLoader)
+      }
+    },
+  },
+)
+
+// Extract the scene and graph
+const scene = computed(() => model.value?.scene)
+const graph = useGraph(scene)
+
+const nodes = computed(() => graph.value.nodes)
+
+watch(graph, ({ materials }) => {
+  if (materials?.Material) {
+    materials.Material.color = new Color('gold')
+    materials.Material.roughness = 0.1
+    materials.Material.metalness = 0.9
+  }
+})
+</script>
+
+<template>
+  <TresPerspectiveCamera
+    :position="[5, 5, 5]"
+  />
+  <OrbitControls />
+  <Suspense>
+    <Environment
+      preset="studio"
+      background
+      :blur="0.6"
+    />
+  </Suspense>
+  <TresAmbientLight :intensity="2" />
+  <!-- Render the Cube node if it exists -->
+  <primitive
+    v-if="nodes?.BlenderCube"
+    :object="nodes?.BlenderCube"
+  />
+</template>

docs/app/components/examples/on-demand/index.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import FirstExperience from './Experience.vue'
+
+const renderTimes = ref(0)
+
+useControls({
+  renderTimes: {
+    value: renderTimes,
+    type: 'graph',
+    label: 'Render Times (ms)',
+    onUpdate: () => {
+      renderTimes.value = 0
+    },
+  },
+})
+
+function onRender() {
+  renderTimes.value = 1
+}
+</script>
+
+<template>
+  <SceneWrapper>
+    <ClientOnly>
+      <TresLeches />
+    </ClientOnly>
+    <TresCanvas
+      render-mode="on-demand"
+      clear-color="#82DBC5"
+      @render="onRender"
+    >
+      <FirstExperience />
+    </TresCanvas>
+  </SceneWrapper>
+</template>

docs/app/components/examples/orbit-controls/LocalOrbitControls.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { extend, useTres } from '@tresjs/core'
+import { OrbitControls } from 'three-stdlib'
+
+const { camera, renderer } = useTres()
+extend({ OrbitControls })
+</script>
+
+<template>
+  <TresOrbitControls
+    v-if="renderer"
+    :args="[camera, renderer?.domElement]"
+  />
+</template>

docs/app/components/examples/orbit-controls/index.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Text3D } from '@tresjs/cientos'
+import LocalOrbitControls from './LocalOrbitControls.vue'
+</script>
+
+<template>
+  <SceneWrapper>
+    <TresCanvas
+      clear-color="#82DBC5"
+    >
+      <TresPerspectiveCamera :position="[0, 1, 7]" />
+      <LocalOrbitControls />
+      <TresGridHelper :args="[10, 10]" />
+      <Suspense>
+        <Text3D
+          :position="[0, 1, 0]"
+          text="Click and drag to orbit"
+          font="https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json"
+        >
+          <TresMeshNormalMaterial />
+        </Text3D>
+      </Suspense>
+    </TresCanvas>
+  </SceneWrapper>
+</template>

docs/app/components/examples/performance-monitor/index.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { TresLeches, useControls } from '@tresjs/leches'
+
+useControls('fpsgraph')
+</script>
+
+<template>
+  <div
+    class="aspect-video pattern-dot-bg relative w-full h-full flex items-center justify-center border border-gray-200 dark:border-default rounded-lg"
+  >
+    <TresLeches />
+  </div>
+</template>

docs/app/components/examples/use-loader-gltf/Experience.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useGraph, useLoader } from '@tresjs/core'
+import { type GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
+import { computed } from 'vue'
+import { OrbitControls } from '@tresjs/cientos'
+
+// Setup DRACO loader for compressed GLTFs
+const dracoLoader = new DRACOLoader()
+dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/')
+
+// Load a GLTF model
+const { state: model } = useLoader<GLTF>(
+  GLTFLoader,
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb',
+  {
+    extensions: (loader) => {
+      if (loader instanceof GLTFLoader) {
+        loader.setDRACOLoader(dracoLoader)
+      }
+    },
+  },
+)
+
+// Extract the scene and graph
+const scene = computed(() => model.value?.scene)
+const graph = useGraph(scene)
+
+const nodes = computed(() => graph.value.nodes)
+</script>
+
+<template>
+  <TresPerspectiveCamera
+    :position="[5, 5, 5]"
+    :look-at="[0, 2, 0]"
+  />
+  <OrbitControls />
+  <TresGridHelper />
+  <TresAmbientLight :intensity="2" />
+  <!-- Render the Cube node if it exists -->
+  <primitive
+    v-if="nodes?.BlenderCube"
+    :position="[0, 2, 0]"
+    :object="nodes?.BlenderCube"
+  />
+</template>

docs/app/components/examples/use-loader-gltf/index.vue

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

docs/app/components/examples/use-loader-texture/Experience.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { useLoader } from '@tresjs/core'
+import { TextureLoader } from 'three'
+
+// Load a texture from a remote URL
+const { state: texture } = useLoader(
+  TextureLoader,
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg',
+)
+</script>
+
+<template>
+  <TresPerspectiveCamera
+    :position="[3, 3, 3]"
+    :look-at="[0, 0, 0]"
+  />
+  <OrbitControls />
+
+  <TresAmbientLight :intensity="1" />
+  <TresMesh>
+    <TresSphereGeometry />
+    <!-- Use the loaded texture as the material map -->
+    <TresMeshStandardMaterial
+      v-if="texture"
+      :map="texture"
+    />
+  </TresMesh>
+</template>

docs/app/components/examples/use-loader-texture/index.vue

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

docs/app/components/examples/web-gpu/HologramCube.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+import { add, cameraProjectionMatrix, cameraViewMatrix, color, Fn, hash, mix, normalView, positionWorld, sin, timerGlobal, uniform, varying, vec3, vec4 } from 'three/tsl'
+import { AdditiveBlending, DoubleSide, MeshBasicNodeMaterial } from 'three/webgpu'
+
+const { nodes } = useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
+
+const model = computed(() => nodes.value.BlenderCube)
+/**
+ * Material
+ */
+const material = new MeshBasicNodeMaterial({
+  transparent: true,
+  side: DoubleSide,
+  depthWrite: false,
+  blending: AdditiveBlending,
+})
+// Position
+const glitchStrength = varying(0)
+material.vertexNode = Fn(() => {
+  const glitchTime = timerGlobal().sub(positionWorld.y.mul(0.5))
+  glitchStrength.assign(add(
+    sin(glitchTime),
+    sin(glitchTime.mul(3.45)),
+    sin(glitchTime.mul(8.76)),
+  ).div(3).smoothstep(0.3, 1))
+  const glitch = vec3(
+    hash(positionWorld.xz.abs().mul(9999)).sub(0.5),
+    0,
+    hash(positionWorld.yx.abs().mul(9999)).sub(0.5),
+  )
+  positionWorld.xyz.addAssign(glitch.mul(glitchStrength.mul(0.5)))
+  return cameraProjectionMatrix.mul(cameraViewMatrix).mul(positionWorld)
+})()
+// Color
+const colorInside = uniform(color('#ff6088'))
+const colorOutside = uniform(color('#4d55ff'))
+material.colorNode = Fn(() => {
+  const stripes = positionWorld.y.sub(timerGlobal(0.02)).mul(20).mod(1).pow(3)
+  const fresnel = normalView.dot(vec3(0, 0, 1)).abs().oneMinus()
+  const falloff = fresnel.smoothstep(0.8, 0.2)
+  const alpha = stripes.mul(fresnel).add(fresnel.mul(1.25)).mul(falloff)
+  const finalColor = mix(colorInside, colorOutside, fresnel.add(glitchStrength.mul(0.6)))
+  return vec4(finalColor, alpha)
+})()
+
+watch(model, (newModel) => {
+  newModel.traverse((child) => {
+    if (child.isMesh) {
+      child.material = material
+    }
+  })
+})
+</script>
+
+<template>
+  <primitive
+    v-if="model"
+    :object="model"
+  />
+</template>

docs/app/components/examples/web-gpu/index.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { WebGPURenderer } from 'three/webgpu'
+import type { TresRendererSetupContext } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+
+import HologramCube from './HologramCube.vue'
+
+const createWebGPURenderer = (ctx: TresRendererSetupContext) => {
+  const renderer = new WebGPURenderer({
+    canvas: toValue(ctx.canvas),
+    // WebGPU specific configuration
+    alpha: true,
+    antialias: true,
+  })
+  return renderer
+}
+</script>
+
+<template>
+  <SceneWrapper>
+    <TresCanvas :renderer="createWebGPURenderer">
+      <TresPerspectiveCamera
+        :position="[3, 3, 3]"
+        :look-at="[0, 0, 0]"
+      />
+      <Suspense>
+        <HologramCube />
+      </Suspense>
+      <OrbitControls />
+      <TresAmbientLight :intensity="1" />
+    </TresCanvas>
+  </SceneWrapper>
+</template>

docs/app/composables/useNavigation.ts

@@ -0,0 +1,42 @@
+import { createSharedComposable } from '@vueuse/core'
+
+export interface HeaderLink {
+  label: string
+  description: string
+  icon: string
+  to: string
+  search?: boolean
+  children?: HeaderLink[]
+}
+
+function _useHeaderLinks() {
+  const headerLinks = computed<HeaderLink[]>(() => {
+    const to = ''
+
+    return [{
+      label: 'Get Started',
+      description: 'Learn how to get started with TresJS to build your 3D first app.',
+      icon: 'i-lucide-rocket',
+      to: `${to}/getting-started`,
+    }, {
+      label: 'Essentials',
+      description: 'Get the key concepts and best practices.',
+      icon: 'i-lucide-book-open',
+      to: `${to}/essentials`,
+    }, {
+      label: 'API',
+      description: 'Explore the TresJS components, composables, utilities and more.',
+      icon: 'i-lucide-code-xml',
+      to: `${to}/api`,
+    }, {
+      label: 'Cookbook',
+      description: 'Discover and explore official and community examples.',
+      icon: 'i-lucide-cooking-pot',
+      to: `${to}/cookbook`,
+    }/*  {      label: 'Community',      description: 'Find answers and support from the community.',      icon: 'i-lucide-messages-square',      to: `${to}/community`,      active: route.path.startsWith(`${to}/community`)    } */]
+  })
+
+  return { headerLinks }
+}
+
+export const useHeaderLinks = import.meta.client ? createSharedComposable(_useHeaderLinks) : _useHeaderLinks

docs/app/error.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+defineProps<{
+  error: NuxtError
+}>()
+
+useHead({
+  htmlAttrs: {
+    lang: 'en',
+  },
+})
+
+useSeoMeta({
+  title: 'Page not found',
+  description: 'We are sorry but this page could not be found.',
+})
+
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+  server: false,
+})
+
+provide(navigationInjectionKey, navigation)
+</script>
+
+<template>
+  <UApp>
+    <AppHeader />
+
+    <UError :error="error" />
+
+    <AppFooter />
+
+    <ClientOnly>
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation"
+      />
+    </ClientOnly>
+  </UApp>
+</template>

docs/app/layouts/docs.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="bg-pattern px-0 md:px-8 w-full ">
+    <UPage class="bg-default border-l border-r border-gray-200 dark:border-gray-800 px-4">
+      <template #left>
+        <AppSide />
+      </template>
+      <UContainer>
+        <slot></slot>
+      </UContainer>
+    </UPage>
+  </div>
+</template>

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

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { findPageHeadline } from '#ui-pro/utils/content'
+
+definePageMeta({
+  layout: 'docs',
+})
+
+const route = useRoute()
+const { toc } = useAppConfig()
+const navigation = inject(navigationInjectionKey)
+
+const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
+  return queryCollectionItemSurroundings('docs', route.path, {
+    fields: ['description'],
+  })
+})
+
+const title = page.value.seo?.title || page.value.title
+const description = page.value.seo?.description || page.value.description
+
+useSeoMeta({
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description,
+})
+
+const headline = computed(() => findPageHeadline(navigation?.value, page.value))
+
+defineOgImageComponent('Docs', {
+  headline: headline.value,
+})
+
+const links = computed(() => {
+  const links = []
+  if (toc?.bottom?.edit) {
+    links.push({
+      icon: 'i-lucide-external-link',
+      label: 'Edit this page',
+      to: `${toc.bottom.edit}/${page?.value?.stem}.${page?.value?.extension}`,
+      target: '_blank',
+    })
+  }
+
+  return [...links, ...(toc?.bottom?.links || [])].filter(Boolean)
+})
+</script>
+
+<template>
+  <UPage v-if="page">
+    <UPageHeader
+      :title="page.title"
+      :description="page.description"
+      :links="page.links"
+      :headline="headline"
+      :ui="{
+        headline: 'uppercase font-mono font-light text-default-500 text-dim',
+      }"
+    />
+
+    <UPageBody>
+      <ContentRenderer
+        v-if="page"
+        :value="page"
+      />
+
+      <USeparator v-if="surround?.length" />
+
+      <UContentSurround :surround="surround" />
+    </UPageBody>
+
+    <template
+      v-if="page?.body?.toc?.links?.length"
+      #right
+    >
+      <UContentToc
+        :title="toc?.title"
+        :links="page.body?.toc?.links"
+      >
+        <template
+          v-if="toc?.bottom"
+          #bottom
+        >
+          <div
+            class="hidden lg:block space-y-6"
+            :class="{ '!mt-6': page.body?.toc?.links?.length }"
+          >
+            <USeparator
+              v-if="page.body?.toc?.links?.length"
+              type="dashed"
+            />
+
+            <UPageLinks
+              :title="toc.bottom.title"
+              :links="links"
+            />
+          </div>
+        </template>
+      </UContentToc>
+    </template>
+  </UPage>
+</template>

docs/app/pages/index.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const { data: page } = await useAsyncData('index', () => queryCollection('landing').path('/').first())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+const title = page.value.seo?.title || page.value.title
+const description = page.value.seo?.description || page.value.description
+
+useSeoMeta({
+  titleTemplate: '',
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description,
+  ogImage: 'https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RvY3MtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjM0MTd9.ltVAqPgKG38O01X1zl6MXfrJc55nf9OewXNFjpZ_2JY.jpg?theme=light',
+  twitterImage: 'https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RvY3MtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjM0MTd9.ltVAqPgKG38O01X1zl6MXfrJc55nf9OewXNFjpZ_2JY.jpg?theme=light',
+})
+</script>
+
+<template>
+  <ContentRenderer
+    v-if="page"
+    class="bg-default"
+    :value="page"
+    :prose="false"
+  />
+</template>

docs/app/utils/content.ts

@@ -0,0 +1,18 @@
+import type { ContentNavigationItem } from '@nuxt/content'
+
+export const navigationInjectionKey: InjectionKey<Ref<ContentNavigationItem[] | undefined>> = Symbol('navigation')
+
+export function navPageFromPath(path: string, tree: ContentNavigationItem[]): ContentNavigationItem | undefined {
+  for (const file of tree) {
+    if (file.path === path) {
+      return file
+    }
+
+    if (file.children) {
+      const result = navPageFromPath(path, file.children)
+      if (result) {
+        return result
+      }
+    }
+  }
+}

docs/components.d.ts

@@ -1,29 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    BlenderCube: typeof import('./.vitepress/theme/components/BlenderCube.vue')['default']
-    Cookbook: typeof import('./.vitepress/theme/components/Cookbook.vue')['default']
-    DonutExample: typeof import('./.vitepress/theme/components/DonutExample.vue')['default']
-    EmbedExperiment: typeof import('./.vitepress/theme/components/EmbedExperiment.vue')['default']
-    ExtendExample: typeof import('./.vitepress/theme/components/ExtendExample.vue')['default']
-    FirstScene: typeof import('./.vitepress/theme/components/FirstScene.vue')['default']
-    FirstSceneLightToon: typeof import('./.vitepress/theme/components/FirstSceneLightToon.vue')['default']
-    GraphPane: typeof import('./.vitepress/theme/components/GraphPane.vue')['default']
-    HomeSponsors: typeof import('./.vitepress/theme/components/HomeSponsors.vue')['default']
-    LocalOrbitControls: typeof import('./.vitepress/theme/components/LocalOrbitControls.vue')['default']
-    LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default']
-    OnDemandRendering: typeof import('./.vitepress/theme/components/OnDemandRendering.vue')['default']
-    RenderingLogger: typeof import('./.vitepress/theme/components/RenderingLogger.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    SandboxDemo: typeof import('./.vitepress/theme/components/SandboxDemo.vue')['default']
-    StackBlitzEmbed: typeof import('./.vitepress/theme/components/StackBlitzEmbed.vue')['default']
-  }
-}