chore(solid): add debugger

packages/solid/package.json

@@ -138,6 +138,7 @@
     "@testing-library/jest-dom": "6.4.8",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.7",
+    "@zag-js/stringify-state": "0.65.1",
     "globby": "14.0.2",
     "jsdom": "25.0.0",
     "lucide-solid": "0.438.0",

packages/solid/src/use-debugger.ts

@@ -0,0 +1,64 @@
+import { stringifyState } from '@zag-js/stringify-state'
+import { createEffect } from 'solid-js'
+
+interface Service {
+  initialContext: { id: string }
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  state: Record<string, any>
+  subscribe: (callback: () => void) => () => void
+}
+
+export const useDebugger = (service: Service) => {
+  createEffect(() => {
+    const syncPre = () => {
+      let group = document.getElementById('__zag-debug')
+
+      if (!group) {
+        group = document.createElement('div')
+        group.id = '__zag-debug'
+        Object.assign(group.style, {
+          position: 'fixed',
+          top: '0',
+          right: '0',
+          zIndex: '9999',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '4px',
+          boxSizing: 'border-box',
+        })
+
+        document.body.appendChild(group)
+      }
+
+      const id = service.initialContext.id
+      let pre = document.getElementById(id)
+
+      if (!pre) {
+        pre = document.createElement('pre')
+        pre.id = id
+        Object.assign(pre.style, {
+          padding: '4px',
+          background: 'white',
+          border: '1px solid black',
+          borderRadius: '4px',
+          maxHeight: '300px',
+          overflow: 'auto',
+        })
+        group.appendChild(pre)
+      }
+
+      pre.textContent = stringifyState(service.state)
+
+      return () => {
+        pre.remove()
+      }
+    }
+
+    const removePre = syncPre()
+    const unsubscribe = service.subscribe(syncPre)
+    return () => {
+      removePre()
+      unsubscribe()
+    }
+  })
+}