feat(devtools): extract theme to devtool components (#173)

* feat: extract theme to devtool components

* chore: changeset

* fix: pr comments and test

---------

Co-authored-by: Kevin Van Cott <kevinvandy656@gmail.com>

Author: harry-whorlow

.changeset/long-corners-repair.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/pacer-devtools': patch
+---
+
+Moves devtools theme to the component to avoid theme mismatch.

…ges/pacer-devtools/src/PacerDevtools.tsx …/pacer-devtools/src/components/index.tsxpackages/pacer-devtools/src/PacerDevtools.tsx renamed to packages/pacer-devtools/src/components/index.tsx packages/pacer-devtools/src/PacerDevtools.tsx renamed to packages/pacer-devtools/src/components/index.tsx

@@ -1,14 +1,14 @@
 import { ThemeContextProvider } from '@tanstack/devtools-ui'
-import { PacerContextProvider } from './PacerContextProvider'
-import { Shell } from './components/Shell'
+import { PacerContextProvider } from '../PacerContextProvider'
+import { Shell } from './Shell'
 
 import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
 
-interface PacerDevtools {
+interface DevtoolsProps {
   theme: TanStackDevtoolsTheme
 }
 
-export default function PacerDevtools(props: PacerDevtools) {
+export default function PacerDevtools(props: DevtoolsProps) {
   return (
     <ThemeContextProvider theme={props.theme}>
       <PacerContextProvider>

packages/pacer-devtools/src/core.tsx

@@ -3,7 +3,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid'
 export interface PacerDevtoolsInit {}
 
 const [PacerDevtoolsCore, PacerDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./PacerDevtools'),
+  () => import('./components'),
 )
 
 export { PacerDevtoolsCore, PacerDevtoolsCoreNoOp }