@tanstack/devtools 0.5.1 → 0.6.1

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

@@ -1,10 +1,10 @@
-import { template, insert, createComponent, effect, className, setAttribute } from "solid-js/web";
+import { createComponent, template, insert, effect, className } from "solid-js/web";
 import { createMemo, Show } from "solid-js";
-import { Checkbox, Input, Button, Select } from "@tanstack/devtools-ui";
+import { MainPanel, Section, SectionTitle, SectionIcon, SectionDescription, Checkbox, Input, Button, Select } from "@tanstack/devtools-ui";
 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><h3><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></circle></svg>General</h3><p>Configure general behavior of the devtools panel.</p><div></div></div><div><h3><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></line></svg>URL Configuration</h3><p>Control when devtools are available based on URL parameters.</p><div></div></div><div><h3><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></rect></svg>Keyboard</h3><p>Customize keyboard shortcuts for quick access.</p><div><div></div>Final shortcut is: </div></div><div><h3><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></circle></svg>Position</h3><p>Adjust the position of the trigger button and devtools panel.</p><div><div>`);
+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>`);
 const SettingsTab = () => {
   const {
     setSettings,
@@ -25,225 +25,264 @@ const SettingsTab = () => {
       openHotkey: [...existingModifiers, newHotkey, ...otherModifiers]
     });
   };
-  return (() => {
-    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.nextSibling, _el$7 = _el$2.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$0 = _el$8.nextSibling, _el$1 = _el$0.nextSibling, _el$11 = _el$7.nextSibling, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling, _el$15 = _el$14.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.nextSibling, _el$18 = _el$11.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$19.nextSibling, _el$22 = _el$21.nextSibling, _el$23 = _el$22.firstChild;
-    insert(_el$6, 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$6, 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$1, 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$1, createComponent(Show, {
-      get when() {
-        return settings().requireUrlFlag;
-      },
-      get children() {
-        var _el$10 = _tmpl$();
-        insert(_el$10, 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$10, styles().conditionalSetting));
-        return _el$10;
-      }
-    }), null);
-    insert(_el$16, 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$15, 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$17);
-    insert(_el$15, () => hotkey().join(" + "), null);
-    insert(_el$23, 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$23, 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$ = styles().settingsContainer, _v$2 = styles().settingsSection, _v$3 = styles().sectionTitle, _v$4 = styles().sectionIcon, _v$5 = styles().sectionDescription, _v$6 = styles().settingsGroup, _v$7 = styles().settingsSection, _v$8 = styles().sectionTitle, _v$9 = styles().sectionIcon, _v$0 = styles().sectionDescription, _v$1 = styles().settingsGroup, _v$10 = styles().settingsSection, _v$11 = styles().sectionTitle, _v$12 = styles().sectionIcon, _v$13 = styles().sectionDescription, _v$14 = styles().settingsGroup, _v$15 = styles().settingsModifiers, _v$16 = styles().settingsSection, _v$17 = styles().sectionTitle, _v$18 = styles().sectionIcon, _v$19 = styles().sectionDescription, _v$20 = styles().settingsGroup, _v$21 = styles().settingRow;
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
-      _v$4 !== _p$.o && setAttribute(_el$4, "class", _p$.o = _v$4);
-      _v$5 !== _p$.i && className(_el$5, _p$.i = _v$5);
-      _v$6 !== _p$.n && className(_el$6, _p$.n = _v$6);
-      _v$7 !== _p$.s && className(_el$7, _p$.s = _v$7);
-      _v$8 !== _p$.h && className(_el$8, _p$.h = _v$8);
-      _v$9 !== _p$.r && setAttribute(_el$9, "class", _p$.r = _v$9);
-      _v$0 !== _p$.d && className(_el$0, _p$.d = _v$0);
-      _v$1 !== _p$.l && className(_el$1, _p$.l = _v$1);
-      _v$10 !== _p$.u && className(_el$11, _p$.u = _v$10);
-      _v$11 !== _p$.c && className(_el$12, _p$.c = _v$11);
-      _v$12 !== _p$.w && setAttribute(_el$13, "class", _p$.w = _v$12);
-      _v$13 !== _p$.m && className(_el$14, _p$.m = _v$13);
-      _v$14 !== _p$.f && className(_el$15, _p$.f = _v$14);
-      _v$15 !== _p$.y && className(_el$16, _p$.y = _v$15);
-      _v$16 !== _p$.g && className(_el$18, _p$.g = _v$16);
-      _v$17 !== _p$.p && className(_el$19, _p$.p = _v$17);
-      _v$18 !== _p$.b && setAttribute(_el$20, "class", _p$.b = _v$18);
-      _v$19 !== _p$.T && className(_el$21, _p$.T = _v$19);
-      _v$20 !== _p$.A && className(_el$22, _p$.A = _v$20);
-      _v$21 !== _p$.O && className(_el$23, _p$.O = _v$21);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0,
-      n: void 0,
-      s: void 0,
-      h: void 0,
-      r: void 0,
-      d: void 0,
-      l: void 0,
-      u: void 0,
-      c: void 0,
-      w: void 0,
-      m: void 0,
-      f: void 0,
-      y: void 0,
-      g: void 0,
-      p: void 0,
-      b: void 0,
-      T: void 0,
-      A: void 0,
-      O: void 0
-    });
-    return _el$;
-  })();
+  return createComponent(MainPanel, {
+    withPadding: true,
+    get children() {
+      return [createComponent(Section, {
+        get children() {
+          return [createComponent(SectionTitle, {
+            get children() {
+              return [createComponent(SectionIcon, {
+                get children() {
+                  return _tmpl$();
+                }
+              }), "General"];
+            }
+          }), createComponent(SectionDescription, {
+            children: "Configure general behavior of the devtools panel."
+          }), (() => {
+            var _el$2 = _tmpl$2();
+            insert(_el$2, 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$2, 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);
+            effect(() => className(_el$2, styles().settingsGroup));
+            return _el$2;
+          })()];
+        }
+      }), createComponent(Section, {
+        get children() {
+          return [createComponent(SectionTitle, {
+            get children() {
+              return [createComponent(SectionIcon, {
+                get children() {
+                  return _tmpl$3();
+                }
+              }), "URL Configuration"];
+            }
+          }), createComponent(SectionDescription, {
+            children: "Control when devtools are available based on URL parameters."
+          }), (() => {
+            var _el$4 = _tmpl$2();
+            insert(_el$4, 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$4, createComponent(Show, {
+              get when() {
+                return settings().requireUrlFlag;
+              },
+              get children() {
+                var _el$5 = _tmpl$2();
+                insert(_el$5, 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$5, styles().conditionalSetting));
+                return _el$5;
+              }
+            }), null);
+            effect(() => className(_el$4, styles().settingsGroup));
+            return _el$4;
+          })()];
+        }
+      }), createComponent(Section, {
+        get children() {
+          return [createComponent(SectionTitle, {
+            get children() {
+              return [createComponent(SectionIcon, {
+                get children() {
+                  return _tmpl$4();
+                }
+              }), "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, {
+              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$7, 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$9);
+            insert(_el$7, () => 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);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$7;
+          })()];
+        }
+      }), createComponent(Section, {
+        get children() {
+          return [createComponent(SectionTitle, {
+            get children() {
+              return [createComponent(SectionIcon, {
+                get children() {
+                  return _tmpl$6();
+                }
+              }), "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, {
+              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$10, 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$1, _p$.e = _v$3);
+              _v$4 !== _p$.t && className(_el$10, _p$.t = _v$4);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$1;
+          })()];
+        }
+      })];
+    }
+  });
 };
 export {
   SettingsTab

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 { Button, Checkbox, Input, Select } 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    <div class={styles().settingsContainer}>\n      {/* General Settings */}\n      <div class={styles().settingsSection}>\n        <h3 class={styles().sectionTitle}>\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            class={styles().sectionIcon}\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          General\n        </h3>\n        <p class={styles().sectionDescription}>\n          Configure general behavior of the devtools panel.\n        </p>\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      </div>\n\n      {/* URL Flag Settings */}\n      <div class={styles().settingsSection}>\n        <h3 class={styles().sectionTitle}>\n          <svg\n            class={styles().sectionIcon}\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          URL Configuration\n        </h3>\n        <p class={styles().sectionDescription}>\n          Control when devtools are available based on URL parameters.\n        </p>\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      </div>\n\n      {/* Keyboard Settings */}\n      <div class={styles().settingsSection}>\n        <h3 class={styles().sectionTitle}>\n          <svg\n            class={styles().sectionIcon}\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          Keyboard\n        </h3>\n        <p class={styles().sectionDescription}>\n          Customize keyboard shortcuts for quick access.\n        </p>\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      </div>\n\n      {/* Position Settings */}\n      <div class={styles().settingsSection}>\n        <h3 class={styles().sectionTitle}>\n          <svg\n            class={styles().sectionIcon}\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          Position\n        </h3>\n        <p class={styles().sectionDescription}>\n          Adjust the position of the trigger button and devtools panel.\n        </p>\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      </div>\n    </div>\n  )\n}\n"],"names":["SettingsTab","setSettings","settings","useDevtoolsSettings","styles","useStyles","hotkey","createMemo","openHotkey","modifiers","changeHotkey","newHotkey","includes","filter","key","existingModifiers","otherModifiers","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","_el$5","nextSibling","_el$6","_el$7","_el$8","_el$9","_el$0","_el$1","_el$11","_el$12","_el$13","_el$14","_el$15","_el$16","_el$17","_el$18","_el$19","_el$20","_el$21","_el$22","_el$23","_$insert","_$createComponent","Checkbox","label","description","onChange","defaultOpen","checked","hideUntilHover","requireUrlFlag","Show","when","children","_el$10","_tmpl$","Input","placeholder","value","urlFlag","e","_$effect","_$className","conditionalSetting","keyed","Button","variant","onclick","outline","join","makeModifierArray","length","uppercaseFirstLetter","character","newLetter","push","split","flatMap","Boolean","Select","options","position","panelLocation","_p$","_v$","settingsContainer","_v$2","settingsSection","_v$3","sectionTitle","_v$4","sectionIcon","_v$5","sectionDescription","_v$6","settingsGroup","_v$7","_v$8","_v$9","_v$0","_v$1","_v$10","_v$11","_v$12","_v$13","_v$14","_v$15","settingsModifiers","_v$16","_v$17","_v$18","_v$19","_v$20","_v$21","settingRow","t","a","o","_$setAttribute","i","n","s","h","r","d","l","u","c","w","m","f","y","g","p","b","T","A","O","undefined"],"mappings":";;;;;;;AAOO,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,UAAA,MAAA;AAAA,QAAAC,OAAAC,WAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAD,YAAAG,QAAAF,MAAAG,aAAAC,QAAAF,MAAAC,aAAAE,QAAAP,MAAAK,aAAAG,QAAAD,MAAAN,YAAAQ,QAAAD,MAAAP,YAAAS,QAAAF,MAAAH,aAAAM,QAAAD,MAAAL,aAAAO,SAAAL,MAAAF,aAAAQ,SAAAD,OAAAX,YAAAa,SAAAD,OAAAZ,YAAAc,SAAAF,OAAAR,aAAAW,SAAAD,OAAAV,aAAAY,SAAAD,OAAAf,YAAAiB,SAAAD,OAAAZ,aAAAc,SAAAP,OAAAP,aAAAe,SAAAD,OAAAlB,YAAAoB,SAAAD,OAAAnB,YAAAqB,SAAAF,OAAAf,aAAAkB,SAAAD,OAAAjB,aAAAmB,SAAAD,OAAAtB;AAAAwB,WAAAnB,OAAAoB,gBA0BSC,UAAQ;AAAA,MACPC,OAAK;AAAA,MACLC,aAAW;AAAA,MACXC,UAAUA,MACRhD,YAAY;AAAA,QAAEiD,aAAa,CAAChD,WAAWgD;AAAAA,MAAAA,CAAa;AAAA,MAAC,IAEvDC,UAAO;AAAA,eAAEjD,WAAWgD;AAAAA,MAAW;AAAA,IAAA,CAAA,GAAA,IAAA;AAAAN,WAAAnB,OAAAoB,gBAEhCC,UAAQ;AAAA,MACPC,OAAK;AAAA,MACLC,aAAW;AAAA,MACXC,UAAUA,MACRhD,YAAY;AAAA,QAAEmD,gBAAgB,CAAClD,WAAWkD;AAAAA,MAAAA,CAAgB;AAAA,MAAC,IAE7DD,UAAO;AAAA,eAAEjD,WAAWkD;AAAAA,MAAc;AAAA,IAAA,CAAA,GAAA,IAAA;AAAAR,WAAAd,OAAAe,gBA8BnCC,UAAQ;AAAA,MACPC,OAAK;AAAA,MACLC,aAAW;AAAA,MAAA,IACXG,UAAO;AAAA,eAAEjD,WAAWmD;AAAAA,MAAc;AAAA,MAClCJ,UAAWE,aACTlD,YAAY;AAAA,QACVoD,gBAAgBF;AAAAA,MAAAA,CACjB;AAAA,IAAA,CAAC,GAAA,IAAA;AAAAP,WAAAd,OAAAe,gBAGLS,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAErD,WAAWmD;AAAAA,MAAc;AAAA,MAAA,IAAAG,WAAA;AAAA,YAAAC,SAAAC,OAAAA;AAAAd,eAAAa,QAAAZ,gBAEhCc,OAAK;AAAA,UACJZ,OAAK;AAAA,UACLC,aAAW;AAAA,UACXY,aAAW;AAAA,UAAA,IACXC,QAAK;AAAA,mBAAE3D,WAAW4D;AAAAA,UAAO;AAAA,UACzBb,UAAWc,OACT9D,YAAY;AAAA,YACV6D,SAASC;AAAAA,UAAAA,CACV;AAAA,QAAA,CAAC,CAAA;AAAAC,eAAA,MAAAC,UAAAR,QATIrD,OAAAA,EAAS8D,kBAAkB,CAAA;AAAA,eAAAT;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA;AAAAb,WAAAR,QAAAS,gBAiDtCS,MAAI;AAAA,MAACa,OAAK;AAAA,MAAA,IAACZ,OAAI;AAAA,eAAEjD,OAAAA;AAAAA,MAAQ;AAAA,MAAA,IAAAkD,WAAA;AAAA,eAAA,CAAAX,gBACvBuB,QAAM;AAAA,UACLC,SAAO;AAAA,UAAA,IACPC,UAAO;AAAA,mBAAE5D,aAAa,OAAO;AAAA,UAAC;AAAA,UAAA,IAC9B6D,UAAO;AAAA,mBAAE,CAACjE,OAAAA,EAASM,SAAS,OAAO;AAAA,UAAC;AAAA,UAAA4C,UAAA;AAAA,QAAA,CAAA,GAAAX,gBAIrCuB,QAAM;AAAA,UACLC,SAAO;AAAA,UAAA,IACPC,UAAO;AAAA,mBAAE5D,aAAa,KAAK;AAAA,UAAC;AAAA,UAAA,IAC5B6D,UAAO;AAAA,mBAAE,CAACjE,OAAAA,EAASM,SAAS,KAAK;AAAA,UAAC;AAAA,UAAA4C,UAAA;AAAA,QAAA,CAAA,GAAAX,gBAInCuB,QAAM;AAAA,UACLC,SAAO;AAAA,UAAA,IACPC,UAAO;AAAA,mBAAE5D,aAAa,MAAM;AAAA,UAAC;AAAA,UAAA,IAC7B6D,UAAO;AAAA,mBAAE,CAACjE,OAAAA,EAASM,SAAS,MAAM;AAAA,UAAC;AAAA,UAAA4C,UAAA;AAAA,QAAA,CAAA,GAAAX,gBAIpCuB,QAAM;AAAA,UACLC,SAAO;AAAA,UAAA,IACPC,UAAO;AAAA,mBAAE5D,aAAa,SAAS;AAAA,UAAC;AAAA,UAAA,IAChC6D,UAAO;AAAA,mBAAE,CAACjE,OAAAA,EAASM,SAAS,SAAS;AAAA,UAAC;AAAA,UAAA4C,UAAA;AAAA,QAAA,CAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,CAAA;AAAAZ,WAAAT,QAAAU,gBAM3Cc,OAAK;AAAA,MACJZ,OAAK;AAAA,MACLC,aAAW;AAAA,MACXY,aAAW;AAAA,MAAA,IACXC,QAAK;AAAA,eAAEvD,SACJO,OAAQC,CAAAA,QAAQ,CAAC,CAAC,SAAS,QAAQ,OAAO,MAAM,EAAEF,SAASE,GAAG,CAAC,EAC/D0D,KAAK,GAAG;AAAA,MAAC;AAAA,MACZvB,UAAWc,CAAAA,MAAM;AACf,cAAMU,oBAAoBA,CAAC3D,QAAgB;AACzC,cAAIA,IAAI4D,WAAW,UAAU,CAACC,qBAAqB7D,GAAG,CAAC;AACvD,gBAAML,aAA2B,CAAA;AACjC,qBAAWmE,aAAa9D,KAAK;AAC3B,kBAAM+D,YAAYF,qBAAqBC,SAAS;AAChD,gBAAI,CAACnE,WAAUG,SAASiE,SAAS,EAAGpE,YAAUqE,KAAKD,SAAS;AAAA,UAC9D;AACA,iBAAOpE;AAAAA,QACT;AACA,cAAMA,aAAYsD,EACfgB,MAAM,GAAG,EACTC,QAASlE,CAAAA,QAAQ2D,kBAAkB3D,GAAG,CAAC,EACvCD,OAAOoE,OAAO;AACjB,eAAOhF,YAAY;AAAA,UACjBO,YAAY,CACV,GAAGF,SAASO,OAAQC,SAClB,CAAC,SAAS,QAAQ,OAAO,MAAM,EAAEF,SAASE,GAAG,CAC/C,GACA,GAAGL,UAAS;AAAA,QAAA,CAEf;AAAA,MACH;AAAA,IAAA,CAAC,GAAA4B,MAAA;AAAAO,WAAAT,QAAA,MAEiB7B,OAAAA,EAASkE,KAAK,KAAK,GAAC,IAAA;AAAA5B,WAAAD,QAAAE,gBA6BrCqC,QAAM;AAAA,MACLnC,OAAK;AAAA,MACLoC,SAAS,CACP;AAAA,QAAEpC,OAAO;AAAA,QAAgBc,OAAO;AAAA,MAAA,GAChC;AAAA,QAAEd,OAAO;AAAA,QAAec,OAAO;AAAA,MAAA,GAC/B;AAAA,QAAEd,OAAO;AAAA,QAAac,OAAO;AAAA,MAAA,GAC7B;AAAA,QAAEd,OAAO;AAAA,QAAYc,OAAO;AAAA,MAAA,GAC5B;AAAA,QAAEd,OAAO;AAAA,QAAgBc,OAAO;AAAA,MAAA,GAChC;AAAA,QAAEd,OAAO;AAAA,QAAec,OAAO;AAAA,MAAA,CAAe;AAAA,MAC/C,IACDA,QAAK;AAAA,eAAE3D,WAAWkF;AAAAA,MAAQ;AAAA,MAC1BnC,UAAWY,WACT5D,YAAY;AAAA,QACVmF,UAAUvB;AAAAA,MAAAA,CACX;AAAA,IAAA,CAAC,GAAA,IAAA;AAAAjB,WAAAD,QAAAE,gBAGLqC,QAAM;AAAA,MACLnC,OAAK;AAAA,MAAA,IACLc,QAAK;AAAA,eAAE3D,WAAWmF;AAAAA,MAAa;AAAA,MAC/BF,SAAS,CACP;AAAA,QAAEpC,OAAO;AAAA,QAAOc,OAAO;AAAA,MAAA,GACvB;AAAA,QAAEd,OAAO;AAAA,QAAUc,OAAO;AAAA,MAAA,CAAU;AAAA,MAEtCZ,UAAWY,WACT5D,YAAY;AAAA,QACVoF,eAAexB;AAAAA,MAAAA,CAChB;AAAA,IAAA,CAAC,GAAA,IAAA;AAAAG,WAAAsB,CAAAA,QAAA;AAAA,UAAAC,MAvPFnF,OAAAA,EAASoF,mBAAiBC,OAExBrF,OAAAA,EAASsF,iBAAeC,OACvBvF,SAASwF,cAAYC,OAWrBzF,SAAS0F,aAAWC,OAOrB3F,OAAAA,EAAS4F,oBAAkBC,OAGzB7F,SAAS8F,eAAaC,OAqBxB/F,SAASsF,iBAAeU,OACvBhG,OAAAA,EAASwF,cAAYS,OAErBjG,SAAS0F,aAAWQ,OAiBrBlG,OAAAA,EAAS4F,oBAAkBO,OAGzBnG,SAAS8F,eAAaM,QA8BxBpG,OAAAA,EAASsF,iBAAee,QACvBrG,OAAAA,EAASwF,cAAYc,QAErBtG,SAAS0F,aAAWa,QAuBrBvG,SAAS4F,oBAAkBY,QAGzBxG,OAAAA,EAAS8F,eAAaW,QACpBzG,SAAS0G,mBAAiBC,QAoE9B3G,SAASsF,iBAAesB,QACvB5G,OAAAA,EAASwF,cAAYqB,QAErB7G,SAAS0F,aAAWoB,QAgBrB9G,OAAAA,EAAS4F,oBAAkBmB,QAGzB/G,OAAAA,EAAS8F,eAAakB,QACpBhH,SAASiH;AAAU9B,cAAAD,IAAAvB,KAAAE,UAAAhD,MAAAqE,IAAAvB,IAAAwB,GAAA;AAAAE,eAAAH,IAAAgC,KAAArD,UAAA9C,OAAAmE,IAAAgC,IAAA7B,IAAA;AAAAE,eAAAL,IAAAiC,KAAAtD,UAAA5C,OAAAiE,IAAAiC,IAAA5B,IAAA;AAAAE,eAAAP,IAAAkC,KAAAC,aAAAnG,OAAA,SAAAgE,IAAAkC,IAAA3B,IAAA;AAAAE,eAAAT,IAAAoC,KAAAzD,UAAA1C,OAAA+D,IAAAoC,IAAA3B,IAAA;AAAAE,eAAAX,IAAAqC,KAAA1D,UAAAxC,OAAA6D,IAAAqC,IAAA1B,IAAA;AAAAE,eAAAb,IAAAsC,KAAA3D,UAAAvC,OAAA4D,IAAAsC,IAAAzB,IAAA;AAAAC,eAAAd,IAAAuC,KAAA5D,UAAAtC,OAAA2D,IAAAuC,IAAAzB,IAAA;AAAAC,eAAAf,IAAAwC,KAAAL,aAAA7F,OAAA,SAAA0D,IAAAwC,IAAAzB,IAAA;AAAAC,eAAAhB,IAAAyC,KAAA9D,UAAApC,OAAAyD,IAAAyC,IAAAzB,IAAA;AAAAC,eAAAjB,IAAA0C,KAAA/D,UAAAnC,OAAAwD,IAAA0C,IAAAzB,IAAA;AAAAC,gBAAAlB,IAAA2C,KAAAhE,UAAAlC,QAAAuD,IAAA2C,IAAAzB,KAAA;AAAAC,gBAAAnB,IAAA4C,KAAAjE,UAAAjC,QAAAsD,IAAA4C,IAAAzB,KAAA;AAAAC,gBAAApB,IAAA6C,KAAAV,aAAAxF,QAAA,SAAAqD,IAAA6C,IAAAzB,KAAA;AAAAC,gBAAArB,IAAA8C,KAAAnE,UAAA/B,QAAAoD,IAAA8C,IAAAzB,KAAA;AAAAC,gBAAAtB,IAAA+C,KAAApE,UAAA9B,QAAAmD,IAAA+C,IAAAzB,KAAA;AAAAC,gBAAAvB,IAAAgD,KAAArE,UAAA7B,QAAAkD,IAAAgD,IAAAzB,KAAA;AAAAE,gBAAAzB,IAAAiD,KAAAtE,UAAA3B,QAAAgD,IAAAiD,IAAAxB,KAAA;AAAAC,gBAAA1B,IAAAkD,KAAAvE,UAAA1B,QAAA+C,IAAAkD,IAAAxB,KAAA;AAAAC,gBAAA3B,IAAAmD,KAAAhB,aAAAjF,QAAA,SAAA8C,IAAAmD,IAAAxB,KAAA;AAAAC,gBAAA5B,IAAAoD,KAAAzE,UAAAxB,QAAA6C,IAAAoD,IAAAxB,KAAA;AAAAC,gBAAA7B,IAAAqD,KAAA1E,UAAAvB,QAAA4C,IAAAqD,IAAAxB,KAAA;AAAAC,gBAAA9B,IAAAsD,KAAA3E,UAAAtB,QAAA2C,IAAAsD,IAAAxB,KAAA;AAAA,aAAA9B;AAAAA,IAAA,GAAA;AAAA,MAAAvB,GAAA8E;AAAAA,MAAAvB,GAAAuB;AAAAA,MAAAtB,GAAAsB;AAAAA,MAAArB,GAAAqB;AAAAA,MAAAnB,GAAAmB;AAAAA,MAAAlB,GAAAkB;AAAAA,MAAAjB,GAAAiB;AAAAA,MAAAhB,GAAAgB;AAAAA,MAAAf,GAAAe;AAAAA,MAAAd,GAAAc;AAAAA,MAAAb,GAAAa;AAAAA,MAAAZ,GAAAY;AAAAA,MAAAX,GAAAW;AAAAA,MAAAV,GAAAU;AAAAA,MAAAT,GAAAS;AAAAA,MAAAR,GAAAQ;AAAAA,MAAAP,GAAAO;AAAAA,MAAAN,GAAAM;AAAAA,MAAAL,GAAAK;AAAAA,MAAAJ,GAAAI;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAA5H;AAAAA,EAAA,GAAA;AAoCzC;"}
+{"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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"}