diff --git a/.changeset/honest-moose-throw.md b/.changeset/honest-moose-throw.md
new file mode 100644
index 0000000..2879d44
--- /dev/null
+++ b/.changeset/honest-moose-throw.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/hotkeys-devtools': patch
+---
+
+Moves devtools theme to the component to avoid theme miss-match.
diff --git a/examples/solid/createHeldKeys/package.json b/examples/solid/createHeldKeys/package.json
index c577ba6..7d2aa0c 100644
--- a/examples/solid/createHeldKeys/package.json
+++ b/examples/solid/createHeldKeys/package.json
@@ -8,7 +8,6 @@
"preview": "vite preview"
},
"dependencies": {
- "@tanstack/devtools-utils": "^0.3.2",
"@tanstack/solid-devtools": "0.7.30",
"@tanstack/solid-hotkeys": "^0.4.1",
"@tanstack/solid-hotkeys-devtools": "^0.4.1",
diff --git a/examples/solid/createHotkey/package.json b/examples/solid/createHotkey/package.json
index 5e0cbef..e45bfb6 100644
--- a/examples/solid/createHotkey/package.json
+++ b/examples/solid/createHotkey/package.json
@@ -11,7 +11,6 @@
"test:types": "tsc"
},
"dependencies": {
- "@tanstack/devtools-utils": "^0.3.2",
"@tanstack/solid-devtools": "0.7.30",
"@tanstack/solid-hotkeys": "^0.4.1",
"@tanstack/solid-hotkeys-devtools": "^0.4.1",
diff --git a/examples/solid/createHotkeyRecorder/package.json b/examples/solid/createHotkeyRecorder/package.json
index 15e179e..281a0eb 100644
--- a/examples/solid/createHotkeyRecorder/package.json
+++ b/examples/solid/createHotkeyRecorder/package.json
@@ -8,7 +8,6 @@
"preview": "vite preview"
},
"dependencies": {
- "@tanstack/devtools-utils": "^0.3.2",
"@tanstack/solid-devtools": "0.7.30",
"@tanstack/solid-hotkeys": "^0.4.1",
"@tanstack/solid-hotkeys-devtools": "^0.4.1",
diff --git a/examples/solid/createHotkeySequence/package.json b/examples/solid/createHotkeySequence/package.json
index ce5510b..7aa1127 100644
--- a/examples/solid/createHotkeySequence/package.json
+++ b/examples/solid/createHotkeySequence/package.json
@@ -8,7 +8,6 @@
"preview": "vite preview"
},
"dependencies": {
- "@tanstack/devtools-utils": "^0.3.2",
"@tanstack/solid-devtools": "0.7.30",
"@tanstack/solid-hotkeys": "^0.4.1",
"@tanstack/solid-hotkeys-devtools": "^0.4.1",
diff --git a/examples/solid/createKeyHold/package.json b/examples/solid/createKeyHold/package.json
index 4adebcb..8e5f204 100644
--- a/examples/solid/createKeyHold/package.json
+++ b/examples/solid/createKeyHold/package.json
@@ -8,7 +8,6 @@
"preview": "vite preview"
},
"dependencies": {
- "@tanstack/devtools-utils": "^0.3.2",
"@tanstack/solid-devtools": "0.7.30",
"@tanstack/solid-hotkeys": "^0.4.1",
"@tanstack/solid-hotkeys-devtools": "^0.4.1",
diff --git a/packages/hotkeys-devtools/package.json b/packages/hotkeys-devtools/package.json
index 6bbd0de..2be744e 100644
--- a/packages/hotkeys-devtools/package.json
+++ b/packages/hotkeys-devtools/package.json
@@ -50,8 +50,8 @@
"@tanstack/hotkeys": "workspace:*"
},
"dependencies": {
- "@tanstack/devtools-ui": "^0.5.0",
- "@tanstack/devtools-utils": "^0.3.2",
+ "@tanstack/devtools-ui": "^0.5.1",
+ "@tanstack/devtools-utils": "^0.4.0",
"clsx": "^2.1.1",
"goober": "^2.1.18",
"solid-js": "^1.9.11"
diff --git a/packages/hotkeys-devtools/src/HotkeysDevtools.tsx b/packages/hotkeys-devtools/src/HotkeysDevtools.tsx
deleted file mode 100644
index d803a61..0000000
--- a/packages/hotkeys-devtools/src/HotkeysDevtools.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { HotkeysContextProvider } from './HotkeysContextProvider'
-import { Shell } from './components/Shell'
-
-export default function HotkeysDevtools() {
- return (
-
-
-
- )
-}
diff --git a/packages/hotkeys-devtools/src/components/index.tsx b/packages/hotkeys-devtools/src/components/index.tsx
new file mode 100644
index 0000000..4fad3b9
--- /dev/null
+++ b/packages/hotkeys-devtools/src/components/index.tsx
@@ -0,0 +1,19 @@
+import { ThemeContextProvider } from '@tanstack/devtools-ui'
+import { HotkeysContextProvider } from '../HotkeysContextProvider'
+import { Shell } from './Shell'
+
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
+
+interface DevtoolsProps {
+ theme: TanStackDevtoolsTheme
+}
+
+export default function HotkeysDevtools(props: DevtoolsProps) {
+ return (
+
+
+
+
+
+ )
+}
diff --git a/packages/hotkeys-devtools/src/core.tsx b/packages/hotkeys-devtools/src/core.tsx
index 5e6b14f..5eb9d94 100644
--- a/packages/hotkeys-devtools/src/core.tsx
+++ b/packages/hotkeys-devtools/src/core.tsx
@@ -1,6 +1,6 @@
import { constructCoreClass } from '@tanstack/devtools-utils/solid'
-const loadComponent = () => import('./HotkeysDevtools')
+const loadComponent = () => import('./components/index')
export interface HotkeysDevtoolsInit {}
diff --git a/packages/preact-hotkeys-devtools/package.json b/packages/preact-hotkeys-devtools/package.json
index 9ff8a58..619226e 100644
--- a/packages/preact-hotkeys-devtools/package.json
+++ b/packages/preact-hotkeys-devtools/package.json
@@ -50,7 +50,7 @@
"preact": ">=10.0.0"
},
"dependencies": {
- "@tanstack/devtools-utils": "^0.3.2",
+ "@tanstack/devtools-utils": "^0.4.0",
"@tanstack/hotkeys-devtools": "workspace:*"
},
"devDependencies": {
diff --git a/packages/react-hotkeys-devtools/package.json b/packages/react-hotkeys-devtools/package.json
index 0c67a2f..d6f3502 100644
--- a/packages/react-hotkeys-devtools/package.json
+++ b/packages/react-hotkeys-devtools/package.json
@@ -54,7 +54,7 @@
"react-dom": ">=16.8"
},
"dependencies": {
- "@tanstack/devtools-utils": "^0.3.2",
+ "@tanstack/devtools-utils": "^0.4.0",
"@tanstack/hotkeys-devtools": "workspace:*"
},
"devDependencies": {
diff --git a/packages/solid-hotkeys-devtools/package.json b/packages/solid-hotkeys-devtools/package.json
index fba77a5..4444366 100644
--- a/packages/solid-hotkeys-devtools/package.json
+++ b/packages/solid-hotkeys-devtools/package.json
@@ -51,7 +51,7 @@
"solid-js": ">=1.7.0"
},
"dependencies": {
- "@tanstack/devtools-utils": "^0.3.2",
+ "@tanstack/devtools-utils": "^0.4.0",
"@tanstack/hotkeys-devtools": "workspace:*"
},
"devDependencies": {
diff --git a/packages/vue-hotkeys-devtools/package.json b/packages/vue-hotkeys-devtools/package.json
index 8abeb5b..0ac23c8 100644
--- a/packages/vue-hotkeys-devtools/package.json
+++ b/packages/vue-hotkeys-devtools/package.json
@@ -58,7 +58,7 @@
"vue": ">=3.0.0"
},
"dependencies": {
- "@tanstack/devtools-utils": "^0.3.2",
+ "@tanstack/devtools-utils": "^0.4.0",
"@tanstack/hotkeys-devtools": "workspace:*"
},
"devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 48e96f4..0578ae1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -728,9 +728,6 @@ importers:
examples/solid/createHeldKeys:
dependencies:
- '@tanstack/devtools-utils':
- specifier: ^0.3.2
- version: 0.3.2(@types/react@19.2.14)(csstype@3.2.3)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))
'@tanstack/solid-devtools':
specifier: 0.7.30
version: 0.7.30(csstype@3.2.3)(solid-js@1.9.11)
@@ -753,9 +750,6 @@ importers:
examples/solid/createHotkey:
dependencies:
- '@tanstack/devtools-utils':
- specifier: ^0.3.2
- version: 0.3.2(@types/react@19.2.14)(csstype@3.2.3)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))
'@tanstack/solid-devtools':
specifier: 0.7.30
version: 0.7.30(csstype@3.2.3)(solid-js@1.9.11)
@@ -784,9 +778,6 @@ importers:
examples/solid/createHotkeyRecorder:
dependencies:
- '@tanstack/devtools-utils':
- specifier: ^0.3.2
- version: 0.3.2(@types/react@19.2.14)(csstype@3.2.3)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))
'@tanstack/solid-devtools':
specifier: 0.7.30
version: 0.7.30(csstype@3.2.3)(solid-js@1.9.11)
@@ -809,9 +800,6 @@ importers:
examples/solid/createHotkeySequence:
dependencies:
- '@tanstack/devtools-utils':
- specifier: ^0.3.2
- version: 0.3.2(@types/react@19.2.14)(csstype@3.2.3)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))
'@tanstack/solid-devtools':
specifier: 0.7.30
version: 0.7.30(csstype@3.2.3)(solid-js@1.9.11)
@@ -834,9 +822,6 @@ importers:
examples/solid/createKeyHold:
dependencies:
- '@tanstack/devtools-utils':
- specifier: ^0.3.2
- version: 0.3.2(@types/react@19.2.14)(csstype@3.2.3)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))
'@tanstack/solid-devtools':
specifier: 0.7.30
version: 0.7.30(csstype@3.2.3)(solid-js@1.9.11)
@@ -1108,11 +1093,11 @@ importers:
packages/hotkeys-devtools:
dependencies:
'@tanstack/devtools-ui':
- specifier: ^0.5.0
- version: 0.5.0(csstype@3.2.3)(solid-js@1.9.11)
+ specifier: ^0.5.1
+ version: 0.5.1(csstype@3.2.3)(solid-js@1.9.11)
'@tanstack/devtools-utils':
- specifier: ^0.3.2
- version: 0.3.2(@types/react@19.2.14)(csstype@3.2.3)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))
+ specifier: ^0.4.0
+ version: 0.4.0(@types/react@19.2.14)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))
'@tanstack/hotkeys':
specifier: workspace:*
version: link:../hotkeys
@@ -1152,8 +1137,8 @@ importers:
packages/preact-hotkeys-devtools:
dependencies:
'@tanstack/devtools-utils':
- specifier: ^0.3.2
- version: 0.3.2(@types/react@19.2.14)(csstype@3.2.3)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))
+ specifier: ^0.4.0
+ version: 0.4.0(@types/react@19.2.14)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))
'@tanstack/hotkeys-devtools':
specifier: workspace:*
version: link:../hotkeys-devtools
@@ -1202,8 +1187,8 @@ importers:
packages/react-hotkeys-devtools:
dependencies:
'@tanstack/devtools-utils':
- specifier: ^0.3.2
- version: 0.3.2(@types/react@19.2.14)(csstype@3.2.3)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))
+ specifier: ^0.4.0
+ version: 0.4.0(@types/react@19.2.14)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))
'@tanstack/hotkeys-devtools':
specifier: workspace:*
version: link:../hotkeys-devtools
@@ -1258,8 +1243,8 @@ importers:
packages/solid-hotkeys-devtools:
dependencies:
'@tanstack/devtools-utils':
- specifier: ^0.3.2
- version: 0.3.2(@types/react@19.2.14)(csstype@3.2.3)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))
+ specifier: ^0.4.0
+ version: 0.4.0(@types/react@19.2.14)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))
'@tanstack/hotkeys-devtools':
specifier: workspace:*
version: link:../hotkeys-devtools
@@ -1315,8 +1300,8 @@ importers:
packages/vue-hotkeys-devtools:
dependencies:
'@tanstack/devtools-utils':
- specifier: ^0.3.2
- version: 0.3.2(@types/react@19.2.14)(csstype@3.2.3)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))
+ specifier: ^0.4.0
+ version: 0.4.0(@types/react@19.2.14)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))
'@tanstack/hotkeys-devtools':
specifier: workspace:*
version: link:../hotkeys-devtools
@@ -3928,9 +3913,16 @@ packages:
peerDependencies:
solid-js: '>=1.9.7'
- '@tanstack/devtools-utils@0.3.2':
- resolution: {integrity: sha512-fu9wmE2bHigiE1Lc5RFSchgdN35wX15TqfB4O4vJa6SqX9JH2ov57J60u18lheROaBiteloPzcCbkLNpx0aacw==}
+ '@tanstack/devtools-ui@0.5.1':
+ resolution: {integrity: sha512-T9JjAdqMSnxsVO6AQykD5vhxPF4iFLKtbYxee/bU3OLlk446F5C1220GdCmhDSz7y4lx+m8AvIS0bq6zzvdDUA==}
engines: {node: '>=18'}
+ peerDependencies:
+ solid-js: '>=1.9.7'
+
+ '@tanstack/devtools-utils@0.4.0':
+ resolution: {integrity: sha512-KsGzYhA8L/fCNgyyMyoUy+TKtx+DjNbzWwqH6wXL48Llzo7kvV9RynYJlaO8Qkzwm+NdHXSgsljQNjQ3CKPpZA==}
+ engines: {node: '>=18'}
+ hasBin: true
peerDependencies:
'@types/react': '>=17.0.0'
preact: '>=10.0.0'
@@ -11458,17 +11450,22 @@ snapshots:
transitivePeerDependencies:
- csstype
- '@tanstack/devtools-utils@0.3.2(@types/react@19.2.14)(csstype@3.2.3)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))':
+ '@tanstack/devtools-ui@0.5.1(csstype@3.2.3)(solid-js@1.9.11)':
dependencies:
- '@tanstack/devtools-ui': 0.5.0(csstype@3.2.3)(solid-js@1.9.11)
+ clsx: 2.1.1
+ dayjs: 1.11.19
+ goober: 2.1.18(csstype@3.2.3)
+ solid-js: 1.9.11
+ transitivePeerDependencies:
+ - csstype
+
+ '@tanstack/devtools-utils@0.4.0(@types/react@19.2.14)(preact@10.28.4)(react@19.2.4)(solid-js@1.9.11)(vue@3.5.29(typescript@5.9.3))':
optionalDependencies:
'@types/react': 19.2.14
preact: 10.28.4
react: 19.2.4
solid-js: 1.9.11
vue: 3.5.29(typescript@5.9.3)
- transitivePeerDependencies:
- - csstype
'@tanstack/devtools@0.10.11(csstype@3.2.3)(solid-js@1.9.11)':
dependencies: