@tanstack/devtools 0.4.5 → 0.5.1

package/src/devtools.tsx

@@ -1,5 +1,6 @@
 import { Show, createEffect, createSignal, onCleanup } from 'solid-js'
 import { createShortcut } from '@solid-primitives/keyboard'
+import { Portal } from 'solid-js/web'
 import {
   useDevtoolsSettings,
   useHeight,
@@ -14,6 +15,7 @@ import { Tabs } from './components/tabs'
 import { TabContent } from './components/tab-content'
 import { keyboardModifiers } from './context/devtools-store'
 import { getAllPermutations } from './utils/sanitize'
+import { usePiPWindow } from './context/pip-context'
 
 export default function DevTools() {
   const { settings } = useDevtoolsSettings()
@@ -23,14 +25,17 @@ export default function DevTools() {
   const [isOpen, setIsOpen] = createSignal(
     settings().defaultOpen || persistOpen(),
   )
+  const pip = usePiPWindow()
   let panelRef: HTMLDivElement | undefined = undefined
   const [isResizing, setIsResizing] = createSignal(false)
   const toggleOpen = () => {
+    if (pip().pipWindow) {
+      return
+    }
     const open = isOpen()
     setIsOpen(!open)
     setPersistOpen(!open)
   }
-  createEffect(() => {})
   // Used to resize the panel
   const handleDragStart = (
     panelElement: HTMLDivElement | undefined,
@@ -78,11 +83,11 @@ export default function DevTools() {
 
       const run = () => {
         if (!panelRef) return
-        const containerHeight = panelRef.getBoundingClientRect().height
+        // const containerHeight = panelRef.getBoundingClientRect().height
         if (rootEl()?.parentElement) {
           setRootEl((prev) => {
             if (prev?.parentElement) {
-              prev.parentElement.style.paddingBottom = `${containerHeight}px`
+              // prev.parentElement.style.paddingBottom = `${containerHeight}px`
             }
             return prev
           })
@@ -92,13 +97,13 @@ export default function DevTools() {
       run()
 
       if (typeof window !== 'undefined') {
-        window.addEventListener('resize', run)
+        ;(pip().pipWindow ?? window).addEventListener('resize', run)
 
         return () => {
-          window.removeEventListener('resize', run)
+          ;(pip().pipWindow ?? window).removeEventListener('resize', run)
           if (rootEl()?.parentElement && typeof previousValue === 'string') {
             setRootEl((prev) => {
-              prev!.parentElement!.style.paddingBottom = previousValue
+              // prev!.parentElement!.style.paddingBottom = previousValue
               return prev
             })
           }
@@ -117,6 +122,7 @@ export default function DevTools() {
     }
     return
   })
+
   createEffect(() => {
     window.addEventListener('keydown', (e) => {
       if (e.key === 'Escape' && isOpen()) {
@@ -178,25 +184,29 @@ export default function DevTools() {
   })
 
   return (
-    <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>
-      <Show
-        when={
-          settings().requireUrlFlag
-            ? window.location.search.includes(settings().urlFlag)
-            : true
-        }
-      >
-        <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />
-        <MainPanel isResizing={isResizing} isOpen={isOpen}>
-          <ContentPanel
-            ref={(ref) => (panelRef = ref)}
-            handleDragStart={(e) => handleDragStart(panelRef, e)}
-          >
-            <Tabs toggleOpen={toggleOpen} />
-            <TabContent />
-          </ContentPanel>
-        </MainPanel>
-      </Show>
-    </div>
+    <Portal mount={(pip().pipWindow ?? window).document.body}>
+      <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>
+        <Show
+          when={
+            pip().pipWindow !== null
+              ? true
+              : settings().requireUrlFlag
+                ? window.location.search.includes(settings().urlFlag)
+                : true
+          }
+        >
+          <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />
+          <MainPanel isResizing={isResizing} isOpen={isOpen}>
+            <ContentPanel
+              ref={(ref) => (panelRef = ref)}
+              handleDragStart={(e) => handleDragStart(panelRef, e)}
+            >
+              <Tabs toggleOpen={toggleOpen} />
+              <TabContent />
+            </ContentPanel>
+          </MainPanel>
+        </Show>
+      </div>
+    </Portal>
   )
 }

package/src/styles/use-styles.ts

@@ -12,6 +12,7 @@ const stylesFactory = () => {
   return {
     devtoolsPanelContainer: (
       panelLocation: TanStackDevtoolsConfig['panelLocation'],
+      isDetached: boolean,
     ) => css`
       direction: ltr;
       position: fixed;
@@ -21,8 +22,7 @@ const stylesFactory = () => {
       right: 0;
       z-index: 99999;
       width: 100%;
-
-      max-height: 90%;
+      ${isDetached ? '' : 'max-height: 90%;'}
       border-top: 1px solid ${colors.gray[700]};
       transform-origin: top;
     `,
@@ -181,7 +181,7 @@ const stylesFactory = () => {
       border: none;
       transition: all 0.2s ease-in-out;
       border-left: 2px solid transparent;
-      &:hover:not(.close):not(.active) {
+      &:hover:not(.close):not(.active):not(.detach) {
         background-color: ${colors.gray[700]};
         color: ${colors.gray[100]};
         border-left: 2px solid ${colors.purple[500]};
@@ -191,6 +191,14 @@ const stylesFactory = () => {
         color: ${colors.gray[100]};
         border-left: 2px solid ${colors.purple[500]};
       }
+      &.detach {
+        &:hover {
+          background-color: ${colors.gray[700]};
+        }
+        &:hover {
+          color: ${colors.green[500]};
+        }
+      }
       &.close {
         margin-top: auto;
         &:hover {

package/dist/cjs/components/content-panel.cjs

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const useDevtoolsContext = require("../context/use-devtools-context.cjs");
-const useStyles = require("../styles/use-styles.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div>`);
-const ContentPanel = (props) => {
-  const styles = useStyles.useStyles();
-  const {
-    settings
-  } = useDevtoolsContext.useDevtoolsSettings();
-  return (() => {
-    var _el$ = _tmpl$();
-    var _ref$ = props.ref;
-    typeof _ref$ === "function" ? web.use(_ref$, _el$) : props.ref = _el$;
-    web.insert(_el$, (() => {
-      var _c$ = web.memo(() => !!props.handleDragStart);
-      return () => _c$() ? (() => {
-        var _el$2 = _tmpl$();
-        web.addEventListener(_el$2, "mousedown", props.handleDragStart, true);
-        web.effect(() => web.className(_el$2, styles().dragHandle(settings().panelLocation)));
-        return _el$2;
-      })() : null;
-    })(), null);
-    web.insert(_el$, () => props.children, null);
-    web.effect(() => web.className(_el$, styles().devtoolsPanel));
-    return _el$;
-  })();
-};
-web.delegateEvents(["mousedown"]);
-exports.ContentPanel = ContentPanel;
-//# sourceMappingURL=content-panel.cjs.map

package/dist/cjs/components/content-panel.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"content-panel.cjs","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,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAaC,uCAAAA;AACrB,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QACYP,MAAMQ;AAAG,WAAAD,UAAA,aAAAE,QAAAF,OAAAF,IAAA,IAATL,MAAMQ,MAAGH;AAAAK,QAAAA,OAAAL,OAAA,MAAA;AAAA,UAAAM,MAAAC,IAAAA,KAAA,MAAA,CAAA,CAChBZ,MAAMa,eAAe;AAAA,aAAA,MAArBF,IAAAA,KAAA,MAAA;AAAA,YAAAG,QAAAR,OAAAA;AAAAS,YAAAA,iBAAAD,OAAA,aAGgBd,MAAMa,iBAAe,IAAA;AAAAG,yBAAAC,cAAAH,OAD3Bb,OAAAA,EAASiB,WAAWf,SAAAA,EAAWgB,aAAa,CAAC,CAAA;AAAA,eAAAL;AAAAA,MAAA,OAGpD;AAAA,IAAI,GAAA,GAAA,IAAA;AAAAJ,QAAAA,OAAAL,MAAA,MACPL,MAAMoB,UAAQ,IAAA;AAAAJ,QAAAA,OAAA,MAAAC,IAAAA,UAAAZ,MAPWJ,OAAAA,EAASoB,aAAa,CAAA;AAAA,WAAAhB;AAAAA,EAAA,GAAA;AAUtD;AAACiB,IAAAA,eAAA,CAAA,WAAA,CAAA;;"}

package/dist/cjs/components/content-panel.d.cts

@@ -1,6 +0,0 @@
-import { JSX } from 'solid-js/jsx-runtime';
-export declare const ContentPanel: (props: {
-    ref: (el: HTMLDivElement | undefined) => void;
-    children: JSX.Element;
-    handleDragStart?: (e: any) => void;
-}) => JSX.Element;

package/dist/cjs/components/main-panel.cjs

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const clsx = require("clsx");
-const useDevtoolsContext = require("../context/use-devtools-context.cjs");
-const useStyles = require("../styles/use-styles.cjs");
-const storage = require("../utils/storage.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div>`);
-const MainPanel = (props) => {
-  const styles = useStyles.useStyles();
-  const {
-    height
-  } = useDevtoolsContext.useHeight();
-  const {
-    settings
-  } = useDevtoolsContext.useDevtoolsSettings();
-  return (() => {
-    var _el$ = _tmpl$();
-    web.setAttribute(_el$, "id", storage.TANSTACK_DEVTOOLS);
-    web.insert(_el$, () => props.children);
-    web.effect((_p$) => {
-      var _v$ = height() + "px", _v$2 = clsx(styles().devtoolsPanelContainer(settings().panelLocation), styles().devtoolsPanelContainerAnimation(props.isOpen(), height()), styles().devtoolsPanelContainerVisibility(props.isOpen()), styles().devtoolsPanelContainerResizing(props.isResizing));
-      _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("height", _v$) : _el$.style.removeProperty("height"));
-      _v$2 !== _p$.t && web.className(_el$, _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    return _el$;
-  })();
-};
-exports.MainPanel = MainPanel;
-//# sourceMappingURL=main-panel.cjs.map

package/dist/cjs/components/main-panel.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"main-panel.cjs","sources":["../../../src/components/main-panel.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { TANSTACK_DEVTOOLS } from '../utils/storage'\nimport type { Accessor, JSX } from 'solid-js'\n\nexport const MainPanel = (props: {\n  isOpen: Accessor<boolean>\n  children: JSX.Element\n  isResizing: Accessor<boolean>\n}) => {\n  const styles = useStyles()\n  const { height } = useHeight()\n  const { settings } = useDevtoolsSettings()\n  return (\n    <div\n      id={TANSTACK_DEVTOOLS}\n      style={{\n        height: height() + 'px',\n      }}\n      class={clsx(\n        styles().devtoolsPanelContainer(settings().panelLocation),\n        styles().devtoolsPanelContainerAnimation(props.isOpen(), height()),\n        styles().devtoolsPanelContainerVisibility(props.isOpen()),\n        styles().devtoolsPanelContainerResizing(props.isResizing),\n      )}\n    >\n      {props.children}\n    </div>\n  )\n}\n"],"names":["MainPanel","props","styles","useStyles","height","useHeight","settings","useDevtoolsSettings","_el$","_tmpl$","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","children","_$effect","_p$","_v$","_v$2","clsx","devtoolsPanelContainer","panelLocation","devtoolsPanelContainerAnimation","isOpen","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","isResizing","e","style","setProperty","removeProperty","t","_$className","undefined"],"mappings":";;;;;;;;AAMO,MAAMA,YAAYA,CAACC,UAIpB;AACJ,QAAMC,SAASC,UAAAA,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,6BAAAA;AACnB,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAaC,uCAAAA;AACrB,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,qBAAAF,MAAA,MAEQG,yBAAiB;AAAAC,QAAAA,OAAAJ,MAAA,MAWpBP,MAAMY,QAAQ;AAAAC,QAAAA,OAAAC,CAAAA,QAAA;AAAA,UAAAC,MATLZ,OAAAA,IAAW,MAAIa,OAElBC,KACLhB,SAASiB,uBAAuBb,WAAWc,aAAa,GACxDlB,OAAAA,EAASmB,gCAAgCpB,MAAMqB,OAAAA,GAAUlB,OAAAA,CAAQ,GACjEF,OAAAA,EAASqB,iCAAiCtB,MAAMqB,OAAAA,CAAQ,GACxDpB,OAAAA,EAASsB,+BAA+BvB,MAAMwB,UAAU,CAC1D;AAACT,cAAAD,IAAAW,OAAAX,IAAAW,IAAAV,QAAA,OAAAR,KAAAmB,MAAAC,YAAA,UAAAZ,GAAA,IAAAR,KAAAmB,MAAAE,eAAA,QAAA;AAAAZ,eAAAF,IAAAe,KAAAC,IAAAA,UAAAvB,MAAAO,IAAAe,IAAAb,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAW,GAAAM;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAA,WAAAxB;AAAAA,EAAA,GAAA;AAKP;;"}

package/dist/cjs/components/main-panel.d.cts

@@ -1,6 +0,0 @@
-import { Accessor, JSX } from 'solid-js';
-export declare const MainPanel: (props: {
-    isOpen: Accessor<boolean>;
-    children: JSX.Element;
-    isResizing: Accessor<boolean>;
-}) => JSX.Element;

package/dist/cjs/components/tab-content.cjs

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const solidJs = require("solid-js");
-const useDevtoolsContext = require("../context/use-devtools-context.cjs");
-const index = require("../tabs/index.cjs");
-const useStyles = require("../styles/use-styles.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div>`);
-const TabContent = () => {
-  const {
-    state
-  } = useDevtoolsContext.useDevtoolsState();
-  const styles = useStyles.useStyles();
-  const [component, setComponent] = solidJs.createSignal(index.tabs.find((t) => t.id === state().activeTab)?.component() || null);
-  solidJs.createEffect(() => {
-    setComponent(index.tabs.find((t) => t.id === state().activeTab)?.component() || null);
-  });
-  return (() => {
-    var _el$ = _tmpl$();
-    web.insert(_el$, component);
-    web.effect(() => web.className(_el$, styles().tabContent));
-    return _el$;
-  })();
-};
-exports.TabContent = TabContent;
-//# sourceMappingURL=tab-content.cjs.map

package/dist/cjs/components/tab-content.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"tab-content.cjs","sources":["../../../src/components/tab-content.tsx"],"sourcesContent":["import { createEffect, createSignal } from 'solid-js'\nimport { useDevtoolsState } from '../context/use-devtools-context'\nimport { tabs } from '../tabs'\nimport { useStyles } from '../styles/use-styles'\nimport type { JSX } from 'solid-js'\n\nexport const TabContent = () => {\n  const { state } = useDevtoolsState()\n  const styles = useStyles()\n  const [component, setComponent] = createSignal<JSX.Element | null>(\n    tabs.find((t) => t.id === state().activeTab)?.component() || null,\n  )\n  createEffect(() => {\n    setComponent(\n      tabs.find((t) => t.id === state().activeTab)?.component() || null,\n    )\n  })\n\n  return <div class={styles().tabContent}>{component()}</div>\n}\n"],"names":["TabContent","state","useDevtoolsState","styles","useStyles","component","setComponent","createSignal","tabs","find","t","id","activeTab","createEffect","_el$","_tmpl$","_$insert","_$effect","_$className","tabContent"],"mappings":";;;;;;;;AAMO,MAAMA,aAAaA,MAAM;AAC9B,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAUC,oCAAAA;AAClB,QAAMC,SAASC,UAAAA,UAAAA;AACf,QAAM,CAACC,WAAWC,YAAY,IAAIC,QAAAA,aAChCC,MAAAA,KAAKC,KAAMC,CAAAA,MAAMA,EAAEC,OAAOV,QAAQW,SAAS,GAAGP,UAAAA,KAAe,IAC/D;AACAQ,UAAAA,aAAa,MAAM;AACjBP,iBACEE,MAAAA,KAAKC,KAAMC,CAAAA,MAAMA,EAAEC,OAAOV,MAAAA,EAAQW,SAAS,GAAGP,UAAAA,KAAe,IAC/D;AAAA,EACF,CAAC;AAED,UAAA,MAAA;AAAA,QAAAS,OAAAC,OAAAA;AAAAC,QAAAA,OAAAF,MAAyCT,SAAS;AAAAY,QAAAA,OAAA,MAAAC,IAAAA,UAAAJ,MAA/BX,OAAAA,EAASgB,UAAU,CAAA;AAAA,WAAAL;AAAAA,EAAA,GAAA;AACxC;;"}

package/dist/cjs/components/tab-content.d.cts

@@ -1,2 +0,0 @@
-import { JSX } from 'solid-js';
-export declare const TabContent: () => JSX.Element;

package/dist/cjs/components/tabs.cjs

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const clsx = require("clsx");
-const solidJs = require("solid-js");
-const useStyles = require("../styles/use-styles.cjs");
-const useDevtoolsContext = require("../context/use-devtools-context.cjs");
-const index = require("../tabs/index.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div><button type=button><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M18 6 6 18"></path><path d="m6 6 12 12">`), _tmpl$2 = /* @__PURE__ */ web.template(`<button type=button>`);
-const Tabs = (props) => {
-  const styles = useStyles.useStyles();
-  const {
-    state,
-    setState
-  } = useDevtoolsContext.useDevtoolsState();
-  return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
-    web.insert(_el$, web.createComponent(solidJs.For, {
-      each: index.tabs,
-      children: (tab) => (() => {
-        var _el$3 = _tmpl$2();
-        _el$3.$$click = () => setState({
-          activeTab: tab.id
-        });
-        web.insert(_el$3, () => tab.icon);
-        web.effect(() => web.className(_el$3, clsx(styles().tab, {
-          active: state().activeTab === tab.id
-        })));
-        return _el$3;
-      })()
-    }), _el$2);
-    _el$2.$$click = () => props.toggleOpen();
-    web.effect((_p$) => {
-      var _v$ = styles().tabContainer, _v$2 = clsx(styles().tab, "close");
-      _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    return _el$;
-  })();
-};
-web.delegateEvents(["click"]);
-exports.Tabs = Tabs;
-//# sourceMappingURL=tabs.cjs.map

package/dist/cjs/components/tabs.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabs.cjs","sources":["../../../src/components/tabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { For } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport { useDevtoolsState } from '../context/use-devtools-context'\nimport { tabs } from '../tabs'\n\ninterface TabsProps {\n  toggleOpen: () => void\n}\n\nexport const Tabs = (props: TabsProps) => {\n  const styles = useStyles()\n  const { state, setState } = useDevtoolsState()\n\n  return (\n    <div class={styles().tabContainer}>\n      <For each={tabs}>\n        {(tab) => (\n          <button\n            type=\"button\"\n            onClick={() => setState({ activeTab: tab.id })}\n            class={clsx(styles().tab, { active: state().activeTab === tab.id })}\n          >\n            {tab.icon}\n          </button>\n        )}\n      </For>\n      <button\n        type=\"button\"\n        class={clsx(styles().tab, 'close')}\n        onClick={() => props.toggleOpen()}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\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=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </button>\n    </div>\n  )\n}\n"],"names":["Tabs","props","styles","useStyles","state","setState","useDevtoolsState","_el$","_tmpl$","_el$2","firstChild","_$insert","_$createComponent","For","each","tabs","children","tab","_el$3","_tmpl$2","$$click","activeTab","id","icon","_$effect","_$className","clsx","active","toggleOpen","_p$","_v$","tabContainer","_v$2","e","t","undefined","_$delegateEvents"],"mappings":";;;;;;;;;AAUO,MAAMA,OAAOA,CAACC,UAAqB;AACxC,QAAMC,SAASC,UAAAA,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,IAAOC;AAAAA,EAAAA,IAAaC,oCAAAA;AAE5B,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA,GAAAC,QAAAF,KAAAG;AAAAC,eAAAJ,MAAAK,IAAAA,gBAEKC,aAAG;AAAA,MAACC,MAAMC,MAAAA;AAAAA,MAAIC,UACXC,UAAG,MAAA;AAAA,YAAAC,QAAAC,QAAAA;AAAAD,cAAAE,UAGQ,MAAMf,SAAS;AAAA,UAAEgB,WAAWJ,IAAIK;AAAAA,QAAAA,CAAI;AAACX,YAAAA,OAAAO,OAAA,MAG7CD,IAAIM,IAAI;AAAAC,YAAAA,OAAA,MAAAC,IAAAA,UAAAP,OAFFQ,KAAKxB,OAAAA,EAASe,KAAK;AAAA,UAAEU,QAAQvB,MAAAA,EAAQiB,cAAcJ,IAAIK;AAAAA,QAAAA,CAAI,CAAC,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IAAA,CAItE,GAAAT,KAAA;AAAAA,UAAAW,UAKQ,MAAMnB,MAAM2B,WAAAA;AAAYJ,QAAAA,OAAAK,CAAAA,QAAA;AAAA,UAAAC,MAfzB5B,SAAS6B,cAAYC,OActBN,KAAKxB,OAAAA,EAASe,KAAK,OAAO;AAACa,cAAAD,IAAAI,KAAAR,IAAAA,UAAAlB,MAAAsB,IAAAI,IAAAH,GAAA;AAAAE,eAAAH,IAAAK,KAAAT,IAAAA,UAAAhB,OAAAoB,IAAAK,IAAAF,IAAA;AAAA,aAAAH;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAA5B;AAAAA,EAAA,GAAA;AAoB1C;AAAC6B,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}

package/dist/cjs/components/tabs.d.cts

@@ -1,5 +0,0 @@
-interface TabsProps {
-    toggleOpen: () => void;
-}
-export declare const Tabs: (props: TabsProps) => import("solid-js").JSX.Element;
-export {};

package/dist/cjs/components/trigger.cjs

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const solidJs = require("solid-js");
-const clsx = require("clsx");
-const devtoolsUi = require("@tanstack/devtools-ui");
-const useDevtoolsContext = require("../context/use-devtools-context.cjs");
-const useStyles = require("../styles/use-styles.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<button type=button aria-label="Open TanStack Devtools">`);
-const Trigger = ({
-  isOpen,
-  setIsOpen
-}) => {
-  const {
-    settings
-  } = useDevtoolsContext.useDevtoolsSettings();
-  const styles = useStyles.useStyles();
-  const buttonStyle = solidJs.createMemo(() => {
-    return clsx(styles().mainCloseBtn, styles().mainCloseBtnPosition(settings().position), styles().mainCloseBtnAnimation(isOpen(), settings().hideUntilHover));
-  });
-  return (() => {
-    var _el$ = _tmpl$();
-    _el$.$$click = () => setIsOpen(!isOpen());
-    web.insert(_el$, web.createComponent(devtoolsUi.TanStackLogo, {}));
-    web.effect(() => web.className(_el$, buttonStyle()));
-    return _el$;
-  })();
-};
-web.delegateEvents(["click"]);
-exports.Trigger = Trigger;
-//# sourceMappingURL=trigger.cjs.map

package/dist/cjs/components/trigger.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"trigger.cjs","sources":["../../../src/components/trigger.tsx"],"sourcesContent":["import { createMemo } from 'solid-js'\nimport clsx from 'clsx'\nimport { TanStackLogo } from '@tanstack/devtools-ui'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport type { Accessor } from 'solid-js'\n\nexport const Trigger = ({\n  isOpen,\n  setIsOpen,\n}: {\n  isOpen: Accessor<boolean>\n  setIsOpen: (isOpen: boolean) => void\n}) => {\n  const { settings } = useDevtoolsSettings()\n  const styles = useStyles()\n  const buttonStyle = createMemo(() => {\n    return clsx(\n      styles().mainCloseBtn,\n      styles().mainCloseBtnPosition(settings().position),\n      styles().mainCloseBtnAnimation(isOpen(), settings().hideUntilHover),\n    )\n  })\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Open TanStack Devtools\"\n      class={buttonStyle()}\n      onClick={() => setIsOpen(!isOpen())}\n    >\n      <TanStackLogo />\n    </button>\n  )\n}\n"],"names":["Trigger","isOpen","setIsOpen","settings","useDevtoolsSettings","styles","useStyles","buttonStyle","createMemo","clsx","mainCloseBtn","mainCloseBtnPosition","position","mainCloseBtnAnimation","hideUntilHover","_el$","_tmpl$","$$click","_$insert","_$createComponent","TanStackLogo","_$effect","_$className","_$delegateEvents"],"mappings":";;;;;;;;;AAOO,MAAMA,UAAUA,CAAC;AAAA,EACtBC;AAAAA,EACAC;AAIF,MAAM;AACJ,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAaC,uCAAAA;AACrB,QAAMC,SAASC,UAAAA,UAAAA;AACf,QAAMC,cAAcC,QAAAA,WAAW,MAAM;AACnC,WAAOC,KACLJ,SAASK,cACTL,OAAAA,EAASM,qBAAqBR,SAAAA,EAAWS,QAAQ,GACjDP,OAAAA,EAASQ,sBAAsBZ,OAAAA,GAAUE,SAAAA,EAAWW,cAAc,CACpE;AAAA,EACF,CAAC;AACD,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAD,SAAAE,UAKa,MAAMf,UAAU,CAACD,QAAQ;AAACiB,QAAAA,OAAAH,MAAAI,IAAAA,gBAElCC,WAAAA,cAAY,CAAA,CAAA,CAAA;AAAAC,QAAAA,aAAAC,IAAAA,UAAAP,MAHNR,YAAAA,CAAa,CAAA;AAAA,WAAAQ;AAAAA,EAAA,GAAA;AAM1B;AAACQ,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}

package/dist/cjs/components/trigger.d.cts

@@ -1,5 +0,0 @@
-import { Accessor } from 'solid-js';
-export declare const Trigger: ({ isOpen, setIsOpen, }: {
-    isOpen: Accessor<boolean>;
-    setIsOpen: (isOpen: boolean) => void;
-}) => import("solid-js").JSX.Element;

package/dist/cjs/constants.cjs

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const PLUGIN_CONTAINER_ID = "plugin-container";
-const PLUGIN_TITLE_CONTAINER_ID = "plugin-title-container";
-exports.PLUGIN_CONTAINER_ID = PLUGIN_CONTAINER_ID;
-exports.PLUGIN_TITLE_CONTAINER_ID = PLUGIN_TITLE_CONTAINER_ID;
-//# sourceMappingURL=constants.cjs.map

package/dist/cjs/constants.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.cjs","sources":["../../src/constants.ts"],"sourcesContent":["export const PLUGIN_CONTAINER_ID = 'plugin-container'\nexport const PLUGIN_TITLE_CONTAINER_ID = 'plugin-title-container'\n"],"names":[],"mappings":";;AAAO,MAAM,sBAAsB;AAC5B,MAAM,4BAA4B;;;"}

package/dist/cjs/constants.d.cts

@@ -1,2 +0,0 @@
-export declare const PLUGIN_CONTAINER_ID = "plugin-container";
-export declare const PLUGIN_TITLE_CONTAINER_ID = "plugin-title-container";

package/dist/cjs/context/devtools-context.cjs

@@ -1,77 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const solidJs = require("solid-js");
-const store = require("solid-js/store");
-const sanitize = require("../utils/sanitize.cjs");
-const storage = require("../utils/storage.cjs");
-const devtoolsStore = require("./devtools-store.cjs");
-const DevtoolsContext = solidJs.createContext();
-const getSettings = () => {
-  const settingsString = storage.getStorageItem(storage.TANSTACK_DEVTOOLS_SETTINGS);
-  const settings = sanitize.tryParseJson(settingsString);
-  return {
-    ...settings
-  };
-};
-const generatePluginId = (plugin, index) => {
-  if (plugin.id) {
-    return plugin.id;
-  }
-  if (typeof plugin.name === "string") {
-    return `${plugin.name.toLowerCase().replace(" ", "-")}-${index}`;
-  }
-  return index.toString();
-};
-const getExistingStateFromStorage = (config, plugins) => {
-  const existingState = storage.getStorageItem(storage.TANSTACK_DEVTOOLS_STATE);
-  const settings = getSettings();
-  const state = {
-    ...devtoolsStore.initialState,
-    plugins: plugins?.map((plugin, i) => {
-      const id = generatePluginId(plugin, i);
-      return {
-        ...plugin,
-        id
-      };
-    }) || [],
-    state: {
-      ...devtoolsStore.initialState.state,
-      ...existingState ? JSON.parse(existingState) : {}
-    },
-    settings: {
-      ...devtoolsStore.initialState.settings,
-      ...config,
-      ...settings
-    }
-  };
-  return state;
-};
-const DevtoolsProvider = (props) => {
-  const [store$1, setStore] = store.createStore(getExistingStateFromStorage(props.config, props.plugins));
-  const value = {
-    store: store$1,
-    setStore: (updater) => {
-      const newState = updater(store$1);
-      const {
-        settings,
-        state: internalState
-      } = newState;
-      storage.setStorageItem(storage.TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings));
-      storage.setStorageItem(storage.TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState));
-      setStore((prev) => ({
-        ...prev,
-        ...newState
-      }));
-    }
-  };
-  return web.createComponent(DevtoolsContext.Provider, {
-    value,
-    get children() {
-      return props.children;
-    }
-  });
-};
-exports.DevtoolsContext = DevtoolsContext;
-exports.DevtoolsProvider = DevtoolsProvider;
-//# sourceMappingURL=devtools-context.cjs.map

package/dist/cjs/context/devtools-context.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"devtools-context.cjs","sources":["../../../src/context/devtools-context.tsx"],"sourcesContent":["import { createContext } from 'solid-js'\nimport { createStore } from 'solid-js/store'\nimport { tryParseJson } from '../utils/sanitize'\nimport {\n  TANSTACK_DEVTOOLS_SETTINGS,\n  TANSTACK_DEVTOOLS_STATE,\n  getStorageItem,\n  setStorageItem,\n} from '../utils/storage'\nimport { initialState } from './devtools-store'\nimport type { DevtoolsStore } from './devtools-store'\nimport type { JSX, Setter } from 'solid-js'\n\nexport interface TanStackDevtoolsPlugin {\n  /**\n   * Name to be displayed in the devtools UI.\n   * If a string, it will be used as the plugin name.\n   * If a function, it will be called with the mount element.\n   *\n   * Example:\n   * ```ts\n   *   {\n   *     // If a string, it will be used as the plugin name\n   *     name: \"Your Plugin\",\n   *     render: () => {}\n   *   }\n   * ```\n   * or\n   *\n   * ```ts\n   *   {\n   *     // If a function, it will be called with the mount element\n   *     name: (el) => {\n   *       el.innerText = \"Your Plugin Name\"\n   *       // Your name logic here\n   *     },\n   *     render: () => {}\n   *   }\n   * ```\n   */\n  name: string | ((el: HTMLHeadingElement) => void)\n  /**\n   * Unique identifier for the plugin.\n   * If not provided, it will be generated based on the name.\n   */\n  id?: string\n  /**\n   * Render the plugin UI by using the provided element. This function will be called\n   * when the plugin tab is clicked and expected to be mounted.\n   * @param el The mount element for the plugin.\n   * @returns void\n   *\n   * Example:\n   * ```ts\n   *   render: (el) => {\n   *     el.innerHTML = \"<h1>Your Plugin</h1>\"\n   *   }\n   * ```\n   */\n  render: (el: HTMLDivElement) => void\n}\nexport const DevtoolsContext = createContext<{\n  store: DevtoolsStore\n  setStore: Setter<DevtoolsStore>\n}>()\n\ninterface ContextProps {\n  children: JSX.Element\n  plugins?: Array<TanStackDevtoolsPlugin>\n  config?: TanStackDevtoolsConfig\n}\n\nconst getSettings = () => {\n  const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS)\n  const settings = tryParseJson<DevtoolsStore['settings']>(settingsString)\n  return {\n    ...settings,\n  }\n}\n\nconst generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {\n  // if set by user, return the plugin id\n  if (plugin.id) {\n    return plugin.id\n  }\n  if (typeof plugin.name === 'string') {\n    // if name is a string, use it to generate an id\n    return `${plugin.name.toLowerCase().replace(' ', '-')}-${index}`\n  }\n  // Name is JSX? return the index as a string\n  return index.toString()\n}\n\nconst getExistingStateFromStorage = (\n  config?: TanStackDevtoolsConfig,\n  plugins?: Array<TanStackDevtoolsPlugin>,\n) => {\n  const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE)\n  const settings = getSettings()\n\n  const state: DevtoolsStore = {\n    ...initialState,\n    plugins:\n      plugins?.map((plugin, i) => {\n        const id = generatePluginId(plugin, i)\n        return {\n          ...plugin,\n          id,\n        }\n      }) || [],\n    state: {\n      ...initialState.state,\n      ...(existingState ? JSON.parse(existingState) : {}),\n    },\n    settings: {\n      ...initialState.settings,\n      ...config,\n      ...settings,\n    },\n  }\n  return state\n}\n\nexport type TanStackDevtoolsConfig = DevtoolsStore['settings']\n\nexport const DevtoolsProvider = (props: ContextProps) => {\n  const [store, setStore] = createStore(\n    getExistingStateFromStorage(props.config, props.plugins),\n  )\n\n  const value = {\n    store,\n    setStore: (\n      updater: (prev: DevtoolsStore) => DevtoolsStore | Partial<DevtoolsStore>,\n    ) => {\n      const newState = updater(store)\n      const { settings, state: internalState } = newState\n      // Store user settings for dev tools into local storage\n      setStorageItem(TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings))\n      // Store general state into local storage\n      setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState))\n      setStore((prev) => ({\n        ...prev,\n        ...newState,\n      }))\n    },\n  }\n\n  return (\n    <DevtoolsContext.Provider value={value}>\n      {props.children}\n    </DevtoolsContext.Provider>\n  )\n}\n"],"names":["DevtoolsContext","createContext","getSettings","settingsString","getStorageItem","TANSTACK_DEVTOOLS_SETTINGS","settings","tryParseJson","generatePluginId","plugin","index","id","name","toLowerCase","replace","toString","getExistingStateFromStorage","config","plugins","existingState","TANSTACK_DEVTOOLS_STATE","state","initialState","map","i","JSON","parse","DevtoolsProvider","props","store","setStore","createStore","value","updater","newState","internalState","setStorageItem","stringify","prev","_$createComponent","Provider","children"],"mappings":";;;;;;;;AA6DO,MAAMA,kBAAkBC,QAAAA,cAAAA;AAW/B,MAAMC,cAAcA,MAAM;AACxB,QAAMC,iBAAiBC,QAAAA,eAAeC,kCAA0B;AAChE,QAAMC,WAAWC,SAAAA,aAAwCJ,cAAc;AACvE,SAAO;AAAA,IACL,GAAGG;AAAAA,EAAAA;AAEP;AAEA,MAAME,mBAAmBA,CAACC,QAAgCC,UAAkB;AAE1E,MAAID,OAAOE,IAAI;AACb,WAAOF,OAAOE;AAAAA,EAChB;AACA,MAAI,OAAOF,OAAOG,SAAS,UAAU;AAEnC,WAAO,GAAGH,OAAOG,KAAKC,YAAAA,EAAcC,QAAQ,KAAK,GAAG,CAAC,IAAIJ,KAAK;AAAA,EAChE;AAEA,SAAOA,MAAMK,SAAAA;AACf;AAEA,MAAMC,8BAA8BA,CAClCC,QACAC,YACG;AACH,QAAMC,gBAAgBf,QAAAA,eAAegB,+BAAuB;AAC5D,QAAMd,WAAWJ,YAAAA;AAEjB,QAAMmB,QAAuB;AAAA,IAC3B,GAAGC,cAAAA;AAAAA,IACHJ,SACEA,SAASK,IAAI,CAACd,QAAQe,MAAM;AAC1B,YAAMb,KAAKH,iBAAiBC,QAAQe,CAAC;AACrC,aAAO;AAAA,QACL,GAAGf;AAAAA,QACHE;AAAAA,MAAAA;AAAAA,IAEJ,CAAC,KAAK,CAAA;AAAA,IACRU,OAAO;AAAA,MACL,GAAGC,cAAAA,aAAaD;AAAAA,MAChB,GAAIF,gBAAgBM,KAAKC,MAAMP,aAAa,IAAI,CAAA;AAAA,IAAC;AAAA,IAEnDb,UAAU;AAAA,MACR,GAAGgB,cAAAA,aAAahB;AAAAA,MAChB,GAAGW;AAAAA,MACH,GAAGX;AAAAA,IAAAA;AAAAA,EACL;AAEF,SAAOe;AACT;AAIO,MAAMM,mBAAmBA,CAACC,UAAwB;AACvD,QAAM,CAACC,SAAOC,QAAQ,IAAIC,MAAAA,YACxBf,4BAA4BY,MAAMX,QAAQW,MAAMV,OAAO,CACzD;AAEA,QAAMc,QAAQ;AAAA,IAAA,OACZH;AAAAA,IACAC,UAAUA,CACRG,YACG;AACH,YAAMC,WAAWD,QAAQJ,OAAK;AAC9B,YAAM;AAAA,QAAEvB;AAAAA,QAAUe,OAAOc;AAAAA,MAAAA,IAAkBD;AAE3CE,cAAAA,eAAe/B,QAAAA,4BAA4BoB,KAAKY,UAAU/B,QAAQ,CAAC;AAEnE8B,cAAAA,eAAehB,QAAAA,yBAAyBK,KAAKY,UAAUF,aAAa,CAAC;AACrEL,eAAUQ,CAAAA,UAAU;AAAA,QAClB,GAAGA;AAAAA,QACH,GAAGJ;AAAAA,MAAAA,EACH;AAAA,IACJ;AAAA,EAAA;AAGF,SAAAK,IAAAA,gBACGvC,gBAAgBwC,UAAQ;AAAA,IAACR;AAAAA,IAAY,IAAAS,WAAA;AAAA,aACnCb,MAAMa;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB;;;"}

package/dist/cjs/context/devtools-context.d.cts

@@ -1,62 +0,0 @@
-import { DevtoolsStore } from './devtools-store.cjs';
-import { JSX, Setter } from 'solid-js';
-export interface TanStackDevtoolsPlugin {
-    /**
-     * Name to be displayed in the devtools UI.
-     * If a string, it will be used as the plugin name.
-     * If a function, it will be called with the mount element.
-     *
-     * Example:
-     * ```ts
-     *   {
-     *     // If a string, it will be used as the plugin name
-     *     name: "Your Plugin",
-     *     render: () => {}
-     *   }
-     * ```
-     * or
-     *
-     * ```ts
-     *   {
-     *     // If a function, it will be called with the mount element
-     *     name: (el) => {
-     *       el.innerText = "Your Plugin Name"
-     *       // Your name logic here
-     *     },
-     *     render: () => {}
-     *   }
-     * ```
-     */
-    name: string | ((el: HTMLHeadingElement) => void);
-    /**
-     * Unique identifier for the plugin.
-     * If not provided, it will be generated based on the name.
-     */
-    id?: string;
-    /**
-     * Render the plugin UI by using the provided element. This function will be called
-     * when the plugin tab is clicked and expected to be mounted.
-     * @param el The mount element for the plugin.
-     * @returns void
-     *
-     * Example:
-     * ```ts
-     *   render: (el) => {
-     *     el.innerHTML = "<h1>Your Plugin</h1>"
-     *   }
-     * ```
-     */
-    render: (el: HTMLDivElement) => void;
-}
-export declare const DevtoolsContext: import('solid-js').Context<{
-    store: DevtoolsStore;
-    setStore: Setter<DevtoolsStore>;
-} | undefined>;
-interface ContextProps {
-    children: JSX.Element;
-    plugins?: Array<TanStackDevtoolsPlugin>;
-    config?: TanStackDevtoolsConfig;
-}
-export type TanStackDevtoolsConfig = DevtoolsStore['settings'];
-export declare const DevtoolsProvider: (props: ContextProps) => JSX.Element;
-export {};

package/dist/cjs/context/devtools-store.cjs

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const keyboardModifiers = [
-  "Alt",
-  "Control",
-  "Meta",
-  "Shift"
-];
-const initialState = {
-  settings: {
-    defaultOpen: false,
-    hideUntilHover: false,
-    position: "bottom-right",
-    panelLocation: "bottom",
-    openHotkey: ["Shift", "A"],
-    requireUrlFlag: false,
-    urlFlag: "tanstack-devtools"
-  },
-  state: {
-    activeTab: "plugins",
-    height: 400,
-    activePlugin: void 0,
-    persistOpen: false
-  }
-};
-exports.initialState = initialState;
-exports.keyboardModifiers = keyboardModifiers;
-//# sourceMappingURL=devtools-store.cjs.map

package/dist/cjs/context/devtools-store.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"devtools-store.cjs","sources":["../../../src/context/devtools-store.ts"],"sourcesContent":["import type { TabName } from '../tabs'\nimport type { TanStackDevtoolsPlugin } from './devtools-context'\n\ntype ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift'\ntype KeyboardKey = ModifierKey | (string & {})\nexport const keyboardModifiers: Array<ModifierKey> = [\n  'Alt',\n  'Control',\n  'Meta',\n  'Shift',\n]\n\ntype TriggerPosition =\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'middle-left'\n  | 'middle-right'\n\nexport type DevtoolsStore = {\n  settings: {\n    /**\n     * Whether the dev tools should be open by default\n     * @default false\n     */\n    defaultOpen: boolean\n    /**\n     * Whether the dev tools trigger should be hidden until the user hovers over it\n     * @default false\n     */\n    hideUntilHover: boolean\n    /**\n     * The position of the trigger button\n     * @default \"bottom-right\"\n     */\n    position: TriggerPosition\n\n    /**\n     * The location of the panel once it is open\n     * @default \"bottom\"\n     */\n    panelLocation: 'top' | 'bottom'\n    /**\n     * The hotkey to open the dev tools\n     * @default \"shift+a\"\n     */\n    openHotkey: Array<KeyboardKey>\n    /**\n     * Whether to require the URL flag to open the dev tools\n     * @default false\n     */\n    requireUrlFlag: boolean\n    /**\n     * The URL flag to open the dev tools, used in conjunction with requireUrlFlag (if set to true)\n     * @default \"tanstack-devtools\"\n     */\n    urlFlag: string\n  }\n  state: {\n    activeTab: TabName\n    height: number\n    activePlugin?: string | undefined\n    persistOpen: boolean\n  }\n  plugins?: Array<TanStackDevtoolsPlugin>\n}\n\nexport const initialState: DevtoolsStore = {\n  settings: {\n    defaultOpen: false,\n    hideUntilHover: false,\n    position: 'bottom-right',\n    panelLocation: 'bottom',\n    openHotkey: ['Shift', 'A'],\n    requireUrlFlag: false,\n    urlFlag: 'tanstack-devtools',\n  },\n  state: {\n    activeTab: 'plugins',\n    height: 400,\n    activePlugin: undefined,\n    persistOpen: false,\n  },\n}\n"],"names":[],"mappings":";;AAKO,MAAM,oBAAwC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA0DO,MAAM,eAA8B;AAAA,EACzC,UAAU;AAAA,IACR,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,eAAe;AAAA,IACf,YAAY,CAAC,SAAS,GAAG;AAAA,IACzB,gBAAgB;AAAA,IAChB,SAAS;AAAA,EAAA;AAAA,EAEX,OAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,EAAA;AAEjB;;;"}