feat: new API and DX

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

@@ -26,7 +26,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - run: corepack enable
+      - run: npm i -g --force corepack && corepack enable
       - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}

docs/.vitepress/config.ts

@@ -1,5 +1,6 @@
 import { resolve } from 'pathe'
 import { defineConfig } from 'vitepress'
+import { groupIconMdPlugin } from 'vitepress-plugin-group-icons'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -24,7 +25,8 @@ export default defineConfig({
         text: 'Guide',
         items: [
           { text: 'Getting Started', link: '/guide/getting-started' },
-          { text: 'Controls', link: '/guide/controls' },
+          { text: 'useControls', link: '/guide/use-controls' },
+          { text: 'Icons', link: '/guide/icons' },
         ],
       },
       {
@@ -39,6 +41,15 @@ export default defineConfig({
           { text: 'Select', link: '/controls/index.html#select' },
           { text: 'Vector', link: '/controls/index.html#vector' },
           { text: 'Button', link: '/controls/index.html#button' },
+          { text: 'Graph', link: '/controls/index.html#graph' },
+        ],
+      },
+      {
+        text: 'Advanced',
+        link: '/advanced',
+        items: [
+          { text: 'Multiple Instances', link: '/advanced/multiple-instances' },
+          { text: 'Stacked mode', link: '/advanced/stacked' },
         ],
       },
       {
@@ -66,10 +77,15 @@ export default defineConfig({
     },
     resolve: {
       alias: {
-        '@tresjs/leches': resolve(__dirname, '../../dist/tresleches.js'),
-        '@leches/styles': resolve(__dirname, '../../dist/style.css'),
+        '@tresjs/leches': resolve(__dirname, '../../src'),
+        '@leches/styles': resolve(__dirname, '../../dist/tresleches.css'),
       },
       dedupe: ['@tresjs/cientos', 'three'],
     },
   },
+  markdown: {
+    config: (md) => {
+      md.use(groupIconMdPlugin)
+    },
+  },
 })

docs/.vitepress/theme/components/BooleanDemo.vue

@@ -2,23 +2,20 @@
 import { TresLeches, useControls } from '@tresjs/leches'
 
 const uuid = 'boolean'
-const { value } = useControls({
+const { awiwi } = useControls({
   awiwi: true,
 }, {
   uuid,
 })
 </script>
 
 <template>
-  <div class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
+  <div class="leches-demo-layout">
     <div class="p-4">
-      <pre class="bg-dark p-8 rounded text-white">awiwi: {{ value }}</pre>
-    </div>
-    <div class="relative w-280px min-h-200px">
-      <TresLeches
-        class="important-left-0 -important-top-8"
-        :uuid="uuid"
-      />
+      <pre class="leches-demo-preview">awiwi: {{ awiwi }}</pre>
     </div>
+    <TresLeches
+      :uuid="uuid"
+    />
   </div>
 </template>

docs/.vitepress/theme/components/ButtonDemo.vue

@@ -20,15 +20,12 @@ useControls({
 </script>
 
 <template>
-  <div class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
+  <div class="leches-demo-layout">
     <div class="p-4">
-      <pre class="bg-dark p-8 rounded text-white">{{ value }}</pre>
-    </div>
-    <div class="relative w-280px min-h-200px">
-      <TresLeches
-        class="important-left-0 -important-top-8"
-        :uuid="uuid"
-      />
+      <pre class="leches-demo-preview">{{ value }}</pre>
     </div>
+    <TresLeches
+      :uuid="uuid"
+    />
   </div>
 </template>

docs/.vitepress/theme/components/ButtonSizesDemo.vue

@@ -44,15 +44,12 @@ useControls({
 </script>
 
 <template>
-  <div class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
+  <div class="leches-demo-layout">
     <div class="p-4">
-      <pre class="bg-dark p-8 rounded text-white">{{ value }}</pre>
-    </div>
-    <div class="relative w-280px min-h-200px">
-      <TresLeches
-        class="important-left-0 -important-top-8"
-        :uuid="uuid"
-      />
+      <pre class="leches-demo-preview">{{ value }}</pre>
     </div>
+    <TresLeches
+      :uuid="uuid"
+    />
   </div>
 </template>

docs/.vitepress/theme/components/ButtonVariantDemo.vue

@@ -21,15 +21,12 @@ useControls({
 </script>
 
 <template>
-  <div class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
+  <div class="leches-demo-layout">
     <div class="p-4">
-      <pre class="bg-dark p-8 rounded text-white">{{ value }}</pre>
-    </div>
-    <div class="relative w-280px min-h-200px">
-      <TresLeches
-        class="important-left-0 -important-top-8"
-        :uuid="uuid"
-      />
+      <pre class="leches-demo-preview">{{ value }}</pre>
     </div>
+    <TresLeches
+      :uuid="uuid"
+    />
   </div>
 </template>

docs/.vitepress/theme/components/ColorDemo.vue

@@ -2,7 +2,7 @@
 import { TresLeches, useControls } from '@tresjs/leches'
 
 const uuid = 'color-demo'
-const { value: color } = useControls({
+const { color } = useControls({
   color: '#008080',
 }, {
   uuid,
@@ -11,17 +11,14 @@ const { value: color } = useControls({
 
 <template>
   <div
-    class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center"
+    class="leches-demo-layout"
     :style="{ backgroundColor: color }"
   >
     <div class="p-4">
-      <pre class="bg-dark p-8 rounded text-white">{{ color }}</pre>
-    </div>
-    <div class="relative w-280px min-h-200px">
-      <TresLeches
-        class="important-left-0 -important-top-8"
-        :uuid="uuid"
-      />
+      <pre class="leches-demo-preview">{{ color }}</pre>
     </div>
+    <TresLeches
+      :uuid="uuid"
+    />
   </div>
 </template>

docs/.vitepress/theme/components/FPSDemo.vue

@@ -8,12 +8,9 @@ useControls('fpsgraph', {
 </script>
 
 <template>
-  <div class="w-full h-300px bg-gray-200 mb-8 relative flex justify-center items-center">
-    <div class="relative w-280px min-h-200px">
-      <TresLeches
-        class="important-left-0 important-top-8"
-        :uuid="uuid"
-      />
-    </div>
+  <div class="w-full h-300px bg-gray-200 dark:bg-dark-800 mb-8 relative flex justify-center items-center">
+    <TresLeches
+      :uuid="uuid"
+    />
   </div>
 </template>

docs/.vitepress/theme/components/FolderDemo.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { TresLeches, useControls } from '@tresjs/leches'
+import { Euler, Vector3 } from 'three'
+
+const uuid = 'folder-demo'
+const canvasControls = useControls('Canvas', {
+  clearColor: '#008080',
+  shadows: true,
+}, {
+  uuid,
+})
+const cameraControls = useControls('Camera', {
+  position: {
+    value: new Vector3(0, 0, 0),
+    label: 'Position',
+  },
+  rotation: {
+    value: new Euler(0, 0, 0),
+    label: 'Rotation',
+  },
+}, {
+  uuid,
+})
+</script>
+
+<template>
+  <div
+    class="w-full h-500px bg-gray-200 dark:bg-dark-800 mb-8 relative grid grid-cols-2 gap-16 items-center"
+  >
+    <div class="p-4 text-xs">
+      <pre class="leches-demo-preview"> {{ canvasControls }}</pre>
+      <pre class="leches-demo-preview"> {{ cameraControls }}</pre>
+    </div>
+    <TresLeches
+      :uuid="uuid"
+    />
+  </div>
+</template>

docs/.vitepress/theme/components/GettingStartedDemo.vue

@@ -2,7 +2,7 @@
 import { TresLeches, useControls } from '@tresjs/leches'
 
 const uuid = 'getting-started'
-useControls({
+const controls = useControls({
   pepe: true,
   slider: {
     value: 0.5,
@@ -17,12 +17,12 @@ useControls({
 </script>
 
 <template>
-  <div class="w-full h-300px bg-gray-200 mb-8 relative flex justify-center items-center">
-    <div class="relative w-280px min-h-200px">
-      <TresLeches
-        class="important-left-0 -important-top-8"
-        :uuid="uuid"
-      />
+  <div class="leches-demo-layout">
+    <div class="p-4">
+      <pre class="leches-demo-preview">{{ controls }}</pre>
     </div>
+    <TresLeches
+      :uuid="uuid"
+    />
   </div>
 </template>

docs/.vitepress/theme/components/GraphDemo.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { TresLeches, useControls } from '@tresjs/leches'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const wave = ref(0)
+const uuid = 'graph-demo'
+
+useControls({
+  sine: {
+    type: 'graph',
+    label: 'Sine Wave',
+    value: wave,
+  },
+}, {
+  uuid,
+})
+
+// Parameters for the sine wave
+const amplitude = 50 // Height of the wave
+const frequency = 2 // Speed of the wave (increased from 0.1)
+let time = 0
+let intervalId: number | null = null
+
+// Function to update the sine wave value
+function updateSineWave() {
+  // Calculate sine value based on time
+  wave.value = amplitude * Math.sin(time * frequency)
+  time += 0.1
+}
+
+onMounted(() => {
+  // Start the sine wave animation
+  intervalId = setInterval(updateSineWave, 100) as unknown as number
+})
+
+onUnmounted(() => {
+  // Clean up interval when component is destroyed
+  if (intervalId !== null) {
+    clearInterval(intervalId)
+  }
+})
+</script>
+
+<template>
+  <div class="w-full h-300px bg-gray-200 dark:bg-dark-800 mb-8 relative flex justify-center items-center">
+    <TresLeches
+      :uuid="uuid"
+    />
+    {{ wave }}
+  </div>
+</template>

docs/.vitepress/theme/components/HeroDemo.vue

@@ -14,9 +14,7 @@ useControls({
 </script>
 
 <template>
-  <div class="w-full h-300px bg-gray-200 mb-8 relative flex justify-center items-center">
-    <div class="relative w-280px min-h-200px">
-      <TresLeches class="important-left-0 important-top-0" />
-    </div>
+  <div class="w-full h-300px bg-gray-200 dark:bg-dark-800 mb-8 relative flex justify-center items-center">
+    <TresLeches />
   </div>
 </template>

docs/.vitepress/theme/components/IconDemo.vue

@@ -3,7 +3,7 @@ import { TresLeches, useControls } from '@tresjs/leches'
 import { Vector3 } from 'three'
 
 const uuid = 'icon'
-const { value } = useControls({
+const { camera } = useControls({
   camera: {
     label: 'Camera Position',
     value: new Vector3(0, 0, 0),
@@ -15,15 +15,12 @@ const { value } = useControls({
 </script>
 
 <template>
-  <div class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
+  <div class="leches-demo-layout">
     <div class="p-4">
-      <pre class="bg-dark p-8 rounded text-white">{{ value }}</pre>
-    </div>
-    <div class="relative w-280px min-h-200px">
-      <TresLeches
-        class="important-left-0 -important-top-8"
-        :uuid="uuid"
-      />
+      <pre class="leches-demo-preview">{{ camera }}</pre>
     </div>
+    <TresLeches
+      :uuid="uuid"
+    />
   </div>
 </template>

docs/.vitepress/theme/components/MultipleControlDemo.vue

@@ -15,15 +15,12 @@ const controls = useControls({
 </script>
 
 <template>
-  <div class="w-full min-h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
+  <div class="w-full min-h-300px bg-gray-200 dark:bg-dark-800 mb-8 relative grid grid-cols-2 gap-16 items-center">
     <div class="p-4">
-      <pre class="bg-dark p-8 rounded text-white">{{ controls }}</pre>
-    </div>
-    <div class="relative w-280px min-h-200px">
-      <TresLeches
-        class="important-left-0 -important-top-8"
-        :uuid="uuid"
-      />
+      <pre class="leches-demo-preview">{{ controls }}</pre>
     </div>
+    <TresLeches
+      :uuid="uuid"
+    />
   </div>
 </template>