@tanstack/devtools 0.4.4 → 0.5.0

package/src/context/pip-context.tsx

@@ -0,0 +1,178 @@
+import {
+  createContext,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  useContext,
+} from 'solid-js'
+import { clearDelegatedEvents, delegateEvents } from 'solid-js/web'
+import type { Accessor, JSX } from 'solid-js'
+
+interface PiPProviderProps {
+  children: JSX.Element
+  //  localStore: StorageObject<string>
+  //  setLocalStore: StorageSetter<string, unknown>
+  disabled?: boolean
+}
+
+type PiPContextType = {
+  pipWindow: Window | null
+  requestPipWindow: (settings: string) => void
+  closePipWindow: () => void
+  disabled: boolean
+}
+
+const PiPContext = createContext<Accessor<PiPContextType> | undefined>(
+  undefined,
+)
+
+export const PiPProvider = (props: PiPProviderProps) => {
+  // Expose pipWindow that is currently active
+  const [pipWindow, setPipWindow] = createSignal<Window | null>(null)
+
+  // Close pipWindow programmatically
+  const closePipWindow = () => {
+    const w = pipWindow()
+    if (w != null) {
+      w.close()
+      setPipWindow(null)
+    }
+  }
+
+  // Open new pipWindow
+  const requestPipWindow = (settings: string) => {
+    // We don't want to allow multiple requests.
+    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()
+    })
+    // Remove existing styles
+    pip.document.head.innerHTML = ''
+    // Remove existing body
+    pip.document.body.innerHTML = ''
+    // Clear Delegated Events
+    clearDelegatedEvents(pip.document)
+
+    pip.document.title = 'TanStack Devtools'
+    pip.document.body.style.margin = '0'
+
+    // Detect when window is closed by user
+    pip.addEventListener('pagehide', () => {
+      localStorage.setItem('pip_open', 'false')
+      closePipWindow()
+    })
+
+    // It is important to copy all parent window styles. Otherwise, there would be no CSS available at all
+    // https://developer.chrome.com/docs/web-platform/document-picture-in-picture/#copy-style-sheets-to-the-picture-in-picture-window
+    ;[...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(() => {
+    // Setup mutation observer for goober styles with id `_goober
+    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 (
+    <PiPContext.Provider value={value}>{props.children}</PiPContext.Provider>
+  )
+}
+
+export 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
+}

package/src/core.tsx

@@ -3,6 +3,7 @@ import { Portal, render } from 'solid-js/web'
 import { ClientEventBus } from '@tanstack/devtools-event-bus/client'
 import { DevtoolsProvider } from './context/devtools-context'
 import { initialState } from './context/devtools-store'
+import { PiPProvider } from './context/pip-context'
 import type { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client'
 import type {
   TanStackDevtoolsConfig,
@@ -71,9 +72,11 @@ export class TanStackDevtoolsCore {
       this.#eventBus.start()
       return (
         <DevtoolsProvider plugins={this.#plugins} config={this.#config}>
-          <Portal mount={mountTo}>
-            <Devtools />
-          </Portal>
+          <PiPProvider>
+            <Portal mount={mountTo}>
+              <Devtools />
+            </Portal>
+          </PiPProvider>
         </DevtoolsProvider>
       )
     }, mountTo)

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/src/tabs/settings-tab.tsx

@@ -208,7 +208,6 @@ export const SettingsTab = () => {
                 .split('+')
                 .flatMap((key) => makeModifierArray(key))
                 .filter(Boolean)
-              console.log(e, modifiers)
               return setSettings({
                 openHotkey: [
                   ...hotkey().filter((key) =>

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";