@tanstack/devtools 0.6.2 → 0.6.5

package/dist/esm/tabs/seo-tab.js

@@ -1,9 +1,10 @@
 import { createComponent, template, insert, memo, effect, className, setAttribute } from "solid-js/web";
 import { createSignal, For } from "solid-js";
 import { MainPanel, Section, SectionTitle, SectionIcon, SectionDescription } from "@tanstack/devtools-ui";
+import { SocialBubble } from "@tanstack/devtools-ui/icons";
 import { useStyles } from "../styles/use-styles.js";
 import { useHeadChanges } from "../hooks/use-head-changes.js";
-var _tmpl$ = /* @__PURE__ */ template(`<div><div> Preview</div><div></div><div></div><div>`), _tmpl$2 = /* @__PURE__ */ template(`<img alt=Preview>`), _tmpl$3 = /* @__PURE__ */ template(`<div>No Image`), _tmpl$4 = /* @__PURE__ */ template(`<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><path d="m14 15 3-3-3-3"></path><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">`), _tmpl$5 = /* @__PURE__ */ template(`<div>`), _tmpl$6 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`), _tmpl$7 = /* @__PURE__ */ template(`<li>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div><div> Preview</div><div></div><div></div><div>`), _tmpl$2 = /* @__PURE__ */ template(`<img alt=Preview>`), _tmpl$3 = /* @__PURE__ */ template(`<div>No Image`), _tmpl$4 = /* @__PURE__ */ template(`<div>`), _tmpl$5 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`), _tmpl$6 = /* @__PURE__ */ template(`<li>`);
 const SOCIALS = [
   {
     network: "Facebook",
@@ -220,23 +221,23 @@ const SeoTab = () => {
             get children() {
               return [createComponent(SectionIcon, {
                 get children() {
-                  return _tmpl$4();
+                  return createComponent(SocialBubble, {});
                 }
               }), "Social previews"];
             }
           }), createComponent(SectionDescription, {
             children: "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."
           }), (() => {
-            var _el$0 = _tmpl$5();
-            insert(_el$0, createComponent(For, {
+            var _el$9 = _tmpl$4();
+            insert(_el$9, createComponent(For, {
               get each() {
                 return reports();
               },
               children: (report, i) => {
                 const social = SOCIALS[i()];
                 return (() => {
-                  var _el$1 = _tmpl$5();
-                  insert(_el$1, createComponent(SocialPreview, {
+                  var _el$0 = _tmpl$4();
+                  insert(_el$0, createComponent(SocialPreview, {
                     get meta() {
                       return report.found;
                     },
@@ -247,42 +248,42 @@ const SeoTab = () => {
                       return social.network;
                     }
                   }), null);
-                  insert(_el$1, (() => {
+                  insert(_el$0, (() => {
                     var _c$2 = memo(() => report.missing.length > 0);
                     return () => _c$2() ? (() => {
-                      var _el$10 = _tmpl$6(), _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$14 = _el$12.nextSibling;
-                      _el$14.nextSibling;
-                      var _el$15 = _el$11.nextSibling;
-                      insert(_el$11, () => social?.network, _el$14);
-                      insert(_el$15, createComponent(For, {
+                      var _el$1 = _tmpl$5(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$13 = _el$11.nextSibling;
+                      _el$13.nextSibling;
+                      var _el$14 = _el$10.nextSibling;
+                      insert(_el$10, () => social?.network, _el$13);
+                      insert(_el$14, createComponent(For, {
                         get each() {
                           return report.missing;
                         },
                         children: (tag) => (() => {
-                          var _el$16 = _tmpl$7();
-                          insert(_el$16, tag);
-                          effect(() => className(_el$16, styles().seoMissingTag));
-                          return _el$16;
+                          var _el$15 = _tmpl$6();
+                          insert(_el$15, tag);
+                          effect(() => className(_el$15, styles().seoMissingTag));
+                          return _el$15;
                         })()
                       }));
                       effect((_p$) => {
                         var _v$0 = styles().seoMissingTagsSection, _v$1 = styles().seoMissingTagsList;
-                        _v$0 !== _p$.e && className(_el$10, _p$.e = _v$0);
-                        _v$1 !== _p$.t && className(_el$15, _p$.t = _v$1);
+                        _v$0 !== _p$.e && className(_el$1, _p$.e = _v$0);
+                        _v$1 !== _p$.t && className(_el$14, _p$.t = _v$1);
                         return _p$;
                       }, {
                         e: void 0,
                         t: void 0
                       });
-                      return _el$10;
+                      return _el$1;
                     })() : null;
                   })(), null);
-                  return _el$1;
+                  return _el$0;
                 })();
               }
             }));
-            effect(() => className(_el$0, styles().seoPreviewSection));
-            return _el$0;
+            effect(() => className(_el$9, styles().seoPreviewSection));
+            return _el$9;
           })()];
         }
       });

package/dist/esm/tabs/seo-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"seo-tab.js","sources":["../../../src/tabs/seo-tab.tsx"],"sourcesContent":["import { For, createSignal } from 'solid-js'\nimport {\n  MainPanel,\n  Section,\n  SectionDescription,\n  SectionIcon,\n  SectionTitle,\n} from '@tanstack/devtools-ui'\nimport { useStyles } from '../styles/use-styles'\nimport { useHeadChanges } from '../hooks/use-head-changes'\n\ntype SocialMeta = {\n  title?: string\n  description?: string\n  image?: string\n  url?: string\n}\n\ntype SocialReport = {\n  network: string\n  found: Partial<SocialMeta>\n  missing: Array<string>\n}\n\nconst SOCIALS = [\n  {\n    network: 'Facebook',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#4267B2',\n  },\n  {\n    network: 'X/Twitter',\n    tags: [\n      { key: 'twitter:title', prop: 'title' },\n      { key: 'twitter:description', prop: 'description' },\n      { key: 'twitter:image', prop: 'image' },\n      { key: 'twitter:url', prop: 'url' },\n    ],\n    color: '#1DA1F2',\n  },\n  {\n    network: 'LinkedIn',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#0077B5',\n  },\n  {\n    network: 'Discord',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#5865F2',\n  },\n  {\n    network: 'Slack',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#4A154B',\n  },\n  {\n    network: 'Mastodon',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#6364FF',\n  },\n  {\n    network: 'Bluesky',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#1185FE',\n  },\n  // Add more networks as needed\n]\nfunction SocialPreview(props: {\n  meta: SocialMeta\n  color: string\n  network: string\n}) {\n  const styles = useStyles()\n\n  return (\n    <div\n      class={styles().seoPreviewCard}\n      style={{ 'border-color': props.color }}\n    >\n      <div class={styles().seoPreviewHeader} style={{ color: props.color }}>\n        {props.network} Preview\n      </div>\n      {props.meta.image ? (\n        <img\n          src={props.meta.image}\n          alt=\"Preview\"\n          class={styles().seoPreviewImage}\n        />\n      ) : (\n        <div\n          class={styles().seoPreviewImage}\n          style={{\n            background: '#222',\n            color: '#888',\n            display: 'flex',\n            'align-items': 'center',\n            'justify-content': 'center',\n            'min-height': '80px',\n            width: '100%',\n          }}\n        >\n          No Image\n        </div>\n      )}\n      <div class={styles().seoPreviewTitle}>\n        {props.meta.title || 'No Title'}\n      </div>\n      <div class={styles().seoPreviewDesc}>\n        {props.meta.description || 'No Description'}\n      </div>\n      <div class={styles().seoPreviewUrl}>\n        {props.meta.url || window.location.href}\n      </div>\n    </div>\n  )\n}\nexport const SeoTab = () => {\n  const [reports, setReports] = createSignal<Array<SocialReport>>(analyzeHead())\n  const styles = useStyles()\n\n  function analyzeHead(): Array<SocialReport> {\n    const metaTags = Array.from(document.head.querySelectorAll('meta'))\n    const reports: Array<SocialReport> = []\n\n    for (const social of SOCIALS) {\n      const found: Partial<SocialMeta> = {}\n      const missing: Array<string> = []\n      for (const tag of social.tags) {\n        const meta = metaTags.find(\n          (m) =>\n            (tag.key.includes('twitter:')\n              ? false\n              : m.getAttribute('property') === tag.key) ||\n            m.getAttribute('name') === tag.key,\n        )\n\n        if (meta && meta.getAttribute('content')) {\n          found[tag.prop as keyof SocialMeta] =\n            meta.getAttribute('content') || undefined\n        } else {\n          missing.push(tag.key)\n        }\n      }\n      reports.push({ network: social.network, found, missing })\n    }\n    return reports\n  }\n\n  useHeadChanges(() => {\n    setReports(analyzeHead())\n  })\n\n  return (\n    <MainPanel withPadding>\n      <Section>\n        <SectionTitle>\n          <SectionIcon>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"m10 9-3 3 3 3\" />\n              <path d=\"m14 15 3-3-3-3\" />\n              <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\" />\n            </svg>\n          </SectionIcon>\n          Social previews\n        </SectionTitle>\n        <SectionDescription>\n          See how your current page will look when shared on popular social\n          networks. The tool checks for essential meta tags and highlights any\n          that are missing.\n        </SectionDescription>\n        <div class={styles().seoPreviewSection}>\n          <For each={reports()}>\n            {(report, i) => {\n              const social = SOCIALS[i()]\n              return (\n                <div>\n                  <SocialPreview\n                    meta={report.found}\n                    color={social!.color}\n                    network={social!.network}\n                  />\n                  {report.missing.length > 0 ? (\n                    <>\n                      <div class={styles().seoMissingTagsSection}>\n                        <strong>Missing tags for {social?.network}:</strong>\n\n                        <ul class={styles().seoMissingTagsList}>\n                          <For each={report.missing}>\n                            {(tag) => (\n                              <li class={styles().seoMissingTag}>{tag}</li>\n                            )}\n                          </For>\n                        </ul>\n                      </div>\n                    </>\n                  ) : null}\n                </div>\n              )\n            }}\n          </For>\n        </div>\n      </Section>\n    </MainPanel>\n  )\n}\n"],"names":["SOCIALS","network","tags","key","prop","color","SocialPreview","props","styles","useStyles","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$insert","_c$","_$memo","meta","image","_el$7","_tmpl$2","_$effect","_p$","_v$8","_v$9","seoPreviewImage","e","_$setAttribute","t","_$className","undefined","_el$8","_tmpl$3","style","setProperty","title","description","url","window","location","href","_v$","seoPreviewCard","_v$2","_v$3","seoPreviewHeader","_v$4","_v$5","seoPreviewTitle","_v$6","seoPreviewDesc","_v$7","seoPreviewUrl","removeProperty","a","o","i","n","s","SeoTab","reports","setReports","createSignal","analyzeHead","metaTags","Array","from","document","head","querySelectorAll","social","found","missing","tag","find","m","includes","getAttribute","push","useHeadChanges","_$createComponent","MainPanel","withPadding","children","Section","SectionTitle","SectionIcon","_tmpl$4","SectionDescription","_el$0","_tmpl$5","For","each","report","_el$1","_c$2","length","_el$10","_tmpl$6","_el$11","_el$12","_el$14","_el$15","_el$16","_tmpl$7","seoMissingTag","_v$0","seoMissingTagsSection","_v$1","seoMissingTagsList","seoPreviewSection"],"mappings":"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"}
+{"version":3,"file":"seo-tab.js","sources":["../../../src/tabs/seo-tab.tsx"],"sourcesContent":["import { For, createSignal } from 'solid-js'\nimport {\n  MainPanel,\n  Section,\n  SectionDescription,\n  SectionIcon,\n  SectionTitle,\n} from '@tanstack/devtools-ui'\nimport { SocialBubble } from '@tanstack/devtools-ui/icons'\nimport { useStyles } from '../styles/use-styles'\nimport { useHeadChanges } from '../hooks/use-head-changes'\n\ntype SocialMeta = {\n  title?: string\n  description?: string\n  image?: string\n  url?: string\n}\n\ntype SocialReport = {\n  network: string\n  found: Partial<SocialMeta>\n  missing: Array<string>\n}\n\nconst SOCIALS = [\n  {\n    network: 'Facebook',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#4267B2',\n  },\n  {\n    network: 'X/Twitter',\n    tags: [\n      { key: 'twitter:title', prop: 'title' },\n      { key: 'twitter:description', prop: 'description' },\n      { key: 'twitter:image', prop: 'image' },\n      { key: 'twitter:url', prop: 'url' },\n    ],\n    color: '#1DA1F2',\n  },\n  {\n    network: 'LinkedIn',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#0077B5',\n  },\n  {\n    network: 'Discord',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#5865F2',\n  },\n  {\n    network: 'Slack',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#4A154B',\n  },\n  {\n    network: 'Mastodon',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#6364FF',\n  },\n  {\n    network: 'Bluesky',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#1185FE',\n  },\n  // Add more networks as needed\n]\nfunction SocialPreview(props: {\n  meta: SocialMeta\n  color: string\n  network: string\n}) {\n  const styles = useStyles()\n\n  return (\n    <div\n      class={styles().seoPreviewCard}\n      style={{ 'border-color': props.color }}\n    >\n      <div class={styles().seoPreviewHeader} style={{ color: props.color }}>\n        {props.network} Preview\n      </div>\n      {props.meta.image ? (\n        <img\n          src={props.meta.image}\n          alt=\"Preview\"\n          class={styles().seoPreviewImage}\n        />\n      ) : (\n        <div\n          class={styles().seoPreviewImage}\n          style={{\n            background: '#222',\n            color: '#888',\n            display: 'flex',\n            'align-items': 'center',\n            'justify-content': 'center',\n            'min-height': '80px',\n            width: '100%',\n          }}\n        >\n          No Image\n        </div>\n      )}\n      <div class={styles().seoPreviewTitle}>\n        {props.meta.title || 'No Title'}\n      </div>\n      <div class={styles().seoPreviewDesc}>\n        {props.meta.description || 'No Description'}\n      </div>\n      <div class={styles().seoPreviewUrl}>\n        {props.meta.url || window.location.href}\n      </div>\n    </div>\n  )\n}\nexport const SeoTab = () => {\n  const [reports, setReports] = createSignal<Array<SocialReport>>(analyzeHead())\n  const styles = useStyles()\n\n  function analyzeHead(): Array<SocialReport> {\n    const metaTags = Array.from(document.head.querySelectorAll('meta'))\n    const reports: Array<SocialReport> = []\n\n    for (const social of SOCIALS) {\n      const found: Partial<SocialMeta> = {}\n      const missing: Array<string> = []\n      for (const tag of social.tags) {\n        const meta = metaTags.find(\n          (m) =>\n            (tag.key.includes('twitter:')\n              ? false\n              : m.getAttribute('property') === tag.key) ||\n            m.getAttribute('name') === tag.key,\n        )\n\n        if (meta && meta.getAttribute('content')) {\n          found[tag.prop as keyof SocialMeta] =\n            meta.getAttribute('content') || undefined\n        } else {\n          missing.push(tag.key)\n        }\n      }\n      reports.push({ network: social.network, found, missing })\n    }\n    return reports\n  }\n\n  useHeadChanges(() => {\n    setReports(analyzeHead())\n  })\n\n  return (\n    <MainPanel withPadding>\n      <Section>\n        <SectionTitle>\n          <SectionIcon>\n            <SocialBubble />\n          </SectionIcon>\n          Social previews\n        </SectionTitle>\n        <SectionDescription>\n          See how your current page will look when shared on popular social\n          networks. The tool checks for essential meta tags and highlights any\n          that are missing.\n        </SectionDescription>\n        <div class={styles().seoPreviewSection}>\n          <For each={reports()}>\n            {(report, i) => {\n              const social = SOCIALS[i()]\n              return (\n                <div>\n                  <SocialPreview\n                    meta={report.found}\n                    color={social!.color}\n                    network={social!.network}\n                  />\n                  {report.missing.length > 0 ? (\n                    <>\n                      <div class={styles().seoMissingTagsSection}>\n                        <strong>Missing tags for {social?.network}:</strong>\n\n                        <ul class={styles().seoMissingTagsList}>\n                          <For each={report.missing}>\n                            {(tag) => (\n                              <li class={styles().seoMissingTag}>{tag}</li>\n                            )}\n                          </For>\n                        </ul>\n                      </div>\n                    </>\n                  ) : null}\n                </div>\n              )\n            }}\n          </For>\n        </div>\n      </Section>\n    </MainPanel>\n  )\n}\n"],"names":["SOCIALS","network","tags","key","prop","color","SocialPreview","props","styles","useStyles","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$insert","_c$","_$memo","meta","image","_el$7","_tmpl$2","_$effect","_p$","_v$8","_v$9","seoPreviewImage","e","_$setAttribute","t","_$className","undefined","_el$8","_tmpl$3","style","setProperty","title","description","url","window","location","href","_v$","seoPreviewCard","_v$2","_v$3","seoPreviewHeader","_v$4","_v$5","seoPreviewTitle","_v$6","seoPreviewDesc","_v$7","seoPreviewUrl","removeProperty","a","o","i","n","s","SeoTab","reports","setReports","createSignal","analyzeHead","metaTags","Array","from","document","head","querySelectorAll","social","found","missing","tag","find","m","includes","getAttribute","push","useHeadChanges","_$createComponent","MainPanel","withPadding","children","Section","SectionTitle","SectionIcon","SocialBubble","SectionDescription","_el$9","_tmpl$4","For","each","report","_el$0","_c$2","length","_el$1","_tmpl$5","_el$10","_el$11","_el$13","_el$14","_el$15","_tmpl$6","seoMissingTag","_v$0","seoMissingTagsSection","_v$1","seoMissingTagsList","seoPreviewSection"],"mappings":"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"}

package/dist/esm/tabs/settings-tab.js

@@ -1,10 +1,11 @@
 import { createComponent, template, insert, effect, className } from "solid-js/web";
 import { createMemo, Show } from "solid-js";
-import { MainPanel, Section, SectionTitle, SectionIcon, SectionDescription, Checkbox, Input, Button, Select } from "@tanstack/devtools-ui";
+import { MainPanel, Section, SectionTitle, SectionIcon, SectionDescription, Checkbox, Select, Input, Button } from "@tanstack/devtools-ui";
+import { SettingsCog, Link, Keyboard, GeoTag } from "@tanstack/devtools-ui/icons";
 import { useDevtoolsSettings } from "../context/use-devtools-context.js";
 import { uppercaseFirstLetter } from "../utils/sanitize.js";
 import { useStyles } from "../styles/use-styles.js";
-var _tmpl$ = /* @__PURE__ */ template(`<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"></path><circle cx=12 cy=12 r=3>`), _tmpl$2 = /* @__PURE__ */ template(`<div>`), _tmpl$3 = /* @__PURE__ */ template(`<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><path d="M15 7h2a5 5 0 1 1 0 10h-2"></path><line x1=8 x2=16 y1=12 y2=12>`), _tmpl$4 = /* @__PURE__ */ template(`<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><path d="M12 12h.01"></path><path d="M14 8h.01"></path><path d="M16 12h.01"></path><path d="M18 8h.01"></path><path d="M6 8h.01"></path><path d="M7 16h10"></path><path d="M8 12h.01"></path><rect width=20 height=16 x=2 y=4 rx=2>`), _tmpl$5 = /* @__PURE__ */ template(`<div><div></div>Final shortcut is: `), _tmpl$6 = /* @__PURE__ */ template(`<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"></path><circle cx=12 cy=10 r=3>`), _tmpl$7 = /* @__PURE__ */ template(`<div><div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div><div></div>Final shortcut is: `), _tmpl$3 = /* @__PURE__ */ template(`<div><div>`);
 const SettingsTab = () => {
   const {
     setSettings,
@@ -34,15 +35,15 @@ const SettingsTab = () => {
             get children() {
               return [createComponent(SectionIcon, {
                 get children() {
-                  return _tmpl$();
+                  return createComponent(SettingsCog, {});
                 }
               }), "General"];
             }
           }), createComponent(SectionDescription, {
             children: "Configure general behavior of the devtools panel."
           }), (() => {
-            var _el$2 = _tmpl$2();
-            insert(_el$2, createComponent(Checkbox, {
+            var _el$ = _tmpl$();
+            insert(_el$, createComponent(Checkbox, {
               label: "Default open",
               description: "Automatically open the devtools panel when the page loads",
               onChange: () => setSettings({
@@ -52,7 +53,7 @@ const SettingsTab = () => {
                 return settings().defaultOpen;
               }
             }), null);
-            insert(_el$2, createComponent(Checkbox, {
+            insert(_el$, createComponent(Checkbox, {
               label: "Hide trigger until hovered",
               description: "Keep the devtools trigger button hidden until you hover over its area",
               onChange: () => setSettings({
@@ -62,8 +63,25 @@ const SettingsTab = () => {
                 return settings().hideUntilHover;
               }
             }), null);
-            effect(() => className(_el$2, styles().settingsGroup));
-            return _el$2;
+            insert(_el$, createComponent(Select, {
+              label: "Theme",
+              description: "Choose the theme for the devtools panel",
+              get value() {
+                return settings().theme;
+              },
+              options: [{
+                label: "Dark",
+                value: "dark"
+              }, {
+                label: "Light",
+                value: "light"
+              }],
+              onChange: (value) => setSettings({
+                theme: value
+              })
+            }), null);
+            effect(() => className(_el$, styles().settingsGroup));
+            return _el$;
           })()];
         }
       }), createComponent(Section, {
@@ -72,15 +90,15 @@ const SettingsTab = () => {
             get children() {
               return [createComponent(SectionIcon, {
                 get children() {
-                  return _tmpl$3();
+                  return createComponent(Link, {});
                 }
               }), "URL Configuration"];
             }
           }), createComponent(SectionDescription, {
             children: "Control when devtools are available based on URL parameters."
           }), (() => {
-            var _el$4 = _tmpl$2();
-            insert(_el$4, createComponent(Checkbox, {
+            var _el$2 = _tmpl$();
+            insert(_el$2, createComponent(Checkbox, {
               label: "Require URL Flag",
               description: "Only show devtools when a specific URL parameter is present",
               get checked() {
@@ -90,13 +108,13 @@ const SettingsTab = () => {
                 requireUrlFlag: checked
               })
             }), null);
-            insert(_el$4, createComponent(Show, {
+            insert(_el$2, createComponent(Show, {
               get when() {
                 return settings().requireUrlFlag;
               },
               get children() {
-                var _el$5 = _tmpl$2();
-                insert(_el$5, createComponent(Input, {
+                var _el$3 = _tmpl$();
+                insert(_el$3, createComponent(Input, {
                   label: "URL flag",
                   description: "Enter the URL parameter name (e.g., 'debug' for ?debug=true)",
                   placeholder: "debug",
@@ -107,12 +125,12 @@ const SettingsTab = () => {
                     urlFlag: e
                   })
                 }));
-                effect(() => className(_el$5, styles().conditionalSetting));
-                return _el$5;
+                effect(() => className(_el$3, styles().conditionalSetting));
+                return _el$3;
               }
             }), null);
-            effect(() => className(_el$4, styles().settingsGroup));
-            return _el$4;
+            effect(() => className(_el$2, styles().settingsGroup));
+            return _el$2;
           })()];
         }
       }), createComponent(Section, {
@@ -121,15 +139,15 @@ const SettingsTab = () => {
             get children() {
               return [createComponent(SectionIcon, {
                 get children() {
-                  return _tmpl$4();
+                  return createComponent(Keyboard, {});
                 }
               }), "Keyboard"];
             }
           }), createComponent(SectionDescription, {
             children: "Customize keyboard shortcuts for quick access."
           }), (() => {
-            var _el$7 = _tmpl$5(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
-            insert(_el$8, createComponent(Show, {
+            var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
+            insert(_el$5, createComponent(Show, {
               keyed: true,
               get when() {
                 return hotkey();
@@ -174,7 +192,7 @@ const SettingsTab = () => {
                 })];
               }
             }));
-            insert(_el$7, createComponent(Input, {
+            insert(_el$4, createComponent(Input, {
               label: "Hotkey to open/close devtools",
               description: "Use '+' to combine keys (e.g., 'a+b' or 'd'). This will be used with the enabled modifiers from above",
               placeholder: "a",
@@ -196,18 +214,18 @@ const SettingsTab = () => {
                   openHotkey: [...hotkey().filter((key) => ["Shift", "Meta", "Alt", "Ctrl"].includes(key)), ...modifiers2]
                 });
               }
-            }), _el$9);
-            insert(_el$7, () => hotkey().join(" + "), null);
+            }), _el$6);
+            insert(_el$4, () => hotkey().join(" + "), null);
             effect((_p$) => {
               var _v$ = styles().settingsGroup, _v$2 = styles().settingsModifiers;
-              _v$ !== _p$.e && className(_el$7, _p$.e = _v$);
-              _v$2 !== _p$.t && className(_el$8, _p$.t = _v$2);
+              _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
+              _v$2 !== _p$.t && className(_el$5, _p$.t = _v$2);
               return _p$;
             }, {
               e: void 0,
               t: void 0
             });
-            return _el$7;
+            return _el$4;
           })()];
         }
       }), createComponent(Section, {
@@ -216,15 +234,15 @@ const SettingsTab = () => {
             get children() {
               return [createComponent(SectionIcon, {
                 get children() {
-                  return _tmpl$6();
+                  return createComponent(GeoTag, {});
                 }
               }), "Position"];
             }
           }), createComponent(SectionDescription, {
             children: "Adjust the position of the trigger button and devtools panel."
           }), (() => {
-            var _el$1 = _tmpl$7(), _el$10 = _el$1.firstChild;
-            insert(_el$10, createComponent(Select, {
+            var _el$7 = _tmpl$3(), _el$8 = _el$7.firstChild;
+            insert(_el$8, createComponent(Select, {
               label: "Trigger Position",
               options: [{
                 label: "Bottom Right",
@@ -252,7 +270,7 @@ const SettingsTab = () => {
                 position: value
               })
             }), null);
-            insert(_el$10, createComponent(Select, {
+            insert(_el$8, createComponent(Select, {
               label: "Panel Position",
               get value() {
                 return settings().panelLocation;
@@ -270,14 +288,14 @@ const SettingsTab = () => {
             }), null);
             effect((_p$) => {
               var _v$3 = styles().settingsGroup, _v$4 = styles().settingRow;
-              _v$3 !== _p$.e && className(_el$1, _p$.e = _v$3);
-              _v$4 !== _p$.t && className(_el$10, _p$.t = _v$4);
+              _v$3 !== _p$.e && className(_el$7, _p$.e = _v$3);
+              _v$4 !== _p$.t && className(_el$8, _p$.t = _v$4);
               return _p$;
             }, {
               e: void 0,
               t: void 0
             });
-            return _el$1;
+            return _el$7;
           })()];
         }
       })];

package/dist/esm/tabs/settings-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-tab.js","sources":["../../../src/tabs/settings-tab.tsx"],"sourcesContent":["import { Show, createMemo } from 'solid-js'\nimport {\n  Button,\n  Checkbox,\n  Input,\n  MainPanel,\n  Section,\n  SectionDescription,\n  SectionIcon,\n  SectionTitle,\n  Select,\n} from '@tanstack/devtools-ui'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { uppercaseFirstLetter } from '../utils/sanitize'\nimport { useStyles } from '../styles/use-styles'\nimport type { ModifierKey } from '@solid-primitives/keyboard'\n\nexport const SettingsTab = () => {\n  const { setSettings, settings } = useDevtoolsSettings()\n  const styles = useStyles()\n  const hotkey = createMemo(() => settings().openHotkey)\n  const modifiers: Array<ModifierKey> = ['Control', 'Alt', 'Meta', 'Shift']\n  const changeHotkey = (newHotkey: ModifierKey) => () => {\n    if (hotkey().includes(newHotkey)) {\n      return setSettings({\n        openHotkey: hotkey().filter((key) => key !== newHotkey),\n      })\n    }\n    const existingModifiers = hotkey().filter((key) =>\n      modifiers.includes(key as any),\n    )\n    const otherModifiers = hotkey().filter(\n      (key) => !modifiers.includes(key as any),\n    )\n    setSettings({\n      openHotkey: [...existingModifiers, newHotkey, ...otherModifiers],\n    })\n  }\n  return (\n    <MainPanel withPadding>\n      {/* General Settings */}\n      <Section>\n        <SectionTitle>\n          <SectionIcon>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <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\" />\n              <circle cx=\"12\" cy=\"12\" r=\"3\" />\n            </svg>\n          </SectionIcon>\n          General\n        </SectionTitle>\n        <SectionDescription>\n          Configure general behavior of the devtools panel.\n        </SectionDescription>\n        <div class={styles().settingsGroup}>\n          <Checkbox\n            label=\"Default open\"\n            description=\"Automatically open the devtools panel when the page loads\"\n            onChange={() =>\n              setSettings({ defaultOpen: !settings().defaultOpen })\n            }\n            checked={settings().defaultOpen}\n          />\n          <Checkbox\n            label=\"Hide trigger until hovered\"\n            description=\"Keep the devtools trigger button hidden until you hover over its area\"\n            onChange={() =>\n              setSettings({ hideUntilHover: !settings().hideUntilHover })\n            }\n            checked={settings().hideUntilHover}\n          />\n        </div>\n      </Section>\n\n      {/* URL Flag Settings */}\n      <Section>\n        <SectionTitle>\n          <SectionIcon>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M9 17H7A5 5 0 0 1 7 7h2\" />\n              <path d=\"M15 7h2a5 5 0 1 1 0 10h-2\" />\n              <line x1=\"8\" x2=\"16\" y1=\"12\" y2=\"12\" />\n            </svg>\n          </SectionIcon>\n          URL Configuration\n        </SectionTitle>\n        <SectionDescription>\n          Control when devtools are available based on URL parameters.\n        </SectionDescription>\n        <div class={styles().settingsGroup}>\n          <Checkbox\n            label=\"Require URL Flag\"\n            description=\"Only show devtools when a specific URL parameter is present\"\n            checked={settings().requireUrlFlag}\n            onChange={(checked) =>\n              setSettings({\n                requireUrlFlag: checked,\n              })\n            }\n          />\n          <Show when={settings().requireUrlFlag}>\n            <div class={styles().conditionalSetting}>\n              <Input\n                label=\"URL flag\"\n                description=\"Enter the URL parameter name (e.g., 'debug' for ?debug=true)\"\n                placeholder=\"debug\"\n                value={settings().urlFlag}\n                onChange={(e) =>\n                  setSettings({\n                    urlFlag: e,\n                  })\n                }\n              />\n            </div>\n          </Show>\n        </div>\n      </Section>\n\n      {/* Keyboard Settings */}\n      <Section>\n        <SectionTitle>\n          <SectionIcon>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M10 8h.01\" />\n              <path d=\"M12 12h.01\" />\n              <path d=\"M14 8h.01\" />\n              <path d=\"M16 12h.01\" />\n              <path d=\"M18 8h.01\" />\n              <path d=\"M6 8h.01\" />\n              <path d=\"M7 16h10\" />\n              <path d=\"M8 12h.01\" />\n              <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\" />\n            </svg>\n          </SectionIcon>\n          Keyboard\n        </SectionTitle>\n        <SectionDescription>\n          Customize keyboard shortcuts for quick access.\n        </SectionDescription>\n        <div class={styles().settingsGroup}>\n          <div class={styles().settingsModifiers}>\n            <Show keyed when={hotkey()}>\n              <Button\n                variant=\"success\"\n                onclick={changeHotkey('Shift')}\n                outline={!hotkey().includes('Shift')}\n              >\n                Shift\n              </Button>\n              <Button\n                variant=\"success\"\n                onclick={changeHotkey('Alt')}\n                outline={!hotkey().includes('Alt')}\n              >\n                Alt\n              </Button>\n              <Button\n                variant=\"success\"\n                onclick={changeHotkey('Meta')}\n                outline={!hotkey().includes('Meta')}\n              >\n                Meta\n              </Button>\n              <Button\n                variant=\"success\"\n                onclick={changeHotkey('Control')}\n                outline={!hotkey().includes('Control')}\n              >\n                Control\n              </Button>\n            </Show>\n          </div>\n          <Input\n            label=\"Hotkey to open/close devtools\"\n            description=\"Use '+' to combine keys (e.g., 'a+b' or 'd'). This will be used with the enabled modifiers from above\"\n            placeholder=\"a\"\n            value={hotkey()\n              .filter((key) => !['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key))\n              .join('+')}\n            onChange={(e) => {\n              const makeModifierArray = (key: string) => {\n                if (key.length === 1) return [uppercaseFirstLetter(key)]\n                const modifiers: Array<string> = []\n                for (const character of key) {\n                  const newLetter = uppercaseFirstLetter(character)\n                  if (!modifiers.includes(newLetter)) modifiers.push(newLetter)\n                }\n                return modifiers\n              }\n              const modifiers = e\n                .split('+')\n                .flatMap((key) => makeModifierArray(key))\n                .filter(Boolean)\n              return setSettings({\n                openHotkey: [\n                  ...hotkey().filter((key) =>\n                    ['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key),\n                  ),\n                  ...modifiers,\n                ],\n              })\n            }}\n          />\n          Final shortcut is: {hotkey().join(' + ')}\n        </div>\n      </Section>\n\n      {/* Position Settings */}\n      <Section>\n        <SectionTitle>\n          <SectionIcon>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <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\" />\n              <circle cx=\"12\" cy=\"10\" r=\"3\" />\n            </svg>\n          </SectionIcon>\n          Position\n        </SectionTitle>\n        <SectionDescription>\n          Adjust the position of the trigger button and devtools panel.\n        </SectionDescription>\n        <div class={styles().settingsGroup}>\n          <div class={styles().settingRow}>\n            <Select\n              label=\"Trigger Position\"\n              options={[\n                { label: 'Bottom Right', value: 'bottom-right' },\n                { label: 'Bottom Left', value: 'bottom-left' },\n                { label: 'Top Right', value: 'top-right' },\n                { label: 'Top Left', value: 'top-left' },\n                { label: 'Middle Right', value: 'middle-right' },\n                { label: 'Middle Left', value: 'middle-left' },\n              ]}\n              value={settings().position}\n              onChange={(value) =>\n                setSettings({\n                  position: value,\n                })\n              }\n            />\n            <Select\n              label=\"Panel Position\"\n              value={settings().panelLocation}\n              options={[\n                { label: 'Top', value: 'top' },\n                { label: 'Bottom', value: 'bottom' },\n              ]}\n              onChange={(value) =>\n                setSettings({\n                  panelLocation: value,\n                })\n              }\n            />\n          </div>\n        </div>\n      </Section>\n    </MainPanel>\n  )\n}\n"],"names":["SettingsTab","setSettings","settings","useDevtoolsSettings","styles","useStyles","hotkey","createMemo","openHotkey","modifiers","changeHotkey","newHotkey","includes","filter","key","existingModifiers","otherModifiers","_$createComponent","MainPanel","withPadding","children","Section","SectionTitle","SectionIcon","_tmpl$","SectionDescription","_el$2","_tmpl$2","_$insert","Checkbox","label","description","onChange","defaultOpen","checked","hideUntilHover","_$effect","_$className","settingsGroup","_tmpl$3","_el$4","requireUrlFlag","Show","when","_el$5","Input","placeholder","value","urlFlag","e","conditionalSetting","_tmpl$4","_el$7","_tmpl$5","_el$8","firstChild","_el$9","nextSibling","keyed","Button","variant","onclick","outline","join","makeModifierArray","length","uppercaseFirstLetter","character","newLetter","push","split","flatMap","Boolean","_p$","_v$","_v$2","settingsModifiers","t","undefined","_tmpl$6","_el$1","_tmpl$7","_el$10","Select","options","position","panelLocation","_v$3","_v$4","settingRow"],"mappings":"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"}
+{"version":3,"file":"settings-tab.js","sources":["../../../src/tabs/settings-tab.tsx"],"sourcesContent":["import { Show, createMemo } from 'solid-js'\nimport {\n  Button,\n  Checkbox,\n  Input,\n  MainPanel,\n  Section,\n  SectionDescription,\n  SectionIcon,\n  SectionTitle,\n  Select,\n} from '@tanstack/devtools-ui'\nimport {\n  GeoTag,\n  Keyboard,\n  Link,\n  SettingsCog,\n} from '@tanstack/devtools-ui/icons'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { uppercaseFirstLetter } from '../utils/sanitize'\nimport { useStyles } from '../styles/use-styles'\nimport type { ModifierKey } from '@solid-primitives/keyboard'\n\nexport const SettingsTab = () => {\n  const { setSettings, settings } = useDevtoolsSettings()\n  const styles = useStyles()\n  const hotkey = createMemo(() => settings().openHotkey)\n  const modifiers: Array<ModifierKey> = ['Control', 'Alt', 'Meta', 'Shift']\n  const changeHotkey = (newHotkey: ModifierKey) => () => {\n    if (hotkey().includes(newHotkey)) {\n      return setSettings({\n        openHotkey: hotkey().filter((key) => key !== newHotkey),\n      })\n    }\n    const existingModifiers = hotkey().filter((key) =>\n      modifiers.includes(key as any),\n    )\n    const otherModifiers = hotkey().filter(\n      (key) => !modifiers.includes(key as any),\n    )\n    setSettings({\n      openHotkey: [...existingModifiers, newHotkey, ...otherModifiers],\n    })\n  }\n  return (\n    <MainPanel withPadding>\n      <Section>\n        <SectionTitle>\n          <SectionIcon>\n            <SettingsCog />\n          </SectionIcon>\n          General\n        </SectionTitle>\n        <SectionDescription>\n          Configure general behavior of the devtools panel.\n        </SectionDescription>\n        <div class={styles().settingsGroup}>\n          <Checkbox\n            label=\"Default open\"\n            description=\"Automatically open the devtools panel when the page loads\"\n            onChange={() =>\n              setSettings({ defaultOpen: !settings().defaultOpen })\n            }\n            checked={settings().defaultOpen}\n          />\n          <Checkbox\n            label=\"Hide trigger until hovered\"\n            description=\"Keep the devtools trigger button hidden until you hover over its area\"\n            onChange={() =>\n              setSettings({ hideUntilHover: !settings().hideUntilHover })\n            }\n            checked={settings().hideUntilHover}\n          />\n          <Select\n            label=\"Theme\"\n            description=\"Choose the theme for the devtools panel\"\n            value={settings().theme}\n            options={[\n              { label: 'Dark', value: 'dark' },\n              { label: 'Light', value: 'light' },\n            ]}\n            onChange={(value) => setSettings({ theme: value })}\n          />\n        </div>\n      </Section>\n\n      {/* URL Flag Settings */}\n      <Section>\n        <SectionTitle>\n          <SectionIcon>\n            <Link />\n          </SectionIcon>\n          URL Configuration\n        </SectionTitle>\n        <SectionDescription>\n          Control when devtools are available based on URL parameters.\n        </SectionDescription>\n        <div class={styles().settingsGroup}>\n          <Checkbox\n            label=\"Require URL Flag\"\n            description=\"Only show devtools when a specific URL parameter is present\"\n            checked={settings().requireUrlFlag}\n            onChange={(checked) =>\n              setSettings({\n                requireUrlFlag: checked,\n              })\n            }\n          />\n          <Show when={settings().requireUrlFlag}>\n            <div class={styles().conditionalSetting}>\n              <Input\n                label=\"URL flag\"\n                description=\"Enter the URL parameter name (e.g., 'debug' for ?debug=true)\"\n                placeholder=\"debug\"\n                value={settings().urlFlag}\n                onChange={(e) =>\n                  setSettings({\n                    urlFlag: e,\n                  })\n                }\n              />\n            </div>\n          </Show>\n        </div>\n      </Section>\n\n      {/* Keyboard Settings */}\n      <Section>\n        <SectionTitle>\n          <SectionIcon>\n            <Keyboard />\n          </SectionIcon>\n          Keyboard\n        </SectionTitle>\n        <SectionDescription>\n          Customize keyboard shortcuts for quick access.\n        </SectionDescription>\n        <div class={styles().settingsGroup}>\n          <div class={styles().settingsModifiers}>\n            <Show keyed when={hotkey()}>\n              <Button\n                variant=\"success\"\n                onclick={changeHotkey('Shift')}\n                outline={!hotkey().includes('Shift')}\n              >\n                Shift\n              </Button>\n              <Button\n                variant=\"success\"\n                onclick={changeHotkey('Alt')}\n                outline={!hotkey().includes('Alt')}\n              >\n                Alt\n              </Button>\n              <Button\n                variant=\"success\"\n                onclick={changeHotkey('Meta')}\n                outline={!hotkey().includes('Meta')}\n              >\n                Meta\n              </Button>\n              <Button\n                variant=\"success\"\n                onclick={changeHotkey('Control')}\n                outline={!hotkey().includes('Control')}\n              >\n                Control\n              </Button>\n            </Show>\n          </div>\n          <Input\n            label=\"Hotkey to open/close devtools\"\n            description=\"Use '+' to combine keys (e.g., 'a+b' or 'd'). This will be used with the enabled modifiers from above\"\n            placeholder=\"a\"\n            value={hotkey()\n              .filter((key) => !['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key))\n              .join('+')}\n            onChange={(e) => {\n              const makeModifierArray = (key: string) => {\n                if (key.length === 1) return [uppercaseFirstLetter(key)]\n                const modifiers: Array<string> = []\n                for (const character of key) {\n                  const newLetter = uppercaseFirstLetter(character)\n                  if (!modifiers.includes(newLetter)) modifiers.push(newLetter)\n                }\n                return modifiers\n              }\n              const modifiers = e\n                .split('+')\n                .flatMap((key) => makeModifierArray(key))\n                .filter(Boolean)\n              return setSettings({\n                openHotkey: [\n                  ...hotkey().filter((key) =>\n                    ['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key),\n                  ),\n                  ...modifiers,\n                ],\n              })\n            }}\n          />\n          Final shortcut is: {hotkey().join(' + ')}\n        </div>\n      </Section>\n\n      {/* Position Settings */}\n      <Section>\n        <SectionTitle>\n          <SectionIcon>\n            <GeoTag />\n          </SectionIcon>\n          Position\n        </SectionTitle>\n        <SectionDescription>\n          Adjust the position of the trigger button and devtools panel.\n        </SectionDescription>\n        <div class={styles().settingsGroup}>\n          <div class={styles().settingRow}>\n            <Select\n              label=\"Trigger Position\"\n              options={[\n                { label: 'Bottom Right', value: 'bottom-right' },\n                { label: 'Bottom Left', value: 'bottom-left' },\n                { label: 'Top Right', value: 'top-right' },\n                { label: 'Top Left', value: 'top-left' },\n                { label: 'Middle Right', value: 'middle-right' },\n                { label: 'Middle Left', value: 'middle-left' },\n              ]}\n              value={settings().position}\n              onChange={(value) =>\n                setSettings({\n                  position: value,\n                })\n              }\n            />\n            <Select\n              label=\"Panel Position\"\n              value={settings().panelLocation}\n              options={[\n                { label: 'Top', value: 'top' },\n                { label: 'Bottom', value: 'bottom' },\n              ]}\n              onChange={(value) =>\n                setSettings({\n                  panelLocation: value,\n                })\n              }\n            />\n          </div>\n        </div>\n      </Section>\n    </MainPanel>\n  )\n}\n"],"names":["SettingsTab","setSettings","settings","useDevtoolsSettings","styles","useStyles","hotkey","createMemo","openHotkey","modifiers","changeHotkey","newHotkey","includes","filter","key","existingModifiers","otherModifiers","_$createComponent","MainPanel","withPadding","children","Section","SectionTitle","SectionIcon","SettingsCog","SectionDescription","_el$","_tmpl$","_$insert","Checkbox","label","description","onChange","defaultOpen","checked","hideUntilHover","Select","value","theme","options","_$effect","_$className","settingsGroup","Link","_el$2","requireUrlFlag","Show","when","_el$3","Input","placeholder","urlFlag","e","conditionalSetting","Keyboard","_el$4","_tmpl$2","_el$5","firstChild","_el$6","nextSibling","keyed","Button","variant","onclick","outline","join","makeModifierArray","length","uppercaseFirstLetter","character","newLetter","push","split","flatMap","Boolean","_p$","_v$","_v$2","settingsModifiers","t","undefined","GeoTag","_el$7","_tmpl$3","_el$8","position","panelLocation","_v$3","_v$4","settingRow"],"mappings":";;;;;;;;AAuBO,MAAMA,cAAcA,MAAM;AAC/B,QAAM;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,EAAAA,IAAaC,oBAAAA;AAClC,QAAMC,SAASC,UAAAA;AACf,QAAMC,SAASC,WAAW,MAAML,SAAAA,EAAWM,UAAU;AACrD,QAAMC,YAAgC,CAAC,WAAW,OAAO,QAAQ,OAAO;AACxE,QAAMC,eAAeA,CAACC,cAA2B,MAAM;AACrD,QAAIL,OAAAA,EAASM,SAASD,SAAS,GAAG;AAChC,aAAOV,YAAY;AAAA,QACjBO,YAAYF,OAAAA,EAASO,OAAQC,CAAAA,QAAQA,QAAQH,SAAS;AAAA,MAAA,CACvD;AAAA,IACH;AACA,UAAMI,oBAAoBT,SAASO,OAAQC,SACzCL,UAAUG,SAASE,GAAU,CAC/B;AACA,UAAME,iBAAiBV,SAASO,OAC7BC,SAAQ,CAACL,UAAUG,SAASE,GAAU,CACzC;AACAb,gBAAY;AAAA,MACVO,YAAY,CAAC,GAAGO,mBAAmBJ,WAAW,GAAGK,cAAc;AAAA,IAAA,CAChE;AAAA,EACH;AACA,SAAAC,gBACGC,WAAS;AAAA,IAACC,aAAW;AAAA,IAAA,IAAAC,WAAA;AAAA,aAAA,CAAAH,gBACnBI,SAAO;AAAA,QAAA,IAAAD,WAAA;AAAA,iBAAA,CAAAH,gBACLK,cAAY;AAAA,YAAA,IAAAF,WAAA;AAAA,qBAAA,CAAAH,gBACVM,aAAW;AAAA,gBAAA,IAAAH,WAAA;AAAA,yBAAAH,gBACTO,aAAW,EAAA;AAAA,gBAAA;AAAA,cAAA,CAAA,GAAA,SAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAAP,gBAIfQ,oBAAkB;AAAA,YAAAL,UAAA;AAAA,UAAA,CAAA,IAAA,MAAA;AAAA,gBAAAM,OAAAC,OAAAA;AAAAC,mBAAAF,MAAAT,gBAIhBY,UAAQ;AAAA,cACPC,OAAK;AAAA,cACLC,aAAW;AAAA,cACXC,UAAUA,MACR/B,YAAY;AAAA,gBAAEgC,aAAa,CAAC/B,WAAW+B;AAAAA,cAAAA,CAAa;AAAA,cAAC,IAEvDC,UAAO;AAAA,uBAAEhC,WAAW+B;AAAAA,cAAW;AAAA,YAAA,CAAA,GAAA,IAAA;AAAAL,mBAAAF,MAAAT,gBAEhCY,UAAQ;AAAA,cACPC,OAAK;AAAA,cACLC,aAAW;AAAA,cACXC,UAAUA,MACR/B,YAAY;AAAA,gBAAEkC,gBAAgB,CAACjC,WAAWiC;AAAAA,cAAAA,CAAgB;AAAA,cAAC,IAE7DD,UAAO;AAAA,uBAAEhC,WAAWiC;AAAAA,cAAc;AAAA,YAAA,CAAA,GAAA,IAAA;AAAAP,mBAAAF,MAAAT,gBAEnCmB,QAAM;AAAA,cACLN,OAAK;AAAA,cACLC,aAAW;AAAA,cAAA,IACXM,QAAK;AAAA,uBAAEnC,WAAWoC;AAAAA,cAAK;AAAA,cACvBC,SAAS,CACP;AAAA,gBAAET,OAAO;AAAA,gBAAQO,OAAO;AAAA,cAAA,GACxB;AAAA,gBAAEP,OAAO;AAAA,gBAASO,OAAO;AAAA,cAAA,CAAS;AAAA,cAEpCL,UAAWK,WAAUpC,YAAY;AAAA,gBAAEqC,OAAOD;AAAAA,cAAAA,CAAO;AAAA,YAAA,CAAC,GAAA,IAAA;AAAAG,mBAAA,MAAAC,UAAAf,MAzB1CtB,OAAAA,EAASsC,aAAa,CAAA;AAAA,mBAAAhB;AAAAA,UAAA,IAAA;AAAA,QAAA;AAAA,MAAA,CAAA,GAAAT,gBA+BnCI,SAAO;AAAA,QAAA,IAAAD,WAAA;AAAA,iBAAA,CAAAH,gBACLK,cAAY;AAAA,YAAA,IAAAF,WAAA;AAAA,qBAAA,CAAAH,gBACVM,aAAW;AAAA,gBAAA,IAAAH,WAAA;AAAA,yBAAAH,gBACT0B,MAAI,EAAA;AAAA,gBAAA;AAAA,cAAA,CAAA,GAAA,mBAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAA1B,gBAIRQ,oBAAkB;AAAA,YAAAL,UAAA;AAAA,UAAA,CAAA,IAAA,MAAA;AAAA,gBAAAwB,QAAAjB,OAAAA;AAAAC,mBAAAgB,OAAA3B,gBAIhBY,UAAQ;AAAA,cACPC,OAAK;AAAA,cACLC,aAAW;AAAA,cAAA,IACXG,UAAO;AAAA,uBAAEhC,WAAW2C;AAAAA,cAAc;AAAA,cAClCb,UAAWE,aACTjC,YAAY;AAAA,gBACV4C,gBAAgBX;AAAAA,cAAAA,CACjB;AAAA,YAAA,CAAC,GAAA,IAAA;AAAAN,mBAAAgB,OAAA3B,gBAGL6B,MAAI;AAAA,cAAA,IAACC,OAAI;AAAA,uBAAE7C,WAAW2C;AAAAA,cAAc;AAAA,cAAA,IAAAzB,WAAA;AAAA,oBAAA4B,QAAArB,OAAAA;AAAAC,uBAAAoB,OAAA/B,gBAEhCgC,OAAK;AAAA,kBACJnB,OAAK;AAAA,kBACLC,aAAW;AAAA,kBACXmB,aAAW;AAAA,kBAAA,IACXb,QAAK;AAAA,2BAAEnC,WAAWiD;AAAAA,kBAAO;AAAA,kBACzBnB,UAAWoB,OACTnD,YAAY;AAAA,oBACVkD,SAASC;AAAAA,kBAAAA,CACV;AAAA,gBAAA,CAAC,CAAA;AAAAZ,uBAAA,MAAAC,UAAAO,OATI5C,OAAAA,EAASiD,kBAAkB,CAAA;AAAA,uBAAAL;AAAAA,cAAA;AAAA,YAAA,CAAA,GAAA,IAAA;AAAAR,mBAAA,MAAAC,UAAAG,OAZ/BxC,OAAAA,EAASsC,aAAa,CAAA;AAAA,mBAAAE;AAAAA,UAAA,IAAA;AAAA,QAAA;AAAA,MAAA,CAAA,GAAA3B,gBA8BnCI,SAAO;AAAA,QAAA,IAAAD,WAAA;AAAA,iBAAA,CAAAH,gBACLK,cAAY;AAAA,YAAA,IAAAF,WAAA;AAAA,qBAAA,CAAAH,gBACVM,aAAW;AAAA,gBAAA,IAAAH,WAAA;AAAA,yBAAAH,gBACTqC,UAAQ,EAAA;AAAA,gBAAA;AAAA,cAAA,CAAA,GAAA,UAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAArC,gBAIZQ,oBAAkB;AAAA,YAAAL,UAAA;AAAA,UAAA,CAAA,IAAA,MAAA;AAAA,gBAAAmC,QAAAC,QAAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAG;AAAAhC,mBAAA6B,OAAAxC,gBAKd6B,MAAI;AAAA,cAACe,OAAK;AAAA,cAAA,IAACd,OAAI;AAAA,uBAAEzC,OAAAA;AAAAA,cAAQ;AAAA,cAAA,IAAAc,WAAA;AAAA,uBAAA,CAAAH,gBACvB6C,QAAM;AAAA,kBACLC,SAAO;AAAA,kBAAA,IACPC,UAAO;AAAA,2BAAEtD,aAAa,OAAO;AAAA,kBAAC;AAAA,kBAAA,IAC9BuD,UAAO;AAAA,2BAAE,CAAC3D,OAAAA,EAASM,SAAS,OAAO;AAAA,kBAAC;AAAA,kBAAAQ,UAAA;AAAA,gBAAA,CAAA,GAAAH,gBAIrC6C,QAAM;AAAA,kBACLC,SAAO;AAAA,kBAAA,IACPC,UAAO;AAAA,2BAAEtD,aAAa,KAAK;AAAA,kBAAC;AAAA,kBAAA,IAC5BuD,UAAO;AAAA,2BAAE,CAAC3D,OAAAA,EAASM,SAAS,KAAK;AAAA,kBAAC;AAAA,kBAAAQ,UAAA;AAAA,gBAAA,CAAA,GAAAH,gBAInC6C,QAAM;AAAA,kBACLC,SAAO;AAAA,kBAAA,IACPC,UAAO;AAAA,2BAAEtD,aAAa,MAAM;AAAA,kBAAC;AAAA,kBAAA,IAC7BuD,UAAO;AAAA,2BAAE,CAAC3D,OAAAA,EAASM,SAAS,MAAM;AAAA,kBAAC;AAAA,kBAAAQ,UAAA;AAAA,gBAAA,CAAA,GAAAH,gBAIpC6C,QAAM;AAAA,kBACLC,SAAO;AAAA,kBAAA,IACPC,UAAO;AAAA,2BAAEtD,aAAa,SAAS;AAAA,kBAAC;AAAA,kBAAA,IAChCuD,UAAO;AAAA,2BAAE,CAAC3D,OAAAA,EAASM,SAAS,SAAS;AAAA,kBAAC;AAAA,kBAAAQ,UAAA;AAAA,gBAAA,CAAA,CAAA;AAAA,cAAA;AAAA,YAAA,CAAA,CAAA;AAAAQ,mBAAA2B,OAAAtC,gBAM3CgC,OAAK;AAAA,cACJnB,OAAK;AAAA,cACLC,aAAW;AAAA,cACXmB,aAAW;AAAA,cAAA,IACXb,QAAK;AAAA,uBAAE/B,SACJO,OAAQC,CAAAA,QAAQ,CAAC,CAAC,SAAS,QAAQ,OAAO,MAAM,EAAEF,SAASE,GAAG,CAAC,EAC/DoD,KAAK,GAAG;AAAA,cAAC;AAAA,cACZlC,UAAWoB,CAAAA,MAAM;AACf,sBAAMe,oBAAoBA,CAACrD,QAAgB;AACzC,sBAAIA,IAAIsD,WAAW,UAAU,CAACC,qBAAqBvD,GAAG,CAAC;AACvD,wBAAML,aAA2B,CAAA;AACjC,6BAAW6D,aAAaxD,KAAK;AAC3B,0BAAMyD,YAAYF,qBAAqBC,SAAS;AAChD,wBAAI,CAAC7D,WAAUG,SAAS2D,SAAS,EAAG9D,YAAU+D,KAAKD,SAAS;AAAA,kBAC9D;AACA,yBAAO9D;AAAAA,gBACT;AACA,sBAAMA,aAAY2C,EACfqB,MAAM,GAAG,EACTC,QAAS5D,CAAAA,QAAQqD,kBAAkBrD,GAAG,CAAC,EACvCD,OAAO8D,OAAO;AACjB,uBAAO1E,YAAY;AAAA,kBACjBO,YAAY,CACV,GAAGF,SAASO,OAAQC,SAClB,CAAC,SAAS,QAAQ,OAAO,MAAM,EAAEF,SAASE,GAAG,CAC/C,GACA,GAAGL,UAAS;AAAA,gBAAA,CAEf;AAAA,cACH;AAAA,YAAA,CAAC,GAAAkD,KAAA;AAAA/B,mBAAA2B,OAAA,MAEiBjD,OAAAA,EAAS4D,KAAK,KAAK,GAAC,IAAA;AAAA1B,mBAAAoC,CAAAA,QAAA;AAAA,kBAAAC,MAhE9BzE,OAAAA,EAASsC,eAAaoC,OACpB1E,SAAS2E;AAAiBF,sBAAAD,IAAAxB,KAAAX,UAAAc,OAAAqB,IAAAxB,IAAAyB,GAAA;AAAAC,uBAAAF,IAAAI,KAAAvC,UAAAgB,OAAAmB,IAAAI,IAAAF,IAAA;AAAA,qBAAAF;AAAAA,YAAA,GAAA;AAAA,cAAAxB,GAAA6B;AAAAA,cAAAD,GAAAC;AAAAA,YAAAA,CAAA;AAAA,mBAAA1B;AAAAA,UAAA,IAAA;AAAA,QAAA;AAAA,MAAA,CAAA,GAAAtC,gBAoEzCI,SAAO;AAAA,QAAA,IAAAD,WAAA;AAAA,iBAAA,CAAAH,gBACLK,cAAY;AAAA,YAAA,IAAAF,WAAA;AAAA,qBAAA,CAAAH,gBACVM,aAAW;AAAA,gBAAA,IAAAH,WAAA;AAAA,yBAAAH,gBACTiE,QAAM,EAAA;AAAA,gBAAA;AAAA,cAAA,CAAA,GAAA,UAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAAjE,gBAIVQ,oBAAkB;AAAA,YAAAL,UAAA;AAAA,UAAA,CAAA,IAAA,MAAA;AAAA,gBAAA+D,QAAAC,QAAAA,GAAAC,QAAAF,MAAAzB;AAAA9B,mBAAAyD,OAAApE,gBAKdmB,QAAM;AAAA,cACLN,OAAK;AAAA,cACLS,SAAS,CACP;AAAA,gBAAET,OAAO;AAAA,gBAAgBO,OAAO;AAAA,cAAA,GAChC;AAAA,gBAAEP,OAAO;AAAA,gBAAeO,OAAO;AAAA,cAAA,GAC/B;AAAA,gBAAEP,OAAO;AAAA,gBAAaO,OAAO;AAAA,cAAA,GAC7B;AAAA,gBAAEP,OAAO;AAAA,gBAAYO,OAAO;AAAA,cAAA,GAC5B;AAAA,gBAAEP,OAAO;AAAA,gBAAgBO,OAAO;AAAA,cAAA,GAChC;AAAA,gBAAEP,OAAO;AAAA,gBAAeO,OAAO;AAAA,cAAA,CAAe;AAAA,cAC/C,IACDA,QAAK;AAAA,uBAAEnC,WAAWoF;AAAAA,cAAQ;AAAA,cAC1BtD,UAAWK,WACTpC,YAAY;AAAA,gBACVqF,UAAUjD;AAAAA,cAAAA,CACX;AAAA,YAAA,CAAC,GAAA,IAAA;AAAAT,mBAAAyD,OAAApE,gBAGLmB,QAAM;AAAA,cACLN,OAAK;AAAA,cAAA,IACLO,QAAK;AAAA,uBAAEnC,WAAWqF;AAAAA,cAAa;AAAA,cAC/BhD,SAAS,CACP;AAAA,gBAAET,OAAO;AAAA,gBAAOO,OAAO;AAAA,cAAA,GACvB;AAAA,gBAAEP,OAAO;AAAA,gBAAUO,OAAO;AAAA,cAAA,CAAU;AAAA,cAEtCL,UAAWK,WACTpC,YAAY;AAAA,gBACVsF,eAAelD;AAAAA,cAAAA,CAChB;AAAA,YAAA,CAAC,GAAA,IAAA;AAAAG,mBAAAoC,CAAAA,QAAA;AAAA,kBAAAY,OA7BEpF,OAAAA,EAASsC,eAAa+C,OACpBrF,SAASsF;AAAUF,uBAAAZ,IAAAxB,KAAAX,UAAA0C,OAAAP,IAAAxB,IAAAoC,IAAA;AAAAC,uBAAAb,IAAAI,KAAAvC,UAAA4C,OAAAT,IAAAI,IAAAS,IAAA;AAAA,qBAAAb;AAAAA,YAAA,GAAA;AAAA,cAAAxB,GAAA6B;AAAAA,cAAAD,GAAAC;AAAAA,YAAAA,CAAA;AAAA,mBAAAE;AAAAA,UAAA,IAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAoCzC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.6.2",
+  "version": "0.6.5",
   "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.1",
-    "@tanstack/devtools-ui": "0.3.2"
+    "@tanstack/devtools-ui": "0.3.4"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.7"

package/src/components/tabs.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import { For } from 'solid-js'
+import { PiP, X } from '@tanstack/devtools-ui/icons'
 import { useStyles } from '../styles/use-styles'
 import { useDevtoolsState } from '../context/use-devtools-context'
 import { useDrawContext } from '../context/draw-context'
@@ -36,7 +37,7 @@ export const Tabs = (props: TabsProps) => {
               if (tab.id === 'plugins') hoverUtils.leave()
             }}
           >
-            {tab.icon}
+            {tab.icon()}
           </button>
         )}
       </For>
@@ -51,44 +52,14 @@ export const Tabs = (props: TabsProps) => {
             class={clsx(styles().tab, 'detach')}
             onClick={handleDetachment}
           >
-            <svg
-              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"
-              class="lucide lucide-picture-in-picture-icon lucide-picture-in-picture"
-            >
-              <path d="M2 10h6V4" />
-              <path d="m2 4 6 6" />
-              <path d="M21 10V7a2 2 0 0 0-2-2h-7" />
-              <path d="M3 14v2a2 2 0 0 0 2 2h3" />
-              <rect x="12" y="14" width="10" height="7" rx="1" />
-            </svg>
+            <PiP />
           </button>
           <button
             type="button"
             class={clsx(styles().tab, 'close')}
             onClick={() => props.toggleOpen()}
           >
-            <svg
-              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="M18 6 6 18" />
-              <path d="m6 6 12 12" />
-            </svg>
+            <X />
           </button>
         </div>
       )}

package/src/context/devtools-context.tsx

@@ -38,7 +38,12 @@ export interface TanStackDevtoolsPlugin {
    *   }
    * ```
    */
-  name: string | ((el: HTMLHeadingElement) => void)
+  name:
+    | string
+    | ((
+        el: HTMLHeadingElement,
+        theme: DevtoolsStore['settings']['theme'],
+      ) => void)
   /**
    * Unique identifier for the plugin.
    * If not provided, it will be generated based on the name.
@@ -57,7 +62,10 @@ export interface TanStackDevtoolsPlugin {
    *   }
    * ```
    */
-  render: (el: HTMLDivElement) => void
+  render: (
+    el: HTMLDivElement,
+    theme: DevtoolsStore['settings']['theme'],
+  ) => void
 }
 export const DevtoolsContext = createContext<{
   store: DevtoolsStore

package/src/context/devtools-store.ts

@@ -56,6 +56,11 @@ export type DevtoolsStore = {
      * @default "tanstack-devtools"
      */
     urlFlag: string
+    /**
+     * The theme of the dev tools
+     * @default "dark"
+     */
+    theme: 'light' | 'dark'
   }
   state: {
     activeTab: TabName
@@ -75,6 +80,9 @@ export const initialState: DevtoolsStore = {
     openHotkey: ['Shift', 'A'],
     requireUrlFlag: false,
     urlFlag: 'tanstack-devtools',
+    theme: window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light',
   },
   state: {
     activeTab: 'plugins',