@tanstack/devtools 0.0.0 → 0.1.0

package/dist/cjs/tabs/settings-tab.cjs

@@ -1,9 +1,179 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div>Settings`);
+const solidJs = require("solid-js");
+const input = require("../components/input.cjs");
+const select = require("../components/select.cjs");
+const useDevtoolsContext = require("../context/use-devtools-context.cjs");
+const sanitize = require("../utils/sanitize.cjs");
+const checkbox = require("../components/checkbox.cjs");
+const useStyles = require("../styles/use-styles.cjs");
+var _tmpl$ = /* @__PURE__ */ web.template(`<div>`), _tmpl$2 = /* @__PURE__ */ web.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><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>`);
 const SettingsTab = () => {
-  return _tmpl$();
+  const {
+    setSettings,
+    settings
+  } = useDevtoolsContext.useDevtoolsSettings();
+  const styles = useStyles.useStyles();
+  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$10 = _el$8.nextSibling, _el$11 = _el$10.nextSibling, _el$13 = _el$7.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$14.nextSibling, _el$17 = _el$16.nextSibling, _el$18 = _el$13.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;
+    web.insert(_el$6, web.createComponent(checkbox.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);
+    web.insert(_el$6, web.createComponent(checkbox.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);
+    web.insert(_el$11, web.createComponent(checkbox.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);
+    web.insert(_el$11, web.createComponent(solidJs.Show, {
+      get when() {
+        return settings().requireUrlFlag;
+      },
+      get children() {
+        var _el$12 = _tmpl$();
+        web.insert(_el$12, web.createComponent(input.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
+          })
+        }));
+        web.effect(() => web.className(_el$12, styles().conditionalSetting));
+        return _el$12;
+      }
+    }), null);
+    web.insert(_el$17, web.createComponent(input.Input, {
+      label: "Hotkey to open/close devtools",
+      description: "Use '+' to combine keys (e.g., 'Ctrl+Shift+D' or 'Alt+D')",
+      placeholder: "Ctrl+Shift+D",
+      get value() {
+        return settings().openHotkey.join("+");
+      },
+      onChange: (e) => setSettings({
+        openHotkey: e.split("+").map((key) => sanitize.uppercaseFirstLetter(key)).filter(Boolean)
+      })
+    }));
+    web.insert(_el$23, web.createComponent(select.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);
+    web.insert(_el$23, web.createComponent(select.Select, {
+      label: "Panel Position",
+      get value() {
+        return settings().panelLocation;
+      },
+      options: [{
+        label: "Top",
+        value: "top"
+      }, {
+        label: "Bottom",
+        value: "bottom"
+      }],
+      onChange: (value) => setSettings({
+        panelLocation: value
+      })
+    }), null);
+    web.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$10 = styles().sectionDescription, _v$11 = styles().settingsGroup, _v$12 = styles().settingsSection, _v$13 = styles().sectionTitle, _v$14 = styles().sectionIcon, _v$15 = styles().sectionDescription, _v$16 = styles().settingsGroup, _v$17 = styles().settingsSection, _v$18 = styles().sectionTitle, _v$19 = styles().sectionIcon, _v$20 = styles().sectionDescription, _v$21 = styles().settingsGroup, _v$22 = styles().settingRow;
+      _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
+      _v$3 !== _p$.a && web.className(_el$3, _p$.a = _v$3);
+      _v$4 !== _p$.o && web.setAttribute(_el$4, "class", _p$.o = _v$4);
+      _v$5 !== _p$.i && web.className(_el$5, _p$.i = _v$5);
+      _v$6 !== _p$.n && web.className(_el$6, _p$.n = _v$6);
+      _v$7 !== _p$.s && web.className(_el$7, _p$.s = _v$7);
+      _v$8 !== _p$.h && web.className(_el$8, _p$.h = _v$8);
+      _v$9 !== _p$.r && web.setAttribute(_el$9, "class", _p$.r = _v$9);
+      _v$10 !== _p$.d && web.className(_el$10, _p$.d = _v$10);
+      _v$11 !== _p$.l && web.className(_el$11, _p$.l = _v$11);
+      _v$12 !== _p$.u && web.className(_el$13, _p$.u = _v$12);
+      _v$13 !== _p$.c && web.className(_el$14, _p$.c = _v$13);
+      _v$14 !== _p$.w && web.setAttribute(_el$15, "class", _p$.w = _v$14);
+      _v$15 !== _p$.m && web.className(_el$16, _p$.m = _v$15);
+      _v$16 !== _p$.f && web.className(_el$17, _p$.f = _v$16);
+      _v$17 !== _p$.y && web.className(_el$18, _p$.y = _v$17);
+      _v$18 !== _p$.g && web.className(_el$19, _p$.g = _v$18);
+      _v$19 !== _p$.p && web.setAttribute(_el$20, "class", _p$.p = _v$19);
+      _v$20 !== _p$.b && web.className(_el$21, _p$.b = _v$20);
+      _v$21 !== _p$.T && web.className(_el$22, _p$.T = _v$21);
+      _v$22 !== _p$.A && web.className(_el$23, _p$.A = _v$22);
+      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
+    });
+    return _el$;
+  })();
 };
 exports.SettingsTab = SettingsTab;
 //# sourceMappingURL=settings-tab.cjs.map

package/dist/cjs/tabs/settings-tab.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"settings-tab.cjs","sources":["../../../src/tabs/settings-tab.tsx"],"sourcesContent":["export const SettingsTab = () => {\n  return <div>Settings</div>\n}\n"],"names":["SettingsTab","_tmpl$"],"mappings":";;;;AAAO,MAAMA,cAAcA,MAAM;AAC/B,SAAAC,OAAA;AACF;;"}
+{"version":3,"file":"settings-tab.cjs","sources":["../../../src/tabs/settings-tab.tsx"],"sourcesContent":["import { Show } from 'solid-js'\nimport { Input } from '../components/input'\nimport { Select } from '../components/select'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { uppercaseFirstLetter } from '../utils/sanitize'\nimport { Checkbox } from '../components/checkbox'\nimport { useStyles } from '../styles/use-styles'\n\nexport const SettingsTab = () => {\n  const { setSettings, settings } = useDevtoolsSettings()\n  const styles = useStyles()\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          <Input\n            label=\"Hotkey to open/close devtools\"\n            description=\"Use '+' to combine keys (e.g., 'Ctrl+Shift+D' or 'Alt+D')\"\n            placeholder=\"Ctrl+Shift+D\"\n            value={settings().openHotkey.join('+')}\n            onChange={(e) =>\n              setSettings({\n                openHotkey: e\n                  .split('+')\n                  .map((key) => uppercaseFirstLetter(key))\n                  .filter(Boolean),\n              })\n            }\n          />\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","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","_el$5","nextSibling","_el$6","_el$7","_el$8","_el$9","_el$10","_el$11","_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$12","_tmpl$","Input","placeholder","value","urlFlag","e","_$effect","_$className","conditionalSetting","openHotkey","join","split","map","key","uppercaseFirstLetter","filter","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$10","_v$11","_v$12","_v$13","_v$14","_v$15","_v$16","_v$17","_v$18","_v$19","_v$20","_v$21","_v$22","settingRow","t","a","o","_$setAttribute","i","n","s","h","r","d","l","u","c","w","m","f","y","g","p","b","T","A","undefined"],"mappings":"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"}

package/dist/cjs/utils/sanitize.cjs

@@ -8,5 +8,7 @@ const tryParseJson = (json) => {
     return void 0;
   }
 };
+const uppercaseFirstLetter = (value) => value.charAt(0).toUpperCase() + value.slice(1);
 exports.tryParseJson = tryParseJson;
+exports.uppercaseFirstLetter = uppercaseFirstLetter;
 //# sourceMappingURL=sanitize.cjs.map

package/dist/cjs/utils/sanitize.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sanitize.cjs","sources":["../../../src/utils/sanitize.ts"],"sourcesContent":["export const tryParseJson = <T>(json: string | null): T | undefined => {\n  if (!json) return undefined\n  try {\n    return JSON.parse(json)\n  } catch (_e) {\n    return undefined\n  }\n}\n"],"names":[],"mappings":";;AAAa,MAAA,eAAe,CAAI,SAAuC;AACjE,MAAA,CAAC,KAAa,QAAA;AACd,MAAA;AACK,WAAA,KAAK,MAAM,IAAI;AAAA,WACf,IAAI;AACJ,WAAA;AAAA,EAAA;AAEX;;"}
+{"version":3,"file":"sanitize.cjs","sources":["../../../src/utils/sanitize.ts"],"sourcesContent":["export const tryParseJson = <T>(json: string | null): T | undefined => {\n  if (!json) return undefined\n  try {\n    return JSON.parse(json)\n  } catch (_e) {\n    return undefined\n  }\n}\n\nexport const uppercaseFirstLetter = (value: string) =>\n  value.charAt(0).toUpperCase() + value.slice(1)\n"],"names":[],"mappings":";;AAAO,MAAM,eAAe,CAAI,SAAuC;AACrE,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI;AACF,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB,SAAS,IAAI;AACX,WAAO;AAAA,EACT;AACF;AAEO,MAAM,uBAAuB,CAAC,UACnC,MAAM,OAAO,CAAC,EAAE,YAAA,IAAgB,MAAM,MAAM,CAAC;;;"}

package/dist/cjs/utils/sanitize.d.cts

@@ -1 +1,2 @@
 export declare const tryParseJson: <T>(json: string | null) => T | undefined;
+export declare const uppercaseFirstLetter: (value: string) => string;

package/dist/cjs/utils/storage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"storage.cjs","sources":["../../../src/utils/storage.ts"],"sourcesContent":["export const getStorageItem = (key: string) => localStorage.getItem(key)\nexport const setStorageItem = (key: string, value: string) => {\n  try {\n    localStorage.setItem(key, value)\n  } catch (_e) {\n    return\n  }\n}\n\nexport const TANSTACK_DEVTOOLS = 'tanstack_devtools'\nexport const TANSTACK_DEVTOOLS_STATE = 'tanstack_devtools_state'\nexport const TANSTACK_DEVTOOLS_SETTINGS = 'tanstack_devtools_settings'\n"],"names":[],"mappings":";;AAAO,MAAM,iBAAiB,CAAC,QAAgB,aAAa,QAAQ,GAAG;AAC1D,MAAA,iBAAiB,CAAC,KAAa,UAAkB;AACxD,MAAA;AACW,iBAAA,QAAQ,KAAK,KAAK;AAAA,WACxB,IAAI;AACX;AAAA,EAAA;AAEJ;AAEO,MAAM,oBAAoB;AAC1B,MAAM,0BAA0B;AAChC,MAAM,6BAA6B;;;;;;"}
+{"version":3,"file":"storage.cjs","sources":["../../../src/utils/storage.ts"],"sourcesContent":["export const getStorageItem = (key: string) => localStorage.getItem(key)\nexport const setStorageItem = (key: string, value: string) => {\n  try {\n    localStorage.setItem(key, value)\n  } catch (_e) {\n    return\n  }\n}\n\nexport const TANSTACK_DEVTOOLS = 'tanstack_devtools'\nexport const TANSTACK_DEVTOOLS_STATE = 'tanstack_devtools_state'\nexport const TANSTACK_DEVTOOLS_SETTINGS = 'tanstack_devtools_settings'\n"],"names":[],"mappings":";;AAAO,MAAM,iBAAiB,CAAC,QAAgB,aAAa,QAAQ,GAAG;AAChE,MAAM,iBAAiB,CAAC,KAAa,UAAkB;AAC5D,MAAI;AACF,iBAAa,QAAQ,KAAK,KAAK;AAAA,EACjC,SAAS,IAAI;AACX;AAAA,EACF;AACF;AAEO,MAAM,oBAAoB;AAC1B,MAAM,0BAA0B;AAChC,MAAM,6BAA6B;;;;;;"}

package/dist/esm/components/checkbox.d.ts

@@ -0,0 +1,8 @@
+interface CheckboxProps {
+    label?: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    description?: string;
+}
+export declare function Checkbox(props: CheckboxProps): import("solid-js").JSX.Element;
+export {};

package/dist/esm/components/checkbox.js

@@ -0,0 +1,55 @@
+import { template, insert, memo, effect, className, delegateEvents } from "solid-js/web";
+import { createSignal } from "solid-js";
+import { useStyles } from "../styles/use-styles.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div><label><input type=checkbox><div>`), _tmpl$2 = /* @__PURE__ */ template(`<span>`);
+function Checkbox(props) {
+  const styles = useStyles();
+  const [isChecked, setIsChecked] = createSignal(props.checked || false);
+  const handleChange = (e) => {
+    const checked = e.target.checked;
+    setIsChecked(checked);
+    props.onChange?.(checked);
+  };
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+    _el$3.$$input = handleChange;
+    insert(_el$4, (() => {
+      var _c$ = memo(() => !!props.label);
+      return () => _c$() && (() => {
+        var _el$5 = _tmpl$2();
+        insert(_el$5, () => props.label);
+        effect(() => className(_el$5, styles().checkboxLabel));
+        return _el$5;
+      })();
+    })(), null);
+    insert(_el$4, (() => {
+      var _c$2 = memo(() => !!props.description);
+      return () => _c$2() && (() => {
+        var _el$6 = _tmpl$2();
+        insert(_el$6, () => props.description);
+        effect(() => className(_el$6, styles().checkboxDescription));
+        return _el$6;
+      })();
+    })(), null);
+    effect((_p$) => {
+      var _v$ = styles().checkboxContainer, _v$2 = styles().checkboxWrapper, _v$3 = styles().checkbox, _v$4 = styles().checkboxLabelContainer;
+      _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 && className(_el$4, _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    effect(() => _el$3.checked = isChecked());
+    return _el$;
+  })();
+}
+delegateEvents(["input"]);
+export {
+  Checkbox
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/esm/components/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox.tsx"],"sourcesContent":["import { createSignal } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\n\ninterface CheckboxProps {\n  label?: string\n  checked?: boolean\n  onChange?: (checked: boolean) => void\n  description?: string\n}\n\nexport function Checkbox(props: CheckboxProps) {\n  const styles = useStyles()\n  const [isChecked, setIsChecked] = createSignal(props.checked || false)\n\n  const handleChange = (e: Event) => {\n    const checked = (e.target as HTMLInputElement).checked\n    setIsChecked(checked)\n    props.onChange?.(checked)\n  }\n\n  return (\n    <div class={styles().checkboxContainer}>\n      <label class={styles().checkboxWrapper}>\n        <input\n          type=\"checkbox\"\n          checked={isChecked()}\n          class={styles().checkbox}\n          onInput={handleChange}\n        />\n        <div class={styles().checkboxLabelContainer}>\n          {props.label && (\n            <span class={styles().checkboxLabel}>{props.label}</span>\n          )}\n          {props.description && (\n            <span class={styles().checkboxDescription}>\n              {props.description}\n            </span>\n          )}\n        </div>\n      </label>\n    </div>\n  )\n}\n"],"names":["Checkbox","props","styles","useStyles","isChecked","setIsChecked","createSignal","checked","handleChange","e","target","onChange","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","$$input","_$insert","_c$","_$memo","label","_el$5","_tmpl$2","_$effect","_$className","checkboxLabel","_c$2","description","_el$6","checkboxDescription","_p$","_v$","checkboxContainer","_v$2","checkboxWrapper","_v$3","checkbox","_v$4","checkboxLabelContainer","t","a","o","undefined","_$delegateEvents"],"mappings":";;;;AAUO,SAASA,SAASC,OAAsB;AAC7C,QAAMC,SAASC,UAAAA;AACf,QAAM,CAACC,WAAWC,YAAY,IAAIC,aAAaL,MAAMM,WAAW,KAAK;AAErE,QAAMC,eAAeA,CAACC,MAAa;AACjC,UAAMF,UAAWE,EAAEC,OAA4BH;AAC/CF,iBAAaE,OAAO;AACpBN,UAAMU,WAAWJ,OAAO;AAAA,EAC1B;AAEA,UAAA,MAAA;AAAA,QAAAK,OAAAC,UAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE;AAAAF,UAAAG,UAOiBX;AAAYY,WAAAH,QAAA,MAAA;AAAA,UAAAI,MAAAC,KAAA,MAAA,CAAA,CAGpBrB,MAAMsB,KAAK;AAAA,aAAA,MAAXF,IAAAA,MAAA,MAAA;AAAA,YAAAG,QAAAC,QAAAA;AAAAL,eAAAI,OAAA,MACuCvB,MAAMsB,KAAK;AAAAG,eAAA,MAAAC,UAAAH,OAApCtB,OAAAA,EAAS0B,aAAa,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IACpC,GAAA,GAAA,IAAA;AAAAJ,WAAAH,QAAA,MAAA;AAAA,UAAAY,OAAAP,KAAA,MAAA,CAAA,CACArB,MAAM6B,WAAW;AAAA,aAAA,MAAjBD,KAAAA,MAAA,MAAA;AAAA,YAAAE,QAAAN,QAAAA;AAAAL,eAAAW,OAAA,MAEI9B,MAAM6B,WAAW;AAAAJ,eAAA,MAAAC,UAAAI,OADP7B,OAAAA,EAAS8B,mBAAmB,CAAA;AAAA,eAAAD;AAAAA,MAAA,GAAA;AAAA,IAG1C,GAAA,GAAA,IAAA;AAAAL,WAAAO,CAAAA,QAAA;AAAA,UAAAC,MAhBKhC,OAAAA,EAASiC,mBAAiBC,OACtBlC,OAAAA,EAASmC,iBAAeC,OAI3BpC,OAAAA,EAASqC,UAAQC,OAGdtC,SAASuC;AAAsBP,cAAAD,IAAAxB,KAAAkB,UAAAf,MAAAqB,IAAAxB,IAAAyB,GAAA;AAAAE,eAAAH,IAAAS,KAAAf,UAAAb,OAAAmB,IAAAS,IAAAN,IAAA;AAAAE,eAAAL,IAAAU,KAAAhB,UAAAX,OAAAiB,IAAAU,IAAAL,IAAA;AAAAE,eAAAP,IAAAW,KAAAjB,UAAAV,OAAAgB,IAAAW,IAAAJ,IAAA;AAAA,aAAAP;AAAAA,IAAA,GAAA;AAAA,MAAAxB,GAAAoC;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAnB,iBAAAV,MAAAT,UAJhCH,UAAAA,CAAW;AAAA,WAAAQ;AAAAA,EAAA,GAAA;AAiB9B;AAACkC,eAAA,CAAA,OAAA,CAAA;"}

package/dist/esm/components/content-panel.js

@@ -1,8 +1,12 @@
 import { template, use, insert, memo, addEventListener, effect, className, delegateEvents } from "solid-js/web";
+import { useDevtoolsSettings } from "../context/use-devtools-context.js";
 import { useStyles } from "../styles/use-styles.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 const ContentPanel = (props) => {
   const styles = useStyles();
+  const {
+    settings
+  } = useDevtoolsSettings();
   return (() => {
     var _el$ = _tmpl$();
     var _ref$ = props.ref;
@@ -12,7 +16,7 @@ const ContentPanel = (props) => {
       return () => _c$() ? (() => {
         var _el$2 = _tmpl$();
         addEventListener(_el$2, "mousedown", props.handleDragStart, true);
-        effect(() => className(_el$2, styles().dragHandle));
+        effect(() => className(_el$2, styles().dragHandle(settings().panelLocation)));
         return _el$2;
       })() : null;
     })(), null);

package/dist/esm/components/content-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-panel.js","sources":["../../../src/components/content-panel.tsx"],"sourcesContent":["import { useStyles } from '../styles/use-styles'\nimport type { JSX } from 'solid-js/jsx-runtime'\n\nexport const ContentPanel = (props: {\n  ref: (el: HTMLDivElement | undefined) => void\n  children: JSX.Element\n  handleDragStart?: (e: any) => void\n}) => {\n  const styles = useStyles()\n  return (\n    <div ref={props.ref} class={styles().devtoolsPanel}>\n      {props.handleDragStart ? (\n        <div\n          class={styles().dragHandle}\n          onMouseDown={props.handleDragStart}\n        ></div>\n      ) : null}\n      {props.children}\n    </div>\n  )\n}\n"],"names":["ContentPanel","props","styles","useStyles","_el$","_tmpl$","_ref$","ref","_$use","_$insert","_c$","_$memo","handleDragStart","_el$2","_$addEventListener","_$effect","_$className","dragHandle","children","devtoolsPanel","_$delegateEvents"],"mappings":";;;AAGaA,MAAAA,eAAeA,CAACC,UAIvB;AACJ,QAAMC,SAASC,UAAU;AACzB,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAA,QAAAC,QACYL,MAAMM;AAAG,WAAAD,UAAA,aAAAE,IAAAF,OAAAF,IAAA,IAATH,MAAMM,MAAGH;AAAAK,WAAAL,OAAA,MAAA;AAAA,UAAAM,MAAAC,KAChBV,MAAAA,CAAAA,CAAAA,MAAMW,eAAe;AAAA,aAAA,MAArBF,IAAA,KAAA,MAAA;AAAA,YAAAG,QAAAR,OAAA;AAAAS,yBAAAD,OAGgBZ,aAAAA,MAAMW,iBAAe,IAAA;AAAAG,eAAA,MAAAC,UAAAH,OAD3BX,OAAO,EAAEe,UAAU,CAAA;AAAAJ,eAAAA;AAAAA,aAG1B;AAAA,IAAI,GAAA,GAAA,IAAA;AAAAJ,WAAAL,MACPH,MAAAA,MAAMiB,UAAQ,IAAA;AAAAH,WAAA,MAAAC,UAAAZ,MAPWF,OAAO,EAAEiB,aAAa,CAAA;AAAAf,WAAAA;AAAAA,EAAAA,GAAA;AAUtD;AAACgB,eAAA,CAAA,WAAA,CAAA;"}
+{"version":3,"file":"content-panel.js","sources":["../../../src/components/content-panel.tsx"],"sourcesContent":["import { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport type { JSX } from 'solid-js/jsx-runtime'\n\nexport const ContentPanel = (props: {\n  ref: (el: HTMLDivElement | undefined) => void\n  children: JSX.Element\n  handleDragStart?: (e: any) => void\n}) => {\n  const styles = useStyles()\n  const { settings } = useDevtoolsSettings()\n  return (\n    <div ref={props.ref} class={styles().devtoolsPanel}>\n      {props.handleDragStart ? (\n        <div\n          class={styles().dragHandle(settings().panelLocation)}\n          onMouseDown={props.handleDragStart}\n        ></div>\n      ) : null}\n      {props.children}\n    </div>\n  )\n}\n"],"names":["ContentPanel","props","styles","useStyles","settings","useDevtoolsSettings","_el$","_tmpl$","_ref$","ref","_$use","_$insert","_c$","_$memo","handleDragStart","_el$2","_$addEventListener","_$effect","_$className","dragHandle","panelLocation","children","devtoolsPanel","_$delegateEvents"],"mappings":";;;;AAIO,MAAMA,eAAeA,CAACC,UAIvB;AACJ,QAAMC,SAASC,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAaC,oBAAAA;AACrB,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QACYP,MAAMQ;AAAG,WAAAD,UAAA,aAAAE,IAAAF,OAAAF,IAAA,IAATL,MAAMQ,MAAGH;AAAAK,WAAAL,OAAA,MAAA;AAAA,UAAAM,MAAAC,KAAA,MAAA,CAAA,CAChBZ,MAAMa,eAAe;AAAA,aAAA,MAArBF,IAAAA,KAAA,MAAA;AAAA,YAAAG,QAAAR,OAAAA;AAAAS,yBAAAD,OAAA,aAGgBd,MAAMa,iBAAe,IAAA;AAAAG,qBAAAC,UAAAH,OAD3Bb,OAAAA,EAASiB,WAAWf,SAAAA,EAAWgB,aAAa,CAAC,CAAA;AAAA,eAAAL;AAAAA,MAAA,OAGpD;AAAA,IAAI,GAAA,GAAA,IAAA;AAAAJ,WAAAL,MAAA,MACPL,MAAMoB,UAAQ,IAAA;AAAAJ,WAAA,MAAAC,UAAAZ,MAPWJ,OAAAA,EAASoB,aAAa,CAAA;AAAA,WAAAhB;AAAAA,EAAA,GAAA;AAUtD;AAACiB,eAAA,CAAA,WAAA,CAAA;"}

package/dist/esm/components/input.d.ts

@@ -0,0 +1,10 @@
+interface InputProps {
+    label?: string;
+    type?: 'text' | 'number' | 'password' | 'email';
+    value?: string;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    description?: string;
+}
+export declare function Input(props: InputProps): import("solid-js").JSX.Element;
+export {};

package/dist/esm/components/input.js

@@ -0,0 +1,57 @@
+import { template, insert, memo, effect, className, setAttribute, delegateEvents } from "solid-js/web";
+import { createSignal } from "solid-js";
+import { useStyles } from "../styles/use-styles.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div><div><input>`), _tmpl$2 = /* @__PURE__ */ template(`<label>`), _tmpl$3 = /* @__PURE__ */ template(`<p>`);
+function Input(props) {
+  const styles = useStyles();
+  const [val, setVal] = createSignal(props.value || "");
+  const handleChange = (e) => {
+    const value = e.target.value;
+    setVal((prev) => prev !== value ? value : prev);
+    props.onChange?.(value);
+  };
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+    insert(_el$2, (() => {
+      var _c$ = memo(() => !!props.label);
+      return () => _c$() && (() => {
+        var _el$4 = _tmpl$2();
+        insert(_el$4, () => props.label);
+        effect(() => className(_el$4, styles().inputLabel));
+        return _el$4;
+      })();
+    })(), _el$3);
+    insert(_el$2, (() => {
+      var _c$2 = memo(() => !!props.description);
+      return () => _c$2() && (() => {
+        var _el$5 = _tmpl$3();
+        insert(_el$5, () => props.description);
+        effect(() => className(_el$5, styles().inputDescription));
+        return _el$5;
+      })();
+    })(), _el$3);
+    _el$3.$$input = handleChange;
+    effect((_p$) => {
+      var _v$ = styles().inputContainer, _v$2 = styles().inputWrapper, _v$3 = props.type || "text", _v$4 = styles().input, _v$5 = props.placeholder;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+      _v$3 !== _p$.a && setAttribute(_el$3, "type", _p$.a = _v$3);
+      _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
+      _v$5 !== _p$.i && setAttribute(_el$3, "placeholder", _p$.i = _v$5);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    });
+    effect(() => _el$3.value = val());
+    return _el$;
+  })();
+}
+delegateEvents(["input"]);
+export {
+  Input
+};
+//# sourceMappingURL=input.js.map

package/dist/esm/components/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":["../../../src/components/input.tsx"],"sourcesContent":["import { createSignal } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\n\ninterface InputProps {\n  label?: string\n  type?: 'text' | 'number' | 'password' | 'email'\n  value?: string\n  placeholder?: string\n  onChange?: (value: string) => void\n  description?: string\n}\n\nexport function Input(props: InputProps) {\n  const styles = useStyles()\n  const [val, setVal] = createSignal(props.value || '')\n\n  const handleChange = (e: Event) => {\n    const value = (e.target as HTMLInputElement).value\n    setVal((prev) => (prev !== value ? value : prev))\n    props.onChange?.(value)\n  }\n\n  return (\n    <div class={styles().inputContainer}>\n      <div class={styles().inputWrapper}>\n        {props.label && (\n          <label class={styles().inputLabel}>{props.label}</label>\n        )}\n        {props.description && (\n          <p class={styles().inputDescription}>{props.description}</p>\n        )}\n        <input\n          type={props.type || 'text'}\n          class={styles().input}\n          value={val()}\n          placeholder={props.placeholder}\n          onInput={handleChange}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["Input","props","styles","useStyles","val","setVal","createSignal","value","handleChange","e","target","prev","onChange","_el$","_tmpl$","_el$2","firstChild","_el$3","_$insert","_c$","_$memo","label","_el$4","_tmpl$2","_$effect","_$className","inputLabel","_c$2","description","_el$5","_tmpl$3","inputDescription","$$input","_p$","_v$","inputContainer","_v$2","inputWrapper","_v$3","type","_v$4","input","_v$5","placeholder","t","a","_$setAttribute","o","i","undefined","_$delegateEvents"],"mappings":";;;;AAYO,SAASA,MAAMC,OAAmB;AACvC,QAAMC,SAASC,UAAAA;AACf,QAAM,CAACC,KAAKC,MAAM,IAAIC,aAAaL,MAAMM,SAAS,EAAE;AAEpD,QAAMC,eAAeA,CAACC,MAAa;AACjC,UAAMF,QAASE,EAAEC,OAA4BH;AAC7CF,WAAQM,CAAAA,SAAUA,SAASJ,QAAQA,QAAQI,IAAK;AAChDV,UAAMW,WAAWL,KAAK;AAAA,EACxB;AAEA,UAAA,MAAA;AAAA,QAAAM,OAAAC,OAAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC;AAAAE,WAAAH,QAAA,MAAA;AAAA,UAAAI,MAAAC,KAAA,MAAA,CAAA,CAGOnB,MAAMoB,KAAK;AAAA,aAAA,MAAXF,IAAAA,MAAA,MAAA;AAAA,YAAAG,QAAAC,QAAAA;AAAAL,eAAAI,OAAA,MACqCrB,MAAMoB,KAAK;AAAAG,eAAA,MAAAC,UAAAH,OAAjCpB,OAAAA,EAASwB,UAAU,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IAClC,GAAA,GAAAL,KAAA;AAAAC,WAAAH,QAAA,MAAA;AAAA,UAAAY,OAAAP,KAAA,MAAA,CAAA,CACAnB,MAAM2B,WAAW;AAAA,aAAA,MAAjBD,KAAAA,MAAA,MAAA;AAAA,YAAAE,QAAAC,QAAAA;AAAAZ,eAAAW,OAAA,MACuC5B,MAAM2B,WAAW;AAAAJ,eAAA,MAAAC,UAAAI,OAA7C3B,OAAAA,EAAS6B,gBAAgB,CAAA;AAAA,eAAAF;AAAAA,MAAA,GAAA;AAAA,IACpC,GAAA,GAAAZ,KAAA;AAAAA,UAAAe,UAMUxB;AAAYgB,WAAAS,CAAAA,QAAA;AAAA,UAAAC,MAbfhC,SAASiC,gBAAcC,OACrBlC,SAASmC,cAAYC,OAQvBrC,MAAMsC,QAAQ,QAAMC,OACnBtC,SAASuC,OAAKC,OAERzC,MAAM0C;AAAWT,cAAAD,IAAAxB,KAAAgB,UAAAZ,MAAAoB,IAAAxB,IAAAyB,GAAA;AAAAE,eAAAH,IAAAW,KAAAnB,UAAAV,OAAAkB,IAAAW,IAAAR,IAAA;AAAAE,eAAAL,IAAAY,KAAAC,aAAA7B,OAAA,QAAAgB,IAAAY,IAAAP,IAAA;AAAAE,eAAAP,IAAAc,KAAAtB,UAAAR,OAAAgB,IAAAc,IAAAP,IAAA;AAAAE,eAAAT,IAAAe,KAAAF,aAAA7B,OAAA,eAAAgB,IAAAe,IAAAN,IAAA;AAAA,aAAAT;AAAAA,IAAA,GAAA;AAAA,MAAAxB,GAAAwC;AAAAA,MAAAL,GAAAK;AAAAA,MAAAJ,GAAAI;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAzB,iBAAAP,MAAAV,QADvBH,IAAAA,CAAK;AAAA,WAAAS;AAAAA,EAAA,GAAA;AAOtB;AAACqC,eAAA,CAAA,OAAA,CAAA;"}