From 6cc0ff147588ee742e4f61acc82b4825d83c6d6c Mon Sep 17 00:00:00 2001
From: restareaByWeezy <fjgkd7777@naver.com>
Date: Sat, 7 Mar 2026 19:39:17 +0900
Subject: [PATCH] fix(pacer-devtools): remove inline style objects to eliminate
 setStyleProperty dependency

Solid.js compiler transforms `style={{ ... }}` object props into
`setStyleProperty()` calls from solid-js/web. This function only exists
in the browser build (web.js) but not the server build (server.js).
Next.js resolves solid-js/web using the server condition during SSR,
causing "Export setStyleProperty doesn't exist in target module" error.

Fix: replace all inline style objects with goober CSS classes, and use
string-based style attribute for the dynamic width value. This prevents
the Solid compiler from emitting setStyleProperty calls entirely.

Closes #131

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/pacer-devtools/src/components/Shell.tsx      |  8 ++------
 .../pacer-devtools/src/components/StateHeader.tsx     |  5 ++---
 packages/pacer-devtools/src/styles/use-styles.ts      | 11 +++++++++++
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/pacer-devtools/src/components/Shell.tsx b/packages/pacer-devtools/src/components/Shell.tsx
index e7010314e..4d368a30f 100644
--- a/packages/pacer-devtools/src/components/Shell.tsx
+++ b/packages/pacer-devtools/src/components/Shell.tsx
@@ -76,11 +76,7 @@ export function Shell() {
       <div class={styles().mainContainer}>
         <div
           class={styles().leftPanel}
-          style={{
-            width: `${leftPanelWidth()}px`,
-            'min-width': '150px',
-            'max-width': '800px',
-          }}
+          style={`width: ${leftPanelWidth()}px`}
         >
           <UtilList
             selectedKey={selectedKey}
@@ -94,7 +90,7 @@ export function Shell() {
           onMouseDown={handleMouseDown}
         />
 
-        <div class={styles().rightPanel} style={{ flex: 1 }}>
+        <div class={styles().rightPanel}>
           <div class={styles().panelHeader}>Details</div>
           <DetailsPanel
             selectedInstance={selectedInstance}
diff --git a/packages/pacer-devtools/src/components/StateHeader.tsx b/packages/pacer-devtools/src/components/StateHeader.tsx
index ee8038c5a..9d87fd85d 100644
--- a/packages/pacer-devtools/src/components/StateHeader.tsx
+++ b/packages/pacer-devtools/src/components/StateHeader.tsx
@@ -85,7 +85,7 @@ export function StateHeader(props: StateHeaderProps) {
   return (
     <div class={styles().stateHeader}>
       <div class={styles().stateTitle}>{entry.type}</div>
-      <div style={{ display: 'flex', 'align-items': 'center', gap: '16px' }}>
+      <div class={styles().stateHeaderRow}>
         <div class={styles().infoGrid}>
           <div class={styles().infoLabel}>Key</div>
           <div class={styles().infoValueMono}>{key}</div>
@@ -95,8 +95,7 @@ export function StateHeader(props: StateHeaderProps) {
           </div>
         </div>
         <div
-          class={styles().infoValueMono}
-          style={{ 'margin-left': 'auto', 'font-weight': 'bold' }}
+          class={`${styles().infoValueMono} ${styles().reductionValue}`}
         >
           {reductionPercentage}% reduction
         </div>
diff --git a/packages/pacer-devtools/src/styles/use-styles.ts b/packages/pacer-devtools/src/styles/use-styles.ts
index 3c472600d..560c855e0 100644
--- a/packages/pacer-devtools/src/styles/use-styles.ts
+++ b/packages/pacer-devtools/src/styles/use-styles.ts
@@ -67,6 +67,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       overflow: hidden;
       min-height: 0;
       flex-shrink: 0;
+      min-width: 150px;
+      max-width: 800px;
     `,
     rightPanel: css`
       background: ${t(colors.gray[100], colors.darkGray[800])};
@@ -286,6 +288,15 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       color: ${t(colors.gray[900], colors.gray[100])};
       word-break: break-all;
     `,
+    stateHeaderRow: css`
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    `,
+    reductionValue: css`
+      margin-left: auto;
+      font-weight: bold;
+    `,
     noSelection: css`
       flex: 1;
       display: flex;