@tanstack/devtools 0.6.7 → 0.6.8

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

@@ -1,296 +0,0 @@
-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(`<div>`), _tmpl$5 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`), _tmpl$6 = /* @__PURE__ */ template(`<li>`);
-const SOCIALS = [
-  {
-    network: "Facebook",
-    tags: [{
-      key: "og:title",
-      prop: "title"
-    }, {
-      key: "og:description",
-      prop: "description"
-    }, {
-      key: "og:image",
-      prop: "image"
-    }, {
-      key: "og:url",
-      prop: "url"
-    }],
-    color: "#4267B2"
-  },
-  {
-    network: "X/Twitter",
-    tags: [{
-      key: "twitter:title",
-      prop: "title"
-    }, {
-      key: "twitter:description",
-      prop: "description"
-    }, {
-      key: "twitter:image",
-      prop: "image"
-    }, {
-      key: "twitter:url",
-      prop: "url"
-    }],
-    color: "#1DA1F2"
-  },
-  {
-    network: "LinkedIn",
-    tags: [{
-      key: "og:title",
-      prop: "title"
-    }, {
-      key: "og:description",
-      prop: "description"
-    }, {
-      key: "og:image",
-      prop: "image"
-    }, {
-      key: "og:url",
-      prop: "url"
-    }],
-    color: "#0077B5"
-  },
-  {
-    network: "Discord",
-    tags: [{
-      key: "og:title",
-      prop: "title"
-    }, {
-      key: "og:description",
-      prop: "description"
-    }, {
-      key: "og:image",
-      prop: "image"
-    }, {
-      key: "og:url",
-      prop: "url"
-    }],
-    color: "#5865F2"
-  },
-  {
-    network: "Slack",
-    tags: [{
-      key: "og:title",
-      prop: "title"
-    }, {
-      key: "og:description",
-      prop: "description"
-    }, {
-      key: "og:image",
-      prop: "image"
-    }, {
-      key: "og:url",
-      prop: "url"
-    }],
-    color: "#4A154B"
-  },
-  {
-    network: "Mastodon",
-    tags: [{
-      key: "og:title",
-      prop: "title"
-    }, {
-      key: "og:description",
-      prop: "description"
-    }, {
-      key: "og:image",
-      prop: "image"
-    }, {
-      key: "og:url",
-      prop: "url"
-    }],
-    color: "#6364FF"
-  },
-  {
-    network: "Bluesky",
-    tags: [{
-      key: "og:title",
-      prop: "title"
-    }, {
-      key: "og:description",
-      prop: "description"
-    }, {
-      key: "og:image",
-      prop: "image"
-    }, {
-      key: "og:url",
-      prop: "url"
-    }],
-    color: "#1185FE"
-  }
-  // Add more networks as needed
-];
-function SocialPreview(props) {
-  const styles = useStyles();
-  return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling;
-    insert(_el$2, () => props.network, _el$3);
-    insert(_el$, (() => {
-      var _c$ = memo(() => !!props.meta.image);
-      return () => _c$() ? (() => {
-        var _el$7 = _tmpl$2();
-        effect((_p$) => {
-          var _v$8 = props.meta.image, _v$9 = styles().seoPreviewImage;
-          _v$8 !== _p$.e && setAttribute(_el$7, "src", _p$.e = _v$8);
-          _v$9 !== _p$.t && className(_el$7, _p$.t = _v$9);
-          return _p$;
-        }, {
-          e: void 0,
-          t: void 0
-        });
-        return _el$7;
-      })() : (() => {
-        var _el$8 = _tmpl$3();
-        _el$8.style.setProperty("background", "#222");
-        _el$8.style.setProperty("color", "#888");
-        _el$8.style.setProperty("display", "flex");
-        _el$8.style.setProperty("align-items", "center");
-        _el$8.style.setProperty("justify-content", "center");
-        _el$8.style.setProperty("min-height", "80px");
-        _el$8.style.setProperty("width", "100%");
-        effect(() => className(_el$8, styles().seoPreviewImage));
-        return _el$8;
-      })();
-    })(), _el$4);
-    insert(_el$4, () => props.meta.title || "No Title");
-    insert(_el$5, () => props.meta.description || "No Description");
-    insert(_el$6, () => props.meta.url || window.location.href);
-    effect((_p$) => {
-      var _v$ = styles().seoPreviewCard, _v$2 = props.color, _v$3 = styles().seoPreviewHeader, _v$4 = props.color, _v$5 = styles().seoPreviewTitle, _v$6 = styles().seoPreviewDesc, _v$7 = styles().seoPreviewUrl;
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("border-color", _v$2) : _el$.style.removeProperty("border-color"));
-      _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
-      _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$2.style.setProperty("color", _v$4) : _el$2.style.removeProperty("color"));
-      _v$5 !== _p$.i && className(_el$4, _p$.i = _v$5);
-      _v$6 !== _p$.n && className(_el$5, _p$.n = _v$6);
-      _v$7 !== _p$.s && className(_el$6, _p$.s = _v$7);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0,
-      n: void 0,
-      s: void 0
-    });
-    return _el$;
-  })();
-}
-const SeoTab = () => {
-  const [reports, setReports] = createSignal(analyzeHead());
-  const styles = useStyles();
-  function analyzeHead() {
-    const metaTags = Array.from(document.head.querySelectorAll("meta"));
-    const reports2 = [];
-    for (const social of SOCIALS) {
-      const found = {};
-      const missing = [];
-      for (const tag of social.tags) {
-        const meta = metaTags.find((m) => (tag.key.includes("twitter:") ? false : m.getAttribute("property") === tag.key) || m.getAttribute("name") === tag.key);
-        if (meta && meta.getAttribute("content")) {
-          found[tag.prop] = meta.getAttribute("content") || void 0;
-        } else {
-          missing.push(tag.key);
-        }
-      }
-      reports2.push({
-        network: social.network,
-        found,
-        missing
-      });
-    }
-    return reports2;
-  }
-  useHeadChanges(() => {
-    setReports(analyzeHead());
-  });
-  return createComponent(MainPanel, {
-    withPadding: true,
-    get children() {
-      return createComponent(Section, {
-        get children() {
-          return [createComponent(SectionTitle, {
-            get children() {
-              return [createComponent(SectionIcon, {
-                get children() {
-                  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$9 = _tmpl$4();
-            insert(_el$9, createComponent(For, {
-              get each() {
-                return reports();
-              },
-              children: (report, i) => {
-                const social = SOCIALS[i()];
-                return (() => {
-                  var _el$0 = _tmpl$4();
-                  insert(_el$0, createComponent(SocialPreview, {
-                    get meta() {
-                      return report.found;
-                    },
-                    get color() {
-                      return social.color;
-                    },
-                    get network() {
-                      return social.network;
-                    }
-                  }), null);
-                  insert(_el$0, (() => {
-                    var _c$2 = memo(() => report.missing.length > 0);
-                    return () => _c$2() ? (() => {
-                      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$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$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$1;
-                    })() : null;
-                  })(), null);
-                  return _el$0;
-                })();
-              }
-            }));
-            effect(() => className(_el$9, styles().seoPreviewSection));
-            return _el$9;
-          })()];
-        }
-      });
-    }
-  });
-};
-export {
-  SeoTab
-};
-//# sourceMappingURL=seo-tab.js.map

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

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1 +0,0 @@
-export declare const SettingsTab: () => import("solid-js").JSX.Element;

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

@@ -1,308 +0,0 @@
-import { createComponent, template, insert, effect, className } from "solid-js/web";
-import { createMemo, Show } from "solid-js";
-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(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div><div></div>Final shortcut is: `), _tmpl$3 = /* @__PURE__ */ template(`<div><div>`);
-const SettingsTab = () => {
-  const {
-    setSettings,
-    settings
-  } = useDevtoolsSettings();
-  const styles = useStyles();
-  const hotkey = createMemo(() => settings().openHotkey);
-  const modifiers = ["Control", "Alt", "Meta", "Shift"];
-  const changeHotkey = (newHotkey) => () => {
-    if (hotkey().includes(newHotkey)) {
-      return setSettings({
-        openHotkey: hotkey().filter((key) => key !== newHotkey)
-      });
-    }
-    const existingModifiers = hotkey().filter((key) => modifiers.includes(key));
-    const otherModifiers = hotkey().filter((key) => !modifiers.includes(key));
-    setSettings({
-      openHotkey: [...existingModifiers, newHotkey, ...otherModifiers]
-    });
-  };
-  return createComponent(MainPanel, {
-    withPadding: true,
-    get children() {
-      return [createComponent(Section, {
-        get children() {
-          return [createComponent(SectionTitle, {
-            get children() {
-              return [createComponent(SectionIcon, {
-                get children() {
-                  return createComponent(SettingsCog, {});
-                }
-              }), "General"];
-            }
-          }), createComponent(SectionDescription, {
-            children: "Configure general behavior of the devtools panel."
-          }), (() => {
-            var _el$ = _tmpl$();
-            insert(_el$, createComponent(Checkbox, {
-              label: "Default open",
-              description: "Automatically open the devtools panel when the page loads",
-              onChange: () => setSettings({
-                defaultOpen: !settings().defaultOpen
-              }),
-              get checked() {
-                return settings().defaultOpen;
-              }
-            }), null);
-            insert(_el$, createComponent(Checkbox, {
-              label: "Hide trigger until hovered",
-              description: "Keep the devtools trigger button hidden until you hover over its area",
-              onChange: () => setSettings({
-                hideUntilHover: !settings().hideUntilHover
-              }),
-              get checked() {
-                return settings().hideUntilHover;
-              }
-            }), null);
-            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, {
-        get children() {
-          return [createComponent(SectionTitle, {
-            get children() {
-              return [createComponent(SectionIcon, {
-                get children() {
-                  return createComponent(Link, {});
-                }
-              }), "URL Configuration"];
-            }
-          }), createComponent(SectionDescription, {
-            children: "Control when devtools are available based on URL parameters."
-          }), (() => {
-            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() {
-                return settings().requireUrlFlag;
-              },
-              onChange: (checked) => setSettings({
-                requireUrlFlag: checked
-              })
-            }), null);
-            insert(_el$2, createComponent(Show, {
-              get when() {
-                return settings().requireUrlFlag;
-              },
-              get children() {
-                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",
-                  get value() {
-                    return settings().urlFlag;
-                  },
-                  onChange: (e) => setSettings({
-                    urlFlag: e
-                  })
-                }));
-                effect(() => className(_el$3, styles().conditionalSetting));
-                return _el$3;
-              }
-            }), null);
-            effect(() => className(_el$2, styles().settingsGroup));
-            return _el$2;
-          })()];
-        }
-      }), createComponent(Section, {
-        get children() {
-          return [createComponent(SectionTitle, {
-            get children() {
-              return [createComponent(SectionIcon, {
-                get children() {
-                  return createComponent(Keyboard, {});
-                }
-              }), "Keyboard"];
-            }
-          }), createComponent(SectionDescription, {
-            children: "Customize keyboard shortcuts for quick access."
-          }), (() => {
-            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();
-              },
-              get children() {
-                return [createComponent(Button, {
-                  variant: "success",
-                  get onclick() {
-                    return changeHotkey("Shift");
-                  },
-                  get outline() {
-                    return !hotkey().includes("Shift");
-                  },
-                  children: "Shift"
-                }), createComponent(Button, {
-                  variant: "success",
-                  get onclick() {
-                    return changeHotkey("Alt");
-                  },
-                  get outline() {
-                    return !hotkey().includes("Alt");
-                  },
-                  children: "Alt"
-                }), createComponent(Button, {
-                  variant: "success",
-                  get onclick() {
-                    return changeHotkey("Meta");
-                  },
-                  get outline() {
-                    return !hotkey().includes("Meta");
-                  },
-                  children: "Meta"
-                }), createComponent(Button, {
-                  variant: "success",
-                  get onclick() {
-                    return changeHotkey("Control");
-                  },
-                  get outline() {
-                    return !hotkey().includes("Control");
-                  },
-                  children: "Control"
-                })];
-              }
-            }));
-            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",
-              get value() {
-                return hotkey().filter((key) => !["Shift", "Meta", "Alt", "Ctrl"].includes(key)).join("+");
-              },
-              onChange: (e) => {
-                const makeModifierArray = (key) => {
-                  if (key.length === 1) return [uppercaseFirstLetter(key)];
-                  const modifiers3 = [];
-                  for (const character of key) {
-                    const newLetter = uppercaseFirstLetter(character);
-                    if (!modifiers3.includes(newLetter)) modifiers3.push(newLetter);
-                  }
-                  return modifiers3;
-                };
-                const modifiers2 = e.split("+").flatMap((key) => makeModifierArray(key)).filter(Boolean);
-                return setSettings({
-                  openHotkey: [...hotkey().filter((key) => ["Shift", "Meta", "Alt", "Ctrl"].includes(key)), ...modifiers2]
-                });
-              }
-            }), _el$6);
-            insert(_el$4, () => hotkey().join(" + "), null);
-            effect((_p$) => {
-              var _v$ = styles().settingsGroup, _v$2 = styles().settingsModifiers;
-              _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$4;
-          })()];
-        }
-      }), createComponent(Section, {
-        get children() {
-          return [createComponent(SectionTitle, {
-            get children() {
-              return [createComponent(SectionIcon, {
-                get children() {
-                  return createComponent(GeoTag, {});
-                }
-              }), "Position"];
-            }
-          }), createComponent(SectionDescription, {
-            children: "Adjust the position of the trigger button and devtools panel."
-          }), (() => {
-            var _el$7 = _tmpl$3(), _el$8 = _el$7.firstChild;
-            insert(_el$8, createComponent(Select, {
-              label: "Trigger Position",
-              options: [{
-                label: "Bottom Right",
-                value: "bottom-right"
-              }, {
-                label: "Bottom Left",
-                value: "bottom-left"
-              }, {
-                label: "Top Right",
-                value: "top-right"
-              }, {
-                label: "Top Left",
-                value: "top-left"
-              }, {
-                label: "Middle Right",
-                value: "middle-right"
-              }, {
-                label: "Middle Left",
-                value: "middle-left"
-              }],
-              get value() {
-                return settings().position;
-              },
-              onChange: (value) => setSettings({
-                position: value
-              })
-            }), null);
-            insert(_el$8, createComponent(Select, {
-              label: "Panel Position",
-              get value() {
-                return settings().panelLocation;
-              },
-              options: [{
-                label: "Top",
-                value: "top"
-              }, {
-                label: "Bottom",
-                value: "bottom"
-              }],
-              onChange: (value) => setSettings({
-                panelLocation: value
-              })
-            }), null);
-            effect((_p$) => {
-              var _v$3 = styles().settingsGroup, _v$4 = styles().settingRow;
-              _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$7;
-          })()];
-        }
-      })];
-    }
-  });
-};
-export {
-  SettingsTab
-};
-//# sourceMappingURL=settings-tab.js.map