@tanstack/vue-router-devtools 0.0.1 → 1.140.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,45 +1,5 @@
-# @tanstack/vue-router-devtools
+<img src="https://static.scarf.sh/a.png?x-pxid=d988eb79-b0fc-4a2b-8514-6a1ab932d188" />
 
-## ⚠️ IMPORTANT NOTICE ⚠️
+# TanStack Vue Router Devtools
 
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
-
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
-
-## Purpose
-
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@tanstack/vue-router-devtools`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
-
-## What is OIDC Trusted Publishing?
-
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
-
-## Setup Instructions
-
-To properly configure OIDC trusted publishing for this package:
-
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
-
-## DO NOT USE THIS PACKAGE
-
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
-
-## More Information
-
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
-
----
-
-**Maintained for OIDC setup purposes only**
+See https://tanstack.com/router/latest/docs/framework/vue/devtools

package/dist/esm/TanStackRouterDevtools.d.ts

@@ -0,0 +1,113 @@
+import { AnyRouter } from '@tanstack/vue-router';
+export interface TanStackRouterDevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean;
+    /**
+     * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
+     */
+    panelProps?: Record<string, any>;
+    /**
+     * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+     */
+    closeButtonProps?: Record<string, any>;
+    /**
+     * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+     */
+    toggleButtonProps?: Record<string, any>;
+    /**
+     * The position of the TanStack Router logo to open and close the devtools panel.
+     * Defaults to 'bottom-left'.
+     */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * Use this to render the devtools inside a different type of container element for a11y purposes.
+     * Any string which corresponds to a valid intrinsic JSX element is allowed.
+     * Defaults to 'footer'.
+     */
+    containerElement?: string | any;
+    /**
+     * The router instance to use for the devtools.
+     */
+    router?: AnyRouter;
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+}
+export declare const TanStackRouterDevtools: import('vue').DefineComponent<{
+    initialIsOpen?: boolean
+    /**
+     * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
+     */
+     | undefined;
+    panelProps?: Record<string, any>
+    /**
+     * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+     */
+     | undefined;
+    closeButtonProps?: Record<string, any>
+    /**
+     * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+     */
+     | undefined;
+    toggleButtonProps?: Record<string, any>
+    /**
+     * The position of the TanStack Router logo to open and close the devtools panel.
+     * Defaults to 'bottom-left'.
+     */
+     | undefined;
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+    /**
+     * Use this to render the devtools inside a different type of container element for a11y purposes.
+     * Any string which corresponds to a valid intrinsic JSX element is allowed.
+     * Defaults to 'footer'.
+     */
+     | undefined;
+    containerElement?: string | any;
+    router?: AnyRouter
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+     | undefined;
+    shadowDOMTarget?: ShadowRoot | undefined;
+}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    initialIsOpen?: boolean
+    /**
+     * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
+     */
+     | undefined;
+    panelProps?: Record<string, any>
+    /**
+     * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+     */
+     | undefined;
+    closeButtonProps?: Record<string, any>
+    /**
+     * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+     */
+     | undefined;
+    toggleButtonProps?: Record<string, any>
+    /**
+     * The position of the TanStack Router logo to open and close the devtools panel.
+     * Defaults to 'bottom-left'.
+     */
+     | undefined;
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+    /**
+     * Use this to render the devtools inside a different type of container element for a11y purposes.
+     * Any string which corresponds to a valid intrinsic JSX element is allowed.
+     * Defaults to 'footer'.
+     */
+     | undefined;
+    containerElement?: string | any;
+    router?: AnyRouter
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+     | undefined;
+    shadowDOMTarget?: ShadowRoot | undefined;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/esm/TanStackRouterDevtools.js

@@ -0,0 +1,60 @@
+import { TanStackRouterDevtoolsCore } from "@tanstack/router-devtools-core";
+import { defineComponent, ref, watch, onMounted, onUnmounted, h } from "vue";
+import { useRouter, useRouterState } from "@tanstack/vue-router";
+const TanStackRouterDevtools = /* @__PURE__ */ defineComponent({
+  name: "TanStackRouterDevtools",
+  props: ["initialIsOpen", "panelProps", "closeButtonProps", "toggleButtonProps", "position", "containerElement", "router", "shadowDOMTarget"],
+  setup(props) {
+    const devToolRef = ref(null);
+    const hookRouter = useRouter({
+      warn: false
+    });
+    const activeRouter = props.router ?? hookRouter;
+    const activeRouterState = useRouterState({
+      router: activeRouter
+    });
+    const devtools = new TanStackRouterDevtoolsCore({
+      initialIsOpen: props.initialIsOpen,
+      panelProps: props.panelProps,
+      closeButtonProps: props.closeButtonProps,
+      toggleButtonProps: props.toggleButtonProps,
+      position: props.position,
+      containerElement: props.containerElement,
+      shadowDOMTarget: props.shadowDOMTarget,
+      router: activeRouter,
+      routerState: activeRouterState.value
+    });
+    watch(() => activeRouter, (router) => {
+      devtools.setRouter(router);
+    });
+    watch(activeRouterState, (routerState) => {
+      devtools.setRouterState(routerState);
+    });
+    watch(() => [props.initialIsOpen, props.panelProps, props.closeButtonProps, props.toggleButtonProps, props.position, props.containerElement, props.shadowDOMTarget], () => {
+      devtools.setOptions({
+        initialIsOpen: props.initialIsOpen,
+        panelProps: props.panelProps,
+        closeButtonProps: props.closeButtonProps,
+        toggleButtonProps: props.toggleButtonProps,
+        position: props.position,
+        containerElement: props.containerElement,
+        shadowDOMTarget: props.shadowDOMTarget
+      });
+    });
+    onMounted(() => {
+      if (devToolRef.value) {
+        devtools.mount(devToolRef.value);
+      }
+    });
+    onUnmounted(() => {
+      devtools.unmount();
+    });
+    return () => h("div", {
+      ref: devToolRef
+    });
+  }
+});
+export {
+  TanStackRouterDevtools
+};
+//# sourceMappingURL=TanStackRouterDevtools.js.map

package/dist/esm/TanStackRouterDevtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TanStackRouterDevtools.js","sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useRouter, useRouterState } from '@tanstack/vue-router'\nimport type { AnyRouter } from '@tanstack/vue-router'\n\nexport interface TanStackRouterDevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n   */\n  panelProps?: Record<string, any>\n  /**\n   * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: Record<string, any>\n  /**\n   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: Record<string, any>\n  /**\n   * The position of the TanStack Router logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'footer'.\n   */\n  containerElement?: string | any\n  /**\n   * The router instance to use for the devtools.\n   */\n  router?: AnyRouter\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtools = /* #__PURE__ */ defineComponent({\n  name: 'TanStackRouterDevtools',\n  props: [\n    'initialIsOpen',\n    'panelProps',\n    'closeButtonProps',\n    'toggleButtonProps',\n    'position',\n    'containerElement',\n    'router',\n    'shadowDOMTarget',\n  ] as unknown as undefined,\n  setup(props: TanStackRouterDevtoolsOptions) {\n    const devToolRef = ref<HTMLDivElement | null>(null)\n\n    const hookRouter = useRouter({ warn: false })\n    const activeRouter = props.router ?? hookRouter\n\n    const activeRouterState = useRouterState({ router: activeRouter })\n\n    const devtools = new TanStackRouterDevtoolsCore({\n      initialIsOpen: props.initialIsOpen,\n      panelProps: props.panelProps,\n      closeButtonProps: props.closeButtonProps,\n      toggleButtonProps: props.toggleButtonProps,\n      position: props.position,\n      containerElement: props.containerElement,\n      shadowDOMTarget: props.shadowDOMTarget,\n      router: activeRouter,\n      routerState: activeRouterState.value,\n    })\n\n    // Update devtools when router changes\n    watch(\n      () => activeRouter,\n      (router) => {\n        devtools.setRouter(router)\n      },\n    )\n\n    // Update devtools when router state changes\n    watch(activeRouterState, (routerState) => {\n      devtools.setRouterState(routerState)\n    })\n\n    // Update devtools when options change\n    watch(\n      () => [\n        props.initialIsOpen,\n        props.panelProps,\n        props.closeButtonProps,\n        props.toggleButtonProps,\n        props.position,\n        props.containerElement,\n        props.shadowDOMTarget,\n      ],\n      () => {\n        devtools.setOptions({\n          initialIsOpen: props.initialIsOpen,\n          panelProps: props.panelProps,\n          closeButtonProps: props.closeButtonProps,\n          toggleButtonProps: props.toggleButtonProps,\n          position: props.position,\n          containerElement: props.containerElement,\n          shadowDOMTarget: props.shadowDOMTarget,\n        })\n      },\n    )\n\n    onMounted(() => {\n      if (devToolRef.value) {\n        devtools.mount(devToolRef.value)\n      }\n    })\n\n    onUnmounted(() => {\n      devtools.unmount()\n    })\n\n    return () => h('div', { ref: devToolRef })\n  },\n})\n"],"names":["TanStackRouterDevtools","name","props","setup","devToolRef","ref","hookRouter","useRouter","warn","activeRouter","router","activeRouterState","useRouterState","devtools","TanStackRouterDevtoolsCore","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","shadowDOMTarget","routerState","value","watch","setRouter","setRouterState","setOptions","onMounted","mount","onUnmounted","unmount","h"],"mappings":";;;AA2CO,MAAMA,yDAAyD;AAAA,EACpEC,MAAM;AAAA,EACNC,OAAO,CACL,iBACA,cACA,oBACA,qBACA,YACA,oBACA,UACA,iBAAiB;AAAA,EAEnBC,MAAMD,OAAsC;AAC1C,UAAME,aAAaC,IAA2B,IAAI;AAElD,UAAMC,aAAaC,UAAU;AAAA,MAAEC,MAAM;AAAA,IAAM,CAAC;AAC5C,UAAMC,eAAeP,MAAMQ,UAAUJ;AAErC,UAAMK,oBAAoBC,eAAe;AAAA,MAAEF,QAAQD;AAAAA,IAAa,CAAC;AAEjE,UAAMI,WAAW,IAAIC,2BAA2B;AAAA,MAC9CC,eAAeb,MAAMa;AAAAA,MACrBC,YAAYd,MAAMc;AAAAA,MAClBC,kBAAkBf,MAAMe;AAAAA,MACxBC,mBAAmBhB,MAAMgB;AAAAA,MACzBC,UAAUjB,MAAMiB;AAAAA,MAChBC,kBAAkBlB,MAAMkB;AAAAA,MACxBC,iBAAiBnB,MAAMmB;AAAAA,MACvBX,QAAQD;AAAAA,MACRa,aAAaX,kBAAkBY;AAAAA,IACjC,CAAC;AAGDC,UACE,MAAMf,cACLC,YAAW;AACVG,eAASY,UAAUf,MAAM;AAAA,IAC3B,CACF;AAGAc,UAAMb,mBAAoBW,iBAAgB;AACxCT,eAASa,eAAeJ,WAAW;AAAA,IACrC,CAAC;AAGDE,UACE,MAAM,CACJtB,MAAMa,eACNb,MAAMc,YACNd,MAAMe,kBACNf,MAAMgB,mBACNhB,MAAMiB,UACNjB,MAAMkB,kBACNlB,MAAMmB,eAAe,GAEvB,MAAM;AACJR,eAASc,WAAW;AAAA,QAClBZ,eAAeb,MAAMa;AAAAA,QACrBC,YAAYd,MAAMc;AAAAA,QAClBC,kBAAkBf,MAAMe;AAAAA,QACxBC,mBAAmBhB,MAAMgB;AAAAA,QACzBC,UAAUjB,MAAMiB;AAAAA,QAChBC,kBAAkBlB,MAAMkB;AAAAA,QACxBC,iBAAiBnB,MAAMmB;AAAAA,MACzB,CAAC;AAAA,IACH,CACF;AAEAO,cAAU,MAAM;AACd,UAAIxB,WAAWmB,OAAO;AACpBV,iBAASgB,MAAMzB,WAAWmB,KAAK;AAAA,MACjC;AAAA,IACF,CAAC;AAEDO,gBAAY,MAAM;AAChBjB,eAASkB,QAAO;AAAA,IAClB,CAAC;AAED,WAAO,MAAMC,EAAE,OAAO;AAAA,MAAE3B,KAAKD;AAAAA,IAAW,CAAC;AAAA,EAC3C;AACF,CAAC;"}

package/dist/esm/TanStackRouterDevtoolsPanel.d.ts

@@ -0,0 +1,74 @@
+import { AnyRouter } from '@tanstack/vue-router';
+export interface TanStackRouterDevtoolsPanelOptions {
+    /**
+     * The standard style object used to style a component with inline styles
+     */
+    style?: any;
+    /**
+     * The standard class property used to style a component with classes
+     */
+    className?: string;
+    /**
+     * A boolean variable indicating whether the panel is open or closed
+     */
+    isOpen?: boolean;
+    /**
+     * A function that toggles the open and close state of the panel
+     */
+    setIsOpen?: (isOpen: boolean) => void;
+    /**
+     * Handles the opening and closing the devtools panel
+     */
+    handleDragStart?: (e: any) => void;
+    /**
+     * The router instance to use for the devtools.
+     */
+    router?: AnyRouter;
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+}
+export declare const TanStackRouterDevtoolsPanel: import('vue').DefineComponent<{
+    style?: any;
+    className?: string
+    /**
+     * A boolean variable indicating whether the panel is open or closed
+     */
+     | undefined;
+    isOpen?: boolean
+    /**
+     * A function that toggles the open and close state of the panel
+     */
+     | undefined;
+    setIsOpen?: ((isOpen: boolean) => void) | undefined;
+    handleDragStart?: ((e: any) => void) | undefined;
+    router?: AnyRouter
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+     | undefined;
+    shadowDOMTarget?: ShadowRoot | undefined;
+}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    style?: any;
+    className?: string
+    /**
+     * A boolean variable indicating whether the panel is open or closed
+     */
+     | undefined;
+    isOpen?: boolean
+    /**
+     * A function that toggles the open and close state of the panel
+     */
+     | undefined;
+    setIsOpen?: ((isOpen: boolean) => void) | undefined;
+    handleDragStart?: ((e: any) => void) | undefined;
+    router?: AnyRouter
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+     | undefined;
+    shadowDOMTarget?: ShadowRoot | undefined;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/esm/TanStackRouterDevtoolsPanel.js

@@ -0,0 +1,55 @@
+import { TanStackRouterDevtoolsPanelCore } from "@tanstack/router-devtools-core";
+import { defineComponent, ref, watch, onMounted, onUnmounted, h } from "vue";
+import { useRouter, useRouterState } from "@tanstack/vue-router";
+const TanStackRouterDevtoolsPanel = /* @__PURE__ */ defineComponent({
+  name: "TanStackRouterDevtoolsPanel",
+  props: ["style", "className", "isOpen", "setIsOpen", "handleDragStart", "router", "shadowDOMTarget"],
+  setup(props) {
+    const devToolRef = ref(null);
+    const hookRouter = useRouter({
+      warn: false
+    });
+    const activeRouter = props.router ?? hookRouter;
+    const activeRouterState = useRouterState({
+      router: activeRouter
+    });
+    const devtools = new TanStackRouterDevtoolsPanelCore({
+      style: props.style,
+      className: props.className,
+      isOpen: props.isOpen,
+      setIsOpen: props.setIsOpen,
+      handleDragStart: props.handleDragStart,
+      shadowDOMTarget: props.shadowDOMTarget,
+      router: activeRouter,
+      routerState: activeRouterState.value
+    });
+    watch(() => activeRouter, (router) => {
+      devtools.setRouter(router);
+    });
+    watch(activeRouterState, (routerState) => {
+      devtools.setRouterState(routerState);
+    });
+    watch(() => [props.className, props.style, props.shadowDOMTarget], () => {
+      devtools.setOptions({
+        className: props.className,
+        style: props.style,
+        shadowDOMTarget: props.shadowDOMTarget
+      });
+    });
+    onMounted(() => {
+      if (devToolRef.value) {
+        devtools.mount(devToolRef.value);
+      }
+    });
+    onUnmounted(() => {
+      devtools.unmount();
+    });
+    return () => h("div", {
+      ref: devToolRef
+    });
+  }
+});
+export {
+  TanStackRouterDevtoolsPanel
+};
+//# sourceMappingURL=TanStackRouterDevtoolsPanel.js.map

package/dist/esm/TanStackRouterDevtoolsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TanStackRouterDevtoolsPanel.js","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useRouter, useRouterState } from '@tanstack/vue-router'\nimport type { AnyRouter } from '@tanstack/vue-router'\n\nexport interface TanStackRouterDevtoolsPanelOptions {\n  /**\n   * The standard style object used to style a component with inline styles\n   */\n  style?: any\n  /**\n   * The standard class property used to style a component with classes\n   */\n  className?: string\n  /**\n   * A boolean variable indicating whether the panel is open or closed\n   */\n  isOpen?: boolean\n  /**\n   * A function that toggles the open and close state of the panel\n   */\n  setIsOpen?: (isOpen: boolean) => void\n  /**\n   * Handles the opening and closing the devtools panel\n   */\n  handleDragStart?: (e: any) => void\n  /**\n   * The router instance to use for the devtools.\n   */\n  router?: AnyRouter\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtoolsPanel = /* #__PURE__ */ defineComponent({\n  name: 'TanStackRouterDevtoolsPanel',\n  props: [\n    'style',\n    'className',\n    'isOpen',\n    'setIsOpen',\n    'handleDragStart',\n    'router',\n    'shadowDOMTarget',\n  ] as unknown as undefined,\n  setup(props: TanStackRouterDevtoolsPanelOptions) {\n    const devToolRef = ref<HTMLDivElement | null>(null)\n\n    const hookRouter = useRouter({ warn: false })\n    const activeRouter = props.router ?? hookRouter\n\n    const activeRouterState = useRouterState({ router: activeRouter })\n\n    const devtools = new TanStackRouterDevtoolsPanelCore({\n      style: props.style,\n      className: props.className,\n      isOpen: props.isOpen,\n      setIsOpen: props.setIsOpen,\n      handleDragStart: props.handleDragStart,\n      shadowDOMTarget: props.shadowDOMTarget,\n      router: activeRouter,\n      routerState: activeRouterState.value,\n    })\n\n    // Update devtools when router changes\n    watch(\n      () => activeRouter,\n      (router) => {\n        devtools.setRouter(router)\n      },\n    )\n\n    // Update devtools when router state changes\n    watch(activeRouterState, (routerState) => {\n      devtools.setRouterState(routerState)\n    })\n\n    // Update devtools when options change\n    watch(\n      () => [props.className, props.style, props.shadowDOMTarget],\n      () => {\n        devtools.setOptions({\n          className: props.className,\n          style: props.style,\n          shadowDOMTarget: props.shadowDOMTarget,\n        })\n      },\n    )\n\n    onMounted(() => {\n      if (devToolRef.value) {\n        devtools.mount(devToolRef.value)\n      }\n    })\n\n    onUnmounted(() => {\n      devtools.unmount()\n    })\n\n    return () => h('div', { ref: devToolRef })\n  },\n})\n"],"names":["TanStackRouterDevtoolsPanel","name","props","setup","devToolRef","ref","hookRouter","useRouter","warn","activeRouter","router","activeRouterState","useRouterState","devtools","TanStackRouterDevtoolsPanelCore","style","className","isOpen","setIsOpen","handleDragStart","shadowDOMTarget","routerState","value","watch","setRouter","setRouterState","setOptions","onMounted","mount","onUnmounted","unmount","h"],"mappings":";;;AAoCO,MAAMA,8DAA8D;AAAA,EACzEC,MAAM;AAAA,EACNC,OAAO,CACL,SACA,aACA,UACA,aACA,mBACA,UACA,iBAAiB;AAAA,EAEnBC,MAAMD,OAA2C;AAC/C,UAAME,aAAaC,IAA2B,IAAI;AAElD,UAAMC,aAAaC,UAAU;AAAA,MAAEC,MAAM;AAAA,IAAM,CAAC;AAC5C,UAAMC,eAAeP,MAAMQ,UAAUJ;AAErC,UAAMK,oBAAoBC,eAAe;AAAA,MAAEF,QAAQD;AAAAA,IAAa,CAAC;AAEjE,UAAMI,WAAW,IAAIC,gCAAgC;AAAA,MACnDC,OAAOb,MAAMa;AAAAA,MACbC,WAAWd,MAAMc;AAAAA,MACjBC,QAAQf,MAAMe;AAAAA,MACdC,WAAWhB,MAAMgB;AAAAA,MACjBC,iBAAiBjB,MAAMiB;AAAAA,MACvBC,iBAAiBlB,MAAMkB;AAAAA,MACvBV,QAAQD;AAAAA,MACRY,aAAaV,kBAAkBW;AAAAA,IACjC,CAAC;AAGDC,UACE,MAAMd,cACLC,YAAW;AACVG,eAASW,UAAUd,MAAM;AAAA,IAC3B,CACF;AAGAa,UAAMZ,mBAAoBU,iBAAgB;AACxCR,eAASY,eAAeJ,WAAW;AAAA,IACrC,CAAC;AAGDE,UACE,MAAM,CAACrB,MAAMc,WAAWd,MAAMa,OAAOb,MAAMkB,eAAe,GAC1D,MAAM;AACJP,eAASa,WAAW;AAAA,QAClBV,WAAWd,MAAMc;AAAAA,QACjBD,OAAOb,MAAMa;AAAAA,QACbK,iBAAiBlB,MAAMkB;AAAAA,MACzB,CAAC;AAAA,IACH,CACF;AAEAO,cAAU,MAAM;AACd,UAAIvB,WAAWkB,OAAO;AACpBT,iBAASe,MAAMxB,WAAWkB,KAAK;AAAA,MACjC;AAAA,IACF,CAAC;AAEDO,gBAAY,MAAM;AAChBhB,eAASiB,QAAO;AAAA,IAClB,CAAC;AAED,WAAO,MAAMC,EAAE,OAAO;AAAA,MAAE1B,KAAKD;AAAAA,IAAW,CAAC;AAAA,EAC3C;AACF,CAAC;"}

package/dist/esm/index.d.ts

@@ -0,0 +1,82 @@
+export type { TanStackRouterDevtoolsOptions } from './TanStackRouterDevtools.js';
+export type { TanStackRouterDevtoolsPanelOptions } from './TanStackRouterDevtoolsPanel.js';
+export declare const TanStackRouterDevtools: import('vue').DefineComponent<{
+    initialIsOpen?: boolean | undefined;
+    panelProps?: Record<string, any> | undefined;
+    closeButtonProps?: Record<string, any> | undefined;
+    toggleButtonProps?: Record<string, any> | undefined;
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
+    containerElement?: string | any;
+    router?: import('@tanstack/router-core').AnyRouter | undefined;
+    shadowDOMTarget?: ShadowRoot | undefined;
+}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    initialIsOpen?: boolean | undefined;
+    panelProps?: Record<string, any> | undefined;
+    closeButtonProps?: Record<string, any> | undefined;
+    toggleButtonProps?: Record<string, any> | undefined;
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
+    containerElement?: string | any;
+    router?: import('@tanstack/router-core').AnyRouter | undefined;
+    shadowDOMTarget?: ShadowRoot | undefined;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | import('vue').DefineComponent<{}, () => null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const TanStackRouterDevtoolsInProd: import('vue').DefineComponent<{
+    initialIsOpen?: boolean | undefined;
+    panelProps?: Record<string, any> | undefined;
+    closeButtonProps?: Record<string, any> | undefined;
+    toggleButtonProps?: Record<string, any> | undefined;
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
+    containerElement?: string | any;
+    router?: import('@tanstack/router-core').AnyRouter | undefined;
+    shadowDOMTarget?: ShadowRoot | undefined;
+}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    initialIsOpen?: boolean | undefined;
+    panelProps?: Record<string, any> | undefined;
+    closeButtonProps?: Record<string, any> | undefined;
+    toggleButtonProps?: Record<string, any> | undefined;
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
+    containerElement?: string | any;
+    router?: import('@tanstack/router-core').AnyRouter | undefined;
+    shadowDOMTarget?: ShadowRoot | undefined;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const TanStackRouterDevtoolsPanel: import('vue').DefineComponent<{
+    style?: any;
+    className?: string | undefined;
+    isOpen?: boolean | undefined;
+    setIsOpen?: ((isOpen: boolean) => void) | undefined;
+    handleDragStart?: ((e: any) => void) | undefined;
+    router?: import('@tanstack/router-core').AnyRouter | undefined;
+    shadowDOMTarget?: ShadowRoot | undefined;
+}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    style?: any;
+    className?: string | undefined;
+    isOpen?: boolean | undefined;
+    setIsOpen?: ((isOpen: boolean) => void) | undefined;
+    handleDragStart?: ((e: any) => void) | undefined;
+    router?: import('@tanstack/router-core').AnyRouter | undefined;
+    shadowDOMTarget?: ShadowRoot | undefined;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | import('vue').DefineComponent<{}, () => null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const TanStackRouterDevtoolsPanelInProd: import('vue').DefineComponent<{
+    style?: any;
+    className?: string | undefined;
+    isOpen?: boolean | undefined;
+    setIsOpen?: ((isOpen: boolean) => void) | undefined;
+    handleDragStart?: ((e: any) => void) | undefined;
+    router?: import('@tanstack/router-core').AnyRouter | undefined;
+    shadowDOMTarget?: ShadowRoot | undefined;
+}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    style?: any;
+    className?: string | undefined;
+    isOpen?: boolean | undefined;
+    setIsOpen?: ((isOpen: boolean) => void) | undefined;
+    handleDragStart?: ((e: any) => void) | undefined;
+    router?: import('@tanstack/router-core').AnyRouter | undefined;
+    shadowDOMTarget?: ShadowRoot | undefined;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/esm/index.js

@@ -0,0 +1,20 @@
+import { defineComponent } from "vue";
+import { TanStackRouterDevtools as TanStackRouterDevtools$1 } from "./TanStackRouterDevtools.js";
+import { TanStackRouterDevtoolsPanel as TanStackRouterDevtoolsPanel$1 } from "./TanStackRouterDevtoolsPanel.js";
+const NullComponent = /* @__PURE__ */ defineComponent({
+  name: "NullTanStackRouterDevtools",
+  setup() {
+    return () => null;
+  }
+});
+const TanStackRouterDevtools = process.env.NODE_ENV !== "development" ? NullComponent : TanStackRouterDevtools$1;
+const TanStackRouterDevtoolsInProd = TanStackRouterDevtools$1;
+const TanStackRouterDevtoolsPanel = process.env.NODE_ENV !== "development" ? NullComponent : TanStackRouterDevtoolsPanel$1;
+const TanStackRouterDevtoolsPanelInProd = TanStackRouterDevtoolsPanel$1;
+export {
+  TanStackRouterDevtools,
+  TanStackRouterDevtoolsInProd,
+  TanStackRouterDevtoolsPanel,
+  TanStackRouterDevtoolsPanelInProd
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/index.tsx"],"sourcesContent":["import { defineComponent } from 'vue'\nimport { TanStackRouterDevtools as DevToolsComponent } from './TanStackRouterDevtools'\nimport { TanStackRouterDevtoolsPanel as DevToolsPanelComponent } from './TanStackRouterDevtoolsPanel'\n\n// Re-export types\nexport type { TanStackRouterDevtoolsOptions } from './TanStackRouterDevtools'\nexport type { TanStackRouterDevtoolsPanelOptions } from './TanStackRouterDevtoolsPanel'\n\n// Create a null component for production\nconst NullComponent = /* #__PURE__ */ defineComponent({\n  name: 'NullTanStackRouterDevtools',\n  setup() {\n    return () => null\n  },\n})\n\nexport const TanStackRouterDevtools =\n  process.env.NODE_ENV !== 'development' ? NullComponent : DevToolsComponent\n\nexport const TanStackRouterDevtoolsInProd = DevToolsComponent\n\nexport const TanStackRouterDevtoolsPanel =\n  process.env.NODE_ENV !== 'development'\n    ? NullComponent\n    : DevToolsPanelComponent\n\nexport const TanStackRouterDevtoolsPanelInProd = DevToolsPanelComponent\n"],"names":["NullComponent","defineComponent","name","setup","TanStackRouterDevtools","process","env","NODE_ENV","DevToolsComponent","TanStackRouterDevtoolsInProd","TanStackRouterDevtoolsPanel","DevToolsPanelComponent","TanStackRouterDevtoolsPanelInProd"],"mappings":";;;AASA,MAAMA,gBAAgCC,gCAAgB;AAAA,EACpDC,MAAM;AAAA,EACNC,QAAQ;AACN,WAAO,MAAM;AAAA,EACf;AACF,CAAC;AAEM,MAAMC,yBACXC,QAAQC,IAAIC,aAAa,gBAAgBP,gBAAgBQ;AAEpD,MAAMC,+BAA+BD;AAErC,MAAME,8BACXL,QAAQC,IAAIC,aAAa,gBACrBP,gBACAW;AAEC,MAAMC,oCAAoCD;"}

package/package.json

@@ -1,10 +1,77 @@
 {
   "name": "@tanstack/vue-router-devtools",
-  "version": "0.0.1",
-  "description": "OIDC trusted publishing setup package for @tanstack/vue-router-devtools",
+  "version": "1.140.0",
+  "description": "Modern and scalable routing for Vue applications",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/router.git",
+    "directory": "packages/vue-router-devtools"
+  },
+  "homepage": "https://tanstack.com/router",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
   "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
-}
+    "vue",
+    "location",
+    "router",
+    "routing",
+    "async",
+    "async router",
+    "typescript"
+  ],
+  "type": "module",
+  "types": "./dist/esm/index.d.ts",
+  "module": "./dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=12"
+  },
+  "dependencies": {
+    "vite": "^7.1.7",
+    "@tanstack/router-devtools-core": "1.140.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "vue": "^3.5.13"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.13",
+    "@tanstack/router-core": "^1.140.0",
+    "@tanstack/vue-router": "^1.140.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/router-core": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "clean": "rimraf ./dist && rimraf ./coverage",
+    "test:eslint": "eslint ./src",
+    "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
+    "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js",
+    "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js",
+    "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js",
+    "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js",
+    "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js",
+    "test:types:ts59": "tsc",
+    "test:build": "publint --strict && attw --ignore-rules no-resolution --pack .",
+    "build": "vite build"
+  }
+}

package/src/TanStackRouterDevtools.tsx

@@ -0,0 +1,125 @@
+import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'
+import { defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRouter, useRouterState } from '@tanstack/vue-router'
+import type { AnyRouter } from '@tanstack/vue-router'
+
+export interface TanStackRouterDevtoolsOptions {
+  /**
+   * Set this true if you want the dev tools to default to being open
+   */
+  initialIsOpen?: boolean
+  /**
+   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
+   */
+  panelProps?: Record<string, any>
+  /**
+   * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+   */
+  closeButtonProps?: Record<string, any>
+  /**
+   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+   */
+  toggleButtonProps?: Record<string, any>
+  /**
+   * The position of the TanStack Router logo to open and close the devtools panel.
+   * Defaults to 'bottom-left'.
+   */
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  /**
+   * Use this to render the devtools inside a different type of container element for a11y purposes.
+   * Any string which corresponds to a valid intrinsic JSX element is allowed.
+   * Defaults to 'footer'.
+   */
+  containerElement?: string | any
+  /**
+   * The router instance to use for the devtools.
+   */
+  router?: AnyRouter
+  /**
+   * Use this to attach the devtool's styles to specific element in the DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+}
+
+export const TanStackRouterDevtools = /* #__PURE__ */ defineComponent({
+  name: 'TanStackRouterDevtools',
+  props: [
+    'initialIsOpen',
+    'panelProps',
+    'closeButtonProps',
+    'toggleButtonProps',
+    'position',
+    'containerElement',
+    'router',
+    'shadowDOMTarget',
+  ] as unknown as undefined,
+  setup(props: TanStackRouterDevtoolsOptions) {
+    const devToolRef = ref<HTMLDivElement | null>(null)
+
+    const hookRouter = useRouter({ warn: false })
+    const activeRouter = props.router ?? hookRouter
+
+    const activeRouterState = useRouterState({ router: activeRouter })
+
+    const devtools = new TanStackRouterDevtoolsCore({
+      initialIsOpen: props.initialIsOpen,
+      panelProps: props.panelProps,
+      closeButtonProps: props.closeButtonProps,
+      toggleButtonProps: props.toggleButtonProps,
+      position: props.position,
+      containerElement: props.containerElement,
+      shadowDOMTarget: props.shadowDOMTarget,
+      router: activeRouter,
+      routerState: activeRouterState.value,
+    })
+
+    // Update devtools when router changes
+    watch(
+      () => activeRouter,
+      (router) => {
+        devtools.setRouter(router)
+      },
+    )
+
+    // Update devtools when router state changes
+    watch(activeRouterState, (routerState) => {
+      devtools.setRouterState(routerState)
+    })
+
+    // Update devtools when options change
+    watch(
+      () => [
+        props.initialIsOpen,
+        props.panelProps,
+        props.closeButtonProps,
+        props.toggleButtonProps,
+        props.position,
+        props.containerElement,
+        props.shadowDOMTarget,
+      ],
+      () => {
+        devtools.setOptions({
+          initialIsOpen: props.initialIsOpen,
+          panelProps: props.panelProps,
+          closeButtonProps: props.closeButtonProps,
+          toggleButtonProps: props.toggleButtonProps,
+          position: props.position,
+          containerElement: props.containerElement,
+          shadowDOMTarget: props.shadowDOMTarget,
+        })
+      },
+    )
+
+    onMounted(() => {
+      if (devToolRef.value) {
+        devtools.mount(devToolRef.value)
+      }
+    })
+
+    onUnmounted(() => {
+      devtools.unmount()
+    })
+
+    return () => h('div', { ref: devToolRef })
+  },
+})

package/src/TanStackRouterDevtoolsPanel.tsx

@@ -0,0 +1,104 @@
+import { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'
+import { defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRouter, useRouterState } from '@tanstack/vue-router'
+import type { AnyRouter } from '@tanstack/vue-router'
+
+export interface TanStackRouterDevtoolsPanelOptions {
+  /**
+   * The standard style object used to style a component with inline styles
+   */
+  style?: any
+  /**
+   * The standard class property used to style a component with classes
+   */
+  className?: string
+  /**
+   * A boolean variable indicating whether the panel is open or closed
+   */
+  isOpen?: boolean
+  /**
+   * A function that toggles the open and close state of the panel
+   */
+  setIsOpen?: (isOpen: boolean) => void
+  /**
+   * Handles the opening and closing the devtools panel
+   */
+  handleDragStart?: (e: any) => void
+  /**
+   * The router instance to use for the devtools.
+   */
+  router?: AnyRouter
+  /**
+   * Use this to attach the devtool's styles to specific element in the DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+}
+
+export const TanStackRouterDevtoolsPanel = /* #__PURE__ */ defineComponent({
+  name: 'TanStackRouterDevtoolsPanel',
+  props: [
+    'style',
+    'className',
+    'isOpen',
+    'setIsOpen',
+    'handleDragStart',
+    'router',
+    'shadowDOMTarget',
+  ] as unknown as undefined,
+  setup(props: TanStackRouterDevtoolsPanelOptions) {
+    const devToolRef = ref<HTMLDivElement | null>(null)
+
+    const hookRouter = useRouter({ warn: false })
+    const activeRouter = props.router ?? hookRouter
+
+    const activeRouterState = useRouterState({ router: activeRouter })
+
+    const devtools = new TanStackRouterDevtoolsPanelCore({
+      style: props.style,
+      className: props.className,
+      isOpen: props.isOpen,
+      setIsOpen: props.setIsOpen,
+      handleDragStart: props.handleDragStart,
+      shadowDOMTarget: props.shadowDOMTarget,
+      router: activeRouter,
+      routerState: activeRouterState.value,
+    })
+
+    // Update devtools when router changes
+    watch(
+      () => activeRouter,
+      (router) => {
+        devtools.setRouter(router)
+      },
+    )
+
+    // Update devtools when router state changes
+    watch(activeRouterState, (routerState) => {
+      devtools.setRouterState(routerState)
+    })
+
+    // Update devtools when options change
+    watch(
+      () => [props.className, props.style, props.shadowDOMTarget],
+      () => {
+        devtools.setOptions({
+          className: props.className,
+          style: props.style,
+          shadowDOMTarget: props.shadowDOMTarget,
+        })
+      },
+    )
+
+    onMounted(() => {
+      if (devToolRef.value) {
+        devtools.mount(devToolRef.value)
+      }
+    })
+
+    onUnmounted(() => {
+      devtools.unmount()
+    })
+
+    return () => h('div', { ref: devToolRef })
+  },
+})

package/src/index.tsx

@@ -0,0 +1,27 @@
+import { defineComponent } from 'vue'
+import { TanStackRouterDevtools as DevToolsComponent } from './TanStackRouterDevtools'
+import { TanStackRouterDevtoolsPanel as DevToolsPanelComponent } from './TanStackRouterDevtoolsPanel'
+
+// Re-export types
+export type { TanStackRouterDevtoolsOptions } from './TanStackRouterDevtools'
+export type { TanStackRouterDevtoolsPanelOptions } from './TanStackRouterDevtoolsPanel'
+
+// Create a null component for production
+const NullComponent = /* #__PURE__ */ defineComponent({
+  name: 'NullTanStackRouterDevtools',
+  setup() {
+    return () => null
+  },
+})
+
+export const TanStackRouterDevtools =
+  process.env.NODE_ENV !== 'development' ? NullComponent : DevToolsComponent
+
+export const TanStackRouterDevtoolsInProd = DevToolsComponent
+
+export const TanStackRouterDevtoolsPanel =
+  process.env.NODE_ENV !== 'development'
+    ? NullComponent
+    : DevToolsPanelComponent
+
+export const TanStackRouterDevtoolsPanelInProd = DevToolsPanelComponent