@tanstack/devtools 0.6.7 → 0.6.8

package/dist/index.d.ts

@@ -0,0 +1,168 @@
+import { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client';
+export { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client';
+import * as solid_js from 'solid-js';
+
+declare const PLUGIN_CONTAINER_ID = "plugin-container";
+declare const PLUGIN_TITLE_CONTAINER_ID = "plugin-title-container";
+
+declare const tabs: readonly [{
+    readonly name: "Plugins";
+    readonly id: "plugins";
+    readonly component: () => solid_js.JSX.Element;
+    readonly icon: () => solid_js.JSX.Element;
+}, {
+    readonly name: "SEO";
+    readonly id: "seo";
+    readonly component: () => solid_js.JSX.Element;
+    readonly icon: () => solid_js.JSX.Element;
+}, {
+    readonly name: "Settings";
+    readonly id: "settings";
+    readonly component: () => solid_js.JSX.Element;
+    readonly icon: () => solid_js.JSX.Element;
+}];
+type TabName = (typeof tabs)[number]['id'];
+
+type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift';
+type KeyboardKey = ModifierKey | (string & {});
+type TriggerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right';
+type DevtoolsStore = {
+    settings: {
+        /**
+         * Whether the dev tools should be open by default
+         * @default false
+         */
+        defaultOpen: boolean;
+        /**
+         * Whether the dev tools trigger should be hidden until the user hovers over it
+         * @default false
+         */
+        hideUntilHover: boolean;
+        /**
+         * The position of the trigger button
+         * @default "bottom-right"
+         */
+        position: TriggerPosition;
+        /**
+         * The location of the panel once it is open
+         * @default "bottom"
+         */
+        panelLocation: 'top' | 'bottom';
+        /**
+         * The hotkey to open the dev tools
+         * @default "shift+a"
+         */
+        openHotkey: Array<KeyboardKey>;
+        /**
+         * Whether to require the URL flag to open the dev tools
+         * @default false
+         */
+        requireUrlFlag: boolean;
+        /**
+         * The URL flag to open the dev tools, used in conjunction with requireUrlFlag (if set to true)
+         * @default "tanstack-devtools"
+         */
+        urlFlag: string;
+        /**
+         * The theme of the dev tools
+         * @default "dark"
+         */
+        theme: 'light' | 'dark';
+    };
+    state: {
+        activeTab: TabName;
+        height: number;
+        activePlugin?: string | undefined;
+        persistOpen: boolean;
+    };
+    plugins?: Array<TanStackDevtoolsPlugin>;
+};
+
+interface TanStackDevtoolsPlugin {
+    /**
+     * Name to be displayed in the devtools UI.
+     * If a string, it will be used as the plugin name.
+     * If a function, it will be called with the mount element.
+     *
+     * Example:
+     * ```ts
+     *   {
+     *     // If a string, it will be used as the plugin name
+     *     name: "Your Plugin",
+     *     render: () => {}
+     *   }
+     * ```
+     * or
+     *
+     * ```ts
+     *   {
+     *     // If a function, it will be called with the mount element
+     *     name: (el) => {
+     *       el.innerText = "Your Plugin Name"
+     *       // Your name logic here
+     *     },
+     *     render: () => {}
+     *   }
+     * ```
+     */
+    name: string | ((el: HTMLHeadingElement, theme: DevtoolsStore['settings']['theme']) => void);
+    /**
+     * Unique identifier for the plugin.
+     * If not provided, it will be generated based on the name.
+     */
+    id?: string;
+    /**
+     * Render the plugin UI by using the provided element. This function will be called
+     * when the plugin tab is clicked and expected to be mounted.
+     * @param el The mount element for the plugin.
+     * @returns void
+     *
+     * Example:
+     * ```ts
+     *   render: (el) => {
+     *     el.innerHTML = "<h1>Your Plugin</h1>"
+     *   }
+     * ```
+     */
+    render: (el: HTMLDivElement, theme: DevtoolsStore['settings']['theme']) => void;
+}
+type TanStackDevtoolsConfig = DevtoolsStore['settings'];
+
+interface TanStackDevtoolsInit {
+    /**
+     * Configuration for the devtools shell. These configuration options are used to set the
+     * initial state of the devtools when it is started for the first time. Afterwards,
+     * the settings are persisted in local storage and changed through the settings panel.
+     */
+    config?: Partial<TanStackDevtoolsConfig>;
+    /**
+     * Array of plugins to be used in the devtools.
+     * Each plugin has a `render` function that gives you the dom node to mount into
+     *
+     * Example:
+     * ```ts
+     *  const devtools = new TanStackDevtoolsCore({
+     *    plugins: [
+     *      {
+     *        id: "your-plugin-id",
+     *        name: "Your Plugin",
+     *        render: (el) => {
+     *          // Your render logic here
+     *        },
+     *      },
+     *    ],
+     *  })
+     * ```
+     */
+    plugins?: Array<TanStackDevtoolsPlugin>;
+    eventBusConfig?: ClientEventBusConfig;
+}
+declare class TanStackDevtoolsCore {
+    #private;
+    constructor(init: TanStackDevtoolsInit);
+    mount<T extends HTMLElement>(el: T): void;
+    unmount(): void;
+    setConfig(config: Partial<TanStackDevtoolsInit>): void;
+}
+
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID, type TanStackDevtoolsConfig, TanStackDevtoolsCore, type TanStackDevtoolsInit, type TanStackDevtoolsPlugin };

package/dist/index.js

@@ -0,0 +1,76 @@
+import { initialState, DevtoolsProvider, PiPProvider } from './chunk/CEHNENNI.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/CEHNENNI.js';
+import { render, createComponent, Portal } from 'solid-js/web';
+import { lazy } from 'solid-js';
+import { ClientEventBus } from '@tanstack/devtools-event-bus/client';
+
+var TanStackDevtoolsCore = class {
+  #config = {
+    ...initialState.settings
+  };
+  #plugins = [];
+  #isMounted = false;
+  #dispose;
+  #Component;
+  #eventBus;
+  #eventBusConfig;
+  constructor(init) {
+    this.#plugins = init.plugins || [];
+    this.#eventBusConfig = init.eventBusConfig;
+    this.#config = {
+      ...this.#config,
+      ...init.config
+    };
+  }
+  mount(el) {
+    if (this.#isMounted) {
+      throw new Error("Devtools is already mounted");
+    }
+    const mountTo = el;
+    const dispose = render(() => {
+      const _self$ = this;
+      this.#Component = lazy(() => import('./devtools/ITBBRMTQ.js'));
+      const Devtools = this.#Component;
+      this.#eventBus = new ClientEventBus(this.#eventBusConfig);
+      this.#eventBus.start();
+      return createComponent(DevtoolsProvider, {
+        get plugins() {
+          return _self$.#plugins;
+        },
+        get config() {
+          return _self$.#config;
+        },
+        get children() {
+          return createComponent(PiPProvider, {
+            get children() {
+              return createComponent(Portal, {
+                mount: mountTo,
+                get children() {
+                  return createComponent(Devtools, {});
+                }
+              });
+            }
+          });
+        }
+      });
+    }, mountTo);
+    this.#isMounted = true;
+    this.#dispose = dispose;
+  }
+  unmount() {
+    if (!this.#isMounted) {
+      throw new Error("Devtools is not mounted");
+    }
+    this.#eventBus?.stop();
+    this.#dispose?.();
+    this.#isMounted = false;
+  }
+  setConfig(config) {
+    this.#config = {
+      ...this.#config,
+      ...config
+    };
+  }
+};
+
+export { TanStackDevtoolsCore };

package/dist/server.js

@@ -0,0 +1,44 @@
+import { initialState } from './chunk/CEHNENNI.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/CEHNENNI.js';
+import 'solid-js/web';
+import 'solid-js';
+import '@tanstack/devtools-event-bus/client';
+
+var TanStackDevtoolsCore = class {
+  #config = {
+    ...initialState.settings
+  };
+  #plugins = [];
+  #isMounted = false;
+  #dispose;
+  #Component;
+  #eventBus;
+  #eventBusConfig;
+  constructor(init) {
+    this.#plugins = init.plugins || [];
+    this.#eventBusConfig = init.eventBusConfig;
+    this.#config = {
+      ...this.#config,
+      ...init.config
+    };
+  }
+  mount(el) {
+    return;
+  }
+  unmount() {
+    if (!this.#isMounted) {
+      throw new Error("Devtools is not mounted");
+    }
+    this.#eventBus?.stop();
+    this.#dispose?.();
+    this.#isMounted = false;
+  }
+  setConfig(config) {
+    this.#config = {
+      ...this.#config,
+      ...config
+    };
+  }
+};
+
+export { TanStackDevtoolsCore };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -18,16 +18,23 @@
     "devtools"
   ],
   "type": "module",
-  "types": "dist/esm/index.d.ts",
-  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
   "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
-      }
+    "browser": {
+      "development": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/dev.js"
+      },
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
-    "./package.json": "./package.json"
+    "node": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/server.js"
+    },
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.js"
   },
   "sideEffects": false,
   "engines": {
@@ -42,14 +49,16 @@
     "clsx": "^2.1.1",
     "goober": "^2.1.16",
     "solid-js": "^1.9.7",
-    "@tanstack/devtools-event-bus": "0.3.2",
-    "@tanstack/devtools-ui": "0.3.4"
+    "@tanstack/devtools-ui": "0.3.4",
+    "@tanstack/devtools-event-bus": "0.3.2"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.7",
     "@tanstack/devtools-ui": "0.3.4"
   },
   "devDependencies": {
+    "tsup": "^8.5.0",
+    "tsup-preset-solid": "^2.2.0",
     "vite-plugin-solid": "^2.11.6"
   },
   "scripts": {
@@ -60,6 +69,6 @@
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",
     "test:build": "publint --strict",
-    "build": "vite build"
+    "build": "tsup"
   }
 }

package/src/core.tsx

@@ -61,6 +61,9 @@ export class TanStackDevtoolsCore {
   }
 
   mount<T extends HTMLElement>(el: T) {
+    //  tsup-preset-solid statically replaces this variable during build, which eliminates this code from server bundle
+    if (import.meta.env.SSR) return
+
     if (this.#isMounted) {
       throw new Error('Devtools is already mounted')
     }

package/dist/esm/components/content-panel.d.ts

@@ -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/esm/components/content-panel.js

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

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

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

package/dist/esm/components/main-panel.d.ts

@@ -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/esm/components/main-panel.js

@@ -1,42 +0,0 @@
-import { template, setAttribute, insert, createComponent, effect, className } from "solid-js/web";
-import clsx from "clsx";
-import { DrawClientProvider } from "../context/draw-context.js";
-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();
-  const {
-    height
-  } = useHeight();
-  const {
-    settings
-  } = useDevtoolsSettings();
-  const pip = usePiPWindow();
-  return (() => {
-    var _el$ = _tmpl$();
-    setAttribute(_el$, "id", TANSTACK_DEVTOOLS);
-    insert(_el$, createComponent(DrawClientProvider, {
-      animationMs: 400,
-      get children() {
-        return props.children;
-      }
-    }));
-    effect((_p$) => {
-      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$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    return _el$;
-  })();
-};
-export {
-  MainPanel
-};
-//# sourceMappingURL=main-panel.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"main-panel.js","sources":["../../../src/components/main-panel.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { DrawClientProvider } from '../context/draw-context'\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'\n\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      <DrawClientProvider animationMs={400}>\n        {props.children}\n      </DrawClientProvider>\n    </div>\n  )\n}\n"],"names":["MainPanel","props","styles","useStyles","height","useHeight","settings","useDevtoolsSettings","pip","usePiPWindow","_el$","_tmpl$","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","_$createComponent","DrawClientProvider","animationMs","children","_$effect","_p$","_v$","pipWindow","_v$2","clsx","devtoolsPanelContainer","panelLocation","Boolean","devtoolsPanelContainerAnimation","isOpen","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","isResizing","e","style","setProperty","removeProperty","t","_$className","undefined"],"mappings":";;;;;;;;AASO,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,MAAAK,gBAcpBC,oBAAkB;AAAA,MAACC,aAAa;AAAA,MAAG,IAAAC,WAAA;AAAA,eACjCjB,MAAMiB;AAAAA,MAAQ;AAAA,IAAA,CAAA,CAAA;AAAAC,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MAbPb,MAAMc,YAAY,UAAUlB,OAAAA,IAAW,MAAImB,OAE9CC,KACLtB,OAAAA,EAASuB,uBACPnB,SAAAA,EAAWoB,eACXC,QAAQnB,IAAAA,EAAMc,SAAS,CACzB,GACApB,OAAAA,EAAS0B,gCAAgC3B,MAAM4B,OAAAA,GAAUzB,OAAAA,CAAQ,GACjEF,OAAAA,EAAS4B,iCAAiC7B,MAAM4B,OAAAA,CAAQ,GACxD3B,OAAAA,EAAS6B,+BAA+B9B,MAAM+B,UAAU,CAC1D;AAACX,cAAAD,IAAAa,OAAAb,IAAAa,IAAAZ,QAAA,OAAAX,KAAAwB,MAAAC,YAAA,UAAAd,GAAA,IAAAX,KAAAwB,MAAAE,eAAA,QAAA;AAAAb,eAAAH,IAAAiB,KAAAC,UAAA5B,MAAAU,IAAAiB,IAAAd,IAAA;AAAA,aAAAH;AAAAA,IAAA,GAAA;AAAA,MAAAa,GAAAM;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAA,WAAA7B;AAAAA,EAAA,GAAA;AAOP;"}

package/dist/esm/components/tab-content.d.ts

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

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

@@ -1,23 +0,0 @@
-import { template, insert, effect, className } from "solid-js/web";
-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";
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-const TabContent = () => {
-  const {
-    state
-  } = useDevtoolsState();
-  const styles = useStyles();
-  const component = createMemo(() => tabs.find((t) => t.id === state().activeTab)?.component || null);
-  return (() => {
-    var _el$ = _tmpl$();
-    insert(_el$, () => component()?.());
-    effect(() => className(_el$, styles().tabContent));
-    return _el$;
-  })();
-};
-export {
-  TabContent
-};
-//# sourceMappingURL=tab-content.js.map

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

@@ -1 +0,0 @@
-{"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.d.ts

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

package/dist/esm/components/tabs.js

@@ -1,75 +0,0 @@
-import { template, insert, createComponent, effect, className, memo, delegateEvents } from "solid-js/web";
-import clsx from "clsx";
-import { For } from "solid-js";
-import { PiP, X } from "@tanstack/devtools-ui/icons";
-import { useStyles } from "../styles/use-styles.js";
-import { useDevtoolsState } from "../context/use-devtools-context.js";
-import { useDrawContext } from "../context/draw-context.js";
-import { tabs } from "../tabs/index.js";
-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></button><button type=button>`);
-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}}`);
-  };
-  const {
-    hoverUtils
-  } = useDrawContext();
-  return (() => {
-    var _el$ = _tmpl$();
-    insert(_el$, createComponent(For, {
-      each: tabs,
-      children: (tab) => (() => {
-        var _el$2 = _tmpl$2();
-        _el$2.addEventListener("mouseleave", () => {
-          if (tab.id === "plugins") hoverUtils.leave();
-        });
-        _el$2.addEventListener("mouseenter", () => {
-          if (tab.id === "plugins") hoverUtils.enter();
-        });
-        _el$2.$$click = () => setState({
-          activeTab: tab.id
-        });
-        insert(_el$2, () => tab.icon());
-        effect(() => className(_el$2, clsx(styles().tab, {
-          active: state().activeTab === tab.id
-        })));
-        return _el$2;
-      })()
-    }), 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;
-        insert(_el$4, createComponent(PiP, {}));
-        _el$5.$$click = () => props.toggleOpen();
-        insert(_el$5, createComponent(X, {}));
-        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$;
-  })();
-};
-delegateEvents(["click"]);
-export {
-  Tabs
-};
-//# sourceMappingURL=tabs.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { For } from 'solid-js'\nimport { PiP, X } from '@tanstack/devtools-ui/icons'\nimport { useStyles } from '../styles/use-styles'\nimport { useDevtoolsState } from '../context/use-devtools-context'\nimport { useDrawContext } from '../context/draw-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  const { hoverUtils } = useDrawContext()\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            onMouseEnter={() => {\n              if (tab.id === 'plugins') hoverUtils.enter()\n            }}\n            onMouseLeave={() => {\n              if (tab.id === 'plugins') hoverUtils.leave()\n            }}\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            <PiP />\n          </button>\n          <button\n            type=\"button\"\n            class={clsx(styles().tab, 'close')}\n            onClick={() => props.toggleOpen()}\n          >\n            <X />\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","hoverUtils","useDrawContext","_el$","_tmpl$","_$insert","_$createComponent","For","each","tabs","children","tab","_el$2","_tmpl$2","addEventListener","id","leave","enter","$$click","activeTab","icon","_$effect","_$className","clsx","active","_c$","_$memo","_el$3","_tmpl$3","_el$4","firstChild","_el$5","nextSibling","style","setProperty","PiP","toggleOpen","X","_p$","_v$","_v$2","e","t","undefined","tabContainer","_$delegateEvents"],"mappings":";;;;;;;;;;AAaO,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,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAeC,eAAAA;AAEvB,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,iBAAA,cAQa,MAAM;AAClB,cAAIH,IAAII,OAAO,UAAWd,YAAWe,MAAAA;AAAAA,QACvC,CAAC;AAAAJ,cAAAE,iBAAA,cALa,MAAM;AAClB,cAAIH,IAAII,OAAO,UAAWd,YAAWgB,MAAAA;AAAAA,QACvC,CAAC;AAAAL,cAAAM,UAJQ,MAAM5B,SAAS;AAAA,UAAE6B,WAAWR,IAAII;AAAAA,QAAAA,CAAI;AAACV,eAAAO,OAAA,MAS7CD,IAAIS,KAAAA,CAAM;AAAAC,eAAA,MAAAC,UAAAV,OARJW,KAAKpC,OAAAA,EAASwB,KAAK;AAAA,UAAEa,QAAQnC,MAAAA,EAAQ8B,cAAcR,IAAII;AAAAA,QAAAA,CAAI,CAAC,CAAA;AAAA,eAAAH;AAAAA,MAAA,GAAA;AAAA,IAAA,CAUtE,GAAA,IAAA;AAAAP,WAAAF,OAAA,MAAA;AAAA,UAAAsB,MAAAC,KAAA,MAEFlC,UAAAA,EAAYA,cAAc,IAAI;AAAA,aAAA,MAA9BiC,IAAAA,IAAiC,QAAI,MAAA;AAAA,YAAAE,QAAAC,QAAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAG;AAAAL,cAAAM,MAAAC,YAAA,cAAA,MAAA;AAAAL,cAAAX,UASvBxB;AAAgBW,eAAAwB,OAAAvB,gBAExB6B,KAAG,CAAA,CAAA,CAAA;AAAAJ,cAAAb,UAKK,MAAMhC,MAAMkD,WAAAA;AAAY/B,eAAA0B,OAAAzB,gBAEhC+B,GAAC,CAAA,CAAA,CAAA;AAAAhB,eAAAiB,CAAAA,QAAA;AAAA,cAAAC,MAVKhB,KAAKpC,OAAAA,EAASwB,KAAK,QAAQ,GAAC6B,OAO5BjB,KAAKpC,SAASwB,KAAK,OAAO;AAAC4B,kBAAAD,IAAAG,KAAAnB,UAAAO,OAAAS,IAAAG,IAAAF,GAAA;AAAAC,mBAAAF,IAAAI,KAAApB,UAAAS,OAAAO,IAAAI,IAAAF,IAAA;AAAA,iBAAAF;AAAAA,QAAA,GAAA;AAAA,UAAAG,GAAAE;AAAAA,UAAAD,GAAAC;AAAAA,QAAAA,CAAA;AAAA,eAAAhB;AAAAA,MAAA,GAAA;AAAA,IAMvC,GAAA,GAAA,IAAA;AAAAN,WAAA,MAAAC,UAAAnB,MAvCShB,OAAAA,EAASyD,YAAY,CAAA;AAAA,WAAAzC;AAAAA,EAAA,GAAA;AA0CrC;AAAC0C,eAAA,CAAA,OAAA,CAAA;"}

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

@@ -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/esm/components/trigger.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"trigger.js","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,oBAAAA;AACrB,QAAMC,SAASC,UAAAA;AACf,QAAMC,cAAcC,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,WAAAH,MAAAI,gBAElCC,cAAY,CAAA,CAAA,CAAA;AAAAC,iBAAAC,UAAAP,MAHNR,YAAAA,CAAa,CAAA;AAAA,WAAAQ;AAAAA,EAAA,GAAA;AAM1B;AAACQ,eAAA,CAAA,OAAA,CAAA;"}

package/dist/esm/constants.d.ts

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

package/dist/esm/constants.js

@@ -1,7 +0,0 @@
-const PLUGIN_CONTAINER_ID = "plugin-container";
-const PLUGIN_TITLE_CONTAINER_ID = "plugin-title-container";
-export {
-  PLUGIN_CONTAINER_ID,
-  PLUGIN_TITLE_CONTAINER_ID
-};
-//# sourceMappingURL=constants.js.map