Created the inital setup and the devtools skeleton

examples/react/basic/src/index.tsx

@@ -1,9 +1,10 @@
 import ReactDOM from 'react-dom/client'
-
+import { Devtools } from '@tanstack/react-devtools'
 function App() {
   return (
     <div>
       <h1>TanStack Devtools Basic Example</h1>
+      <Devtools />
     </div>
   )
 }

examples/solid/basic/src/index.tsx

@@ -1,9 +1,10 @@
 import { render } from 'solid-js/web'
-
+import { Devtools } from '@tanstack/solid-devtools'
 function App() {
   return (
     <div>
       <h1>TanStack Devtools Basic Example</h1>
+      <Devtools />
     </div>
   )
 }

package.json

@@ -47,7 +47,7 @@
   "size-limit": [
     {
       "path": "packages/devtools/dist/esm/index.js",
-      "limit": "6 KB"
+      "limit": "20 KB"
     }
   ],
   "devDependencies": {

packages/devtools/package.json

@@ -56,5 +56,13 @@
     "test:types": "tsc",
     "test:build": "publint --strict",
     "build": "vite build"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "goober": "^2.1.16",
+    "solid-js": "^1.9.5"
+  },
+  "devDependencies": {
+    "vite-plugin-solid": "^2.11.6"
   }
 }

packages/devtools/src/components/content-panel.tsx

@@ -0,0 +1,21 @@
+import { JSX } from 'solid-js/jsx-runtime'
+import { useStyles } from '../styles/use-styles'
+
+export const ContentPanel = (props: {
+  ref: (el: HTMLDivElement | undefined) => void
+  children: JSX.Element
+  handleDragStart?: (e: any) => void
+}) => {
+  const styles = useStyles()
+  return (
+    <div ref={props.ref} class={styles().devtoolsPanel}>
+      {props.handleDragStart ? (
+        <div
+          class={styles().dragHandle}
+          onMouseDown={props.handleDragStart}
+        ></div>
+      ) : null}
+      {props.children}
+    </div>
+  )
+}