From 3b9d5b953ac91b2ece7ea420dcba3229b67ef50f Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Sat, 9 Nov 2024 12:10:15 +0100
Subject: [PATCH 01/17] feat: add toggler to hide/display debug panel

---
 .../devtools/src/components/DebugPanel.vue    | 33 ++++++++++
 .../src/components/FDebugPanel.ce.vue         | 63 +++++++++++++------
 .../devtools/src/components/ToggleButton.vue  |  3 +
 3 files changed, 79 insertions(+), 20 deletions(-)
 create mode 100644 packages/devtools/src/components/DebugPanel.vue
 create mode 100644 packages/devtools/src/components/ToggleButton.vue

diff --git a/packages/devtools/src/components/DebugPanel.vue b/packages/devtools/src/components/DebugPanel.vue
new file mode 100644
index 00000000..e126e707
--- /dev/null
+++ b/packages/devtools/src/components/DebugPanel.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="f-debug-panel">
+    <h1>{{ title }}</h1>
+    <div v-if="scene.components.length > 0">
+      <FComponents2d
+        v-if="scene.components[0].__IS_2D__"
+        :components="scene.components as FComponent2d[]"
+      />
+      <FComponents3d
+        v-if="scene.components[0].__IS_3D__"
+        :components="scene.components as FComponent3d[]"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { defineProps } from 'vue'
+import type { FScene } from '@fibbojs/core'
+import type { FComponent as FComponent2d } from '@fibbojs/2d'
+import type { FComponent as FComponent3d } from '@fibbojs/3d'
+import FComponents2d from './2d/FComponents2d.vue'
+import FComponents3d from './3d/FComponents3d.vue'
+
+defineProps({
+  title: String,
+  scene: {
+    type: Object as PropType<FScene>,
+    default: null,
+  },
+})
+</script>
diff --git a/packages/devtools/src/components/FDebugPanel.ce.vue b/packages/devtools/src/components/FDebugPanel.ce.vue
index e2a53851..a82681d6 100644
--- a/packages/devtools/src/components/FDebugPanel.ce.vue
+++ b/packages/devtools/src/components/FDebugPanel.ce.vue
@@ -1,48 +1,71 @@
 <template>
-  <div class="f-debug-panel">
-    <h1>{{ title }}</h1>
-    <div v-if="scene.components.length > 0">
-      <FComponents2d
-        v-if="scene.components[0].__IS_2D__"
-        :components="scene.components as FComponent2d[]"
-      />
-      <FComponents3d
-        v-if="scene.components[0].__IS_3D__"
-        :components="scene.components as FComponent3d[]"
-      />
-    </div>
+  <div class="f-debug">
+    <DebugPanel
+      :class="{
+        visible: panelVisible,
+      }"
+      :title="props.title"
+      :scene="props.scene"
+    />
+    <ToggleButton @click="toggleVisible" />
   </div>
 </template>
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { defineProps } from 'vue'
+import { defineProps, ref } from 'vue'
 import type { FScene } from '@fibbojs/core'
-import type { FComponent as FComponent2d } from '@fibbojs/2d'
-import type { FComponent as FComponent3d } from '@fibbojs/3d'
-import FComponents2d from './2d/FComponents2d.vue'
-import FComponents3d from './3d/FComponents3d.vue'
+import DebugPanel from './DebugPanel.vue'
+import ToggleButton from './ToggleButton.vue'
 
-defineProps({
+const props = defineProps({
   title: String,
   scene: {
     type: Object as PropType<FScene>,
     default: null,
   },
 })
+
+const panelVisible = ref(false)
+
+function toggleVisible() {
+  panelVisible.value = !panelVisible.value
+}
 </script>
 
 <style lang="scss">
+#toggle-button {
+  background-color: red;
+  height: 2rem;
+  width: 2rem;
+  position: fixed;
+  top: 50%;
+  left: 1rem;
+  transform: translateY(-50%);
+  border-radius: 100%;
+  transition: all 0.2s ease;
+
+  &:hover {
+    cursor: pointer;
+    background-color: rgba(255, 0, 0, 0.839);
+  }
+}
+
 .f-debug-panel {
-  position: absolute;
+  position: fixed;
   top: 10px;
-  left: 10px;
+  left: -100%;
   bottom: 10px;
   width: 300px;
   background: #151617;
   border-radius: 8px;
   overflow: auto;
   padding: 10px;
+  transition: all 0.2s ease;
+
+  &.visible {
+    left: 10px;
+  }
 
   * {
     color: #BFC0C1;
diff --git a/packages/devtools/src/components/ToggleButton.vue b/packages/devtools/src/components/ToggleButton.vue
new file mode 100644
index 00000000..01437749
--- /dev/null
+++ b/packages/devtools/src/components/ToggleButton.vue
@@ -0,0 +1,3 @@
+<template>
+  <div id="toggle-button" />
+</template>

From 3e5b950060b900e5ed29e7ba583a8c6b34d0d5dc Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Sun, 10 Nov 2024 17:13:38 +0100
Subject: [PATCH 02/17] feat: add fibbo logo + cross icon to toggler button

---
 .../src/components/FDebugPanel.ce.vue         | 71 +++++++++++++++++--
 .../devtools/src/components/ToggleButton.vue  | 21 +++++-
 2 files changed, 84 insertions(+), 8 deletions(-)

diff --git a/packages/devtools/src/components/FDebugPanel.ce.vue b/packages/devtools/src/components/FDebugPanel.ce.vue
index a82681d6..7f040063 100644
--- a/packages/devtools/src/components/FDebugPanel.ce.vue
+++ b/packages/devtools/src/components/FDebugPanel.ce.vue
@@ -7,7 +7,12 @@
       :title="props.title"
       :scene="props.scene"
     />
-    <ToggleButton @click="toggleVisible" />
+    <ToggleButton
+      :class="{
+        visible: panelVisible,
+      }"
+      @click="toggleVisible"
+    />
   </div>
 </template>
 
@@ -34,20 +39,72 @@ function toggleVisible() {
 </script>
 
 <style lang="scss">
+@keyframes animSvgIn {
+  from {
+    opacity: 0%;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 100%;
+    transform: scale(1.0);
+  }
+}
+
 #toggle-button {
-  background-color: red;
-  height: 2rem;
-  width: 2rem;
+  background-color: #151617;
+  height: 40px;
+  width: 40px;
   position: fixed;
   top: 50%;
-  left: 1rem;
+  left: 5px;
   transform: translateY(-50%);
   border-radius: 100%;
   transition: all 0.2s ease;
+  display: grid;
+  place-items: center;
 
   &:hover {
     cursor: pointer;
-    background-color: rgba(255, 0, 0, 0.839);
+
+    #fibbo-logo {
+      path {
+        stroke: white;
+      }
+    }
+  }
+
+  svg {
+    width: 24px;
+    height: 24px;
+    animation-name: animSvgIn;
+    animation-duration: 0.2s;
+
+    path {
+      transition: all 0.2s ease;
+    }
+  }
+
+  #fibbo-logo {
+    display: block;
+    path {
+      stroke: rgb(147, 147, 147);
+      stroke-width: 20;
+    }
+  }
+  #close-cross {
+    display: none;
+    width: 18px;
+    height: 18px;
+  }
+
+  &.visible {
+    #fibbo-logo {
+      display: none;
+    }
+    #close-cross {
+      display: block;
+    }
   }
 }
 
@@ -64,7 +121,7 @@ function toggleVisible() {
   transition: all 0.2s ease;
 
   &.visible {
-    left: 10px;
+    left: 25px;
   }
 
   * {
diff --git a/packages/devtools/src/components/ToggleButton.vue b/packages/devtools/src/components/ToggleButton.vue
index 01437749..d839ee54 100644
--- a/packages/devtools/src/components/ToggleButton.vue
+++ b/packages/devtools/src/components/ToggleButton.vue
@@ -1,3 +1,22 @@
 <template>
-  <div id="toggle-button" />
+  <div id="toggle-button">
+    <!-- Figgo logo -->
+    <svg id="fibbo-logo" width="422" height="458" viewBox="0 0 422 458" xmlns="http://www.w3.org/2000/svg">
+      <g clip-path="url(#clip0_62_36)">
+        <path d="M174.985 20.6088L44.9853 98.6088C23.9009 111.259 11 134.045 11 158.633V299.367C11 323.955 23.9009 346.741 44.9853 359.391L174.985 437.391C197.153 450.692 224.847 450.692 247.015 437.391L377.015 359.391C398.099 346.741 411 323.955 411 299.367V158.633C411 134.045 398.099 111.259 377.015 98.6088L247.015 20.6088C224.847 7.30816 197.153 7.30814 174.985 20.6088Z" stroke="black" stroke-width="20" stroke-linejoin="round" />
+        <path d="M211.274 127.63L121.008 174M121.008 174V285.944M121.008 174L12.644 118.589" stroke="black" stroke-width="20" stroke-linejoin="round" />
+        <path d="M121 404L121 286.32C121 285.946 121.208 285.604 121.539 285.432L211 239M211 239V128.776C211 128.015 211.817 127.533 212.483 127.901L295.483 173.715C295.802 173.891 296 174.226 296 174.59V279M211 239L296 279M296 279L211.532 323.718C211.205 323.891 211 324.232 211 324.602V455.575" stroke="black" stroke-width="20" stroke-linejoin="round" />
+        <path d="M296 174L404.425 122.698" stroke-width="20" stroke-linejoin="round" />
+      </g>
+      <defs>
+        <clipPath id="clip0_62_36">
+          <rect width="422" height="458" />
+        </clipPath>
+      </defs>
+    </svg>
+    <!-- Cross icon svg -->
+    <svg id="close-cross" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32">
+      <path fill="currentColor" d="M24.879 2.879A3 3 0 1 1 29.12 7.12l-8.79 8.79a.125.125 0 0 0 0 .177l8.79 8.79a3 3 0 1 1-4.242 4.243l-8.79-8.79a.125.125 0 0 0-.177 0l-8.79 8.79a3 3 0 1 1-4.243-4.242l8.79-8.79a.125.125 0 0 0 0-.177l-8.79-8.79A3 3 0 0 1 7.12 2.878l8.79 8.79a.125.125 0 0 0 .177 0z" />
+    </svg>
+  </div>
 </template>

From 63ac9d3a0bc451d9781396fa856d6e2989f95bd1 Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Sun, 10 Nov 2024 17:18:47 +0100
Subject: [PATCH 03/17] fix: juice panel animation

---
 packages/devtools/src/components/FDebugPanel.ce.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/devtools/src/components/FDebugPanel.ce.vue b/packages/devtools/src/components/FDebugPanel.ce.vue
index 7f040063..65bc2d38 100644
--- a/packages/devtools/src/components/FDebugPanel.ce.vue
+++ b/packages/devtools/src/components/FDebugPanel.ce.vue
@@ -119,9 +119,11 @@ function toggleVisible() {
   overflow: auto;
   padding: 10px;
   transition: all 0.2s ease;
+  transform: scale(0.6);
 
   &.visible {
     left: 25px;
+    transform: scale(1.0);
   }
 
   * {

From 6d4617f14fbc34ba8c4f4998aaa620c6dee89653 Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Mon, 18 Nov 2024 18:53:14 +0100
Subject: [PATCH 04/17] feat(devtools): add tabs + fancy glassmorphism
 background

---
 .../devtools/src/components/DebugPanel.vue    | 28 ++++---
 .../src/components/FDebugPanel.ce.vue         | 82 ++++++++++++++++++-
 .../devtools/src/components/common/Tabs.vue   | 59 +++++++++++++
 3 files changed, 158 insertions(+), 11 deletions(-)
 create mode 100644 packages/devtools/src/components/common/Tabs.vue

diff --git a/packages/devtools/src/components/DebugPanel.vue b/packages/devtools/src/components/DebugPanel.vue
index e126e707..99ab8f9a 100644
--- a/packages/devtools/src/components/DebugPanel.vue
+++ b/packages/devtools/src/components/DebugPanel.vue
@@ -1,16 +1,23 @@
 <template>
   <div class="f-debug-panel">
     <h1>{{ title }}</h1>
-    <div v-if="scene.components.length > 0">
-      <FComponents2d
-        v-if="scene.components[0].__IS_2D__"
-        :components="scene.components as FComponent2d[]"
-      />
-      <FComponents3d
-        v-if="scene.components[0].__IS_3D__"
-        :components="scene.components as FComponent3d[]"
-      />
-    </div>
+    <Tabs :tabs="['Components', 'Settings']">
+      <template #Components>
+        <div v-if="scene.components.length > 0">
+          <FComponents2d
+            v-if="scene.components[0].__IS_2D__"
+            :components="scene.components as FComponent2d[]"
+          />
+          <FComponents3d
+            v-if="scene.components[0].__IS_3D__"
+            :components="scene.components as FComponent3d[]"
+          />
+        </div>
+      </template>
+      <template #Settings>
+        <div>Settings</div>
+      </template>
+    </Tabs>
   </div>
 </template>
 
@@ -22,6 +29,7 @@ import type { FComponent as FComponent2d } from '@fibbojs/2d'
 import type { FComponent as FComponent3d } from '@fibbojs/3d'
 import FComponents2d from './2d/FComponents2d.vue'
 import FComponents3d from './3d/FComponents3d.vue'
+import Tabs from './common/Tabs.vue'
 
 defineProps({
   title: String,
diff --git a/packages/devtools/src/components/FDebugPanel.ce.vue b/packages/devtools/src/components/FDebugPanel.ce.vue
index 65bc2d38..66dca1e4 100644
--- a/packages/devtools/src/components/FDebugPanel.ce.vue
+++ b/packages/devtools/src/components/FDebugPanel.ce.vue
@@ -52,7 +52,7 @@ function toggleVisible() {
 }
 
 #toggle-button {
-  background-color: #151617;
+  background: #151617;
   height: 40px;
   width: 40px;
   position: fixed;
@@ -120,6 +120,7 @@ function toggleVisible() {
   padding: 10px;
   transition: all 0.2s ease;
   transform: scale(0.6);
+  font-size: 14px;
 
   &.visible {
     left: 25px;
@@ -134,6 +135,40 @@ function toggleVisible() {
     margin: 0 0 10px;
   }
 
+  .f-debug-tabs__header {
+    position: relative;
+    background: #101212;
+    display: flex;
+    flex-direction: row;
+    padding: 6px;
+    column-gap: 6px;
+    justify-content: center;
+    align-items: center;
+    grid-template-columns: repeat(auto-fill, 1fr);
+    border-radius: 12px;
+
+    .f-debug-tabs__tab {
+      display: grid;
+      place-content: center;
+      width: 100%;
+      padding: 6px;
+      border-radius: 6px;
+      transition: background 0.1s;
+      cursor: pointer;
+      z-index: 1;
+    }
+
+    .f-debug-tabs__selector {
+      position: absolute;
+      top: 6px;
+      bottom: 6px;
+      width: 50%;
+      background: #1E1F20;
+      border-radius: 6px;
+      transition: left 0.2s ease;
+    }
+  }
+
   .f-components {
     display: flex;
     flex-direction: column;
@@ -150,6 +185,8 @@ function toggleVisible() {
       border-radius: 8px;
       transition: background 0.1s;
       cursor: pointer;
+      height: 18px;
+      padding: 4px;
 
       .f-component-header-arrow {
         display: grid;
@@ -229,4 +266,47 @@ function toggleVisible() {
     place-items: center;
   }
 }
+
+/* Gets applied if supported only */
+@supports (
+  (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
+) {
+  #toggle-button {
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+
+  .f-debug-panel {
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+
+  .f-debug-tabs__header {
+    background: rgba(0, 0, 0, 0.7) !important;
+
+    .f-debug-tabs__selector {
+      background: rgba(70, 70, 70, 0.2) !important;
+    }
+  }
+
+  .f-component {
+    .f-component-header {
+      &:hover {
+        background: rgba(0, 0, 0, 0.4) !important;
+      }
+    }
+
+    .f-component-properties {
+      .f-component-property {
+        .f-component-property-group {
+          > input {
+            background: rgba(0, 0, 0, 0.4) !important;
+          }
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/packages/devtools/src/components/common/Tabs.vue b/packages/devtools/src/components/common/Tabs.vue
new file mode 100644
index 00000000..cf3f2c30
--- /dev/null
+++ b/packages/devtools/src/components/common/Tabs.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="f-debug-tabs">
+    <div class="f-debug-tabs__header">
+      <div
+        v-for="tab in tabs"
+        :key="tab"
+        class="f-debug-tabs__tab"
+        :class="{
+          active: tab === selectedTabId,
+        }"
+        @click="selectTab(tab)"
+      >
+        {{ tab }}
+      </div>
+      <div ref="selector" class="f-debug-tabs__selector" />
+    </div>
+    <div class="f-debug-tabs__content">
+      <slot :name="selectedTabId" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { defineProps, onMounted, ref } from 'vue'
+
+const props = defineProps({
+  tabs: {
+    type: Array as PropType<string[]>,
+    required: true,
+  },
+})
+
+const selectedTabId = ref(props.tabs[0])
+
+const selector = ref<HTMLElement | null>(null)
+
+function selectTab(id: string) {
+  selectedTabId.value = id
+  if (selector.value) {
+    const tabs = selector.value.parentElement?.querySelectorAll('.f-debug-tabs__tab')
+    if (tabs) {
+      const tab = tabs[props.tabs.indexOf(id)] as HTMLElement
+      selector.value.style.left = `${tab.offsetLeft}px`
+    }
+  }
+}
+
+onMounted(() => {
+  if (selector.value) {
+    const tabs = selector.value.parentElement?.querySelectorAll('.f-debug-tabs__tab')
+    if (tabs) {
+      const tab = tabs[0] as HTMLElement
+      selector.value.style.width = `${tab.offsetWidth}px`
+      selector.value.style.left = `${tab.offsetLeft}px`
+    }
+  }
+})
+</script>

From 2fc33c4bd1f845b0969f1e1547bd16ae67703049 Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Tue, 19 Nov 2024 13:00:02 +0100
Subject: [PATCH 05/17] feat: use Vue instance instead of Web Components

---
 package-lock.json                             | 379 +++++++++++-------
 package.json                                  |   2 +-
 packages/devtools/src/FDebug.ts               |  36 +-
 .../devtools/src/components/DebugPanel.vue    | 106 +++++
 packages/devtools/src/components/FDebug.vue   |  39 ++
 .../src/components/FDebugPanel.ce.vue         | 312 --------------
 .../devtools/src/components/ToggleButton.vue  |  81 ++++
 .../components/common/FComponentHeader.vue    |  49 +++
 .../devtools/src/components/common/Tabs.vue   |  63 ++-
 .../src/components/icons/FComponentIcon.vue   |   9 +
 10 files changed, 584 insertions(+), 492 deletions(-)
 create mode 100644 packages/devtools/src/components/FDebug.vue
 delete mode 100644 packages/devtools/src/components/FDebugPanel.ce.vue

diff --git a/package-lock.json b/package-lock.json
index 463e97dd..aa3d6cb2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,7 +49,7 @@
         "vite": "^5.2.9",
         "vitepress": "^1.5.0",
         "vitest": "^2.1.2",
-        "vue": "^3.4.37",
+        "vue": "^3.5.13",
         "vue-tsc": "^2.0.29"
       }
     },
@@ -6030,45 +6030,112 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.0.tgz",
-      "integrity": "sha512-Ew3F5riP3B3ZDGjD3ZKb9uZylTTPSqt8hAf4sGbvbjrjDjrFb3Jm15Tk1/w7WwTE5GbQ2Qhwxx1moc9hr8A/OQ==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
+      "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
+      "dev": true,
       "dependencies": {
-        "@vue/shared": "3.5.0"
+        "@vue/shared": "3.5.13"
       }
     },
+    "node_modules/@vue/reactivity/node_modules/@vue/shared": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
+      "dev": true
+    },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.0.tgz",
-      "integrity": "sha512-mQyW0F9FaNRdt8ghkAs+BMG3iQ7LGgWKOpkzUzR5AI5swPNydHGL5hvVTqFaeMzwecF1g0c86H4yFQsSxJhH1w==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
+      "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
+      "dev": true,
       "dependencies": {
-        "@vue/reactivity": "3.5.0",
-        "@vue/shared": "3.5.0"
+        "@vue/reactivity": "3.5.13",
+        "@vue/shared": "3.5.13"
       }
     },
+    "node_modules/@vue/runtime-core/node_modules/@vue/shared": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
+      "dev": true
+    },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.0.tgz",
-      "integrity": "sha512-NQQXjpdXgyYVJ2M56FJ+lSJgZiecgQ2HhxhnQBN95FymXegRNY/N2htI7vOTwpP75pfxhIeYOJ8mE8sW8KAW6A==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
+      "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
+      "dev": true,
       "dependencies": {
-        "@vue/reactivity": "3.5.0",
-        "@vue/runtime-core": "3.5.0",
-        "@vue/shared": "3.5.0",
+        "@vue/reactivity": "3.5.13",
+        "@vue/runtime-core": "3.5.13",
+        "@vue/shared": "3.5.13",
         "csstype": "^3.1.3"
       }
     },
+    "node_modules/@vue/runtime-dom/node_modules/@vue/shared": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
+      "dev": true
+    },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.0.tgz",
-      "integrity": "sha512-HyDIFUg+l7L4PKrEnJlCYWHUOlm6NxZhmSxIefZ5MTYjkIPfDfkwhX7hqxAQHfgIAE1uLMLQZwuNR/ozI0NhZg==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
+      "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
+      "dev": true,
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.0",
-        "@vue/shared": "3.5.0"
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13"
       },
       "peerDependencies": {
-        "vue": "3.5.0"
+        "vue": "3.5.13"
+      }
+    },
+    "node_modules/@vue/server-renderer/node_modules/@vue/compiler-core": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+      "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.13",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
       }
     },
+    "node_modules/@vue/server-renderer/node_modules/@vue/compiler-dom": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+      "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-core": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/server-renderer/node_modules/@vue/compiler-ssr": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
+      "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/server-renderer/node_modules/@vue/shared": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
+      "dev": true
+    },
+    "node_modules/@vue/server-renderer/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
     "node_modules/@vue/shared": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.0.tgz",
@@ -11926,9 +11993,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.47",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
-      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
       "funding": [
         {
           "type": "opencollective",
@@ -11945,7 +12012,7 @@
       ],
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.1.0",
+        "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
       "engines": {
@@ -15136,133 +15203,12 @@
         }
       }
     },
-    "node_modules/vitepress/node_modules/@vue/compiler-core": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.12.tgz",
-      "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.25.3",
-        "@vue/shared": "3.5.12",
-        "entities": "^4.5.0",
-        "estree-walker": "^2.0.2",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "node_modules/vitepress/node_modules/@vue/compiler-dom": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz",
-      "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==",
-      "dev": true,
-      "dependencies": {
-        "@vue/compiler-core": "3.5.12",
-        "@vue/shared": "3.5.12"
-      }
-    },
-    "node_modules/vitepress/node_modules/@vue/compiler-sfc": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz",
-      "integrity": "sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.25.3",
-        "@vue/compiler-core": "3.5.12",
-        "@vue/compiler-dom": "3.5.12",
-        "@vue/compiler-ssr": "3.5.12",
-        "@vue/shared": "3.5.12",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.11",
-        "postcss": "^8.4.47",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "node_modules/vitepress/node_modules/@vue/compiler-ssr": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz",
-      "integrity": "sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==",
-      "dev": true,
-      "dependencies": {
-        "@vue/compiler-dom": "3.5.12",
-        "@vue/shared": "3.5.12"
-      }
-    },
-    "node_modules/vitepress/node_modules/@vue/reactivity": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.12.tgz",
-      "integrity": "sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==",
-      "dev": true,
-      "dependencies": {
-        "@vue/shared": "3.5.12"
-      }
-    },
-    "node_modules/vitepress/node_modules/@vue/runtime-core": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.12.tgz",
-      "integrity": "sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==",
-      "dev": true,
-      "dependencies": {
-        "@vue/reactivity": "3.5.12",
-        "@vue/shared": "3.5.12"
-      }
-    },
-    "node_modules/vitepress/node_modules/@vue/runtime-dom": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.12.tgz",
-      "integrity": "sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==",
-      "dev": true,
-      "dependencies": {
-        "@vue/reactivity": "3.5.12",
-        "@vue/runtime-core": "3.5.12",
-        "@vue/shared": "3.5.12",
-        "csstype": "^3.1.3"
-      }
-    },
-    "node_modules/vitepress/node_modules/@vue/server-renderer": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.12.tgz",
-      "integrity": "sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==",
-      "dev": true,
-      "dependencies": {
-        "@vue/compiler-ssr": "3.5.12",
-        "@vue/shared": "3.5.12"
-      },
-      "peerDependencies": {
-        "vue": "3.5.12"
-      }
-    },
     "node_modules/vitepress/node_modules/@vue/shared": {
       "version": "3.5.12",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.12.tgz",
       "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==",
       "dev": true
     },
-    "node_modules/vitepress/node_modules/estree-walker": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true
-    },
-    "node_modules/vitepress/node_modules/vue": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.12.tgz",
-      "integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==",
-      "dev": true,
-      "dependencies": {
-        "@vue/compiler-dom": "3.5.12",
-        "@vue/compiler-sfc": "3.5.12",
-        "@vue/runtime-dom": "3.5.12",
-        "@vue/server-renderer": "3.5.12",
-        "@vue/shared": "3.5.12"
-      },
-      "peerDependencies": {
-        "typescript": "*"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/vitest": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.2.tgz",
@@ -15334,15 +15280,16 @@
       "dev": true
     },
     "node_modules/vue": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.0.tgz",
-      "integrity": "sha512-1t70favYoFijwfWJ7g81aTd32obGaAnKYE9FNyMgnEzn3F4YncRi/kqAHHKloG0VXTD8vBYMhbgLKCA+Sk6QDw==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
+      "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
+      "dev": true,
       "dependencies": {
-        "@vue/compiler-dom": "3.5.0",
-        "@vue/compiler-sfc": "3.5.0",
-        "@vue/runtime-dom": "3.5.0",
-        "@vue/server-renderer": "3.5.0",
-        "@vue/shared": "3.5.0"
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-sfc": "3.5.13",
+        "@vue/runtime-dom": "3.5.13",
+        "@vue/server-renderer": "3.5.13",
+        "@vue/shared": "3.5.13"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -15439,6 +15386,68 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/vue/node_modules/@vue/compiler-core": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+      "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.13",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/compiler-dom": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+      "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-core": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/compiler-sfc": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
+      "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.13",
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.48",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/compiler-ssr": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
+      "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/shared": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
+      "dev": true
+    },
+    "node_modules/vue/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -15759,6 +15768,66 @@
         "vue": "3.5.0"
       }
     },
+    "packages/devtools/node_modules/@vue/reactivity": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.0.tgz",
+      "integrity": "sha512-Ew3F5riP3B3ZDGjD3ZKb9uZylTTPSqt8hAf4sGbvbjrjDjrFb3Jm15Tk1/w7WwTE5GbQ2Qhwxx1moc9hr8A/OQ==",
+      "dependencies": {
+        "@vue/shared": "3.5.0"
+      }
+    },
+    "packages/devtools/node_modules/@vue/runtime-core": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.0.tgz",
+      "integrity": "sha512-mQyW0F9FaNRdt8ghkAs+BMG3iQ7LGgWKOpkzUzR5AI5swPNydHGL5hvVTqFaeMzwecF1g0c86H4yFQsSxJhH1w==",
+      "dependencies": {
+        "@vue/reactivity": "3.5.0",
+        "@vue/shared": "3.5.0"
+      }
+    },
+    "packages/devtools/node_modules/@vue/runtime-dom": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.0.tgz",
+      "integrity": "sha512-NQQXjpdXgyYVJ2M56FJ+lSJgZiecgQ2HhxhnQBN95FymXegRNY/N2htI7vOTwpP75pfxhIeYOJ8mE8sW8KAW6A==",
+      "dependencies": {
+        "@vue/reactivity": "3.5.0",
+        "@vue/runtime-core": "3.5.0",
+        "@vue/shared": "3.5.0",
+        "csstype": "^3.1.3"
+      }
+    },
+    "packages/devtools/node_modules/@vue/server-renderer": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.0.tgz",
+      "integrity": "sha512-HyDIFUg+l7L4PKrEnJlCYWHUOlm6NxZhmSxIefZ5MTYjkIPfDfkwhX7hqxAQHfgIAE1uLMLQZwuNR/ozI0NhZg==",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.0",
+        "@vue/shared": "3.5.0"
+      },
+      "peerDependencies": {
+        "vue": "3.5.0"
+      }
+    },
+    "packages/devtools/node_modules/vue": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.0.tgz",
+      "integrity": "sha512-1t70favYoFijwfWJ7g81aTd32obGaAnKYE9FNyMgnEzn3F4YncRi/kqAHHKloG0VXTD8vBYMhbgLKCA+Sk6QDw==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.0",
+        "@vue/compiler-sfc": "3.5.0",
+        "@vue/runtime-dom": "3.5.0",
+        "@vue/server-renderer": "3.5.0",
+        "@vue/shared": "3.5.0"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "packages/event": {
       "name": "@fibbojs/event",
       "version": "0.0.11",
diff --git a/package.json b/package.json
index 3e858c4e..ce489073 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "vite": "^5.2.9",
     "vitepress": "^1.5.0",
     "vitest": "^2.1.2",
-    "vue": "^3.4.37",
+    "vue": "^3.5.13",
     "vue-tsc": "^2.0.29"
   },
   "nx": {}
diff --git a/packages/devtools/src/FDebug.ts b/packages/devtools/src/FDebug.ts
index 1c788a41..a44ef789 100644
--- a/packages/devtools/src/FDebug.ts
+++ b/packages/devtools/src/FDebug.ts
@@ -1,14 +1,11 @@
-import { defineCustomElement, reactive } from 'vue'
+import { createApp, reactive } from 'vue'
 import type { FScene } from '@fibbojs/core'
 import type { FScene as FScene2d } from '@fibbojs/2d'
 import type { FScene as FScene3d } from '@fibbojs/3d'
-import FDebugPanel from './components/FDebugPanel.ce.vue'
+import FDebugComponent from './components/FDebug.vue'
 import { FDebug2d } from './FDebug2d'
 import { FDebug3d } from './FDebug3d'
 
-// Define the custom Web Component from the Vue component
-const FDebugPanelElement = defineCustomElement(FDebugPanel)
-
 /**
  * A helper class to debug a given scene
  * @example
@@ -39,13 +36,18 @@ export class FDebug {
     // Define the scene
     this.scene = scene
 
-    // Define the custom element in the browser
-    customElements.define('f-debug-panel', FDebugPanelElement)
-    // Create and inject the custom element into the DOM
-    const debugPanel = new FDebugPanelElement({
-      title: 'Fibbo',
-      scene: this.scene,
-    })
+    // Fetch the CSS
+    fetch(import.meta.url.replace('index.es.js', 'style.css'))
+      .then(res => res.text())
+      .then((css) => {
+        // Extract the CSS content
+        css = css
+          .split('const __vite__css = "')[1]
+          .split('\\n"')[0]
+        const style = document.createElement('style')
+        style.innerHTML = css
+        document.head.appendChild(style)
+      })
 
     // Make the component array reactive
     this.scene.components = reactive(this.scene.components) as any
@@ -61,8 +63,16 @@ export class FDebug {
       this.debugger2d = new FDebug2d(scene as FScene2d)
     }
 
-    // Add the debug panel to the body
+    // Create a HTML element for the debug panel
+    const debugPanel = document.createElement('div')
+    debugPanel.id = 'f-debug'
+    // Append the debug panel to the body
     document.body.appendChild(debugPanel)
+    // Mount the Vue instance
+    createApp(FDebugComponent, {
+      title: 'Fibbo',
+      scene: this.scene,
+    }).mount('#f-debug')
   }
 }
 
diff --git a/packages/devtools/src/components/DebugPanel.vue b/packages/devtools/src/components/DebugPanel.vue
index 99ab8f9a..39ca6ce2 100644
--- a/packages/devtools/src/components/DebugPanel.vue
+++ b/packages/devtools/src/components/DebugPanel.vue
@@ -39,3 +39,109 @@ defineProps({
   },
 })
 </script>
+
+<style lang="scss">
+.f-debug-panel {
+  position: fixed;
+  top: 10px;
+  left: -100%;
+  bottom: 10px;
+  width: 300px;
+  background: #151617;
+  border-radius: 8px;
+  overflow: auto;
+  padding: 10px;
+  transition: all 0.2s ease;
+  transform: scale(0.6);
+  font-size: 14px;
+
+  &.visible {
+    left: 25px;
+    transform: scale(1.0);
+  }
+
+  * {
+    color: #BFC0C1;
+  }
+
+  h1 {
+    margin: 0 0 10px;
+  }
+
+  .f-components {
+    display: flex;
+    flex-direction: column;
+    margin: 8px;
+    row-gap: 2px;
+  }
+
+  .f-component {
+    .f-component-properties {
+      display: flex;
+      flex-direction: column;
+
+      p {
+        margin: 0;
+      }
+
+      .f-component-property {
+        margin-left: 24px;
+
+        .f-component-property-group {
+          display: flex;
+          flex-direction: row;
+          column-gap: 2px;
+
+          > p {
+            padding: 0 4px;
+          }
+          > input {
+            padding: 0 4px;
+            border-radius: 4px;
+            background: #1E1F20;
+            border: none;
+            width: 32px;
+
+            // Hide arrows
+            &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
+              -webkit-appearance: none;
+              margin: 0;
+            }
+            // Hide focus
+            &:focus {
+              outline: none;
+            }
+          }
+        }
+      }
+    }
+
+    .f-component-properties--hidden {
+      display: none;
+    }
+  }
+}
+
+/* Gets applied if supported only */
+@supports (
+  (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
+) {
+  .f-debug-panel {
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+
+  .f-component {
+    .f-component-properties {
+      .f-component-property {
+        .f-component-property-group {
+          > input {
+            background: rgba(0, 0, 0, 0.4) !important;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/devtools/src/components/FDebug.vue b/packages/devtools/src/components/FDebug.vue
new file mode 100644
index 00000000..28317517
--- /dev/null
+++ b/packages/devtools/src/components/FDebug.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="f-debug">
+    <DebugPanel
+      :class="{
+        visible: panelVisible,
+      }"
+      :title="props.title"
+      :scene="props.scene"
+    />
+    <ToggleButton
+      :class="{
+        visible: panelVisible,
+      }"
+      @click="toggleVisible"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { defineProps, ref } from 'vue'
+import type { FScene } from '@fibbojs/core'
+import DebugPanel from './DebugPanel.vue'
+import ToggleButton from './ToggleButton.vue'
+
+const props = defineProps({
+  title: String,
+  scene: {
+    type: Object as PropType<FScene>,
+    default: null,
+  },
+})
+
+const panelVisible = ref(false)
+
+function toggleVisible() {
+  panelVisible.value = !panelVisible.value
+}
+</script>
diff --git a/packages/devtools/src/components/FDebugPanel.ce.vue b/packages/devtools/src/components/FDebugPanel.ce.vue
deleted file mode 100644
index 66dca1e4..00000000
--- a/packages/devtools/src/components/FDebugPanel.ce.vue
+++ /dev/null
@@ -1,312 +0,0 @@
-<template>
-  <div class="f-debug">
-    <DebugPanel
-      :class="{
-        visible: panelVisible,
-      }"
-      :title="props.title"
-      :scene="props.scene"
-    />
-    <ToggleButton
-      :class="{
-        visible: panelVisible,
-      }"
-      @click="toggleVisible"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import { defineProps, ref } from 'vue'
-import type { FScene } from '@fibbojs/core'
-import DebugPanel from './DebugPanel.vue'
-import ToggleButton from './ToggleButton.vue'
-
-const props = defineProps({
-  title: String,
-  scene: {
-    type: Object as PropType<FScene>,
-    default: null,
-  },
-})
-
-const panelVisible = ref(false)
-
-function toggleVisible() {
-  panelVisible.value = !panelVisible.value
-}
-</script>
-
-<style lang="scss">
-@keyframes animSvgIn {
-  from {
-    opacity: 0%;
-    transform: scale(0.9);
-  }
-
-  to {
-    opacity: 100%;
-    transform: scale(1.0);
-  }
-}
-
-#toggle-button {
-  background: #151617;
-  height: 40px;
-  width: 40px;
-  position: fixed;
-  top: 50%;
-  left: 5px;
-  transform: translateY(-50%);
-  border-radius: 100%;
-  transition: all 0.2s ease;
-  display: grid;
-  place-items: center;
-
-  &:hover {
-    cursor: pointer;
-
-    #fibbo-logo {
-      path {
-        stroke: white;
-      }
-    }
-  }
-
-  svg {
-    width: 24px;
-    height: 24px;
-    animation-name: animSvgIn;
-    animation-duration: 0.2s;
-
-    path {
-      transition: all 0.2s ease;
-    }
-  }
-
-  #fibbo-logo {
-    display: block;
-    path {
-      stroke: rgb(147, 147, 147);
-      stroke-width: 20;
-    }
-  }
-  #close-cross {
-    display: none;
-    width: 18px;
-    height: 18px;
-  }
-
-  &.visible {
-    #fibbo-logo {
-      display: none;
-    }
-    #close-cross {
-      display: block;
-    }
-  }
-}
-
-.f-debug-panel {
-  position: fixed;
-  top: 10px;
-  left: -100%;
-  bottom: 10px;
-  width: 300px;
-  background: #151617;
-  border-radius: 8px;
-  overflow: auto;
-  padding: 10px;
-  transition: all 0.2s ease;
-  transform: scale(0.6);
-  font-size: 14px;
-
-  &.visible {
-    left: 25px;
-    transform: scale(1.0);
-  }
-
-  * {
-    color: #BFC0C1;
-  }
-
-  h1 {
-    margin: 0 0 10px;
-  }
-
-  .f-debug-tabs__header {
-    position: relative;
-    background: #101212;
-    display: flex;
-    flex-direction: row;
-    padding: 6px;
-    column-gap: 6px;
-    justify-content: center;
-    align-items: center;
-    grid-template-columns: repeat(auto-fill, 1fr);
-    border-radius: 12px;
-
-    .f-debug-tabs__tab {
-      display: grid;
-      place-content: center;
-      width: 100%;
-      padding: 6px;
-      border-radius: 6px;
-      transition: background 0.1s;
-      cursor: pointer;
-      z-index: 1;
-    }
-
-    .f-debug-tabs__selector {
-      position: absolute;
-      top: 6px;
-      bottom: 6px;
-      width: 50%;
-      background: #1E1F20;
-      border-radius: 6px;
-      transition: left 0.2s ease;
-    }
-  }
-
-  .f-components {
-    display: flex;
-    flex-direction: column;
-    margin: 8px;
-    row-gap: 2px;
-  }
-
-  .f-component {
-    .f-component-header {
-      display: flex;
-      flex-direction: row;
-      column-gap: 8px;
-      align-items: center;
-      border-radius: 8px;
-      transition: background 0.1s;
-      cursor: pointer;
-      height: 18px;
-      padding: 4px;
-
-      .f-component-header-arrow {
-        display: grid;
-        place-items: center;
-        width: 16px;
-        transition: transform 0.1s;
-      }
-
-      .f-component-name {
-        margin: 0;
-      }
-
-      .f-component-id {
-        color: #4d4e4e;
-      }
-
-      &:hover {
-        background: #1E1F20;
-      }
-    }
-
-    .f-component-header--open {
-      .f-component-header-arrow {
-        transform: rotate(90deg);
-      }
-    }
-
-    .f-component-properties {
-      display: flex;
-      flex-direction: column;
-
-      p {
-        margin: 0;
-      }
-
-      .f-component-property {
-        margin-left: 24px;
-
-        .f-component-property-group {
-          display: flex;
-          flex-direction: row;
-          column-gap: 2px;
-
-          > p {
-            padding: 0 4px;
-          }
-          > input {
-            padding: 0 4px;
-            border-radius: 4px;
-            background: #1E1F20;
-            border: none;
-            width: 32px;
-
-            // Hide arrows
-            &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
-              -webkit-appearance: none;
-              margin: 0;
-            }
-            // Hide focus
-            &:focus {
-              outline: none;
-            }
-          }
-        }
-      }
-    }
-
-    .f-component-properties--hidden {
-      display: none;
-    }
-  }
-
-  .f-component-icon {
-    width: 16px;
-    height: 16px;
-    display: grid;
-    place-items: center;
-  }
-}
-
-/* Gets applied if supported only */
-@supports (
-  (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
-) {
-  #toggle-button {
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-  }
-
-  .f-debug-panel {
-    background: rgba(0, 0, 0, 0.7);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-  }
-
-  .f-debug-tabs__header {
-    background: rgba(0, 0, 0, 0.7) !important;
-
-    .f-debug-tabs__selector {
-      background: rgba(70, 70, 70, 0.2) !important;
-    }
-  }
-
-  .f-component {
-    .f-component-header {
-      &:hover {
-        background: rgba(0, 0, 0, 0.4) !important;
-      }
-    }
-
-    .f-component-properties {
-      .f-component-property {
-        .f-component-property-group {
-          > input {
-            background: rgba(0, 0, 0, 0.4) !important;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/packages/devtools/src/components/ToggleButton.vue b/packages/devtools/src/components/ToggleButton.vue
index d839ee54..79a2d7a5 100644
--- a/packages/devtools/src/components/ToggleButton.vue
+++ b/packages/devtools/src/components/ToggleButton.vue
@@ -20,3 +20,84 @@
     </svg>
   </div>
 </template>
+
+<style scoped lang="scss">
+@keyframes animSvgIn {
+  from {
+    opacity: 0%;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 100%;
+    transform: scale(1.0);
+  }
+}
+
+#toggle-button {
+  background: #151617;
+  height: 40px;
+  width: 40px;
+  position: fixed;
+  top: 50%;
+  left: 5px;
+  transform: translateY(-50%);
+  border-radius: 100%;
+  transition: all 0.2s ease;
+  display: grid;
+  place-items: center;
+
+  &:hover {
+    cursor: pointer;
+
+    #fibbo-logo {
+      path {
+        stroke: white;
+      }
+    }
+  }
+
+  svg {
+    width: 24px;
+    height: 24px;
+    animation-name: animSvgIn;
+    animation-duration: 0.2s;
+
+    path {
+      transition: all 0.2s ease;
+    }
+  }
+
+  #fibbo-logo {
+    display: block;
+    path {
+      stroke: rgb(147, 147, 147);
+      stroke-width: 20;
+    }
+  }
+  #close-cross {
+    display: none;
+    width: 18px;
+    height: 18px;
+  }
+
+  &.visible {
+    #fibbo-logo {
+      display: none;
+    }
+    #close-cross {
+      display: block;
+    }
+  }
+}
+
+@supports (
+  (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
+) {
+  #toggle-button {
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+}
+</style>
diff --git a/packages/devtools/src/components/common/FComponentHeader.vue b/packages/devtools/src/components/common/FComponentHeader.vue
index d418ca42..da2f3c15 100644
--- a/packages/devtools/src/components/common/FComponentHeader.vue
+++ b/packages/devtools/src/components/common/FComponentHeader.vue
@@ -27,3 +27,52 @@ const props = defineProps({
 
 const iconName = useComponentIcon(props.component)
 </script>
+
+<style scoped lang="scss">
+.f-component-header {
+  display: flex;
+  flex-direction: row;
+  column-gap: 8px;
+  align-items: center;
+  border-radius: 8px;
+  transition: background 0.1s;
+  cursor: pointer;
+  height: 18px;
+  padding: 4px;
+
+  .f-component-header-arrow {
+    display: grid;
+    place-items: center;
+    width: 16px;
+    transition: transform 0.1s;
+  }
+
+  .f-component-name {
+    margin: 0;
+  }
+
+  .f-component-id {
+    color: #4d4e4e;
+  }
+
+  &:hover {
+    background: #1E1F20;
+  }
+}
+
+.f-component-header--open {
+  .f-component-header-arrow {
+    transform: rotate(90deg);
+  }
+}
+
+@supports (
+  (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
+) {
+  .f-component-header {
+    &:hover {
+      background: rgba(0, 0, 0, 0.4) !important;
+    }
+  }
+}
+</style>
diff --git a/packages/devtools/src/components/common/Tabs.vue b/packages/devtools/src/components/common/Tabs.vue
index cf3f2c30..6afd6f20 100644
--- a/packages/devtools/src/components/common/Tabs.vue
+++ b/packages/devtools/src/components/common/Tabs.vue
@@ -38,22 +38,63 @@ const selector = ref<HTMLElement | null>(null)
 function selectTab(id: string) {
   selectedTabId.value = id
   if (selector.value) {
-    const tabs = selector.value.parentElement?.querySelectorAll('.f-debug-tabs__tab')
-    if (tabs) {
-      const tab = tabs[props.tabs.indexOf(id)] as HTMLElement
-      selector.value.style.left = `${tab.offsetLeft}px`
-    }
+    selector.value.style.width = `calc(${100 / props.tabs.length}% - 12px)`
+    selector.value.style.left = `calc(${props.tabs.indexOf(id) * (100 / props.tabs.length)}% + 6px)`
   }
 }
 
 onMounted(() => {
   if (selector.value) {
-    const tabs = selector.value.parentElement?.querySelectorAll('.f-debug-tabs__tab')
-    if (tabs) {
-      const tab = tabs[0] as HTMLElement
-      selector.value.style.width = `${tab.offsetWidth}px`
-      selector.value.style.left = `${tab.offsetLeft}px`
-    }
+    selector.value.style.width = `calc(${100 / props.tabs.length}% - 12px)`
+    selector.value.style.left = `calc(${props.tabs.indexOf(selectedTabId.value) * (100 / props.tabs.length)}% + 6px)`
   }
 })
 </script>
+
+<style scoped lang="scss">
+.f-debug-tabs__header {
+  position: relative;
+  background: #101212;
+  display: flex;
+  flex-direction: row;
+  padding: 6px;
+  column-gap: 6px;
+  justify-content: center;
+  align-items: center;
+  grid-template-columns: repeat(auto-fill, 1fr);
+  border-radius: 12px;
+
+  .f-debug-tabs__tab {
+    display: grid;
+    place-content: center;
+    width: 100%;
+    padding: 6px;
+    border-radius: 6px;
+    transition: background 0.1s;
+    cursor: pointer;
+    z-index: 1;
+  }
+
+  .f-debug-tabs__selector {
+    position: absolute;
+    top: 6px;
+    bottom: 6px;
+    width: 50%;
+    background: #1E1F20;
+    border-radius: 6px;
+    transition: left 0.2s ease;
+  }
+}
+
+@supports (
+  (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
+) {
+  .f-debug-tabs__header {
+    background: rgba(0, 0, 0, 0.7) !important;
+
+    .f-debug-tabs__selector {
+      background: rgba(70, 70, 70, 0.2) !important;
+    }
+  }
+}
+</style>
diff --git a/packages/devtools/src/components/icons/FComponentIcon.vue b/packages/devtools/src/components/icons/FComponentIcon.vue
index 064c5ab5..8e250a69 100644
--- a/packages/devtools/src/components/icons/FComponentIcon.vue
+++ b/packages/devtools/src/components/icons/FComponentIcon.vue
@@ -36,3 +36,12 @@ defineProps({
   },
 })
 </script>
+
+<style scoped lang="scss">
+.f-component-icon {
+  width: 16px;
+  height: 16px;
+  display: grid;
+  place-items: center;
+}
+</style>

From e778e1ace04704a427e704c2a2ea2522aaf397ac Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Tue, 19 Nov 2024 19:59:57 +0100
Subject: [PATCH 06/17] feat(devtools): improve architecture + prepare settings

---
 .../devtools/src/components/DebugPanel.vue    | 147 ------------------
 packages/devtools/src/components/FDebug.vue   |   4 +-
 .../src/components/common/DebugPanel.vue      |  77 +++++++++
 .../src/components/common/FComponents.vue     | 102 ++++++++++++
 .../src/components/common/Setting.vue         |  62 ++++++++
 .../src/components/common/Settings.vue        |  39 +++++
 .../devtools/src/components/common/Tabs.vue   |  65 ++++----
 .../components/{ => common}/ToggleButton.vue  |   0
 .../src/components/common/Tooltip.vue         |  76 +++++++++
 .../src/components/forms/InputCheckbox.vue    |  94 +++++++++++
 10 files changed, 491 insertions(+), 175 deletions(-)
 delete mode 100644 packages/devtools/src/components/DebugPanel.vue
 create mode 100644 packages/devtools/src/components/common/DebugPanel.vue
 create mode 100644 packages/devtools/src/components/common/FComponents.vue
 create mode 100644 packages/devtools/src/components/common/Setting.vue
 create mode 100644 packages/devtools/src/components/common/Settings.vue
 rename packages/devtools/src/components/{ => common}/ToggleButton.vue (100%)
 create mode 100644 packages/devtools/src/components/common/Tooltip.vue
 create mode 100644 packages/devtools/src/components/forms/InputCheckbox.vue

diff --git a/packages/devtools/src/components/DebugPanel.vue b/packages/devtools/src/components/DebugPanel.vue
deleted file mode 100644
index 39ca6ce2..00000000
--- a/packages/devtools/src/components/DebugPanel.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-  <div class="f-debug-panel">
-    <h1>{{ title }}</h1>
-    <Tabs :tabs="['Components', 'Settings']">
-      <template #Components>
-        <div v-if="scene.components.length > 0">
-          <FComponents2d
-            v-if="scene.components[0].__IS_2D__"
-            :components="scene.components as FComponent2d[]"
-          />
-          <FComponents3d
-            v-if="scene.components[0].__IS_3D__"
-            :components="scene.components as FComponent3d[]"
-          />
-        </div>
-      </template>
-      <template #Settings>
-        <div>Settings</div>
-      </template>
-    </Tabs>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import { defineProps } from 'vue'
-import type { FScene } from '@fibbojs/core'
-import type { FComponent as FComponent2d } from '@fibbojs/2d'
-import type { FComponent as FComponent3d } from '@fibbojs/3d'
-import FComponents2d from './2d/FComponents2d.vue'
-import FComponents3d from './3d/FComponents3d.vue'
-import Tabs from './common/Tabs.vue'
-
-defineProps({
-  title: String,
-  scene: {
-    type: Object as PropType<FScene>,
-    default: null,
-  },
-})
-</script>
-
-<style lang="scss">
-.f-debug-panel {
-  position: fixed;
-  top: 10px;
-  left: -100%;
-  bottom: 10px;
-  width: 300px;
-  background: #151617;
-  border-radius: 8px;
-  overflow: auto;
-  padding: 10px;
-  transition: all 0.2s ease;
-  transform: scale(0.6);
-  font-size: 14px;
-
-  &.visible {
-    left: 25px;
-    transform: scale(1.0);
-  }
-
-  * {
-    color: #BFC0C1;
-  }
-
-  h1 {
-    margin: 0 0 10px;
-  }
-
-  .f-components {
-    display: flex;
-    flex-direction: column;
-    margin: 8px;
-    row-gap: 2px;
-  }
-
-  .f-component {
-    .f-component-properties {
-      display: flex;
-      flex-direction: column;
-
-      p {
-        margin: 0;
-      }
-
-      .f-component-property {
-        margin-left: 24px;
-
-        .f-component-property-group {
-          display: flex;
-          flex-direction: row;
-          column-gap: 2px;
-
-          > p {
-            padding: 0 4px;
-          }
-          > input {
-            padding: 0 4px;
-            border-radius: 4px;
-            background: #1E1F20;
-            border: none;
-            width: 32px;
-
-            // Hide arrows
-            &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
-              -webkit-appearance: none;
-              margin: 0;
-            }
-            // Hide focus
-            &:focus {
-              outline: none;
-            }
-          }
-        }
-      }
-    }
-
-    .f-component-properties--hidden {
-      display: none;
-    }
-  }
-}
-
-/* Gets applied if supported only */
-@supports (
-  (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
-) {
-  .f-debug-panel {
-    background: rgba(0, 0, 0, 0.7);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-  }
-
-  .f-component {
-    .f-component-properties {
-      .f-component-property {
-        .f-component-property-group {
-          > input {
-            background: rgba(0, 0, 0, 0.4) !important;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/packages/devtools/src/components/FDebug.vue b/packages/devtools/src/components/FDebug.vue
index 28317517..0bb17d05 100644
--- a/packages/devtools/src/components/FDebug.vue
+++ b/packages/devtools/src/components/FDebug.vue
@@ -20,8 +20,8 @@
 import type { PropType } from 'vue'
 import { defineProps, ref } from 'vue'
 import type { FScene } from '@fibbojs/core'
-import DebugPanel from './DebugPanel.vue'
-import ToggleButton from './ToggleButton.vue'
+import DebugPanel from './common/DebugPanel.vue'
+import ToggleButton from './common/ToggleButton.vue'
 
 const props = defineProps({
   title: String,
diff --git a/packages/devtools/src/components/common/DebugPanel.vue b/packages/devtools/src/components/common/DebugPanel.vue
new file mode 100644
index 00000000..83d2fe7b
--- /dev/null
+++ b/packages/devtools/src/components/common/DebugPanel.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="f-debug-panel">
+    <h1>{{ title }}</h1>
+    <Tabs :tabs="['Components', 'Settings']">
+      <template #Components>
+        <FComponents :scene="scene" />
+      </template>
+      <template #Settings>
+        <Settings />
+      </template>
+    </Tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { defineProps } from 'vue'
+import type { FScene } from '@fibbojs/core'
+import Tabs from './Tabs.vue'
+import FComponents from './FComponents.vue'
+import Settings from './Settings.vue'
+
+defineProps({
+  title: String,
+  scene: {
+    type: Object as PropType<FScene>,
+    default: null,
+  },
+})
+</script>
+
+<style lang="scss">
+.f-debug-panel {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 10px;
+  left: -100%;
+  bottom: 10px;
+  width: 300px;
+  background: #151617;
+  border-radius: 8px;
+  padding: 10px;
+  transition: all 0.2s ease;
+  transform: scale(0.6);
+  font-size: 14px;
+
+  &.visible {
+    left: 25px;
+    transform: scale(1.0);
+  }
+
+  * {
+    color: #BFC0C1;
+  }
+
+  h1 {
+    flex: 0 1 auto;
+    margin: 0 0 10px;
+  }
+
+  > * {
+    flex: 1 1 auto;
+  }
+}
+
+/* Gets applied if supported only */
+@supports (
+  (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
+) {
+  .f-debug-panel {
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+}
+</style>
diff --git a/packages/devtools/src/components/common/FComponents.vue b/packages/devtools/src/components/common/FComponents.vue
new file mode 100644
index 00000000..b1da48c7
--- /dev/null
+++ b/packages/devtools/src/components/common/FComponents.vue
@@ -0,0 +1,102 @@
+<template>
+  <template v-if="scene.components.length > 0">
+    <FComponents2d
+      v-if="scene.components[0].__IS_2D__"
+      :components="scene.components as FComponent2d[]"
+    />
+    <FComponents3d
+      v-if="scene.components[0].__IS_3D__"
+      :components="scene.components as FComponent3d[]"
+    />
+  </template>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { defineProps } from 'vue'
+import type { FScene } from '@fibbojs/core'
+import type { FComponent as FComponent2d } from '@fibbojs/2d'
+import type { FComponent as FComponent3d } from '@fibbojs/3d'
+import FComponents2d from '../2d/FComponents2d.vue'
+import FComponents3d from '../3d/FComponents3d.vue'
+
+defineProps({
+  title: String,
+  scene: {
+    type: Object as PropType<FScene>,
+    default: null,
+  },
+})
+</script>
+
+<style lang="scss">
+.f-components {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin: 8px;
+  row-gap: 2px;
+}
+
+.f-component {
+  .f-component-properties {
+    display: flex;
+    flex-direction: column;
+
+    p {
+      margin: 0;
+    }
+
+    .f-component-property {
+      margin-left: 24px;
+
+      .f-component-property-group {
+        display: flex;
+        flex-direction: row;
+        column-gap: 2px;
+
+        > p {
+          padding: 0 4px;
+        }
+        > input {
+          padding: 0 4px;
+          border-radius: 4px;
+          background: #1E1F20;
+          border: none;
+          width: 32px;
+
+          // Hide arrows
+          &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+          }
+          // Hide focus
+          &:focus {
+            outline: none;
+          }
+        }
+      }
+    }
+  }
+
+  .f-component-properties--hidden {
+    display: none;
+  }
+}
+
+@supports (
+  (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
+) {
+  .f-component {
+    .f-component-properties {
+      .f-component-property {
+        .f-component-property-group {
+          > input {
+            background: rgba(0, 0, 0, 0.4) !important;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/devtools/src/components/common/Setting.vue b/packages/devtools/src/components/common/Setting.vue
new file mode 100644
index 00000000..dafa9f07
--- /dev/null
+++ b/packages/devtools/src/components/common/Setting.vue
@@ -0,0 +1,62 @@
+<template>
+  <Tooltip v-if="tooltip" :content="tooltip">
+    <label class="setting" :for="id">
+      <label :for="id">{{ title }}</label>
+      <InputCheckbox :id="id" :title="title" :value="valueTemp" @update:value="updateValue" />
+    </label>
+  </Tooltip>
+  <label v-else class="setting" :for="id">
+    <label :for="id">{{ title }}</label>
+    <InputCheckbox :id="id" :title="title" :value="valueTemp" @update:value="updateValue" />
+  </label>
+</template>
+
+<script setup lang="ts">
+import { defineEmits, defineProps, ref, watch } from 'vue'
+import InputCheckbox from '../forms/InputCheckbox.vue'
+import Tooltip from './Tooltip.vue'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: false,
+    default: Math.random().toString(36).substring(7),
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: Boolean,
+    required: true,
+  },
+  tooltip: {
+    type: String,
+    required: false,
+  },
+})
+
+/**
+ * This is a workaround to avoid reactivity issues with the v-model
+ */
+const emit = defineEmits([
+  'update:value',
+])
+const valueTemp = ref(props.value)
+watch(props, () => {
+  valueTemp.value = props.value
+})
+function updateValue(newValue: boolean) {
+  emit('update:value', newValue)
+}
+</script>
+
+<style scoped lang="scss">
+.setting {
+  display: flex;
+  flex-direction: row;
+  height: 36px;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>
diff --git a/packages/devtools/src/components/common/Settings.vue b/packages/devtools/src/components/common/Settings.vue
new file mode 100644
index 00000000..9905b25b
--- /dev/null
+++ b/packages/devtools/src/components/common/Settings.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="f-debug-settings">
+    <Setting
+      id="setting-1"
+      v-model:value="setting1"
+      title="Setting 1"
+      tooltip="Setting 1 is very useful trust me"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import Setting from './Setting.vue'
+
+const setting1 = ref(false)
+
+watch(setting1, (value) => {
+  console.log('Setting 1:', value)
+})
+</script>
+
+<style scoped lang="scss">
+.f-debug-settings {
+  display: flex;
+  flex-direction: column;
+  margin: 8px;
+  row-gap: 2px;
+
+  .f-debug-setting {
+    display: flex;
+    flex-direction: row;
+    height: 28px;
+    column-gap: 8px;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+</style>
diff --git a/packages/devtools/src/components/common/Tabs.vue b/packages/devtools/src/components/common/Tabs.vue
index 6afd6f20..716b4ee9 100644
--- a/packages/devtools/src/components/common/Tabs.vue
+++ b/packages/devtools/src/components/common/Tabs.vue
@@ -52,37 +52,50 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.f-debug-tabs__header {
-  position: relative;
-  background: #101212;
+.f-debug-tabs {
   display: flex;
-  flex-direction: row;
-  padding: 6px;
-  column-gap: 6px;
-  justify-content: center;
-  align-items: center;
-  grid-template-columns: repeat(auto-fill, 1fr);
-  border-radius: 12px;
+  flex-direction: column;
+  height: 500px;
 
-  .f-debug-tabs__tab {
-    display: grid;
-    place-content: center;
-    width: 100%;
+  .f-debug-tabs__header {
+    flex: 0 1 auto;
+    position: relative;
+    background: #101212;
+    display: flex;
+    flex-direction: row;
     padding: 6px;
-    border-radius: 6px;
-    transition: background 0.1s;
-    cursor: pointer;
-    z-index: 1;
+    column-gap: 6px;
+    justify-content: center;
+    align-items: center;
+    grid-template-columns: repeat(auto-fill, 1fr);
+    border-radius: 12px;
+
+    .f-debug-tabs__tab {
+      display: grid;
+      place-content: center;
+      width: 100%;
+      padding: 6px;
+      border-radius: 6px;
+      transition: background 0.1s;
+      cursor: pointer;
+      z-index: 1;
+    }
+
+    .f-debug-tabs__selector {
+      position: absolute;
+      top: 6px;
+      bottom: 6px;
+      width: 50%;
+      background: #1E1F20;
+      border-radius: 6px;
+      transition: left 0.2s ease;
+    }
   }
 
-  .f-debug-tabs__selector {
-    position: absolute;
-    top: 6px;
-    bottom: 6px;
-    width: 50%;
-    background: #1E1F20;
-    border-radius: 6px;
-    transition: left 0.2s ease;
+  .f-debug-tabs__content {
+    flex: 1 1 auto;
+    position: relative;
+    overflow: auto;
   }
 }
 
diff --git a/packages/devtools/src/components/ToggleButton.vue b/packages/devtools/src/components/common/ToggleButton.vue
similarity index 100%
rename from packages/devtools/src/components/ToggleButton.vue
rename to packages/devtools/src/components/common/ToggleButton.vue
diff --git a/packages/devtools/src/components/common/Tooltip.vue b/packages/devtools/src/components/common/Tooltip.vue
new file mode 100644
index 00000000..c996a992
--- /dev/null
+++ b/packages/devtools/src/components/common/Tooltip.vue
@@ -0,0 +1,76 @@
+<template>
+  <div
+    class="tooltip-wrapper"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+    @mousemove="onMouseMove"
+  >
+    <div
+      class="tooltip"
+      :style="{ top: `${position.y}px`, left: `${position.x}px`, opacity: visible ? 1 : 0 }"
+    >
+      {{ content }}
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+
+defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+})
+
+const visible = ref(false)
+const position = ref({ x: 0, y: 0 })
+
+onMounted(() => {
+  document.addEventListener('keydown', handleEscape)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleEscape)
+})
+
+function handleEscape(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    visible.value = false
+  }
+}
+
+function onMouseEnter() {
+  visible.value = true
+}
+
+function onMouseLeave() {
+  visible.value = false
+}
+
+function onMouseMove(event: MouseEvent) {
+  position.value = {
+    x: event.clientX - 10,
+    y: event.clientY - 10,
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.tooltip-wrapper {
+  .tooltip {
+    position: fixed;
+    z-index: 1000;
+    background: #000000;
+    color: #FFFFFF;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    pointer-events: none;
+    transition: opacity 0.1s ease;
+  }
+}
+</style>
diff --git a/packages/devtools/src/components/forms/InputCheckbox.vue b/packages/devtools/src/components/forms/InputCheckbox.vue
new file mode 100644
index 00000000..c1f2c300
--- /dev/null
+++ b/packages/devtools/src/components/forms/InputCheckbox.vue
@@ -0,0 +1,94 @@
+<!-- Custom input:checkbox vue component -->
+<template>
+  <label class="switch" :for="id">
+    <div class="slider" :class="{ checked: value }">
+      <span class="slider-toggle" />
+    </div>
+    <input
+      :id="id"
+      :checked="value"
+      type="checkbox"
+      @change="updateValue"
+    >
+  </label>
+</template>
+
+<script setup lang="ts">
+import { defineEmits, defineProps, ref } from 'vue'
+
+defineProps({
+  id: {
+    type: String,
+    required: false,
+    default: Math.random().toString(36).substring(7),
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const emit = defineEmits([
+  'update:value',
+])
+
+function updateValue(event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('update:value', target.checked)
+}
+</script>
+
+<style scoped lang="scss">
+.switch {
+  height: 24px;
+  width: 40px;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .slider {
+    display: flex;
+    position: relative;
+    height: 24px;
+    width: 40px;
+    background: #1E1F20;
+    transition: all 0.2s ease;
+    border-radius: 8px;
+
+    .slider-toggle {
+      display: flex;
+      position: absolute;
+      top: 4px;
+      bottom: 4px;
+      left: 4px;
+      width: 16px;
+      background: #FFFFFF;
+      transition: all 0.2s ease;
+      border-radius: 4px;
+    }
+  }
+
+  .checked {
+    background: #B978ED !important;
+
+    .slider-toggle {
+      left: calc(100% - 20px);
+    }
+  }
+}
+
+@supports (
+  (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
+) {
+  .switch .slider {
+    background: rgba(0, 0, 0, 0.7);
+  }
+}
+</style>

From 359250bb2b30996f4dcc639b5d5a418afd6d59a8 Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Tue, 19 Nov 2024 20:28:27 +0100
Subject: [PATCH 07/17] feat(devtools): wire helpers and hitboxes settings

---
 packages/devtools/src/FDebug3d.ts             | 47 ++++++++++++-----
 packages/devtools/src/State.ts                | 52 +++++++++++++++++++
 .../src/components/common/Settings.vue        | 35 ++++++++++---
 .../src/components/common/Tooltip.vue         |  2 +-
 4 files changed, 115 insertions(+), 21 deletions(-)
 create mode 100644 packages/devtools/src/State.ts

diff --git a/packages/devtools/src/FDebug3d.ts b/packages/devtools/src/FDebug3d.ts
index 399620e1..fc9f7b51 100644
--- a/packages/devtools/src/FDebug3d.ts
+++ b/packages/devtools/src/FDebug3d.ts
@@ -1,4 +1,5 @@
 import type { FLight, FScene } from '@fibbojs/3d'
+import { State } from './State'
 
 /**
  * A helper class to debug a given 3d scene
@@ -23,6 +24,7 @@ export class FDebug3d {
     /**
      * When a light is added to the scene, add a helper for it
      */
+    const lightHelpers: any[] = []
     scene.onLightAdded((lightParam) => {
       // Cast light to a 3D FLight
       const light = lightParam as FLight
@@ -40,26 +42,45 @@ export class FDebug3d {
         return
       // Add the helper to the scene
       scene.scene.add(helper as any)
+      // Add the helper to the list of helpers
+      lightHelpers.push(helper)
     })
 
     /**
      * Display debug lines on each frame
      */
     scene.onFrame(() => {
-      // Remove previous debug lines
-      const previousLines = scene.scene.getObjectByName('DEBUG_LINES')
-      if (previousLines)
-        scene.scene.remove(previousLines)
+      if (State.hitboxes) {
+        // Remove previous debug lines
+        const previousLines = scene.scene.getObjectByName('DEBUG_LINES')
+        if (previousLines)
+          scene.scene.remove(previousLines)
 
-      // Render new debug lines
-      const { vertices, colors } = scene.world.debugRender()
-      const geometry = new scene.THREE.BufferGeometry()
-      geometry.setAttribute('position', new scene.THREE.Float32BufferAttribute(vertices, 3))
-      geometry.setAttribute('color', new scene.THREE.Float32BufferAttribute(colors, 3))
-      const material = new scene.THREE.LineBasicMaterial({ vertexColors: true })
-      const lines = new scene.THREE.LineSegments(geometry, material)
-      lines.name = 'DEBUG_LINES'
-      scene.scene.add(lines)
+        // Render new debug lines
+        const { vertices, colors } = scene.world.debugRender()
+        const geometry = new scene.THREE.BufferGeometry()
+        geometry.setAttribute('position', new scene.THREE.Float32BufferAttribute(vertices, 3))
+        geometry.setAttribute('color', new scene.THREE.Float32BufferAttribute(colors, 3))
+        const material = new scene.THREE.LineBasicMaterial({ vertexColors: true })
+        const lines = new scene.THREE.LineSegments(geometry, material)
+        lines.name = 'DEBUG_LINES'
+        scene.scene.add(lines)
+      }
+    })
+
+    State.onHitboxesChange((newState) => {
+      if (!newState) {
+        // Remove previous debug lines
+        const previousLines = scene.scene.getObjectByName('DEBUG_LINES')
+        if (previousLines)
+          scene.scene.remove(previousLines)
+      }
+    })
+
+    State.onHelpersChange((newState) => {
+      gridHelper.visible = newState
+      axesHelper.visible = newState
+      lightHelpers.forEach(helper => helper.visible = newState)
     })
   }
 }
diff --git a/packages/devtools/src/State.ts b/packages/devtools/src/State.ts
new file mode 100644
index 00000000..bfc97861
--- /dev/null
+++ b/packages/devtools/src/State.ts
@@ -0,0 +1,52 @@
+export class State {
+  // Properties
+  private static __HITBOXES__: boolean = false
+  private static __HELPERS__: boolean = true
+  private static __GLASSMORPHISM__: boolean = true
+
+  // Callbacks
+  private static __CALLBACKS_ON_HITBOXES_CHANGE__: ((newState: boolean) => void)[] = []
+  private static __CALLBACKS_ON_HELPERS_CHANGE__: ((newState: boolean) => void)[] = []
+  private static __CALLBACKS_ON_GLASSMORPHISM_CHANGE__: ((newState: boolean) => void)[] = []
+
+  // Methods
+  static onHitboxesChange(callback: (newState: boolean) => void) {
+    this.__CALLBACKS_ON_HITBOXES_CHANGE__.push(callback)
+  }
+
+  static onHelpersChange(callback: (newState: boolean) => void) {
+    this.__CALLBACKS_ON_HELPERS_CHANGE__.push(callback)
+  }
+
+  static onGlassmorphismChange(callback: (newState: boolean) => void) {
+    this.__CALLBACKS_ON_GLASSMORPHISM_CHANGE__.push(callback)
+  }
+
+  // Getters & setters
+  static get hitboxes() {
+    return this.__HITBOXES__
+  }
+
+  static set hitboxes(newState: boolean) {
+    this.__HITBOXES__ = newState
+    this.__CALLBACKS_ON_HITBOXES_CHANGE__.forEach(callback => callback(newState))
+  }
+
+  static get helpers() {
+    return this.__HELPERS__
+  }
+
+  static set helpers(newState: boolean) {
+    this.__HELPERS__ = newState
+    this.__CALLBACKS_ON_HELPERS_CHANGE__.forEach(callback => callback(newState))
+  }
+
+  static get glassmorphism() {
+    return this.__GLASSMORPHISM__
+  }
+
+  static set glassmorphism(newState: boolean) {
+    this.__GLASSMORPHISM__ = newState
+    this.__CALLBACKS_ON_GLASSMORPHISM_CHANGE__.forEach(callback => callback(newState))
+  }
+}
diff --git a/packages/devtools/src/components/common/Settings.vue b/packages/devtools/src/components/common/Settings.vue
index 9905b25b..ed089283 100644
--- a/packages/devtools/src/components/common/Settings.vue
+++ b/packages/devtools/src/components/common/Settings.vue
@@ -1,22 +1,43 @@
 <template>
   <div class="f-debug-settings">
     <Setting
-      id="setting-1"
-      v-model:value="setting1"
-      title="Setting 1"
-      tooltip="Setting 1 is very useful trust me"
+      id="hitbox"
+      v-model:value="settingHitboxes"
+      title="Debug hitboxes"
+      tooltip="Display rigidbodies, colliders and sensors with colored lines."
+    />
+    <Setting
+      id="helpers"
+      v-model:value="settingHelpers"
+      title="Helpers"
+      tooltip="Display a grid, axis and light helpers."
+    />
+    <Setting
+      id="devtools-glassmorphism"
+      v-model:value="settingGlassmorphism"
+      title="Glassmorphism"
+      tooltip="Enable fancy glassmorphism effect on the devtools panel."
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import { State } from '../../State'
 import Setting from './Setting.vue'
 
-const setting1 = ref(false)
+const settingHitboxes = ref(State.hitboxes)
+const settingHelpers = ref(State.helpers)
+const settingGlassmorphism = ref(State.glassmorphism)
 
-watch(setting1, (value) => {
-  console.log('Setting 1:', value)
+watch(settingHitboxes, (value) => {
+  State.hitboxes = value
+})
+watch(settingHelpers, (value) => {
+  State.helpers = value
+})
+watch(settingGlassmorphism, (value) => {
+  State.glassmorphism = value
 })
 </script>
 
diff --git a/packages/devtools/src/components/common/Tooltip.vue b/packages/devtools/src/components/common/Tooltip.vue
index c996a992..b826ffe2 100644
--- a/packages/devtools/src/components/common/Tooltip.vue
+++ b/packages/devtools/src/components/common/Tooltip.vue
@@ -62,13 +62,13 @@ function onMouseMove(event: MouseEvent) {
 .tooltip-wrapper {
   .tooltip {
     position: fixed;
+    width: 300px;
     z-index: 1000;
     background: #000000;
     color: #FFFFFF;
     padding: 4px 8px;
     border-radius: 4px;
     font-size: 12px;
-    white-space: nowrap;
     pointer-events: none;
     transition: opacity 0.1s ease;
   }

From 15bfcc45baab76edf7435ec8e39dae0d3009b11e Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Tue, 19 Nov 2024 20:45:19 +0100
Subject: [PATCH 08/17] feat(devtools): wire all settings + sync with local
 storage

---
 packages/devtools/src/FDebug.ts               |  4 ++++
 packages/devtools/src/FDebug3d.ts             |  3 +++
 packages/devtools/src/State.ts                | 23 +++++++++++++++++++
 .../src/components/common/DebugPanel.vue      | 16 +++++++++----
 .../components/common/FComponentHeader.vue    | 12 +---------
 .../src/components/common/FComponents.vue     | 18 +--------------
 .../devtools/src/components/common/Tabs.vue   | 16 ++-----------
 .../src/components/common/ToggleButton.vue    | 15 ++++++++++--
 .../src/components/forms/InputCheckbox.vue    | 10 +-------
 9 files changed, 60 insertions(+), 57 deletions(-)

diff --git a/packages/devtools/src/FDebug.ts b/packages/devtools/src/FDebug.ts
index a44ef789..b8b4113c 100644
--- a/packages/devtools/src/FDebug.ts
+++ b/packages/devtools/src/FDebug.ts
@@ -5,6 +5,7 @@ import type { FScene as FScene3d } from '@fibbojs/3d'
 import FDebugComponent from './components/FDebug.vue'
 import { FDebug2d } from './FDebug2d'
 import { FDebug3d } from './FDebug3d'
+import { State } from './State'
 
 /**
  * A helper class to debug a given scene
@@ -36,6 +37,9 @@ export class FDebug {
     // Define the scene
     this.scene = scene
 
+    // Load devtools state from local storage
+    State.load()
+
     // Fetch the CSS
     fetch(import.meta.url.replace('index.es.js', 'style.css'))
       .then(res => res.text())
diff --git a/packages/devtools/src/FDebug3d.ts b/packages/devtools/src/FDebug3d.ts
index fc9f7b51..65a0997f 100644
--- a/packages/devtools/src/FDebug3d.ts
+++ b/packages/devtools/src/FDebug3d.ts
@@ -15,10 +15,12 @@ export class FDebug3d {
   constructor(scene: FScene) {
     // Add grid helper
     const gridHelper = new scene.THREE.GridHelper(10, 10)
+    gridHelper.visible = State.helpers
     scene.scene.add(gridHelper)
 
     // Axes helper
     const axesHelper = new scene.THREE.AxesHelper(5)
+    axesHelper.visible = State.helpers
     scene.scene.add(axesHelper)
 
     /**
@@ -40,6 +42,7 @@ export class FDebug3d {
         helper = new scene.THREE.SpotLightHelper(light.__LIGHT__)
       else
         return
+      helper.visible = State.helpers
       // Add the helper to the scene
       scene.scene.add(helper as any)
       // Add the helper to the list of helpers
diff --git a/packages/devtools/src/State.ts b/packages/devtools/src/State.ts
index bfc97861..0b7318f7 100644
--- a/packages/devtools/src/State.ts
+++ b/packages/devtools/src/State.ts
@@ -10,6 +10,26 @@ export class State {
   private static __CALLBACKS_ON_GLASSMORPHISM_CHANGE__: ((newState: boolean) => void)[] = []
 
   // Methods
+  static load() {
+    // Check if the state is stored in the local storage
+    const state = localStorage.getItem('f-debug-state')
+    if (state) {
+      const parsedState = JSON.parse(state)
+      this.hitboxes = parsedState.hitboxes
+      this.helpers = parsedState.helpers
+      this.glassmorphism = parsedState.glassmorphism
+    }
+  }
+
+  static store() {
+    // Store the state in the local storage
+    localStorage.setItem('f-debug-state', JSON.stringify({
+      hitboxes: this.hitboxes,
+      helpers: this.helpers,
+      glassmorphism: this.glassmorphism,
+    }))
+  }
+
   static onHitboxesChange(callback: (newState: boolean) => void) {
     this.__CALLBACKS_ON_HITBOXES_CHANGE__.push(callback)
   }
@@ -30,6 +50,7 @@ export class State {
   static set hitboxes(newState: boolean) {
     this.__HITBOXES__ = newState
     this.__CALLBACKS_ON_HITBOXES_CHANGE__.forEach(callback => callback(newState))
+    State.store()
   }
 
   static get helpers() {
@@ -39,6 +60,7 @@ export class State {
   static set helpers(newState: boolean) {
     this.__HELPERS__ = newState
     this.__CALLBACKS_ON_HELPERS_CHANGE__.forEach(callback => callback(newState))
+    State.store()
   }
 
   static get glassmorphism() {
@@ -48,5 +70,6 @@ export class State {
   static set glassmorphism(newState: boolean) {
     this.__GLASSMORPHISM__ = newState
     this.__CALLBACKS_ON_GLASSMORPHISM_CHANGE__.forEach(callback => callback(newState))
+    State.store()
   }
 }
diff --git a/packages/devtools/src/components/common/DebugPanel.vue b/packages/devtools/src/components/common/DebugPanel.vue
index 83d2fe7b..0863abdc 100644
--- a/packages/devtools/src/components/common/DebugPanel.vue
+++ b/packages/devtools/src/components/common/DebugPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="f-debug-panel">
+  <div class="f-debug-panel" :class="{ glassmorphism }">
     <h1>{{ title }}</h1>
     <Tabs :tabs="['Components', 'Settings']">
       <template #Components>
@@ -14,8 +14,9 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { defineProps } from 'vue'
+import { defineProps, ref } from 'vue'
 import type { FScene } from '@fibbojs/core'
+import { State } from '../../State'
 import Tabs from './Tabs.vue'
 import FComponents from './FComponents.vue'
 import Settings from './Settings.vue'
@@ -27,6 +28,12 @@ defineProps({
     default: null,
   },
 })
+
+const glassmorphism = ref(State.glassmorphism)
+
+State.onGlassmorphismChange((value) => {
+  glassmorphism.value = value
+})
 </script>
 
 <style lang="scss">
@@ -68,10 +75,11 @@ defineProps({
 @supports (
   (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
 ) {
-  .f-debug-panel {
-    background: rgba(0, 0, 0, 0.7);
+  .f-debug-panel.glassmorphism {
+    background-color: rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
   }
 }
 </style>
+q
diff --git a/packages/devtools/src/components/common/FComponentHeader.vue b/packages/devtools/src/components/common/FComponentHeader.vue
index da2f3c15..1fe9ce7f 100644
--- a/packages/devtools/src/components/common/FComponentHeader.vue
+++ b/packages/devtools/src/components/common/FComponentHeader.vue
@@ -56,7 +56,7 @@ const iconName = useComponentIcon(props.component)
   }
 
   &:hover {
-    background: #1E1F20;
+    background: rgba(0, 0, 0, 0.4);
   }
 }
 
@@ -65,14 +65,4 @@ const iconName = useComponentIcon(props.component)
     transform: rotate(90deg);
   }
 }
-
-@supports (
-  (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
-) {
-  .f-component-header {
-    &:hover {
-      background: rgba(0, 0, 0, 0.4) !important;
-    }
-  }
-}
 </style>
diff --git a/packages/devtools/src/components/common/FComponents.vue b/packages/devtools/src/components/common/FComponents.vue
index b1da48c7..21b86371 100644
--- a/packages/devtools/src/components/common/FComponents.vue
+++ b/packages/devtools/src/components/common/FComponents.vue
@@ -61,7 +61,7 @@ defineProps({
         > input {
           padding: 0 4px;
           border-radius: 4px;
-          background: #1E1F20;
+          background: rgba(0, 0, 0, 0.4);
           border: none;
           width: 32px;
 
@@ -83,20 +83,4 @@ defineProps({
     display: none;
   }
 }
-
-@supports (
-  (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
-) {
-  .f-component {
-    .f-component-properties {
-      .f-component-property {
-        .f-component-property-group {
-          > input {
-            background: rgba(0, 0, 0, 0.4) !important;
-          }
-        }
-      }
-    }
-  }
-}
 </style>
diff --git a/packages/devtools/src/components/common/Tabs.vue b/packages/devtools/src/components/common/Tabs.vue
index 716b4ee9..c35d86ee 100644
--- a/packages/devtools/src/components/common/Tabs.vue
+++ b/packages/devtools/src/components/common/Tabs.vue
@@ -60,7 +60,7 @@ onMounted(() => {
   .f-debug-tabs__header {
     flex: 0 1 auto;
     position: relative;
-    background: #101212;
+    background: rgba(0, 0, 0, 0.7);
     display: flex;
     flex-direction: row;
     padding: 6px;
@@ -86,7 +86,7 @@ onMounted(() => {
       top: 6px;
       bottom: 6px;
       width: 50%;
-      background: #1E1F20;
+      background: rgba(70, 70, 70, 0.2);
       border-radius: 6px;
       transition: left 0.2s ease;
     }
@@ -98,16 +98,4 @@ onMounted(() => {
     overflow: auto;
   }
 }
-
-@supports (
-  (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
-) {
-  .f-debug-tabs__header {
-    background: rgba(0, 0, 0, 0.7) !important;
-
-    .f-debug-tabs__selector {
-      background: rgba(70, 70, 70, 0.2) !important;
-    }
-  }
-}
 </style>
diff --git a/packages/devtools/src/components/common/ToggleButton.vue b/packages/devtools/src/components/common/ToggleButton.vue
index 79a2d7a5..d9fc5eb0 100644
--- a/packages/devtools/src/components/common/ToggleButton.vue
+++ b/packages/devtools/src/components/common/ToggleButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="toggle-button">
+  <div id="toggle-button" :class="{ glassmorphism }">
     <!-- Figgo logo -->
     <svg id="fibbo-logo" width="422" height="458" viewBox="0 0 422 458" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_62_36)">
@@ -21,6 +21,17 @@
   </div>
 </template>
 
+<script setup lang="ts">
+import { ref } from 'vue'
+import { State } from '../../State'
+
+const glassmorphism = ref(State.glassmorphism)
+
+State.onGlassmorphismChange((value) => {
+  glassmorphism.value = value
+})
+</script>
+
 <style scoped lang="scss">
 @keyframes animSvgIn {
   from {
@@ -94,7 +105,7 @@
 @supports (
   (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
 ) {
-  #toggle-button {
+  #toggle-button.glassmorphism {
     background: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
diff --git a/packages/devtools/src/components/forms/InputCheckbox.vue b/packages/devtools/src/components/forms/InputCheckbox.vue
index c1f2c300..d7430bc3 100644
--- a/packages/devtools/src/components/forms/InputCheckbox.vue
+++ b/packages/devtools/src/components/forms/InputCheckbox.vue
@@ -58,7 +58,7 @@ function updateValue(event: Event) {
     position: relative;
     height: 24px;
     width: 40px;
-    background: #1E1F20;
+    background: rgba(0, 0, 0, 0.7);
     transition: all 0.2s ease;
     border-radius: 8px;
 
@@ -83,12 +83,4 @@ function updateValue(event: Event) {
     }
   }
 }
-
-@supports (
-  (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
-) {
-  .switch .slider {
-    background: rgba(0, 0, 0, 0.7);
-  }
-}
 </style>

From c06ee047b68ddb4b2e8be1164ccca52b3b738b72 Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Tue, 19 Nov 2024 20:53:51 +0100
Subject: [PATCH 09/17] feat(devtools): wire settings in 2d

---
 packages/devtools/src/FDebug2d.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/devtools/src/FDebug2d.ts b/packages/devtools/src/FDebug2d.ts
index 24b01a6a..cc9b2f2a 100644
--- a/packages/devtools/src/FDebug2d.ts
+++ b/packages/devtools/src/FDebug2d.ts
@@ -1,5 +1,6 @@
 import type { FScene } from '@fibbojs/2d'
 import type { DebugRenderBuffers } from '@dimforge/rapier2d'
+import { State } from './State'
 
 /**
  * A helper class to debug a given 2d scene
@@ -15,6 +16,7 @@ export class FDebug2d {
   constructor(scene: FScene) {
     // Add help grid
     const helpGrid = new scene.PIXI.Graphics()
+    helpGrid.visible = State.helpers
     // Draw the grid
     for (let i = -1000; i <= 1000; i += 100) {
       helpGrid.moveTo(i, -1000)
@@ -34,6 +36,7 @@ export class FDebug2d {
 
     // Initiliaze debug graphics
     const DEBUG_GRAPHICS = new scene.PIXI.Graphics()
+    DEBUG_GRAPHICS.visible = State.hitboxes
     DEBUG_GRAPHICS.zIndex = 1000000
     scene.viewport.addChild(DEBUG_GRAPHICS)
 
@@ -65,5 +68,12 @@ export class FDebug2d {
         DEBUG_GRAPHICS.lineTo(x2, y2)
       }
     })
+
+    State.onHelpersChange((newState) => {
+      helpGrid.visible = newState
+    })
+    State.onHitboxesChange((newState) => {
+      DEBUG_GRAPHICS.visible = newState
+    })
   }
 }

From e980e0f71e3ea91908dffdb718d0ca5f928c473e Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Tue, 19 Nov 2024 21:10:59 +0100
Subject: [PATCH 10/17] feat(devtools): improve panel and display Fibbo version

---
 packages/devtools/index.d.ts                  |  3 ++
 packages/devtools/src/FDebug.ts               |  1 +
 packages/devtools/src/components/FDebug.vue   |  2 ++
 .../src/components/common/DebugPanel.vue      | 24 ++++++++++++++-
 .../src/components/common/ToggleButton.vue    | 29 ++++---------------
 .../src/components/icons/FLogoFibbo.vue       | 25 ++++++++++++++++
 packages/devtools/vite.config.ts              |  3 ++
 7 files changed, 62 insertions(+), 25 deletions(-)
 create mode 100644 packages/devtools/src/components/icons/FLogoFibbo.vue

diff --git a/packages/devtools/index.d.ts b/packages/devtools/index.d.ts
index 70702663..0d7d3d27 100644
--- a/packages/devtools/index.d.ts
+++ b/packages/devtools/index.d.ts
@@ -8,3 +8,6 @@ declare module '*.ce.vue' {
   const component: ReturnType<typeof defineComponent>
   export default component
 }
+
+// Fibbo version
+declare const __FIBBO_VERSION__: string
diff --git a/packages/devtools/src/FDebug.ts b/packages/devtools/src/FDebug.ts
index b8b4113c..1a52fa74 100644
--- a/packages/devtools/src/FDebug.ts
+++ b/packages/devtools/src/FDebug.ts
@@ -75,6 +75,7 @@ export class FDebug {
     // Mount the Vue instance
     createApp(FDebugComponent, {
       title: 'Fibbo',
+      version: __FIBBO_VERSION__,
       scene: this.scene,
     }).mount('#f-debug')
   }
diff --git a/packages/devtools/src/components/FDebug.vue b/packages/devtools/src/components/FDebug.vue
index 0bb17d05..02cb1e41 100644
--- a/packages/devtools/src/components/FDebug.vue
+++ b/packages/devtools/src/components/FDebug.vue
@@ -5,6 +5,7 @@
         visible: panelVisible,
       }"
       :title="props.title"
+      :version="props.version"
       :scene="props.scene"
     />
     <ToggleButton
@@ -25,6 +26,7 @@ import ToggleButton from './common/ToggleButton.vue'
 
 const props = defineProps({
   title: String,
+  version: String,
   scene: {
     type: Object as PropType<FScene>,
     default: null,
diff --git a/packages/devtools/src/components/common/DebugPanel.vue b/packages/devtools/src/components/common/DebugPanel.vue
index 0863abdc..a799a9ba 100644
--- a/packages/devtools/src/components/common/DebugPanel.vue
+++ b/packages/devtools/src/components/common/DebugPanel.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="f-debug-panel" :class="{ glassmorphism }">
-    <h1>{{ title }}</h1>
+    <header>
+      <FLogoFibbo />
+      <span>Fibbo Devtools (v{{ version }})</span>
+    </header>
     <Tabs :tabs="['Components', 'Settings']">
       <template #Components>
         <FComponents :scene="scene" />
@@ -17,12 +20,14 @@ import type { PropType } from 'vue'
 import { defineProps, ref } from 'vue'
 import type { FScene } from '@fibbojs/core'
 import { State } from '../../State'
+import FLogoFibbo from '../icons/FLogoFibbo.vue'
 import Tabs from './Tabs.vue'
 import FComponents from './FComponents.vue'
 import Settings from './Settings.vue'
 
 defineProps({
   title: String,
+  version: String,
   scene: {
     type: Object as PropType<FScene>,
     default: null,
@@ -69,6 +74,23 @@ State.onGlassmorphismChange((value) => {
   > * {
     flex: 1 1 auto;
   }
+
+  header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    max-height: 48px;
+    column-gap: 8px;
+
+    .fibbo-logo {
+      width: 24px;
+      height: 24px;
+
+      path {
+        stroke: rgb(147, 147, 147);
+      }
+    }
+  }
 }
 
 /* Gets applied if supported only */
diff --git a/packages/devtools/src/components/common/ToggleButton.vue b/packages/devtools/src/components/common/ToggleButton.vue
index d9fc5eb0..b08f6513 100644
--- a/packages/devtools/src/components/common/ToggleButton.vue
+++ b/packages/devtools/src/components/common/ToggleButton.vue
@@ -1,19 +1,7 @@
 <template>
   <div id="toggle-button" :class="{ glassmorphism }">
     <!-- Figgo logo -->
-    <svg id="fibbo-logo" width="422" height="458" viewBox="0 0 422 458" xmlns="http://www.w3.org/2000/svg">
-      <g clip-path="url(#clip0_62_36)">
-        <path d="M174.985 20.6088L44.9853 98.6088C23.9009 111.259 11 134.045 11 158.633V299.367C11 323.955 23.9009 346.741 44.9853 359.391L174.985 437.391C197.153 450.692 224.847 450.692 247.015 437.391L377.015 359.391C398.099 346.741 411 323.955 411 299.367V158.633C411 134.045 398.099 111.259 377.015 98.6088L247.015 20.6088C224.847 7.30816 197.153 7.30814 174.985 20.6088Z" stroke="black" stroke-width="20" stroke-linejoin="round" />
-        <path d="M211.274 127.63L121.008 174M121.008 174V285.944M121.008 174L12.644 118.589" stroke="black" stroke-width="20" stroke-linejoin="round" />
-        <path d="M121 404L121 286.32C121 285.946 121.208 285.604 121.539 285.432L211 239M211 239V128.776C211 128.015 211.817 127.533 212.483 127.901L295.483 173.715C295.802 173.891 296 174.226 296 174.59V279M211 239L296 279M296 279L211.532 323.718C211.205 323.891 211 324.232 211 324.602V455.575" stroke="black" stroke-width="20" stroke-linejoin="round" />
-        <path d="M296 174L404.425 122.698" stroke-width="20" stroke-linejoin="round" />
-      </g>
-      <defs>
-        <clipPath id="clip0_62_36">
-          <rect width="422" height="458" />
-        </clipPath>
-      </defs>
-    </svg>
+    <FLogoFibbo />
     <!-- Cross icon svg -->
     <svg id="close-cross" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32">
       <path fill="currentColor" d="M24.879 2.879A3 3 0 1 1 29.12 7.12l-8.79 8.79a.125.125 0 0 0 0 .177l8.79 8.79a3 3 0 1 1-4.242 4.243l-8.79-8.79a.125.125 0 0 0-.177 0l-8.79 8.79a3 3 0 1 1-4.243-4.242l8.79-8.79a.125.125 0 0 0 0-.177l-8.79-8.79A3 3 0 0 1 7.12 2.878l8.79 8.79a.125.125 0 0 0 .177 0z" />
@@ -24,6 +12,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { State } from '../../State'
+import FLogoFibbo from '../icons/FLogoFibbo.vue'
 
 const glassmorphism = ref(State.glassmorphism)
 
@@ -32,7 +21,7 @@ State.onGlassmorphismChange((value) => {
 })
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 @keyframes animSvgIn {
   from {
     opacity: 0%;
@@ -60,12 +49,6 @@ State.onGlassmorphismChange((value) => {
 
   &:hover {
     cursor: pointer;
-
-    #fibbo-logo {
-      path {
-        stroke: white;
-      }
-    }
   }
 
   svg {
@@ -79,11 +62,9 @@ State.onGlassmorphismChange((value) => {
     }
   }
 
-  #fibbo-logo {
-    display: block;
+  .fibbo-logo {
     path {
       stroke: rgb(147, 147, 147);
-      stroke-width: 20;
     }
   }
   #close-cross {
@@ -93,7 +74,7 @@ State.onGlassmorphismChange((value) => {
   }
 
   &.visible {
-    #fibbo-logo {
+    .fibbo-logo {
       display: none;
     }
     #close-cross {
diff --git a/packages/devtools/src/components/icons/FLogoFibbo.vue b/packages/devtools/src/components/icons/FLogoFibbo.vue
new file mode 100644
index 00000000..1fcc56c6
--- /dev/null
+++ b/packages/devtools/src/components/icons/FLogoFibbo.vue
@@ -0,0 +1,25 @@
+<template>
+  <svg class="fibbo-logo" width="422" height="458" viewBox="0 0 422 458" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_62_36)">
+      <path d="M174.985 20.6088L44.9853 98.6088C23.9009 111.259 11 134.045 11 158.633V299.367C11 323.955 23.9009 346.741 44.9853 359.391L174.985 437.391C197.153 450.692 224.847 450.692 247.015 437.391L377.015 359.391C398.099 346.741 411 323.955 411 299.367V158.633C411 134.045 398.099 111.259 377.015 98.6088L247.015 20.6088C224.847 7.30816 197.153 7.30814 174.985 20.6088Z" stroke="black" stroke-width="20" stroke-linejoin="round" />
+      <path d="M211.274 127.63L121.008 174M121.008 174V285.944M121.008 174L12.644 118.589" stroke="black" stroke-width="20" stroke-linejoin="round" />
+      <path d="M121 404L121 286.32C121 285.946 121.208 285.604 121.539 285.432L211 239M211 239V128.776C211 128.015 211.817 127.533 212.483 127.901L295.483 173.715C295.802 173.891 296 174.226 296 174.59V279M211 239L296 279M296 279L211.532 323.718C211.205 323.891 211 324.232 211 324.602V455.575" stroke="black" stroke-width="20" stroke-linejoin="round" />
+      <path d="M296 174L404.425 122.698" stroke-width="20" stroke-linejoin="round" />
+    </g>
+    <defs>
+      <clipPath id="clip0_62_36">
+        <rect width="422" height="458" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<style scoped lang="scss">
+.fibbo-logo {
+  path {
+    fill: none;
+    stroke: white;
+    stroke-width: 20;
+  }
+}
+</style>
diff --git a/packages/devtools/vite.config.ts b/packages/devtools/vite.config.ts
index 5d8ff71e..09aa2538 100644
--- a/packages/devtools/vite.config.ts
+++ b/packages/devtools/vite.config.ts
@@ -22,4 +22,7 @@ export default defineConfig({
     },
   },
   plugins: [vue(), wasm()],
+  define: {
+    __FIBBO_VERSION__: JSON.stringify(process.env.npm_package_version),
+  },
 })

From d5fcc03c4d24ee9fd5b7837bfa4a34b656231e4a Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Tue, 19 Nov 2024 21:14:53 +0100
Subject: [PATCH 11/17] feat(devtools): increase transition speed + link fibbo
 logo to documentation

---
 .../devtools/src/components/common/DebugPanel.vue    | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/devtools/src/components/common/DebugPanel.vue b/packages/devtools/src/components/common/DebugPanel.vue
index a799a9ba..5b35c3ee 100644
--- a/packages/devtools/src/components/common/DebugPanel.vue
+++ b/packages/devtools/src/components/common/DebugPanel.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="f-debug-panel" :class="{ glassmorphism }">
     <header>
-      <FLogoFibbo />
+      <a href="https://fibbo.dev" target="_blank" rel="noopener noreferrer">
+        <FLogoFibbo />
+      </a>
       <span>Fibbo Devtools (v{{ version }})</span>
     </header>
     <Tabs :tabs="['Components', 'Settings']">
@@ -53,7 +55,7 @@ State.onGlassmorphismChange((value) => {
   background: #151617;
   border-radius: 8px;
   padding: 10px;
-  transition: all 0.2s ease;
+  transition: all 0.15s ease;
   transform: scale(0.6);
   font-size: 14px;
 
@@ -82,6 +84,12 @@ State.onGlassmorphismChange((value) => {
     max-height: 48px;
     column-gap: 8px;
 
+    a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
     .fibbo-logo {
       width: 24px;
       height: 24px;

From 66288629ba709aa686030bf8d66b88c62d6e0d48 Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Tue, 19 Nov 2024 21:52:25 +0100
Subject: [PATCH 12/17] feat(devtools): transition component properties display

---
 packages/devtools/src/components/common/FComponents.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/devtools/src/components/common/FComponents.vue b/packages/devtools/src/components/common/FComponents.vue
index 21b86371..a7d5195f 100644
--- a/packages/devtools/src/components/common/FComponents.vue
+++ b/packages/devtools/src/components/common/FComponents.vue
@@ -42,6 +42,9 @@ defineProps({
   .f-component-properties {
     display: flex;
     flex-direction: column;
+    max-height: 400px;
+    overflow: hidden;
+    transition: max-height 0.15s ease;
 
     p {
       margin: 0;
@@ -80,7 +83,7 @@ defineProps({
   }
 
   .f-component-properties--hidden {
-    display: none;
+    max-height: 0px;
   }
 }
 </style>

From 73e955533185e5efd800a07c7c0f2e642df488d8 Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Wed, 20 Nov 2024 02:01:24 +0100
Subject: [PATCH 13/17] feat: add tab icons + console logger tab

---
 apps/playground-3d/src/main.ts                |  6 +-
 packages/devtools/src/FDebug.ts               | 23 +++++
 packages/devtools/src/FLogger.ts              | 57 ++++++++++++
 .../src/components/common/Console.vue         | 87 +++++++++++++++++++
 .../src/components/common/ConsoleJson.vue     | 87 +++++++++++++++++++
 .../src/components/common/DebugPanel.vue      | 18 +++-
 .../devtools/src/components/common/Tabs.vue   | 20 ++++-
 .../src/components/icons/FIconComponent.vue   |  3 +
 .../src/components/icons/FIconConsole.vue     |  3 +
 .../src/components/icons/FIconSettings.vue    |  3 +
 10 files changed, 299 insertions(+), 8 deletions(-)
 create mode 100644 packages/devtools/src/FLogger.ts
 create mode 100644 packages/devtools/src/components/common/Console.vue
 create mode 100644 packages/devtools/src/components/common/ConsoleJson.vue
 create mode 100644 packages/devtools/src/components/icons/FIconComponent.vue
 create mode 100644 packages/devtools/src/components/icons/FIconConsole.vue
 create mode 100644 packages/devtools/src/components/icons/FIconSettings.vue

diff --git a/apps/playground-3d/src/main.ts b/apps/playground-3d/src/main.ts
index 5b478b0b..98229440 100644
--- a/apps/playground-3d/src/main.ts
+++ b/apps/playground-3d/src/main.ts
@@ -209,15 +209,15 @@ import Character from './classes/Character'
   character.onCollisionWith(FCuboid, ({ component }) => {
     // Cast the component to FCuboid
     const cube = component as FCuboid
-    console.log('Collision with cube : ', cube)
+    console.log('Character collided with a cube', cube)
     // Change the color of the cube to a random color
     // cube.setColor(Math.random() * 0xFFFFFF)
   })
   character.onCollisionWith(sphere, () => {
-    console.log('Character collided with the sphere!')
+    console.error('Character collided with the sphere.')
   })
   character.onCollisionWith(deathZone, () => {
-    console.log('Character fell into the death zone!')
+    console.log('Character fell into the death zone.')
     character.transform.position = { x: 0, y: 10, z: 0 }
   })
 
diff --git a/packages/devtools/src/FDebug.ts b/packages/devtools/src/FDebug.ts
index 1a52fa74..80f44999 100644
--- a/packages/devtools/src/FDebug.ts
+++ b/packages/devtools/src/FDebug.ts
@@ -6,6 +6,7 @@ import FDebugComponent from './components/FDebug.vue'
 import { FDebug2d } from './FDebug2d'
 import { FDebug3d } from './FDebug3d'
 import { State } from './State'
+import { FLogger } from './FLogger'
 
 /**
  * A helper class to debug a given scene
@@ -40,6 +41,28 @@ export class FDebug {
     // Load devtools state from local storage
     State.load()
 
+    /**
+     * Override console methods
+     */
+    // Override console.log
+    const originalConsoleLog = console.log
+    console.log = (...args: any[]) => {
+      originalConsoleLog(...args)
+      FLogger.log(...args)
+    }
+    // Override console.warn
+    const originalConsoleWarn = console.warn
+    console.warn = (...args: any[]) => {
+      originalConsoleWarn(...args)
+      FLogger.warn(...args)
+    }
+    // Override console.error
+    const originalConsoleError = console.error
+    console.error = (...args: any[]) => {
+      originalConsoleError(...args)
+      FLogger.error(...args)
+    }
+
     // Fetch the CSS
     fetch(import.meta.url.replace('index.es.js', 'style.css'))
       .then(res => res.text())
diff --git a/packages/devtools/src/FLogger.ts b/packages/devtools/src/FLogger.ts
new file mode 100644
index 00000000..a014c17e
--- /dev/null
+++ b/packages/devtools/src/FLogger.ts
@@ -0,0 +1,57 @@
+export interface Log {
+  id: string
+  content: any[]
+  type: 'log' | 'warn' | 'error'
+  timestamp: number
+  showDetails: boolean
+}
+
+export class FLogger {
+  private static __LOGS__: Log[] = []
+
+  private static __CALLBACKS_ON_NEW_LOGS__: ((newLog: Log) => void)[] = []
+
+  static log(...args: any[]) {
+    const newLog = {
+      id: Math.random().toString(36).substr(2, 9),
+      content: args,
+      type: 'log',
+      timestamp: Date.now(),
+      showDetails: false,
+    } as Log
+    this.__CALLBACKS_ON_NEW_LOGS__.forEach(callback => callback(newLog))
+    this.__LOGS__.push(newLog)
+  }
+
+  static warn(...args: any[]) {
+    const newLog = {
+      id: Math.random().toString(36).substr(2, 9),
+      content: args,
+      type: 'warn',
+      timestamp: Date.now(),
+      showDetails: false,
+    } as Log
+    this.__CALLBACKS_ON_NEW_LOGS__.forEach(callback => callback(newLog))
+    this.__LOGS__.push(newLog)
+  }
+
+  static error(...args: any[]) {
+    const newLog = {
+      id: Math.random().toString(36).substr(2, 9),
+      content: args,
+      type: 'error',
+      timestamp: Date.now(),
+      showDetails: false,
+    } as Log
+    this.__CALLBACKS_ON_NEW_LOGS__.forEach(callback => callback(newLog))
+    this.__LOGS__.push(newLog)
+  }
+
+  static onLog(callback: (newLog: Log) => void) {
+    this.__CALLBACKS_ON_NEW_LOGS__.push(callback)
+  }
+
+  static getLogs() {
+    return this.__LOGS__
+  }
+}
diff --git a/packages/devtools/src/components/common/Console.vue b/packages/devtools/src/components/common/Console.vue
new file mode 100644
index 00000000..2c6ab7ca
--- /dev/null
+++ b/packages/devtools/src/components/common/Console.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="f-debug-console">
+    <div v-for="log in logs" :key="log.id" :class="log.type" class="f-debug-console__log">
+      <span>{{ log.content.join(' ') }}</span>
+      <button @click="log.showDetails = !log.showDetails">
+        Details
+      </button>
+      <div v-if="log.showDetails" class="object-details">
+        <ConsoleJson :data="log.content" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import type { Log } from '../../FLogger'
+import { FLogger } from '../../FLogger'
+import ConsoleJson from './ConsoleJson.vue'
+
+const logs = ref<Log[]>([])
+
+FLogger.onLog((log) => {
+  logs.value.push(log)
+})
+
+onMounted(() => {
+  logs.value = [...logs.value, ...FLogger.getLogs()]
+  // Hide details by default
+  logs.value.forEach(log => log.showDetails = false)
+})
+</script>
+
+<style scoped lang="scss">
+.f-debug-console {
+  display: flex;
+  flex-direction: column;
+  row-gap: 2px;
+  padding: 10px;
+  border-radius: 4px;
+
+  .f-debug-console__log {
+    position: relative;
+
+    &.warn > span {
+      color: #ff9800;
+    }
+
+    &.error > span {
+      color: #f44336;
+    }
+
+    button {
+      opacity: 0;
+      position: absolute;
+      top: 0px;
+      right: 4px;
+      border: none;
+      outline: none;
+      cursor: pointer;
+      padding: 2px 4px;
+      transition: opacity 0.1s;
+
+      &:active {
+        border: none;
+        outline: none;
+      }
+    }
+
+    .object-details {
+      margin-top: 4px;
+      padding: 8px;
+      border-radius: 2px;
+
+      pre {
+        white-space: break-spaces;
+      }
+    }
+
+    &:hover {
+      button {
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/devtools/src/components/common/ConsoleJson.vue b/packages/devtools/src/components/common/ConsoleJson.vue
new file mode 100644
index 00000000..4e7f7f5b
--- /dev/null
+++ b/packages/devtools/src/components/common/ConsoleJson.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="json-tree">
+    <div v-for="(value, key) in data" :key="key" class="json-item">
+      <span class="key">{{ key }}: </span>
+      <span
+        v-if="isObject(value) && value !== null"
+        class="toggle"
+        @click="toggleExpanded(key)"
+      >
+        <span :class="{ expanded: expandedKeys.includes(key) }">
+          {{ expandedKeys.includes(key) ? '−' : '+' }}
+        </span>
+      </span>
+      <span v-else class="value">{{ formatValue(value) }}</span>
+      <div
+        v-if="expandedKeys.includes(key) && isObject(value) && value !== null"
+        class="children"
+      >
+        <ConsoleJson :data="value" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  data: Record<string, any>
+}>()
+
+const expandedKeys = ref<string[]>([])
+
+function isObject(value: any): value is object {
+  return typeof value === 'object' && value !== null
+}
+
+function toggleExpanded(key: string) {
+  const index = expandedKeys.value.indexOf(key)
+  if (index > -1) {
+    expandedKeys.value.splice(index, 1)
+  }
+  else {
+    expandedKeys.value.push(key)
+  }
+}
+
+function formatValue(value: any) {
+  if (typeof value === 'string') {
+    return `"${value}"`
+  }
+  return value
+}
+</script>
+
+<style lang="scss" scoped>
+.json-tree {
+  white-space: pre-wrap;
+}
+
+.json-item {
+  margin-left: 8px;
+}
+
+.key {
+  font-weight: bold;
+}
+
+.toggle {
+  cursor: pointer;
+
+  span {
+    user-select: none;
+    font-size: 1.2em;
+    transform: rotate(0deg);
+    transition: transform 0.2s ease;
+
+    &.expanded {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+.children {
+  margin-left: 8px;
+}
+</style>
diff --git a/packages/devtools/src/components/common/DebugPanel.vue b/packages/devtools/src/components/common/DebugPanel.vue
index 5b35c3ee..796aa3b5 100644
--- a/packages/devtools/src/components/common/DebugPanel.vue
+++ b/packages/devtools/src/components/common/DebugPanel.vue
@@ -6,10 +6,22 @@
       </a>
       <span>Fibbo Devtools (v{{ version }})</span>
     </header>
-    <Tabs :tabs="['Components', 'Settings']">
+    <Tabs :tabs="['Components', 'Console', 'Settings']">
+      <template #ComponentsIcon>
+        <FIconComponent />
+      </template>
       <template #Components>
         <FComponents :scene="scene" />
       </template>
+      <template #ConsoleIcon>
+        <FIconConsole />
+      </template>
+      <template #Console>
+        <Console />
+      </template>
+      <template #SettingsIcon>
+        <FIconSettings />
+      </template>
       <template #Settings>
         <Settings />
       </template>
@@ -23,9 +35,13 @@ import { defineProps, ref } from 'vue'
 import type { FScene } from '@fibbojs/core'
 import { State } from '../../State'
 import FLogoFibbo from '../icons/FLogoFibbo.vue'
+import FIconComponent from '../icons/FIconComponent.vue'
+import FIconSettings from '../icons/FIconSettings.vue'
+import FIconConsole from '../icons/FIconConsole.vue'
 import Tabs from './Tabs.vue'
 import FComponents from './FComponents.vue'
 import Settings from './Settings.vue'
+import Console from './Console.vue'
 
 defineProps({
   title: String,
diff --git a/packages/devtools/src/components/common/Tabs.vue b/packages/devtools/src/components/common/Tabs.vue
index c35d86ee..abd0c277 100644
--- a/packages/devtools/src/components/common/Tabs.vue
+++ b/packages/devtools/src/components/common/Tabs.vue
@@ -10,7 +10,8 @@
         }"
         @click="selectTab(tab)"
       >
-        {{ tab }}
+        <slot :name="`${tab}Icon`" />
+        <span>{{ tab }}</span>
       </div>
       <div ref="selector" class="f-debug-tabs__selector" />
     </div>
@@ -51,7 +52,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .f-debug-tabs {
   display: flex;
   flex-direction: column;
@@ -71,14 +72,25 @@ onMounted(() => {
     border-radius: 12px;
 
     .f-debug-tabs__tab {
-      display: grid;
-      place-content: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
       width: 100%;
       padding: 6px;
       border-radius: 6px;
       transition: background 0.1s;
       cursor: pointer;
       z-index: 1;
+
+      span {
+        font-size: 11px;
+      }
+
+      svg {
+        height: 1.4em;
+        width: auto;
+      }
     }
 
     .f-debug-tabs__selector {
diff --git a/packages/devtools/src/components/icons/FIconComponent.vue b/packages/devtools/src/components/icons/FIconComponent.vue
new file mode 100644
index 00000000..390935ac
--- /dev/null
+++ b/packages/devtools/src/components/icons/FIconComponent.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="m12 3l3 3l-3 3l-3-3zm0 12l3 3l-3 3l-3-3zm6-6l3 3l-3 3l-3-3zM6 9l3 3l-3 3l-3-3z" /></svg>
+</template>
diff --git a/packages/devtools/src/components/icons/FIconConsole.vue b/packages/devtools/src/components/icons/FIconConsole.vue
new file mode 100644
index 00000000..e8fca142
--- /dev/null
+++ b/packages/devtools/src/components/icons/FIconConsole.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20 19V7H4v12zm0-16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-7 14v-2h5v2zm-3.42-4L5.57 9H8.4l3.3 3.3c.39.39.39 1.03 0 1.42L8.42 17H5.59z" /></svg>
+</template>
diff --git a/packages/devtools/src/components/icons/FIconSettings.vue b/packages/devtools/src/components/icons/FIconSettings.vue
new file mode 100644
index 00000000..ece643c2
--- /dev/null
+++ b/packages/devtools/src/components/icons/FIconSettings.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><circle cx="12" cy="12" r="2" stroke="currentColor" stroke-width="1.5" /><path fill="currentColor" d="m5.399 5.88l.375-.65a.75.75 0 0 0-.925.14zM3.4 9.344l-.717-.222a.75.75 0 0 0 .342.871zm-.002 5.311l-.375-.65a.75.75 0 0 0-.341.872zm2 3.464l-.55.51a.75.75 0 0 0 .925.14zm4.6 2.655h-.75c0 .35.243.653.584.731zm4.001.002l.167.732a.75.75 0 0 0 .583-.732zM18.6 18.12l-.375.65a.75.75 0 0 0 .925-.14zm1.998-3.466l.717.222a.75.75 0 0 0-.342-.871zm.002-5.311l.375.65a.75.75 0 0 0 .341-.872zm-2-3.465l.55-.509a.75.75 0 0 0-.925-.14zM14 3.225h.75a.75.75 0 0 0-.583-.731zm-4-.002l-.167-.732a.75.75 0 0 0-.583.732zm4 1.849h-.75zm5 8.66l-.375.65zm-2 3.464l-.375.65zM5 13.732l.375.65zm2-6.928l-.375.65zM4.117 9.566a8.24 8.24 0 0 1 1.831-3.177l-1.1-1.02a9.74 9.74 0 0 0-2.164 3.754zm.738 6.559a8.3 8.3 0 0 1-.74-1.69l-1.432.443a9.8 9.8 0 0 0 .873 1.997zm1.094 1.486a8.3 8.3 0 0 1-1.094-1.486l-1.299.75a9.8 9.8 0 0 0 1.292 1.755zm7.884 2.435a8.24 8.24 0 0 1-3.666-.002l-.334 1.462a9.74 9.74 0 0 0 4.334.003zm6.05-5.612a8.24 8.24 0 0 1-1.831 3.177l1.1 1.02a9.74 9.74 0 0 0 2.164-3.754zm-.738-6.559q.471.823.74 1.69l1.432-.443a9.8 9.8 0 0 0-.873-1.997zM18.05 6.389c.41.443.778.94 1.094 1.486l1.299-.75A9.8 9.8 0 0 0 19.15 5.37zm-7.884-2.435a8.24 8.24 0 0 1 3.666.002l.334-1.462a9.74 9.74 0 0 0-4.334-.003zm.583 1.118v-1.85h-1.5v1.85zM7.375 6.154L5.774 5.23l-.75 1.299l1.6.924zm-2.75 6.929l-1.601.924l.75 1.299l1.6-.924zm.75-3.465l-1.6-.923l-.75 1.3l1.6.923zm5.375 11.157v-1.847h-1.5v1.847zm-4.125-4.228l-1.601.924l.75 1.3l1.6-.925zm12.351.924l-1.601-.924l-.75 1.299l1.601.924zm-4.226 3.306v-1.849h-1.5v1.85zm5.476-12.083l-1.601.924l.75 1.3l1.601-.925zm.748 5.312l-1.599-.924l-.75 1.3l1.6.923zM14.75 5.072V3.225h-1.5v1.847zm3.476.158l-1.601.924l.75 1.3l1.601-.925zm-4.976-.158c0 2.117 2.292 3.44 4.125 2.381l-.75-1.299a1.25 1.25 0 0 1-1.875-1.082zm5.375 4.546c-1.833 1.059-1.833 3.705 0 4.764l.75-1.3a1.25 1.25 0 0 1 0-2.165zm-1.25 6.929c-1.833-1.059-4.125.264-4.125 2.381h1.5a1.25 1.25 0 0 1 1.875-1.082zm-6.625 2.381c0-2.117-2.292-3.44-4.125-2.381l.75 1.299a1.25 1.25 0 0 1 1.875 1.082zm-5.375-4.546c1.833-1.059 1.833-3.705 0-4.764l-.75 1.3a1.25 1.25 0 0 1 0 2.165zm3.875-9.31a1.25 1.25 0 0 1-1.875 1.082l-.75 1.3c1.833 1.058 4.125-.265 4.125-2.382z" /></g></svg>
+</template>

From dec0aefda7471d1b23cfd57c659e35dd4d514209 Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Wed, 20 Nov 2024 02:02:27 +0100
Subject: [PATCH 14/17] fix: forgot console.error

---
 apps/playground-3d/src/main.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/playground-3d/src/main.ts b/apps/playground-3d/src/main.ts
index 98229440..bffac853 100644
--- a/apps/playground-3d/src/main.ts
+++ b/apps/playground-3d/src/main.ts
@@ -214,7 +214,7 @@ import Character from './classes/Character'
     // cube.setColor(Math.random() * 0xFFFFFF)
   })
   character.onCollisionWith(sphere, () => {
-    console.error('Character collided with the sphere.')
+    console.log('Character collided with the sphere.')
   })
   character.onCollisionWith(deathZone, () => {
     console.log('Character fell into the death zone.')

From b668aed6b26016f6694c7fdcf0e018e1d656b903 Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Wed, 20 Nov 2024 17:30:32 +0100
Subject: [PATCH 15/17] feat(devtools): improve console logging style

---
 .../src/components/common/Console.vue         | 55 ++++++++-----------
 1 file changed, 22 insertions(+), 33 deletions(-)

diff --git a/packages/devtools/src/components/common/Console.vue b/packages/devtools/src/components/common/Console.vue
index 2c6ab7ca..7f8cbf7d 100644
--- a/packages/devtools/src/components/common/Console.vue
+++ b/packages/devtools/src/components/common/Console.vue
@@ -1,11 +1,16 @@
 <template>
   <div class="f-debug-console">
-    <div v-for="log in logs" :key="log.id" :class="log.type" class="f-debug-console__log">
-      <span>{{ log.content.join(' ') }}</span>
-      <button @click="log.showDetails = !log.showDetails">
-        Details
-      </button>
-      <div v-if="log.showDetails" class="object-details">
+    <div
+      v-for="log in logs" :key="log.id" :class="{
+        'warn': log.type === 'warn',
+        'error': log.type === 'error',
+        'show-details': log.showDetails,
+      }" class="f-debug-console__log"
+    >
+      <div class="f-debug-console__log-content" @click="log.showDetails = !log.showDetails">
+        {{ log.content.join(' ') }}
+      </div>
+      <div v-if="log.showDetails" class="f-debug-console__log-details">
         <ConsoleJson :data="log.content" />
       </div>
     </div>
@@ -36,38 +41,28 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   row-gap: 2px;
-  padding: 10px;
-  border-radius: 4px;
 
   .f-debug-console__log {
-    position: relative;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-left: 8px;
+    padding-right: 2px;
+    border-radius: 4px;
+    transition: all 0.15s ease;
 
-    &.warn > span {
+    &.warn > .f-debug-console__log-content {
       color: #ff9800;
     }
 
-    &.error > span {
+    &.error > .f-debug-console__log-content {
       color: #f44336;
     }
 
-    button {
-      opacity: 0;
-      position: absolute;
-      top: 0px;
-      right: 4px;
-      border: none;
-      outline: none;
-      cursor: pointer;
-      padding: 2px 4px;
-      transition: opacity 0.1s;
-
-      &:active {
-        border: none;
-        outline: none;
-      }
+    &:hover {
+      background: rgba(0, 0, 0, 0.4);
     }
 
-    .object-details {
+    .f-debug-console__log-details {
       margin-top: 4px;
       padding: 8px;
       border-radius: 2px;
@@ -76,12 +71,6 @@ onMounted(() => {
         white-space: break-spaces;
       }
     }
-
-    &:hover {
-      button {
-        opacity: 1;
-      }
-    }
   }
 }
 </style>

From 0ccc8a0f5ae583445b9de6d733fb48e50f951b48 Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Wed, 20 Nov 2024 21:26:07 +0100
Subject: [PATCH 16/17] fix: make 2 way binding work again

---
 packages/devtools/src/FDebug.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/devtools/src/FDebug.ts b/packages/devtools/src/FDebug.ts
index 80f44999..c9ac8405 100644
--- a/packages/devtools/src/FDebug.ts
+++ b/packages/devtools/src/FDebug.ts
@@ -78,6 +78,11 @@ export class FDebug {
 
     // Make the component array reactive
     this.scene.components = reactive(this.scene.components) as any
+    // Make sure added components are reactive
+    scene.onComponentAdded((component) => {
+      // @ts-expect-error - Core FComponent does not have transform property
+      component.transform = reactive(component.transform)
+    })
 
     // 3D specific debug behavior
     if (scene.__IS_3D__) {

From 56220053c69a85788f734af9d65b1dee4f255855 Mon Sep 17 00:00:00 2001
From: Gugustinette <mercier.augustin@outlook.fr>
Date: Thu, 21 Nov 2024 17:28:29 +0100
Subject: [PATCH 17/17] feat(devtools): able/disable rounding component
 transforms

---
 packages/devtools/src/State.ts                | 24 ++++++++++++++++---
 .../src/components/common/Settings.vue        | 10 ++++++++
 .../src/components/forms/InputNumber.vue      |  5 ++--
 packages/devtools/src/utils/cropValue.ts      |  8 -------
 packages/devtools/src/utils/roundTransform.ts |  6 +++++
 5 files changed, 40 insertions(+), 13 deletions(-)
 delete mode 100644 packages/devtools/src/utils/cropValue.ts
 create mode 100644 packages/devtools/src/utils/roundTransform.ts

diff --git a/packages/devtools/src/State.ts b/packages/devtools/src/State.ts
index 0b7318f7..65c647f3 100644
--- a/packages/devtools/src/State.ts
+++ b/packages/devtools/src/State.ts
@@ -3,11 +3,13 @@ export class State {
   private static __HITBOXES__: boolean = false
   private static __HELPERS__: boolean = true
   private static __GLASSMORPHISM__: boolean = true
+  private static __COMPONENT_ROUND_TRANSFORM__: boolean = true
 
   // Callbacks
   private static __CALLBACKS_ON_HITBOXES_CHANGE__: ((newState: boolean) => void)[] = []
   private static __CALLBACKS_ON_HELPERS_CHANGE__: ((newState: boolean) => void)[] = []
   private static __CALLBACKS_ON_GLASSMORPHISM_CHANGE__: ((newState: boolean) => void)[] = []
+  private static __CALLBACKS_ON_COMPONENT_ROUND_TRANSFORM_CHANGE__: ((newState: boolean) => void)[] = []
 
   // Methods
   static load() {
@@ -15,9 +17,10 @@ export class State {
     const state = localStorage.getItem('f-debug-state')
     if (state) {
       const parsedState = JSON.parse(state)
-      this.hitboxes = parsedState.hitboxes
-      this.helpers = parsedState.helpers
-      this.glassmorphism = parsedState.glassmorphism
+      this.hitboxes = parsedState.hitboxes ?? false
+      this.helpers = parsedState.helpers ?? true
+      this.glassmorphism = parsedState.glassmorphism ?? true
+      this.componentRoundTransform = parsedState.componentRoundTransform ?? true
     }
   }
 
@@ -27,6 +30,7 @@ export class State {
       hitboxes: this.hitboxes,
       helpers: this.helpers,
       glassmorphism: this.glassmorphism,
+      componentRoundTransform: this.componentRoundTransform,
     }))
   }
 
@@ -42,6 +46,10 @@ export class State {
     this.__CALLBACKS_ON_GLASSMORPHISM_CHANGE__.push(callback)
   }
 
+  static onComponentCropTransformChange(callback: (newState: boolean) => void) {
+    this.__CALLBACKS_ON_COMPONENT_ROUND_TRANSFORM_CHANGE__.push(callback)
+  }
+
   // Getters & setters
   static get hitboxes() {
     return this.__HITBOXES__
@@ -72,4 +80,14 @@ export class State {
     this.__CALLBACKS_ON_GLASSMORPHISM_CHANGE__.forEach(callback => callback(newState))
     State.store()
   }
+
+  static get componentRoundTransform() {
+    return this.__COMPONENT_ROUND_TRANSFORM__
+  }
+
+  static set componentRoundTransform(newState: boolean) {
+    this.__COMPONENT_ROUND_TRANSFORM__ = newState
+    this.__CALLBACKS_ON_COMPONENT_ROUND_TRANSFORM_CHANGE__.forEach(callback => callback(newState))
+    State.store()
+  }
 }
diff --git a/packages/devtools/src/components/common/Settings.vue b/packages/devtools/src/components/common/Settings.vue
index ed089283..ae4a7bb9 100644
--- a/packages/devtools/src/components/common/Settings.vue
+++ b/packages/devtools/src/components/common/Settings.vue
@@ -18,6 +18,12 @@
       title="Glassmorphism"
       tooltip="Enable fancy glassmorphism effect on the devtools panel."
     />
+    <Setting
+      id="devtools-component-round-transform"
+      v-model:value="settingComponentRoundTransform"
+      title="Round component transforms"
+      tooltip="Round the transform values to 2 decimal places in the component inspector."
+    />
   </div>
 </template>
 
@@ -29,6 +35,7 @@ import Setting from './Setting.vue'
 const settingHitboxes = ref(State.hitboxes)
 const settingHelpers = ref(State.helpers)
 const settingGlassmorphism = ref(State.glassmorphism)
+const settingComponentRoundTransform = ref(State.componentRoundTransform)
 
 watch(settingHitboxes, (value) => {
   State.hitboxes = value
@@ -39,6 +46,9 @@ watch(settingHelpers, (value) => {
 watch(settingGlassmorphism, (value) => {
   State.glassmorphism = value
 })
+watch(settingComponentRoundTransform, (value) => {
+  State.componentRoundTransform = value
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/devtools/src/components/forms/InputNumber.vue b/packages/devtools/src/components/forms/InputNumber.vue
index 0375e62f..733be708 100644
--- a/packages/devtools/src/components/forms/InputNumber.vue
+++ b/packages/devtools/src/components/forms/InputNumber.vue
@@ -1,7 +1,7 @@
 <!-- Custom input:number vue component -->
 <template>
   <input
-    :value="cropValue(value)"
+    :value="State.componentRoundTransform ? roundTransform(value) : value"
     type="number"
     @input="updateValue"
   >
@@ -9,7 +9,8 @@
 
 <script setup lang="ts">
 import { defineEmits, defineProps } from 'vue'
-import { cropValue } from '../../utils/cropValue'
+import { roundTransform } from '../../utils/roundTransform'
+import { State } from '../../State'
 
 defineProps({
   value: {
diff --git a/packages/devtools/src/utils/cropValue.ts b/packages/devtools/src/utils/cropValue.ts
deleted file mode 100644
index adf5e715..00000000
--- a/packages/devtools/src/utils/cropValue.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Crop a given value to a certain length.
- * Always convert to string and return as string.
- */
-export function cropValue(value: any, length: number = 6): string {
-  const str = String(value)
-  return str.length > length ? str.slice(0, length) : str
-}
diff --git a/packages/devtools/src/utils/roundTransform.ts b/packages/devtools/src/utils/roundTransform.ts
new file mode 100644
index 00000000..deeb7272
--- /dev/null
+++ b/packages/devtools/src/utils/roundTransform.ts
@@ -0,0 +1,6 @@
+/**
+ * Round a given transform number
+ */
+export function roundTransform(value: number, length: number = 2): number {
+  return Math.round(value * 10 ** length) / 10 ** length
+}