chore: tweakpane recipe (#1086)

* docs: add Tweakpane integration for interactive 3D controls

* chore: update Tweakpane installation instructions and add core dependency

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

* refactor: simplify reset logic in TweakpaneDemo component

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

docs/app/components/examples/tweakpane/TweakpaneDemo.vue

@@ -61,16 +61,18 @@ onMounted(() => {
 
   // Reset button
   pane.value.addButton({ title: 'Reset All' }).on('click', () => {
-    controls.value.positionX = 0
-    controls.value.positionY = 0
-    controls.value.positionZ = 0
-    controls.value.rotationX = 0
-    controls.value.rotationY = 0
-    controls.value.rotationZ = 0
-    controls.value.scale = 1
-    controls.value.color = '#ff6b6b'
-    controls.value.wireframe = false
-    controls.value.material = 'basic'
+    Object.assign(controls.value, {
+      positionX: 0,
+      positionY: 0,
+      positionZ: 0,
+      rotationX: 0,
+      rotationY: 0,
+      rotationZ: 0,
+      scale: 1,
+      color: '#ff6b6b',
+      wireframe: false,
+      material: 'basic',
+    })
   })
 })
 

docs/content/4.cookbook/5.tweakpane.md

@@ -13,10 +13,37 @@ thumbnail: /recipes/tweakpane.png
 
 First, install Tweakpane v4 in your project:
 
-```bash
+::code-group
+```bash [npm] 
 npm install tweakpane@^4.0.0
 ```
 
+```bash [yarn] 
+yarn add tweakpane@^4.0.0
+```
+
+```bash [pnpm] 
+pnpm add tweakpane@^4.0.0
+```
+::
+
+Additionally, if you are working with TypeScript:
+
+::code-group
+```bash [npm] 
+npm install --save-dev @tweakpane/core
+```
+
+```bash [yarn] 
+yarn add --save-dev @tweakpane/core
+```
+
+```bash [pnpm] 
+pnpm add --save-dev @tweakpane/core
+```
+::
+
+
 ::tip
 Make sure to use Tweakpane v4 or higher, as this recipe uses the latest API which has breaking changes from v3.
 ::
@@ -166,6 +193,6 @@ onUnmounted(() => {
 })
 ```
 
-::: tip
+:::tip
 Always dispose of the pane instance to prevent memory leaks, especially in SPAs where components are frequently mounted/unmounted.
 :::