@tanstack/devtools 0.4.4 → 0.5.0

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

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { useHeight, useDevtoolsSettings } from "../context/use-devtools-context.js";
 import { useStyles } from "../styles/use-styles.js";
 import { TANSTACK_DEVTOOLS } from "../utils/storage.js";
+import { usePiPWindow } from "../context/pip-context.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 const MainPanel = (props) => {
   const styles = useStyles();
@@ -12,12 +13,13 @@ const MainPanel = (props) => {
   const {
     settings
   } = useDevtoolsSettings();
+  const pip = usePiPWindow();
   return (() => {
     var _el$ = _tmpl$();
     setAttribute(_el$, "id", TANSTACK_DEVTOOLS);
     insert(_el$, () => props.children);
     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));
+      var _v$ = pip().pipWindow ? "100vh" : height() + "px", _v$2 = clsx(styles().devtoolsPanelContainer(settings().panelLocation, Boolean(pip().pipWindow)), 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 && className(_el$, _p$.t = _v$2);
       return _p$;

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

@@ -1 +1 @@
-{"version":3,"file":"main-panel.js","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;AACf,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,UAAAA;AACnB,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAaC,oBAAAA;AACrB,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,iBAAAF,MAAA,MAEQG,iBAAiB;AAAAC,WAAAJ,MAAA,MAWpBP,MAAMY,QAAQ;AAAAC,WAAAC,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,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;"}
+{"version":3,"file":"main-panel.js","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 { usePiPWindow } from '../context/pip-context'\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  const pip = usePiPWindow()\n  return (\n    <div\n      id={TANSTACK_DEVTOOLS}\n      style={{\n        height: pip().pipWindow ? '100vh' : height() + 'px',\n      }}\n      class={clsx(\n        styles().devtoolsPanelContainer(\n          settings().panelLocation,\n          Boolean(pip().pipWindow),\n        ),\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","pip","usePiPWindow","_el$","_tmpl$","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","children","_$effect","_p$","_v$","pipWindow","_v$2","clsx","devtoolsPanelContainer","panelLocation","Boolean","devtoolsPanelContainerAnimation","isOpen","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","isResizing","e","style","setProperty","removeProperty","t","_$className","undefined"],"mappings":";;;;;;;AAOO,MAAMA,YAAYA,CAACC,UAIpB;AACJ,QAAMC,SAASC,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,UAAAA;AACnB,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAaC,oBAAAA;AACrB,QAAMC,MAAMC,aAAAA;AACZ,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,iBAAAF,MAAA,MAEQG,iBAAiB;AAAAC,WAAAJ,MAAA,MAcpBT,MAAMc,QAAQ;AAAAC,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MAZLV,MAAMW,YAAY,UAAUf,OAAAA,IAAW,MAAIgB,OAE9CC,KACLnB,OAAAA,EAASoB,uBACPhB,SAAAA,EAAWiB,eACXC,QAAQhB,IAAAA,EAAMW,SAAS,CACzB,GACAjB,OAAAA,EAASuB,gCAAgCxB,MAAMyB,OAAAA,GAAUtB,OAAAA,CAAQ,GACjEF,OAAAA,EAASyB,iCAAiC1B,MAAMyB,OAAAA,CAAQ,GACxDxB,OAAAA,EAAS0B,+BAA+B3B,MAAM4B,UAAU,CAC1D;AAACX,cAAAD,IAAAa,OAAAb,IAAAa,IAAAZ,QAAA,OAAAR,KAAAqB,MAAAC,YAAA,UAAAd,GAAA,IAAAR,KAAAqB,MAAAE,eAAA,QAAA;AAAAb,eAAAH,IAAAiB,KAAAC,UAAAzB,MAAAO,IAAAiB,IAAAd,IAAA;AAAA,aAAAH;AAAAA,IAAA,GAAA;AAAA,MAAAa,GAAAM;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAA,WAAA1B;AAAAA,EAAA,GAAA;AAKP;"}

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

@@ -1,5 +1,5 @@
 import { template, insert, effect, className } from "solid-js/web";
-import { createSignal, createEffect } from "solid-js";
+import { createMemo } from "solid-js";
 import { useDevtoolsState } from "../context/use-devtools-context.js";
 import { tabs } from "../tabs/index.js";
 import { useStyles } from "../styles/use-styles.js";
@@ -9,13 +9,10 @@ const TabContent = () => {
     state
   } = useDevtoolsState();
   const styles = useStyles();
-  const [component, setComponent] = createSignal(tabs.find((t) => t.id === state().activeTab)?.component() || null);
-  createEffect(() => {
-    setComponent(tabs.find((t) => t.id === state().activeTab)?.component() || null);
-  });
+  const component = createMemo(() => tabs.find((t) => t.id === state().activeTab)?.component || null);
   return (() => {
     var _el$ = _tmpl$();
-    insert(_el$, component);
+    insert(_el$, () => component()?.());
     effect(() => className(_el$, styles().tabContent));
     return _el$;
   })();

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

@@ -1 +1 @@
-{"version":3,"file":"tab-content.js","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,iBAAAA;AAClB,QAAMC,SAASC,UAAAA;AACf,QAAM,CAACC,WAAWC,YAAY,IAAIC,aAChCC,KAAKC,KAAMC,CAAAA,MAAMA,EAAEC,OAAOV,QAAQW,SAAS,GAAGP,UAAAA,KAAe,IAC/D;AACAQ,eAAa,MAAM;AACjBP,iBACEE,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,WAAAF,MAAyCT,SAAS;AAAAY,WAAA,MAAAC,UAAAJ,MAA/BX,OAAAA,EAASgB,UAAU,CAAA;AAAA,WAAAL;AAAAA,EAAA,GAAA;AACxC;"}
+{"version":3,"file":"tab-content.js","sources":["../../../src/components/tab-content.tsx"],"sourcesContent":["import { createMemo } 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 = createMemo<(() => JSX.Element) | null>(\n    () => tabs.find((t) => t.id === state().activeTab)?.component || null,\n  )\n\n  return <div class={styles().tabContent}>{component()?.()}</div>\n}\n"],"names":["TabContent","state","useDevtoolsState","styles","useStyles","component","createMemo","tabs","find","t","id","activeTab","_el$","_tmpl$","_$insert","_$effect","_$className","tabContent"],"mappings":";;;;;;AAMO,MAAMA,aAAaA,MAAM;AAC9B,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAUC,iBAAAA;AAClB,QAAMC,SAASC,UAAAA;AACf,QAAMC,YAAYC,WAChB,MAAMC,KAAKC,KAAMC,CAAAA,MAAMA,EAAEC,OAAOT,MAAAA,EAAQU,SAAS,GAAGN,aAAa,IACnE;AAEA,UAAA,MAAA;AAAA,QAAAO,OAAAC,OAAAA;AAAAC,WAAAF,MAAA,MAAyCP,UAAAA,KAAe;AAAAU,WAAA,MAAAC,UAAAJ,MAArCT,OAAAA,EAASc,UAAU,CAAA;AAAA,WAAAL;AAAAA,EAAA,GAAA;AACxC;"}

package/dist/esm/components/tabs.js

@@ -1,42 +1,57 @@
-import { template, insert, createComponent, effect, className, delegateEvents } from "solid-js/web";
+import { template, insert, createComponent, effect, className, memo, delegateEvents } from "solid-js/web";
 import clsx from "clsx";
 import { For } from "solid-js";
 import { useStyles } from "../styles/use-styles.js";
 import { useDevtoolsState } from "../context/use-devtools-context.js";
 import { tabs } from "../tabs/index.js";
-var _tmpl$ = /* @__PURE__ */ 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__ */ template(`<button type=button>`);
+import { usePiPWindow } from "../context/pip-context.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<button type=button>`), _tmpl$3 = /* @__PURE__ */ 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 class="lucide lucide-picture-in-picture-icon lucide-picture-in-picture"><path d="M2 10h6V4"></path><path d="m2 4 6 6"></path><path d="M21 10V7a2 2 0 0 0-2-2h-7"></path><path d="M3 14v2a2 2 0 0 0 2 2h3"></path><rect x=12 y=14 width=10 height=7 rx=1></rect></svg></button><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">`);
 const Tabs = (props) => {
   const styles = useStyles();
   const {
     state,
     setState
   } = useDevtoolsState();
+  const pipWindow = usePiPWindow();
+  const handleDetachment = () => {
+    pipWindow().requestPipWindow(`width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`);
+  };
   return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$();
     insert(_el$, createComponent(For, {
       each: tabs,
       children: (tab) => (() => {
-        var _el$3 = _tmpl$2();
-        _el$3.$$click = () => setState({
+        var _el$2 = _tmpl$2();
+        _el$2.$$click = () => setState({
           activeTab: tab.id
         });
-        insert(_el$3, () => tab.icon);
-        effect(() => className(_el$3, clsx(styles().tab, {
+        insert(_el$2, () => tab.icon);
+        effect(() => className(_el$2, clsx(styles().tab, {
           active: state().activeTab === tab.id
         })));
-        return _el$3;
+        return _el$2;
       })()
-    }), _el$2);
-    _el$2.$$click = () => props.toggleOpen();
-    effect((_p$) => {
-      var _v$ = styles().tabContainer, _v$2 = clsx(styles().tab, "close");
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
+    }), null);
+    insert(_el$, (() => {
+      var _c$ = memo(() => pipWindow().pipWindow !== null);
+      return () => _c$() ? null : (() => {
+        var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+        _el$3.style.setProperty("margin-top", "auto");
+        _el$4.$$click = handleDetachment;
+        _el$5.$$click = () => props.toggleOpen();
+        effect((_p$) => {
+          var _v$ = clsx(styles().tab, "detach"), _v$2 = clsx(styles().tab, "close");
+          _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$5, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$3;
+      })();
+    })(), null);
+    effect(() => className(_el$, styles().tabContainer));
     return _el$;
   })();
 };

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","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;AACf,QAAM;AAAA,IAAEC;AAAAA,IAAOC;AAAAA,EAAAA,IAAaC,iBAAAA;AAE5B,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA,GAAAC,QAAAF,KAAAG;AAAAC,WAAAJ,MAAAK,gBAEKC,KAAG;AAAA,MAACC,MAAMC;AAAAA,MAAIC,UACXC,UAAG,MAAA;AAAA,YAAAC,QAAAC,QAAAA;AAAAD,cAAAE,UAGQ,MAAMf,SAAS;AAAA,UAAEgB,WAAWJ,IAAIK;AAAAA,QAAAA,CAAI;AAACX,eAAAO,OAAA,MAG7CD,IAAIM,IAAI;AAAAC,eAAA,MAAAC,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,WAAAK,CAAAA,QAAA;AAAA,UAAAC,MAfzB5B,SAAS6B,cAAYC,OActBN,KAAKxB,OAAAA,EAASe,KAAK,OAAO;AAACa,cAAAD,IAAAI,KAAAR,UAAAlB,MAAAsB,IAAAI,IAAAH,GAAA;AAAAE,eAAAH,IAAAK,KAAAT,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,eAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"tabs.js","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'\nimport { usePiPWindow } from '../context/pip-context'\n\ninterface TabsProps {\n  toggleOpen: () => void\n}\n\nexport const Tabs = (props: TabsProps) => {\n  const styles = useStyles()\n  const { state, setState } = useDevtoolsState()\n  const pipWindow = usePiPWindow()\n  const handleDetachment = () => {\n    pipWindow().requestPipWindow(\n      `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`,\n    )\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      {pipWindow().pipWindow !== null ? null : (\n        <div\n          style={{\n            'margin-top': 'auto',\n          }}\n        >\n          <button\n            type=\"button\"\n            class={clsx(styles().tab, 'detach')}\n            onClick={handleDetachment}\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              class=\"lucide lucide-picture-in-picture-icon lucide-picture-in-picture\"\n            >\n              <path d=\"M2 10h6V4\" />\n              <path d=\"m2 4 6 6\" />\n              <path d=\"M21 10V7a2 2 0 0 0-2-2h-7\" />\n              <path d=\"M3 14v2a2 2 0 0 0 2 2h3\" />\n              <rect x=\"12\" y=\"14\" width=\"10\" height=\"7\" rx=\"1\" />\n            </svg>\n          </button>\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    </div>\n  )\n}\n"],"names":["Tabs","props","styles","useStyles","state","setState","useDevtoolsState","pipWindow","usePiPWindow","handleDetachment","requestPipWindow","window","innerWidth","height","screen","screenLeft","_el$","_tmpl$","_$insert","_$createComponent","For","each","tabs","children","tab","_el$2","_tmpl$2","$$click","activeTab","id","icon","_$effect","_$className","clsx","active","_c$","_$memo","_el$3","_tmpl$3","_el$4","firstChild","_el$5","nextSibling","style","setProperty","toggleOpen","_p$","_v$","_v$2","e","t","undefined","tabContainer","_$delegateEvents"],"mappings":";;;;;;;;AAWO,MAAMA,OAAOA,CAACC,UAAqB;AACxC,QAAMC,SAASC,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,IAAOC;AAAAA,EAAAA,IAAaC,iBAAAA;AAC5B,QAAMC,YAAYC,aAAAA;AAClB,QAAMC,mBAAmBA,MAAM;AAC7BF,cAAAA,EAAYG,iBACV,SAASC,OAAOC,UAAU,WAAWR,MAAAA,EAAQS,MAAM,QAAQF,OAAOG,OAAOD,MAAM,SAASF,OAAOI,UAAU,GAC3G;AAAA,EACF;AACA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,MAAAG,gBAEKC,KAAG;AAAA,MAACC,MAAMC;AAAAA,MAAIC,UACXC,UAAG,MAAA;AAAA,YAAAC,QAAAC,QAAAA;AAAAD,cAAAE,UAGQ,MAAMtB,SAAS;AAAA,UAAEuB,WAAWJ,IAAIK;AAAAA,QAAAA,CAAI;AAACX,eAAAO,OAAA,MAG7CD,IAAIM,IAAI;AAAAC,eAAA,MAAAC,UAAAP,OAFFQ,KAAK/B,OAAAA,EAASsB,KAAK;AAAA,UAAEU,QAAQ9B,MAAAA,EAAQwB,cAAcJ,IAAIK;AAAAA,QAAAA,CAAI,CAAC,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IAAA,CAItE,GAAA,IAAA;AAAAP,WAAAF,OAAA,MAAA;AAAA,UAAAmB,MAAAC,KAAA,MAEF7B,UAAAA,EAAYA,cAAc,IAAI;AAAA,aAAA,MAA9B4B,IAAAA,IAAiC,QAAI,MAAA;AAAA,YAAAE,QAAAC,QAAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAG;AAAAL,cAAAM,MAAAC,YAAA,cAAA,MAAA;AAAAL,cAAAZ,UASvBlB;AAAgBgC,cAAAd,UAwBhB,MAAM1B,MAAM4C,WAAAA;AAAYd,eAAAe,CAAAA,QAAA;AAAA,cAAAC,MAzB1Bd,KAAK/B,OAAAA,EAASsB,KAAK,QAAQ,GAACwB,OAwB5Bf,KAAK/B,SAASsB,KAAK,OAAO;AAACuB,kBAAAD,IAAAG,KAAAjB,UAAAO,OAAAO,IAAAG,IAAAF,GAAA;AAAAC,mBAAAF,IAAAI,KAAAlB,UAAAS,OAAAK,IAAAI,IAAAF,IAAA;AAAA,iBAAAF;AAAAA,QAAA,GAAA;AAAA,UAAAG,GAAAE;AAAAA,UAAAD,GAAAC;AAAAA,QAAAA,CAAA;AAAA,eAAAd;AAAAA,MAAA,GAAA;AAAA,IAmBvC,GAAA,GAAA,IAAA;AAAAN,WAAA,MAAAC,UAAAhB,MA/DSd,OAAAA,EAASkD,YAAY,CAAA;AAAA,WAAApC;AAAAA,EAAA,GAAA;AAkErC;AAACqC,eAAA,CAAA,OAAA,CAAA;"}

package/dist/esm/context/pip-context.d.ts

@@ -0,0 +1,14 @@
+import { Accessor, JSX } from 'solid-js';
+interface PiPProviderProps {
+    children: JSX.Element;
+    disabled?: boolean;
+}
+type PiPContextType = {
+    pipWindow: Window | null;
+    requestPipWindow: (settings: string) => void;
+    closePipWindow: () => void;
+    disabled: boolean;
+};
+export declare const PiPProvider: (props: PiPProviderProps) => JSX.Element;
+export declare const usePiPWindow: () => Accessor<PiPContextType>;
+export {};

package/dist/esm/context/pip-context.js

@@ -0,0 +1,118 @@
+import { createComponent, clearDelegatedEvents, delegateEvents } from "solid-js/web";
+import { createMemo, useContext, createContext, createSignal, createEffect, onCleanup } from "solid-js";
+const PiPContext = createContext(void 0);
+const PiPProvider = (props) => {
+  const [pipWindow, setPipWindow] = createSignal(null);
+  const closePipWindow = () => {
+    const w = pipWindow();
+    if (w != null) {
+      w.close();
+      setPipWindow(null);
+    }
+  };
+  const requestPipWindow = (settings) => {
+    if (pipWindow() != null) {
+      return;
+    }
+    const pip = window.open("", "TSDT-Devtools-Panel", `${settings},popup`);
+    if (!pip) {
+      throw new Error("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.");
+    }
+    const meta = typeof import.meta !== "undefined" ? import.meta : null;
+    meta?.hot?.on("vite:beforeUpdate", () => {
+      localStorage.setItem("pip_open", "false");
+      closePipWindow();
+    });
+    window.addEventListener("beforeunload", () => {
+      localStorage.setItem("pip_open", "false");
+      closePipWindow();
+    });
+    pip.document.head.innerHTML = "";
+    pip.document.body.innerHTML = "";
+    clearDelegatedEvents(pip.document);
+    pip.document.title = "TanStack Devtools";
+    pip.document.body.style.margin = "0";
+    pip.addEventListener("pagehide", () => {
+      localStorage.setItem("pip_open", "false");
+      closePipWindow();
+    });
+    [...document.styleSheets].forEach((styleSheet) => {
+      try {
+        const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
+        const style = document.createElement("style");
+        const style_node = styleSheet.ownerNode;
+        let style_id = "";
+        if (style_node && "id" in style_node) {
+          style_id = style_node.id;
+        }
+        if (style_id) {
+          style.setAttribute("id", style_id);
+        }
+        style.textContent = cssRules;
+        pip.document.head.appendChild(style);
+      } catch (e) {
+        const link = document.createElement("link");
+        if (styleSheet.href == null) {
+          return;
+        }
+        link.rel = "stylesheet";
+        link.type = styleSheet.type;
+        link.media = styleSheet.media.toString();
+        link.href = styleSheet.href;
+        pip.document.head.appendChild(link);
+      }
+    });
+    delegateEvents(["focusin", "focusout", "pointermove", "keydown", "pointerdown", "pointerup", "click", "mousedown", "input"], pip.document);
+    setPipWindow(pip);
+  };
+  createEffect(() => {
+    const gooberStyles = document.querySelector("#_goober");
+    const w = pipWindow();
+    if (gooberStyles && w) {
+      const observer = new MutationObserver(() => {
+        const pip_style = w.document.querySelector("#_goober");
+        if (pip_style) {
+          pip_style.textContent = gooberStyles.textContent;
+        }
+      });
+      observer.observe(gooberStyles, {
+        childList: true,
+        // observe direct children
+        subtree: true,
+        // and lower descendants too
+        characterDataOldValue: true
+        // pass old data to callback
+      });
+      onCleanup(() => {
+        observer.disconnect();
+      });
+    }
+  });
+  const value = createMemo(() => ({
+    pipWindow: pipWindow(),
+    requestPipWindow,
+    closePipWindow,
+    disabled: props.disabled ?? false
+  }));
+  return createComponent(PiPContext.Provider, {
+    value,
+    get children() {
+      return props.children;
+    }
+  });
+};
+const usePiPWindow = () => {
+  const context = createMemo(() => {
+    const ctx = useContext(PiPContext);
+    if (!ctx) {
+      throw new Error("usePiPWindow must be used within a PiPProvider");
+    }
+    return ctx();
+  });
+  return context;
+};
+export {
+  PiPProvider,
+  usePiPWindow
+};
+//# sourceMappingURL=pip-context.js.map

package/dist/esm/context/pip-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pip-context.js","sources":["../../../src/context/pip-context.tsx"],"sourcesContent":["import {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  onCleanup,\n  useContext,\n} from 'solid-js'\nimport { clearDelegatedEvents, delegateEvents } from 'solid-js/web'\nimport type { Accessor, JSX } from 'solid-js'\n\ninterface PiPProviderProps {\n  children: JSX.Element\n  //  localStore: StorageObject<string>\n  //  setLocalStore: StorageSetter<string, unknown>\n  disabled?: boolean\n}\n\ntype PiPContextType = {\n  pipWindow: Window | null\n  requestPipWindow: (settings: string) => void\n  closePipWindow: () => void\n  disabled: boolean\n}\n\nconst PiPContext = createContext<Accessor<PiPContextType> | undefined>(\n  undefined,\n)\n\nexport const PiPProvider = (props: PiPProviderProps) => {\n  // Expose pipWindow that is currently active\n  const [pipWindow, setPipWindow] = createSignal<Window | null>(null)\n\n  // Close pipWindow programmatically\n  const closePipWindow = () => {\n    const w = pipWindow()\n    if (w != null) {\n      w.close()\n      setPipWindow(null)\n    }\n  }\n\n  // Open new pipWindow\n  const requestPipWindow = (settings: string) => {\n    // We don't want to allow multiple requests.\n    if (pipWindow() != null) {\n      return\n    }\n\n    const pip = window.open('', 'TSDT-Devtools-Panel', `${settings},popup`)\n\n    if (!pip) {\n      throw new Error(\n        'Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.',\n      )\n    }\n\n    const meta = typeof import.meta !== 'undefined' ? import.meta : null\n\n    meta?.hot?.on('vite:beforeUpdate', () => {\n      localStorage.setItem('pip_open', 'false')\n      closePipWindow()\n    })\n    window.addEventListener('beforeunload', () => {\n      localStorage.setItem('pip_open', 'false')\n      closePipWindow()\n    })\n    // Remove existing styles\n    pip.document.head.innerHTML = ''\n    // Remove existing body\n    pip.document.body.innerHTML = ''\n    // Clear Delegated Events\n    clearDelegatedEvents(pip.document)\n\n    pip.document.title = 'TanStack Devtools'\n    pip.document.body.style.margin = '0'\n\n    // Detect when window is closed by user\n    pip.addEventListener('pagehide', () => {\n      localStorage.setItem('pip_open', 'false')\n      closePipWindow()\n    })\n\n    // It is important to copy all parent window styles. Otherwise, there would be no CSS available at all\n    // https://developer.chrome.com/docs/web-platform/document-picture-in-picture/#copy-style-sheets-to-the-picture-in-picture-window\n    ;[...document.styleSheets].forEach((styleSheet) => {\n      try {\n        const cssRules = [...styleSheet.cssRules]\n          .map((rule) => rule.cssText)\n          .join('')\n        const style = document.createElement('style')\n        const style_node = styleSheet.ownerNode\n        let style_id = ''\n\n        if (style_node && 'id' in style_node) {\n          style_id = style_node.id\n        }\n\n        if (style_id) {\n          style.setAttribute('id', style_id)\n        }\n        style.textContent = cssRules\n        pip.document.head.appendChild(style)\n      } catch (e) {\n        const link = document.createElement('link')\n        if (styleSheet.href == null) {\n          return\n        }\n\n        link.rel = 'stylesheet'\n        link.type = styleSheet.type\n        link.media = styleSheet.media.toString()\n        link.href = styleSheet.href\n        pip.document.head.appendChild(link)\n      }\n    })\n    delegateEvents(\n      [\n        'focusin',\n        'focusout',\n        'pointermove',\n        'keydown',\n        'pointerdown',\n        'pointerup',\n        'click',\n        'mousedown',\n        'input',\n      ],\n      pip.document,\n    )\n\n    setPipWindow(pip)\n  }\n\n  createEffect(() => {\n    // Setup mutation observer for goober styles with id `_goober\n    const gooberStyles = document.querySelector('#_goober')\n    const w = pipWindow()\n    if (gooberStyles && w) {\n      const observer = new MutationObserver(() => {\n        const pip_style = w.document.querySelector('#_goober')\n        if (pip_style) {\n          pip_style.textContent = gooberStyles.textContent\n        }\n      })\n      observer.observe(gooberStyles, {\n        childList: true, // observe direct children\n        subtree: true, // and lower descendants too\n        characterDataOldValue: true, // pass old data to callback\n      })\n      onCleanup(() => {\n        observer.disconnect()\n      })\n    }\n  })\n\n  const value = createMemo(() => ({\n    pipWindow: pipWindow(),\n    requestPipWindow,\n    closePipWindow,\n    disabled: props.disabled ?? false,\n  }))\n\n  return (\n    <PiPContext.Provider value={value}>{props.children}</PiPContext.Provider>\n  )\n}\n\nexport const usePiPWindow = () => {\n  const context = createMemo(() => {\n    const ctx = useContext(PiPContext)\n    if (!ctx) {\n      throw new Error('usePiPWindow must be used within a PiPProvider')\n    }\n    return ctx()\n  })\n  return context\n}\n"],"names":["PiPContext","createContext","undefined","PiPProvider","props","pipWindow","setPipWindow","createSignal","closePipWindow","w","close","requestPipWindow","settings","pip","window","open","Error","meta","import","hot","on","localStorage","setItem","addEventListener","document","head","innerHTML","body","clearDelegatedEvents","title","style","margin","styleSheets","forEach","styleSheet","cssRules","map","rule","cssText","join","createElement","style_node","ownerNode","style_id","id","setAttribute","textContent","appendChild","e","link","href","rel","type","media","toString","delegateEvents","createEffect","gooberStyles","querySelector","observer","MutationObserver","pip_style","observe","childList","subtree","characterDataOldValue","onCleanup","disconnect","value","createMemo","disabled","_$createComponent","Provider","children","usePiPWindow","context","ctx","useContext"],"mappings":";;AAyBA,MAAMA,aAAaC,cACjBC,MACF;AAEO,MAAMC,cAAcA,CAACC,UAA4B;AAEtD,QAAM,CAACC,WAAWC,YAAY,IAAIC,aAA4B,IAAI;AAGlE,QAAMC,iBAAiBA,MAAM;AAC3B,UAAMC,IAAIJ,UAAAA;AACV,QAAII,KAAK,MAAM;AACbA,QAAEC,MAAAA;AACFJ,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF;AAGA,QAAMK,mBAAmBA,CAACC,aAAqB;AAE7C,QAAIP,UAAAA,KAAe,MAAM;AACvB;AAAA,IACF;AAEA,UAAMQ,MAAMC,OAAOC,KAAK,IAAI,uBAAuB,GAAGH,QAAQ,QAAQ;AAEtE,QAAI,CAACC,KAAK;AACR,YAAM,IAAIG,MACR,0GACF;AAAA,IACF;AAEA,UAAMC,OAAO,OAAOC,gBAAgB,cAAcA,cAAc;AAEhED,UAAME,KAAKC,GAAG,qBAAqB,MAAM;AACvCC,mBAAaC,QAAQ,YAAY,OAAO;AACxCd,qBAAAA;AAAAA,IACF,CAAC;AACDM,WAAOS,iBAAiB,gBAAgB,MAAM;AAC5CF,mBAAaC,QAAQ,YAAY,OAAO;AACxCd,qBAAAA;AAAAA,IACF,CAAC;AAEDK,QAAIW,SAASC,KAAKC,YAAY;AAE9Bb,QAAIW,SAASG,KAAKD,YAAY;AAE9BE,yBAAqBf,IAAIW,QAAQ;AAEjCX,QAAIW,SAASK,QAAQ;AACrBhB,QAAIW,SAASG,KAAKG,MAAMC,SAAS;AAGjClB,QAAIU,iBAAiB,YAAY,MAAM;AACrCF,mBAAaC,QAAQ,YAAY,OAAO;AACxCd,qBAAAA;AAAAA,IACF,CAAC;AAIA,KAAC,GAAGgB,SAASQ,WAAW,EAAEC,QAASC,CAAAA,eAAe;AACjD,UAAI;AACF,cAAMC,WAAW,CAAC,GAAGD,WAAWC,QAAQ,EACrCC,IAAKC,CAAAA,SAASA,KAAKC,OAAO,EAC1BC,KAAK,EAAE;AACV,cAAMT,QAAQN,SAASgB,cAAc,OAAO;AAC5C,cAAMC,aAAaP,WAAWQ;AAC9B,YAAIC,WAAW;AAEf,YAAIF,cAAc,QAAQA,YAAY;AACpCE,qBAAWF,WAAWG;AAAAA,QACxB;AAEA,YAAID,UAAU;AACZb,gBAAMe,aAAa,MAAMF,QAAQ;AAAA,QACnC;AACAb,cAAMgB,cAAcX;AACpBtB,YAAIW,SAASC,KAAKsB,YAAYjB,KAAK;AAAA,MACrC,SAASkB,GAAG;AACV,cAAMC,OAAOzB,SAASgB,cAAc,MAAM;AAC1C,YAAIN,WAAWgB,QAAQ,MAAM;AAC3B;AAAA,QACF;AAEAD,aAAKE,MAAM;AACXF,aAAKG,OAAOlB,WAAWkB;AACvBH,aAAKI,QAAQnB,WAAWmB,MAAMC,SAAAA;AAC9BL,aAAKC,OAAOhB,WAAWgB;AACvBrC,YAAIW,SAASC,KAAKsB,YAAYE,IAAI;AAAA,MACpC;AAAA,IACF,CAAC;AACDM,mBACE,CACE,WACA,YACA,eACA,WACA,eACA,aACA,SACA,aACA,OAAO,GAET1C,IAAIW,QACN;AAEAlB,iBAAaO,GAAG;AAAA,EAClB;AAEA2C,eAAa,MAAM;AAEjB,UAAMC,eAAejC,SAASkC,cAAc,UAAU;AACtD,UAAMjD,IAAIJ,UAAAA;AACV,QAAIoD,gBAAgBhD,GAAG;AACrB,YAAMkD,WAAW,IAAIC,iBAAiB,MAAM;AAC1C,cAAMC,YAAYpD,EAAEe,SAASkC,cAAc,UAAU;AACrD,YAAIG,WAAW;AACbA,oBAAUf,cAAcW,aAAaX;AAAAA,QACvC;AAAA,MACF,CAAC;AACDa,eAASG,QAAQL,cAAc;AAAA,QAC7BM,WAAW;AAAA;AAAA,QACXC,SAAS;AAAA;AAAA,QACTC,uBAAuB;AAAA;AAAA,MAAA,CACxB;AACDC,gBAAU,MAAM;AACdP,iBAASQ,WAAAA;AAAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,QAAMC,QAAQC,WAAW,OAAO;AAAA,IAC9BhE,WAAWA,UAAAA;AAAAA,IACXM;AAAAA,IACAH;AAAAA,IACA8D,UAAUlE,MAAMkE,YAAY;AAAA,EAAA,EAC5B;AAEF,SAAAC,gBACGvE,WAAWwE,UAAQ;AAAA,IAACJ;AAAAA,IAAY,IAAAK,WAAA;AAAA,aAAGrE,MAAMqE;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAEtD;AAEO,MAAMC,eAAeA,MAAM;AAChC,QAAMC,UAAUN,WAAW,MAAM;AAC/B,UAAMO,MAAMC,WAAW7E,UAAU;AACjC,QAAI,CAAC4E,KAAK;AACR,YAAM,IAAI5D,MAAM,gDAAgD;AAAA,IAClE;AACA,WAAO4D,IAAAA;AAAAA,EACT,CAAC;AACD,SAAOD;AACT;"}

package/dist/esm/core.js

@@ -3,6 +3,7 @@ import { lazy } from "solid-js";
 import { ClientEventBus } from "@tanstack/devtools-event-bus/client";
 import { DevtoolsProvider } from "./context/devtools-context.js";
 import { initialState } from "./context/devtools-store.js";
+import { PiPProvider } from "./context/pip-context.js";
 class TanStackDevtoolsCore {
   #config = {
     ...initialState.settings
@@ -40,10 +41,14 @@ class TanStackDevtoolsCore {
           return _self$.#config;
         },
         get children() {
-          return createComponent(Portal, {
-            mount: mountTo,
+          return createComponent(PiPProvider, {
             get children() {
-              return createComponent(Devtools, {});
+              return createComponent(Portal, {
+                mount: mountTo,
+                get children() {
+                  return createComponent(Devtools, {});
+                }
+              });
             }
           });
         }

package/dist/esm/core.js.map

@@ -1 +1 @@
-{"version":3,"file":"core.js","sources":["../../src/core.tsx"],"sourcesContent":["import { lazy } from 'solid-js'\nimport { Portal, render } from 'solid-js/web'\nimport { ClientEventBus } from '@tanstack/devtools-event-bus/client'\nimport { DevtoolsProvider } from './context/devtools-context'\nimport { initialState } from './context/devtools-store'\nimport type { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client'\nimport type {\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from './context/devtools-context'\n\nexport interface TanStackDevtoolsInit {\n  /**\n   * Configuration for the devtools shell. These configuration options are used to set the\n   * initial state of the devtools when it is started for the first time. Afterwards,\n   * the settings are persisted in local storage and changed through the settings panel.\n   */\n  config?: Partial<TanStackDevtoolsConfig>\n  /**\n   * Array of plugins to be used in the devtools.\n   * Each plugin has a `render` function that gives you the dom node to mount into\n   *\n   * Example:\n   * ```ts\n   *  const devtools = new TanStackDevtoolsCore({\n   *    plugins: [\n   *      {\n   *        id: \"your-plugin-id\",\n   *        name: \"Your Plugin\",\n   *        render: (el) => {\n   *          // Your render logic here\n   *        },\n   *      },\n   *    ],\n   *  })\n   * ```\n   */\n  plugins?: Array<TanStackDevtoolsPlugin>\n  eventBusConfig?: ClientEventBusConfig\n}\n\nexport class TanStackDevtoolsCore {\n  #config: TanStackDevtoolsConfig = {\n    ...initialState.settings,\n  }\n  #plugins: Array<TanStackDevtoolsPlugin> = []\n  #isMounted = false\n  #dispose?: () => void\n  #Component: any\n  #eventBus: ClientEventBus | undefined\n  #eventBusConfig: ClientEventBusConfig | undefined\n\n  constructor(init: TanStackDevtoolsInit) {\n    this.#plugins = init.plugins || []\n    this.#eventBusConfig = init.eventBusConfig\n    this.#config = {\n      ...this.#config,\n      ...init.config,\n    }\n  }\n\n  mount<T extends HTMLElement>(el: T) {\n    if (this.#isMounted) {\n      throw new Error('Devtools is already mounted')\n    }\n    const mountTo = el\n    const dispose = render(() => {\n      this.#Component = lazy(() => import('./devtools'))\n      const Devtools = this.#Component\n      this.#eventBus = new ClientEventBus(this.#eventBusConfig)\n      this.#eventBus.start()\n      return (\n        <DevtoolsProvider plugins={this.#plugins} config={this.#config}>\n          <Portal mount={mountTo}>\n            <Devtools />\n          </Portal>\n        </DevtoolsProvider>\n      )\n    }, mountTo)\n\n    this.#isMounted = true\n    this.#dispose = dispose\n  }\n\n  unmount() {\n    if (!this.#isMounted) {\n      throw new Error('Devtools is not mounted')\n    }\n    this.#eventBus?.stop()\n    this.#dispose?.()\n    this.#isMounted = false\n  }\n\n  setConfig(config: Partial<TanStackDevtoolsInit>) {\n    this.#config = {\n      ...this.#config,\n      ...config,\n    }\n  }\n}\n\nexport type { ClientEventBusConfig }\n"],"names":["TanStackDevtoolsCore","initialState","settings","constructor","init","plugins","eventBusConfig","config","mount","el","Error","mountTo","dispose","render","_self$","lazy","Devtools","ClientEventBus","start","_$createComponent","DevtoolsProvider","children","Portal","unmount","stop","setConfig"],"mappings":";;;;;AAyCO,MAAMA,qBAAqB;AAAA,EAChC,UAAkC;AAAA,IAChC,GAAGC,aAAaC;AAAAA,EAAAA;AAAAA,EAElB,WAA0C,CAAA;AAAA,EAC1C,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEAC,YAAYC,MAA4B;AACtC,SAAK,WAAWA,KAAKC,WAAW,CAAA;AAChC,SAAK,kBAAkBD,KAAKE;AAC5B,SAAK,UAAU;AAAA,MACb,GAAG,KAAK;AAAA,MACR,GAAGF,KAAKG;AAAAA,IAAAA;AAAAA,EAEZ;AAAA,EAEAC,MAA6BC,IAAO;AAClC,QAAI,KAAK,YAAY;AACnB,YAAM,IAAIC,MAAM,6BAA6B;AAAA,IAC/C;AACA,UAAMC,UAAUF;AAChB,UAAMG,UAAUC,OAAO,MAAM;AAAA,YAAAC,SAAA;AAC3B,WAAK,aAAaC,KAAK,MAAM,OAAO,eAAY,CAAC;AACjD,YAAMC,WAAW,KAAK;AACtB,WAAK,YAAY,IAAIC,eAAe,KAAK,eAAe;AACxD,WAAK,UAAUC,MAAAA;AACf,aAAAC,gBACGC,kBAAgB;AAAA,QAAA,IAACf,UAAO;AAAA,iBAAES,OAAK;AAAA,QAAQ;AAAA,QAAA,IAAEP,SAAM;AAAA,iBAAEO,OAAK;AAAA,QAAO;AAAA,QAAA,IAAAO,WAAA;AAAA,iBAAAF,gBAC3DG,QAAM;AAAA,YAACd,OAAOG;AAAAA,YAAO,IAAAU,WAAA;AAAA,qBAAAF,gBACnBH,UAAQ,EAAA;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAIjB,GAAGL,OAAO;AAEV,SAAK,aAAa;AAClB,SAAK,WAAWC;AAAAA,EAClB;AAAA,EAEAW,UAAU;AACR,QAAI,CAAC,KAAK,YAAY;AACpB,YAAM,IAAIb,MAAM,yBAAyB;AAAA,IAC3C;AACA,SAAK,WAAWc,KAAAA;AAChB,SAAK,WAAA;AACL,SAAK,aAAa;AAAA,EACpB;AAAA,EAEAC,UAAUlB,QAAuC;AAC/C,SAAK,UAAU;AAAA,MACb,GAAG,KAAK;AAAA,MACR,GAAGA;AAAAA,IAAAA;AAAAA,EAEP;AACF;"}
+{"version":3,"file":"core.js","sources":["../../src/core.tsx"],"sourcesContent":["import { lazy } from 'solid-js'\nimport { Portal, render } from 'solid-js/web'\nimport { ClientEventBus } from '@tanstack/devtools-event-bus/client'\nimport { DevtoolsProvider } from './context/devtools-context'\nimport { initialState } from './context/devtools-store'\nimport { PiPProvider } from './context/pip-context'\nimport type { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client'\nimport type {\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from './context/devtools-context'\n\nexport interface TanStackDevtoolsInit {\n  /**\n   * Configuration for the devtools shell. These configuration options are used to set the\n   * initial state of the devtools when it is started for the first time. Afterwards,\n   * the settings are persisted in local storage and changed through the settings panel.\n   */\n  config?: Partial<TanStackDevtoolsConfig>\n  /**\n   * Array of plugins to be used in the devtools.\n   * Each plugin has a `render` function that gives you the dom node to mount into\n   *\n   * Example:\n   * ```ts\n   *  const devtools = new TanStackDevtoolsCore({\n   *    plugins: [\n   *      {\n   *        id: \"your-plugin-id\",\n   *        name: \"Your Plugin\",\n   *        render: (el) => {\n   *          // Your render logic here\n   *        },\n   *      },\n   *    ],\n   *  })\n   * ```\n   */\n  plugins?: Array<TanStackDevtoolsPlugin>\n  eventBusConfig?: ClientEventBusConfig\n}\n\nexport class TanStackDevtoolsCore {\n  #config: TanStackDevtoolsConfig = {\n    ...initialState.settings,\n  }\n  #plugins: Array<TanStackDevtoolsPlugin> = []\n  #isMounted = false\n  #dispose?: () => void\n  #Component: any\n  #eventBus: ClientEventBus | undefined\n  #eventBusConfig: ClientEventBusConfig | undefined\n\n  constructor(init: TanStackDevtoolsInit) {\n    this.#plugins = init.plugins || []\n    this.#eventBusConfig = init.eventBusConfig\n    this.#config = {\n      ...this.#config,\n      ...init.config,\n    }\n  }\n\n  mount<T extends HTMLElement>(el: T) {\n    if (this.#isMounted) {\n      throw new Error('Devtools is already mounted')\n    }\n    const mountTo = el\n    const dispose = render(() => {\n      this.#Component = lazy(() => import('./devtools'))\n      const Devtools = this.#Component\n      this.#eventBus = new ClientEventBus(this.#eventBusConfig)\n      this.#eventBus.start()\n      return (\n        <DevtoolsProvider plugins={this.#plugins} config={this.#config}>\n          <PiPProvider>\n            <Portal mount={mountTo}>\n              <Devtools />\n            </Portal>\n          </PiPProvider>\n        </DevtoolsProvider>\n      )\n    }, mountTo)\n\n    this.#isMounted = true\n    this.#dispose = dispose\n  }\n\n  unmount() {\n    if (!this.#isMounted) {\n      throw new Error('Devtools is not mounted')\n    }\n    this.#eventBus?.stop()\n    this.#dispose?.()\n    this.#isMounted = false\n  }\n\n  setConfig(config: Partial<TanStackDevtoolsInit>) {\n    this.#config = {\n      ...this.#config,\n      ...config,\n    }\n  }\n}\n\nexport type { ClientEventBusConfig }\n"],"names":["TanStackDevtoolsCore","initialState","settings","constructor","init","plugins","eventBusConfig","config","mount","el","Error","mountTo","dispose","render","_self$","lazy","Devtools","ClientEventBus","start","_$createComponent","DevtoolsProvider","children","PiPProvider","Portal","unmount","stop","setConfig"],"mappings":";;;;;;AA0CO,MAAMA,qBAAqB;AAAA,EAChC,UAAkC;AAAA,IAChC,GAAGC,aAAaC;AAAAA,EAAAA;AAAAA,EAElB,WAA0C,CAAA;AAAA,EAC1C,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEAC,YAAYC,MAA4B;AACtC,SAAK,WAAWA,KAAKC,WAAW,CAAA;AAChC,SAAK,kBAAkBD,KAAKE;AAC5B,SAAK,UAAU;AAAA,MACb,GAAG,KAAK;AAAA,MACR,GAAGF,KAAKG;AAAAA,IAAAA;AAAAA,EAEZ;AAAA,EAEAC,MAA6BC,IAAO;AAClC,QAAI,KAAK,YAAY;AACnB,YAAM,IAAIC,MAAM,6BAA6B;AAAA,IAC/C;AACA,UAAMC,UAAUF;AAChB,UAAMG,UAAUC,OAAO,MAAM;AAAA,YAAAC,SAAA;AAC3B,WAAK,aAAaC,KAAK,MAAM,OAAO,eAAY,CAAC;AACjD,YAAMC,WAAW,KAAK;AACtB,WAAK,YAAY,IAAIC,eAAe,KAAK,eAAe;AACxD,WAAK,UAAUC,MAAAA;AACf,aAAAC,gBACGC,kBAAgB;AAAA,QAAA,IAACf,UAAO;AAAA,iBAAES,OAAK;AAAA,QAAQ;AAAA,QAAA,IAAEP,SAAM;AAAA,iBAAEO,OAAK;AAAA,QAAO;AAAA,QAAA,IAAAO,WAAA;AAAA,iBAAAF,gBAC3DG,aAAW;AAAA,YAAA,IAAAD,WAAA;AAAA,qBAAAF,gBACTI,QAAM;AAAA,gBAACf,OAAOG;AAAAA,gBAAO,IAAAU,WAAA;AAAA,yBAAAF,gBACnBH,UAAQ,EAAA;AAAA,gBAAA;AAAA,cAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAKnB,GAAGL,OAAO;AAEV,SAAK,aAAa;AAClB,SAAK,WAAWC;AAAAA,EAClB;AAAA,EAEAY,UAAU;AACR,QAAI,CAAC,KAAK,YAAY;AACpB,YAAM,IAAId,MAAM,yBAAyB;AAAA,IAC3C;AACA,SAAK,WAAWe,KAAAA;AAChB,SAAK,WAAA;AACL,SAAK,aAAa;AAAA,EACpB;AAAA,EAEAC,UAAUnB,QAAuC;AAC/C,SAAK,UAAU;AAAA,MACb,GAAG,KAAK;AAAA,MACR,GAAGA;AAAAA,IAAAA;AAAAA,EAEP;AACF;"}

package/dist/esm/devtools.js

@@ -1,4 +1,4 @@
-import { template, use, setAttribute, insert, createComponent, memo } from "solid-js/web";
+import { createComponent, Portal, template, use, setAttribute, insert, memo } from "solid-js/web";
 import { createSignal, createEffect, onCleanup, Show } from "solid-js";
 import { createShortcut } from "@solid-primitives/keyboard";
 import { useDevtoolsSettings, useHeight, usePersistOpen } from "./context/use-devtools-context.js";
@@ -11,6 +11,7 @@ import { Tabs } from "./components/tabs.js";
 import { TabContent } from "./components/tab-content.js";
 import { keyboardModifiers } from "./context/devtools-store.js";
 import { getAllPermutations } from "./utils/sanitize.js";
+import { usePiPWindow } from "./context/pip-context.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 function DevTools() {
   const {
@@ -25,15 +26,17 @@ function DevTools() {
   } = usePersistOpen();
   const [rootEl, setRootEl] = createSignal();
   const [isOpen, setIsOpen] = createSignal(settings().defaultOpen || persistOpen());
+  const pip = usePiPWindow();
   let panelRef = void 0;
   const [isResizing, setIsResizing] = createSignal(false);
   const toggleOpen = () => {
+    if (pip().pipWindow) {
+      return;
+    }
     const open = isOpen();
     setIsOpen(!open);
     setPersistOpen(!open);
   };
-  createEffect(() => {
-  });
   const handleDragStart = (panelElement, startEvent) => {
     if (startEvent.button !== 0) return;
     if (!panelElement) return;
@@ -65,24 +68,20 @@ function DevTools() {
       const previousValue = rootEl()?.parentElement?.style.paddingBottom;
       const run = () => {
         if (!panelRef) return;
-        const containerHeight = panelRef.getBoundingClientRect().height;
         if (rootEl()?.parentElement) {
           setRootEl((prev) => {
-            if (prev?.parentElement) {
-              prev.parentElement.style.paddingBottom = `${containerHeight}px`;
-            }
+            if (prev?.parentElement) ;
             return prev;
           });
         }
       };
       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;
               return prev;
             });
           }
@@ -147,37 +146,42 @@ function DevTools() {
       window.removeEventListener("click", openSourceHandler);
     });
   });
-  return (() => {
-    var _el$ = _tmpl$();
-    use(setRootEl, _el$);
-    setAttribute(_el$, "data-testid", TANSTACK_DEVTOOLS);
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return memo(() => !!settings().requireUrlFlag)() ? window.location.search.includes(settings().urlFlag) : true;
-      },
-      get children() {
-        return [createComponent(Trigger, {
-          isOpen,
-          setIsOpen: toggleOpen
-        }), createComponent(MainPanel, {
-          isResizing,
-          isOpen,
-          get children() {
-            return createComponent(ContentPanel, {
-              ref: (ref) => panelRef = ref,
-              handleDragStart: (e) => handleDragStart(panelRef, e),
-              get children() {
-                return [createComponent(Tabs, {
-                  toggleOpen
-                }), createComponent(TabContent, {})];
-              }
-            });
-          }
-        })];
-      }
-    }));
-    return _el$;
-  })();
+  return createComponent(Portal, {
+    get mount() {
+      return (pip().pipWindow ?? window).document.body;
+    },
+    get children() {
+      var _el$ = _tmpl$();
+      use(setRootEl, _el$);
+      setAttribute(_el$, "data-testid", TANSTACK_DEVTOOLS);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return memo(() => pip().pipWindow !== null)() ? true : memo(() => !!settings().requireUrlFlag)() ? window.location.search.includes(settings().urlFlag) : true;
+        },
+        get children() {
+          return [createComponent(Trigger, {
+            isOpen,
+            setIsOpen: toggleOpen
+          }), createComponent(MainPanel, {
+            isResizing,
+            isOpen,
+            get children() {
+              return createComponent(ContentPanel, {
+                ref: (ref) => panelRef = ref,
+                handleDragStart: (e) => handleDragStart(panelRef, e),
+                get children() {
+                  return [createComponent(Tabs, {
+                    toggleOpen
+                  }), createComponent(TabContent, {})];
+                }
+              });
+            }
+          })];
+        }
+      }));
+      return _el$;
+    }
+  });
 }
 export {
   DevTools as default

package/dist/esm/devtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import { Show, createEffect, createSignal, onCleanup } from 'solid-js'\nimport { createShortcut } from '@solid-primitives/keyboard'\nimport {\n  useDevtoolsSettings,\n  useHeight,\n  usePersistOpen,\n} from './context/use-devtools-context'\nimport { useDisableTabbing } from './hooks/use-disable-tabbing'\nimport { TANSTACK_DEVTOOLS } from './utils/storage'\nimport { Trigger } from './components/trigger'\nimport { MainPanel } from './components/main-panel'\nimport { ContentPanel } from './components/content-panel'\nimport { Tabs } from './components/tabs'\nimport { TabContent } from './components/tab-content'\nimport { keyboardModifiers } from './context/devtools-store'\nimport { getAllPermutations } from './utils/sanitize'\n\nexport default function DevTools() {\n  const { settings } = useDevtoolsSettings()\n  const { setHeight } = useHeight()\n  const { persistOpen, setPersistOpen } = usePersistOpen()\n  const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n  const [isOpen, setIsOpen] = createSignal(\n    settings().defaultOpen || persistOpen(),\n  )\n  let panelRef: HTMLDivElement | undefined = undefined\n  const [isResizing, setIsResizing] = createSignal(false)\n  const toggleOpen = () => {\n    const open = isOpen()\n    setIsOpen(!open)\n    setPersistOpen(!open)\n  }\n  createEffect(() => {})\n  // Used to resize the panel\n  const handleDragStart = (\n    panelElement: HTMLDivElement | undefined,\n    startEvent: MouseEvent,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n    if (!panelElement) return\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement.getBoundingClientRect().height,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight =\n        settings().panelLocation === 'bottom'\n          ? dragInfo.originalHeight + delta\n          : dragInfo.originalHeight - delta\n\n      setHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  // Handle resizing and padding adjustments\n  createEffect(() => {\n    if (isOpen()) {\n      const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        if (!panelRef) return\n        const containerHeight = panelRef.getBoundingClientRect().height\n        if (rootEl()?.parentElement) {\n          setRootEl((prev) => {\n            if (prev?.parentElement) {\n              prev.parentElement.style.paddingBottom = `${containerHeight}px`\n            }\n            return prev\n          })\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          if (rootEl()?.parentElement && typeof previousValue === 'string') {\n            setRootEl((prev) => {\n              prev!.parentElement!.style.paddingBottom = previousValue\n              return prev\n            })\n          }\n        }\n      }\n    } else {\n      // Reset padding when devtools are closed\n      if (rootEl()?.parentElement) {\n        setRootEl((prev) => {\n          if (prev?.parentElement) {\n            prev.parentElement.removeAttribute('style')\n          }\n          return prev\n        })\n      }\n    }\n    return\n  })\n  createEffect(() => {\n    window.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape' && isOpen()) {\n        toggleOpen()\n      }\n    })\n  })\n  useDisableTabbing(isOpen)\n  createEffect(() => {\n    if (rootEl()) {\n      const el = rootEl()\n      const fontSize = getComputedStyle(el!).fontSize\n      el?.style.setProperty('--tsrd-font-size', fontSize)\n    }\n  })\n  createEffect(() => {\n    // we create all combinations of modifiers\n    const modifiers = settings().openHotkey.filter((key) =>\n      keyboardModifiers.includes(key as any),\n    )\n    const nonModifiers = settings().openHotkey.filter(\n      (key) => !keyboardModifiers.includes(key as any),\n    )\n\n    const allModifierCombinations = getAllPermutations(modifiers)\n\n    for (const combination of allModifierCombinations) {\n      const permutation = [...combination, ...nonModifiers]\n      createShortcut(permutation, () => {\n        toggleOpen()\n      })\n    }\n  })\n\n  createEffect(() => {\n    // this will only work with the Vite plugin\n    const openSourceHandler = (e: Event) => {\n      const isShiftHeld = (e as KeyboardEvent).shiftKey\n      const isCtrlHeld =\n        (e as KeyboardEvent).ctrlKey || (e as KeyboardEvent).metaKey\n      if (!isShiftHeld || !isCtrlHeld) return\n\n      if (e.target instanceof HTMLElement) {\n        const dataSource = e.target.getAttribute('data-tsd-source')\n        window.getSelection()?.removeAllRanges()\n        if (dataSource) {\n          e.preventDefault()\n          e.stopPropagation()\n          fetch(\n            `http://localhost:__TSD_PORT__/__tsd/open-source?source=${dataSource}`,\n          ).catch(() => {})\n        }\n      }\n    }\n    window.addEventListener('click', openSourceHandler)\n    onCleanup(() => {\n      window.removeEventListener('click', openSourceHandler)\n    })\n  })\n\n  return (\n    <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>\n      <Show\n        when={\n          settings().requireUrlFlag\n            ? window.location.search.includes(settings().urlFlag)\n            : true\n        }\n      >\n        <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />\n        <MainPanel isResizing={isResizing} isOpen={isOpen}>\n          <ContentPanel\n            ref={(ref) => (panelRef = ref)}\n            handleDragStart={(e) => handleDragStart(panelRef, e)}\n          >\n            <Tabs toggleOpen={toggleOpen} />\n            <TabContent />\n          </ContentPanel>\n        </MainPanel>\n      </Show>\n    </div>\n  )\n}\n"],"names":["DevTools","settings","useDevtoolsSettings","setHeight","useHeight","persistOpen","setPersistOpen","usePersistOpen","rootEl","setRootEl","createSignal","isOpen","setIsOpen","defaultOpen","panelRef","undefined","isResizing","setIsResizing","toggleOpen","open","createEffect","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","delta","newHeight","panelLocation","unsub","document","removeEventListener","addEventListener","previousValue","parentElement","style","paddingBottom","containerHeight","prev","window","removeAttribute","e","key","useDisableTabbing","el","fontSize","getComputedStyle","setProperty","modifiers","openHotkey","filter","keyboardModifiers","includes","nonModifiers","allModifierCombinations","getAllPermutations","combination","permutation","createShortcut","openSourceHandler","isShiftHeld","shiftKey","isCtrlHeld","ctrlKey","metaKey","target","HTMLElement","dataSource","getAttribute","getSelection","removeAllRanges","preventDefault","stopPropagation","fetch","catch","onCleanup","_el$","_tmpl$","_$use","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","_$createComponent","Show","when","_$memo","requireUrlFlag","location","search","urlFlag","children","Trigger","MainPanel","ContentPanel","ref","Tabs","TabContent"],"mappings":"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"}
+{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import { Show, createEffect, createSignal, onCleanup } from 'solid-js'\nimport { createShortcut } from '@solid-primitives/keyboard'\nimport { Portal } from 'solid-js/web'\nimport {\n  useDevtoolsSettings,\n  useHeight,\n  usePersistOpen,\n} from './context/use-devtools-context'\nimport { useDisableTabbing } from './hooks/use-disable-tabbing'\nimport { TANSTACK_DEVTOOLS } from './utils/storage'\nimport { Trigger } from './components/trigger'\nimport { MainPanel } from './components/main-panel'\nimport { ContentPanel } from './components/content-panel'\nimport { Tabs } from './components/tabs'\nimport { TabContent } from './components/tab-content'\nimport { keyboardModifiers } from './context/devtools-store'\nimport { getAllPermutations } from './utils/sanitize'\nimport { usePiPWindow } from './context/pip-context'\n\nexport default function DevTools() {\n  const { settings } = useDevtoolsSettings()\n  const { setHeight } = useHeight()\n  const { persistOpen, setPersistOpen } = usePersistOpen()\n  const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n  const [isOpen, setIsOpen] = createSignal(\n    settings().defaultOpen || persistOpen(),\n  )\n  const pip = usePiPWindow()\n  let panelRef: HTMLDivElement | undefined = undefined\n  const [isResizing, setIsResizing] = createSignal(false)\n  const toggleOpen = () => {\n    if (pip().pipWindow) {\n      return\n    }\n    const open = isOpen()\n    setIsOpen(!open)\n    setPersistOpen(!open)\n  }\n  // Used to resize the panel\n  const handleDragStart = (\n    panelElement: HTMLDivElement | undefined,\n    startEvent: MouseEvent,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n    if (!panelElement) return\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement.getBoundingClientRect().height,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight =\n        settings().panelLocation === 'bottom'\n          ? dragInfo.originalHeight + delta\n          : dragInfo.originalHeight - delta\n\n      setHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  // Handle resizing and padding adjustments\n  createEffect(() => {\n    if (isOpen()) {\n      const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        if (!panelRef) return\n        // const containerHeight = panelRef.getBoundingClientRect().height\n        if (rootEl()?.parentElement) {\n          setRootEl((prev) => {\n            if (prev?.parentElement) {\n              // prev.parentElement.style.paddingBottom = `${containerHeight}px`\n            }\n            return prev\n          })\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        ;(pip().pipWindow ?? window).addEventListener('resize', run)\n\n        return () => {\n          ;(pip().pipWindow ?? window).removeEventListener('resize', run)\n          if (rootEl()?.parentElement && typeof previousValue === 'string') {\n            setRootEl((prev) => {\n              // prev!.parentElement!.style.paddingBottom = previousValue\n              return prev\n            })\n          }\n        }\n      }\n    } else {\n      // Reset padding when devtools are closed\n      if (rootEl()?.parentElement) {\n        setRootEl((prev) => {\n          if (prev?.parentElement) {\n            prev.parentElement.removeAttribute('style')\n          }\n          return prev\n        })\n      }\n    }\n    return\n  })\n\n  createEffect(() => {\n    window.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape' && isOpen()) {\n        toggleOpen()\n      }\n    })\n  })\n  useDisableTabbing(isOpen)\n  createEffect(() => {\n    if (rootEl()) {\n      const el = rootEl()\n      const fontSize = getComputedStyle(el!).fontSize\n      el?.style.setProperty('--tsrd-font-size', fontSize)\n    }\n  })\n  createEffect(() => {\n    // we create all combinations of modifiers\n    const modifiers = settings().openHotkey.filter((key) =>\n      keyboardModifiers.includes(key as any),\n    )\n    const nonModifiers = settings().openHotkey.filter(\n      (key) => !keyboardModifiers.includes(key as any),\n    )\n\n    const allModifierCombinations = getAllPermutations(modifiers)\n\n    for (const combination of allModifierCombinations) {\n      const permutation = [...combination, ...nonModifiers]\n      createShortcut(permutation, () => {\n        toggleOpen()\n      })\n    }\n  })\n\n  createEffect(() => {\n    // this will only work with the Vite plugin\n    const openSourceHandler = (e: Event) => {\n      const isShiftHeld = (e as KeyboardEvent).shiftKey\n      const isCtrlHeld =\n        (e as KeyboardEvent).ctrlKey || (e as KeyboardEvent).metaKey\n      if (!isShiftHeld || !isCtrlHeld) return\n\n      if (e.target instanceof HTMLElement) {\n        const dataSource = e.target.getAttribute('data-tsd-source')\n        window.getSelection()?.removeAllRanges()\n        if (dataSource) {\n          e.preventDefault()\n          e.stopPropagation()\n          fetch(\n            `http://localhost:__TSD_PORT__/__tsd/open-source?source=${dataSource}`,\n          ).catch(() => {})\n        }\n      }\n    }\n    window.addEventListener('click', openSourceHandler)\n    onCleanup(() => {\n      window.removeEventListener('click', openSourceHandler)\n    })\n  })\n\n  return (\n    <Portal mount={(pip().pipWindow ?? window).document.body}>\n      <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>\n        <Show\n          when={\n            pip().pipWindow !== null\n              ? true\n              : settings().requireUrlFlag\n                ? window.location.search.includes(settings().urlFlag)\n                : true\n          }\n        >\n          <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />\n          <MainPanel isResizing={isResizing} isOpen={isOpen}>\n            <ContentPanel\n              ref={(ref) => (panelRef = ref)}\n              handleDragStart={(e) => handleDragStart(panelRef, e)}\n            >\n              <Tabs toggleOpen={toggleOpen} />\n              <TabContent />\n            </ContentPanel>\n          </MainPanel>\n        </Show>\n      </div>\n    </Portal>\n  )\n}\n"],"names":["DevTools","settings","useDevtoolsSettings","setHeight","useHeight","persistOpen","setPersistOpen","usePersistOpen","rootEl","setRootEl","createSignal","isOpen","setIsOpen","defaultOpen","pip","usePiPWindow","panelRef","undefined","isResizing","setIsResizing","toggleOpen","pipWindow","open","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","delta","newHeight","panelLocation","unsub","document","removeEventListener","addEventListener","createEffect","previousValue","parentElement","style","paddingBottom","prev","window","removeAttribute","e","key","useDisableTabbing","el","fontSize","getComputedStyle","setProperty","modifiers","openHotkey","filter","keyboardModifiers","includes","nonModifiers","allModifierCombinations","getAllPermutations","combination","permutation","createShortcut","openSourceHandler","isShiftHeld","shiftKey","isCtrlHeld","ctrlKey","metaKey","target","HTMLElement","dataSource","getAttribute","getSelection","removeAllRanges","preventDefault","stopPropagation","fetch","catch","onCleanup","_$createComponent","Portal","mount","body","children","_el$","_tmpl$","_$use","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","Show","when","_$memo","requireUrlFlag","location","search","urlFlag","Trigger","MainPanel","ContentPanel","ref","Tabs","TabContent"],"mappings":"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"}

package/dist/esm/styles/tokens.js

@@ -13,6 +13,9 @@ const tokens = {
     blue: {
       800: "#1849A9"
     },
+    green: {
+      500: "#12B76A"
+    },
     red: {
       500: "#ef4444"
     },