From 9ad501a88efcdf7f58dc3ce51d9547b630b7d30d Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Sun, 25 Oct 2026 12:16:10 +0900
Subject: [PATCH] fix(solid-pacer-devtools): pass 'theme' and 'devtoolsOpen' to
 the panel reactively

---
 .../solid-pacer-devtools-panel-reactivity.md  |  5 ++
 .../src/SolidPacerDevtools.tsx                |  8 ++-
 .../tests/panel-reactivity.test.tsx           | 58 +++++++++++++++++++
 3 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/solid-pacer-devtools-panel-reactivity.md
 create mode 100644 packages/solid-pacer-devtools/tests/panel-reactivity.test.tsx

diff --git a/.changeset/solid-pacer-devtools-panel-reactivity.md b/.changeset/solid-pacer-devtools-panel-reactivity.md
new file mode 100644
index 000000000..f4c3db9b0
--- /dev/null
+++ b/.changeset/solid-pacer-devtools-panel-reactivity.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/solid-pacer-devtools': patch
+---
+
+Pass `theme` and `devtoolsOpen` to the devtools panel reactively, so later changes to these props reach the panel.
diff --git a/packages/solid-pacer-devtools/src/SolidPacerDevtools.tsx b/packages/solid-pacer-devtools/src/SolidPacerDevtools.tsx
index 7c646f963..a4c5b178a 100644
--- a/packages/solid-pacer-devtools/src/SolidPacerDevtools.tsx
+++ b/packages/solid-pacer-devtools/src/SolidPacerDevtools.tsx
@@ -14,8 +14,12 @@ type PacerDevtoolsPanelComponent = (
 
 function resolvePanelProps(props?: PacerDevtoolsSolidInit): DevtoolsPanelProps {
   return {
-    theme: props?.theme ?? 'dark',
-    devtoolsOpen: props?.devtoolsOpen ?? false,
+    get theme() {
+      return props?.theme ?? 'dark'
+    },
+    get devtoolsOpen() {
+      return props?.devtoolsOpen ?? false
+    },
   }
 }
 
diff --git a/packages/solid-pacer-devtools/tests/panel-reactivity.test.tsx b/packages/solid-pacer-devtools/tests/panel-reactivity.test.tsx
new file mode 100644
index 000000000..e21f99250
--- /dev/null
+++ b/packages/solid-pacer-devtools/tests/panel-reactivity.test.tsx
@@ -0,0 +1,58 @@
+import { createRoot, createSignal } from 'solid-js'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { PacerDevtoolsPanel } from '../src/SolidPacerDevtools'
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/solid'
+
+const panelProps: Array<DevtoolsPanelProps> = []
+
+vi.mock(import('@tanstack/devtools-utils/solid'), async (importOriginal) => ({
+  ...(await importOriginal()),
+  createSolidPanel: () => [
+    (props) => {
+      panelProps.push(props)
+      return null
+    },
+    () => null,
+  ],
+}))
+
+describe('PacerDevtoolsPanel reactivity', () => {
+  beforeEach(() => {
+    panelProps.length = 0
+  })
+
+  it('should pass the latest theme and devtoolsOpen to the panel', () => {
+    const [theme, setTheme] = createSignal<DevtoolsPanelProps['theme']>('light')
+    const [devtoolsOpen, setDevtoolsOpen] = createSignal(false)
+
+    const dispose = createRoot((dispose) => {
+      ;<PacerDevtoolsPanel theme={theme()} devtoolsOpen={devtoolsOpen()} />
+      return dispose
+    })
+
+    expect(panelProps).toHaveLength(1)
+    expect(panelProps[0]?.theme).toBe('light')
+    expect(panelProps[0]?.devtoolsOpen).toBe(false)
+
+    setTheme('dark')
+    setDevtoolsOpen(true)
+
+    expect(panelProps).toHaveLength(1)
+    expect(panelProps[0]?.theme).toBe('dark')
+    expect(panelProps[0]?.devtoolsOpen).toBe(true)
+
+    dispose()
+  })
+
+  it('should fall back to the default theme and devtoolsOpen', () => {
+    const dispose = createRoot((dispose) => {
+      ;<PacerDevtoolsPanel />
+      return dispose
+    })
+
+    expect(panelProps[0]?.theme).toBe('dark')
+    expect(panelProps[0]?.devtoolsOpen).toBe(false)
+
+    dispose()
+  })
+})