refactor: logger -> debug

packages/shadergradient-v2/src/ShaderGradient/Mesh/Mesh.tsx

@@ -9,8 +9,7 @@ import {
 } from '@/shaders/a'
 // import { vertexShader, fragmentShader } from '@/shaders/base'
 import { dToRArr } from '@/utils'
-
-declare const __DEV__: boolean;
+import { debug } from '@/utils/debug'
 
 export function Mesh({
   animate,
@@ -58,9 +57,7 @@ export function Mesh({
         vertexShader={type === 'sphere' ? vertexSphere : vertexShader}
         fragmentShader={type === 'sphere' ? fragmentSphere : fragmentShader}
         onInit={(material) => {
-          if (__DEV__) {
-            console.debug('material (onInit)', material);
-          }
+          debug.performance('material (onInit)', material);
         }}
       />
     </mesh>

packages/shadergradient-v2/src/utils/debug.ts

@@ -0,0 +1,46 @@
+type DebugCategory = 'performance' | 'render'
+
+const debugState: { [key in DebugCategory]: boolean } = {
+  performance: true,
+  render: true
+}
+
+export const debug = {
+  enable: (category: DebugCategory) => {
+    debugState[category] = true
+  },
+  disable: (category: DebugCategory) => {
+    debugState[category] = false
+  },
+  enableAll: () => {
+    Object.keys(debugState).forEach(key => {
+      debugState[key as DebugCategory] = true
+    })
+  },
+  disableAll: () => {
+    Object.keys(debugState).forEach(key => {
+      debugState[key as DebugCategory] = false
+    })
+  },
+  performance: (...args: any[]) => {
+    if (debugState.performance) {
+      console.log('[Performance]', ...args)
+    }
+  },
+  render: (...args: any[]) => {
+    if (debugState.render) {
+      console.log('[Render]', ...args)
+    }
+  }
+}
+
+// Expose the 'debug' function to the global 'window' object for accessibility across the application
+declare global {
+  interface Window {
+    debug: typeof debug
+  }
+}
+
+if (typeof window !== 'undefined') {
+  window.debug = debug
+}