@tanstack/devtools 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "goober": "^2.1.16",
     "solid-js": "^1.9.7",
     "@tanstack/devtools-event-bus": "0.3.0",
-    "@tanstack/devtools-ui": "0.3.1"
+    "@tanstack/devtools-ui": "0.3.2"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.7"

package/src/styles/use-styles.ts

@@ -43,7 +43,6 @@ const stylesFactory = () => {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
-      margin: 1.5rem;
       margin-bottom: 2rem;
       border-radius: 0.75rem;
     `,
@@ -407,42 +406,6 @@ const stylesFactory = () => {
       overflow-y: auto;
     `,
 
-    settingsContainer: css`
-      padding: 1.5rem;
-      height: 100%;
-      overflow-y: auto;
-      background-color: ${colors.darkGray[700]};
-    `,
-    settingsSection: css`
-      margin-bottom: 2rem;
-      padding: 1.5rem;
-      background-color: ${colors.darkGray[800]};
-      border: 1px solid ${colors.gray[700]};
-      border-radius: 0.75rem;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    `,
-    sectionTitle: css`
-      font-size: 1.125rem;
-      font-weight: 600;
-      color: ${colors.gray[100]};
-      margin: 0 0 1rem 0;
-      padding-bottom: 0.5rem;
-      border-bottom: 1px solid ${colors.gray[700]};
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      text-align: left;
-    `,
-    sectionIcon: css`
-      color: ${colors.purple[400]};
-    `,
-    sectionDescription: css`
-      color: ${colors.gray[400]};
-      font-size: 0.875rem;
-      margin: 0 0 1.5rem 0;
-      line-height: 1.5;
-      text-align: left;
-    `,
     settingsGroup: css`
       display: flex;
       flex-direction: column;

package/src/tabs/seo-tab.tsx

@@ -1,4 +1,11 @@
 import { For, createSignal } from 'solid-js'
+import {
+  MainPanel,
+  Section,
+  SectionDescription,
+  SectionIcon,
+  SectionTitle,
+} from '@tanstack/devtools-ui'
 import { useStyles } from '../styles/use-styles'
 import { useHeadChanges } from '../hooks/use-head-changes'
 
@@ -174,32 +181,33 @@ export const SeoTab = () => {
   })
 
   return (
-    <div class={styles().seoTabContainer}>
-      <section class={styles().seoTabSection}>
-        <h3 class={styles().sectionTitle}>
-          <svg
-            class={styles().sectionIcon}
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="m10 9-3 3 3 3" />
-            <path d="m14 15 3-3-3-3" />
-            <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" />
-          </svg>
+    <MainPanel withPadding>
+      <Section>
+        <SectionTitle>
+          <SectionIcon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="m10 9-3 3 3 3" />
+              <path d="m14 15 3-3-3-3" />
+              <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" />
+            </svg>
+          </SectionIcon>
           Social previews
-        </h3>
-        <p class={styles().sectionDescription}>
+        </SectionTitle>
+        <SectionDescription>
           See how your current page will look when shared on popular social
           networks. The tool checks for essential meta tags and highlights any
           that are missing.
-        </p>
+        </SectionDescription>
         <div class={styles().seoPreviewSection}>
           <For each={reports()}>
             {(report, i) => {
@@ -231,8 +239,7 @@ export const SeoTab = () => {
             }}
           </For>
         </div>
-      </section>
-      {/* Future sections can be added here as <section class={styles().seoTabSection}>...</section> */}
-    </div>
+      </Section>
+    </MainPanel>
   )
 }

package/src/tabs/settings-tab.tsx

@@ -1,5 +1,15 @@
 import { Show, createMemo } from 'solid-js'
-import { Button, Checkbox, Input, Select } from '@tanstack/devtools-ui'
+import {
+  Button,
+  Checkbox,
+  Input,
+  MainPanel,
+  Section,
+  SectionDescription,
+  SectionIcon,
+  SectionTitle,
+  Select,
+} from '@tanstack/devtools-ui'
 import { useDevtoolsSettings } from '../context/use-devtools-context'
 import { uppercaseFirstLetter } from '../utils/sanitize'
 import { useStyles } from '../styles/use-styles'
@@ -27,30 +37,31 @@ export const SettingsTab = () => {
     })
   }
   return (
-    <div class={styles().settingsContainer}>
+    <MainPanel withPadding>
       {/* General Settings */}
-      <div class={styles().settingsSection}>
-        <h3 class={styles().sectionTitle}>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class={styles().sectionIcon}
-          >
-            <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
-            <circle cx="12" cy="12" r="3" />
-          </svg>
+      <Section>
+        <SectionTitle>
+          <SectionIcon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+          </SectionIcon>
           General
-        </h3>
-        <p class={styles().sectionDescription}>
+        </SectionTitle>
+        <SectionDescription>
           Configure general behavior of the devtools panel.
-        </p>
+        </SectionDescription>
         <div class={styles().settingsGroup}>
           <Checkbox
             label="Default open"
@@ -69,32 +80,33 @@ export const SettingsTab = () => {
             checked={settings().hideUntilHover}
           />
         </div>
-      </div>
+      </Section>
 
       {/* URL Flag Settings */}
-      <div class={styles().settingsSection}>
-        <h3 class={styles().sectionTitle}>
-          <svg
-            class={styles().sectionIcon}
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M9 17H7A5 5 0 0 1 7 7h2" />
-            <path d="M15 7h2a5 5 0 1 1 0 10h-2" />
-            <line x1="8" x2="16" y1="12" y2="12" />
-          </svg>
+      <Section>
+        <SectionTitle>
+          <SectionIcon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M9 17H7A5 5 0 0 1 7 7h2" />
+              <path d="M15 7h2a5 5 0 1 1 0 10h-2" />
+              <line x1="8" x2="16" y1="12" y2="12" />
+            </svg>
+          </SectionIcon>
           URL Configuration
-        </h3>
-        <p class={styles().sectionDescription}>
+        </SectionTitle>
+        <SectionDescription>
           Control when devtools are available based on URL parameters.
-        </p>
+        </SectionDescription>
         <div class={styles().settingsGroup}>
           <Checkbox
             label="Require URL Flag"
@@ -122,38 +134,39 @@ export const SettingsTab = () => {
             </div>
           </Show>
         </div>
-      </div>
+      </Section>
 
       {/* Keyboard Settings */}
-      <div class={styles().settingsSection}>
-        <h3 class={styles().sectionTitle}>
-          <svg
-            class={styles().sectionIcon}
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M10 8h.01" />
-            <path d="M12 12h.01" />
-            <path d="M14 8h.01" />
-            <path d="M16 12h.01" />
-            <path d="M18 8h.01" />
-            <path d="M6 8h.01" />
-            <path d="M7 16h10" />
-            <path d="M8 12h.01" />
-            <rect width="20" height="16" x="2" y="4" rx="2" />
-          </svg>
+      <Section>
+        <SectionTitle>
+          <SectionIcon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M10 8h.01" />
+              <path d="M12 12h.01" />
+              <path d="M14 8h.01" />
+              <path d="M16 12h.01" />
+              <path d="M18 8h.01" />
+              <path d="M6 8h.01" />
+              <path d="M7 16h10" />
+              <path d="M8 12h.01" />
+              <rect width="20" height="16" x="2" y="4" rx="2" />
+            </svg>
+          </SectionIcon>
           Keyboard
-        </h3>
-        <p class={styles().sectionDescription}>
+        </SectionTitle>
+        <SectionDescription>
           Customize keyboard shortcuts for quick access.
-        </p>
+        </SectionDescription>
         <div class={styles().settingsGroup}>
           <div class={styles().settingsModifiers}>
             <Show keyed when={hotkey()}>
@@ -220,31 +233,32 @@ export const SettingsTab = () => {
           />
           Final shortcut is: {hotkey().join(' + ')}
         </div>
-      </div>
+      </Section>
 
       {/* Position Settings */}
-      <div class={styles().settingsSection}>
-        <h3 class={styles().sectionTitle}>
-          <svg
-            class={styles().sectionIcon}
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" />
-            <circle cx="12" cy="10" r="3" />
-          </svg>
+      <Section>
+        <SectionTitle>
+          <SectionIcon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" />
+              <circle cx="12" cy="10" r="3" />
+            </svg>
+          </SectionIcon>
           Position
-        </h3>
-        <p class={styles().sectionDescription}>
+        </SectionTitle>
+        <SectionDescription>
           Adjust the position of the trigger button and devtools panel.
-        </p>
+        </SectionDescription>
         <div class={styles().settingsGroup}>
           <div class={styles().settingRow}>
             <Select
@@ -279,7 +293,7 @@ export const SettingsTab = () => {
             />
           </div>
         </div>
-      </div>
-    </div>
+      </Section>
+    </MainPanel>
   )
 }