fix(devtools): cloudflair plugin, solid bundeling dom utils

.changeset/cozy-shrimps-care.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/form-devtools': patch
+---
+
+Fix to cloudflairs workerd enviroment, solid pulling in dom functions

packages/form-devtools/src/components/DetailsPanel.tsx

@@ -66,25 +66,11 @@ export function DetailsPanel({ selectedKey }: DetailsPanelProps) {
           <div class={styles().detailSection}>
             <div class={styles().detailSectionHeader}>Individual Fields</div>
 
-            <div
-              style={{
-                display: 'flex',
-                'flex-wrap': 'wrap',
-                gap: '8px',
-              }}
-            >
+            <div class={styles().fieldWrapper}>
               <For each={Object.entries(individualFields())}>
                 {([fieldName, fieldData]) => (
-                  <div
-                    class={styles().stateContent}
-                    style={{ 'margin-bottom': '16px' }}
-                  >
-                    <div
-                      style={{
-                        'font-weight': 'bold',
-                        'margin-bottom': '4px',
-                      }}
-                    >
+                  <div class={`${styles().stateContent} ${styles().fieldItem}`}>
+                    <div class={styles().fieldName}>
                       {fieldName}
                     </div>
                     <JsonTree copyable value={fieldData} />

packages/form-devtools/src/components/Shell.tsx

@@ -70,11 +70,7 @@ export function Shell() {
       <div class={styles().mainContainer}>
         <div
           class={styles().leftPanel}
-          style={{
-            width: `${leftPanelWidth()}px`,
-            'min-width': '150px',
-            'max-width': '800px',
-          }}
+          style={`--left-panel-width: ${leftPanelWidth()}px`}
         >
           <UtilList selectedKey={selectedKey} setSelectedKey={setSelectedKey} />
         </div>
@@ -84,7 +80,7 @@ export function Shell() {
           onMouseDown={handleMouseDown}
         />
 
-        <div class={styles().rightPanel} style={{ flex: 1 }}>
+        <div class={styles().rightPanel}>
           <Show when={selectedKey() != null}>
             <div class={styles().panelHeader}>Details</div>
             <DetailsPanel selectedKey={selectedKey as Accessor<string>} />

packages/form-devtools/src/components/StateHeader.tsx

@@ -41,7 +41,7 @@ export function StateHeader(props: StateHeaderProps) {
   return (
     <div class={styles().stateHeader}>
       <div class={styles().stateTitle}>Form state</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}>{state()!.id}</div>

packages/form-devtools/src/styles/use-styles.ts

@@ -65,6 +65,9 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       overflow: hidden;
       min-height: 0;
       flex-shrink: 0;
+      width: var(--left-panel-width, 300px);
+      min-width: 150px;
+      max-width: 800px;
     `,
     rightPanel: css`
       background: ${t(colors.gray[100], colors.darkGray[800])};
@@ -349,6 +352,23 @@ const stylesFactory = (theme: 'light' | 'dark') => {
         box-shadow 0.3s,
         background 0.3s;
     `,
+    fieldWrapper: css`
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    `,
+    fieldItem: css`
+      margin-bottom: 16px;
+    `,
+    fieldName: css`
+      font-weight: bold;
+      margin-bottom: 4px;
+    `,
+    stateHeaderRow: css`
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    `,
   }
 }