@tanstack/vue-router-devtools 1.166.8 → 1.166.9

package/dist/esm/TanStackRouterDevtools.js

@@ -1,64 +1,74 @@
+import { defineComponent, h, onMounted, onUnmounted, ref, watch } from "vue";
 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);
-    let isMounted = false;
-    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);
-        isMounted = true;
-      }
-    });
-    onUnmounted(() => {
-      if (isMounted) {
-        devtools.unmount();
-      }
-    });
-    return () => h("div", {
-      ref: devToolRef
-    });
-  }
+//#region src/TanStackRouterDevtools.tsx
+var TanStackRouterDevtools = /* @__PURE__ */ defineComponent({
+	name: "TanStackRouterDevtools",
+	props: [
+		"initialIsOpen",
+		"panelProps",
+		"closeButtonProps",
+		"toggleButtonProps",
+		"position",
+		"containerElement",
+		"router",
+		"shadowDOMTarget"
+	],
+	setup(props) {
+		const devToolRef = ref(null);
+		let isMounted = false;
+		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);
+				isMounted = true;
+			}
+		});
+		onUnmounted(() => {
+			if (isMounted) devtools.unmount();
+		});
+		return () => h("div", { ref: devToolRef });
+	}
 });
-export {
-  TanStackRouterDevtools
-};
-//# sourceMappingURL=TanStackRouterDevtools.js.map
+//#endregion
+export { TanStackRouterDevtools };
+
+//# sourceMappingURL=TanStackRouterDevtools.js.map

package/dist/esm/TanStackRouterDevtools.js.map

@@ -1 +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    let isMounted = false\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        isMounted = true\n      }\n    })\n\n    onUnmounted(() => {\n      if (isMounted) {\n        devtools.unmount()\n      }\n    })\n\n    return () => h('div', { ref: devToolRef })\n  },\n})\n"],"names":["TanStackRouterDevtools","name","props","setup","devToolRef","ref","isMounted","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;AAClD,QAAIC,YAAY;AAEhB,UAAMC,aAAaC,UAAU;AAAA,MAAEC,MAAM;AAAA,IAAM,CAAC;AAC5C,UAAMC,eAAeR,MAAMS,UAAUJ;AAErC,UAAMK,oBAAoBC,eAAe;AAAA,MAAEF,QAAQD;AAAAA,IAAa,CAAC;AAEjE,UAAMI,WAAW,IAAIC,2BAA2B;AAAA,MAC9CC,eAAed,MAAMc;AAAAA,MACrBC,YAAYf,MAAMe;AAAAA,MAClBC,kBAAkBhB,MAAMgB;AAAAA,MACxBC,mBAAmBjB,MAAMiB;AAAAA,MACzBC,UAAUlB,MAAMkB;AAAAA,MAChBC,kBAAkBnB,MAAMmB;AAAAA,MACxBC,iBAAiBpB,MAAMoB;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,CACJvB,MAAMc,eACNd,MAAMe,YACNf,MAAMgB,kBACNhB,MAAMiB,mBACNjB,MAAMkB,UACNlB,MAAMmB,kBACNnB,MAAMoB,eAAe,GAEvB,MAAM;AACJR,eAASc,WAAW;AAAA,QAClBZ,eAAed,MAAMc;AAAAA,QACrBC,YAAYf,MAAMe;AAAAA,QAClBC,kBAAkBhB,MAAMgB;AAAAA,QACxBC,mBAAmBjB,MAAMiB;AAAAA,QACzBC,UAAUlB,MAAMkB;AAAAA,QAChBC,kBAAkBnB,MAAMmB;AAAAA,QACxBC,iBAAiBpB,MAAMoB;AAAAA,MACzB,CAAC;AAAA,IACH,CACF;AAEAO,cAAU,MAAM;AACd,UAAIzB,WAAWoB,OAAO;AACpBV,iBAASgB,MAAM1B,WAAWoB,KAAK;AAC/BlB,oBAAY;AAAA,MACd;AAAA,IACF,CAAC;AAEDyB,gBAAY,MAAM;AAChB,UAAIzB,WAAW;AACbQ,iBAASkB,QAAO;AAAA,MAClB;AAAA,IACF,CAAC;AAED,WAAO,MAAMC,EAAE,OAAO;AAAA,MAAE5B,KAAKD;AAAAA,IAAW,CAAC;AAAA,EAC3C;AACF,CAAC;"}
+{"version":3,"file":"TanStackRouterDevtools.js","names":["TanStackRouterDevtoolsCore","defineComponent","h","onMounted","onUnmounted","ref","watch","useRouter","useRouterState","TanStackRouterDevtools","name","props","setup","devToolRef","isMounted","hookRouter","warn","activeRouter","router","activeRouterState","devtools","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","shadowDOMTarget","routerState","value","setRouter","setRouterState","setOptions","mount","unmount"],"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    let isMounted = false\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        isMounted = true\n      }\n    })\n\n    onUnmounted(() => {\n      if (isMounted) {\n        devtools.unmount()\n      }\n    })\n\n    return () => h('div', { ref: devToolRef })\n  },\n})\n"],"mappings":";;;;AA2CA,IAAaS,yBAAyCR,gCAAgB;CACpES,MAAM;CACNC,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACuB;CACzBC,MAAMD,OAAsC;EAC1C,MAAME,aAAaR,IAA2B,KAAK;EACnD,IAAIS,YAAY;EAEhB,MAAMC,aAAaR,UAAU,EAAES,MAAM,OAAO,CAAC;EAC7C,MAAMC,eAAeN,MAAMO,UAAUH;EAErC,MAAMI,oBAAoBX,eAAe,EAAEU,QAAQD,cAAc,CAAC;EAElE,MAAMG,WAAW,IAAIpB,2BAA2B;GAC9CqB,eAAeV,MAAMU;GACrBC,YAAYX,MAAMW;GAClBC,kBAAkBZ,MAAMY;GACxBC,mBAAmBb,MAAMa;GACzBC,UAAUd,MAAMc;GAChBC,kBAAkBf,MAAMe;GACxBC,iBAAiBhB,MAAMgB;GACvBT,QAAQD;GACRW,aAAaT,kBAAkBU;GAChC,CAAC;AAGFvB,cACQW,eACLC,WAAW;AACVE,YAASU,UAAUZ,OAAO;IAE7B;AAGDZ,QAAMa,oBAAoBS,gBAAgB;AACxCR,YAASW,eAAeH,YAAY;IACpC;AAGFtB,cACQ;GACJK,MAAMU;GACNV,MAAMW;GACNX,MAAMY;GACNZ,MAAMa;GACNb,MAAMc;GACNd,MAAMe;GACNf,MAAMgB;GACP,QACK;AACJP,YAASY,WAAW;IAClBX,eAAeV,MAAMU;IACrBC,YAAYX,MAAMW;IAClBC,kBAAkBZ,MAAMY;IACxBC,mBAAmBb,MAAMa;IACzBC,UAAUd,MAAMc;IAChBC,kBAAkBf,MAAMe;IACxBC,iBAAiBhB,MAAMgB;IACxB,CAAC;IAEL;AAEDxB,kBAAgB;AACd,OAAIU,WAAWgB,OAAO;AACpBT,aAASa,MAAMpB,WAAWgB,MAAM;AAChCf,gBAAY;;IAEd;AAEFV,oBAAkB;AAChB,OAAIU,UACFM,UAASc,SAAS;IAEpB;AAEF,eAAahC,EAAE,OAAO,EAAEG,KAAKQ,YAAY,CAAC;;CAE7C,CAAC"}

package/dist/esm/TanStackRouterDevtoolsPanel.js

@@ -1,59 +1,64 @@
+import { defineComponent, h, onMounted, onUnmounted, ref, watch } from "vue";
 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);
-    let isMounted = false;
-    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);
-        isMounted = true;
-      }
-    });
-    onUnmounted(() => {
-      if (isMounted) {
-        devtools.unmount();
-      }
-    });
-    return () => h("div", {
-      ref: devToolRef
-    });
-  }
+//#region src/TanStackRouterDevtoolsPanel.tsx
+var TanStackRouterDevtoolsPanel = /* @__PURE__ */ defineComponent({
+	name: "TanStackRouterDevtoolsPanel",
+	props: [
+		"style",
+		"className",
+		"isOpen",
+		"setIsOpen",
+		"handleDragStart",
+		"router",
+		"shadowDOMTarget"
+	],
+	setup(props) {
+		const devToolRef = ref(null);
+		let isMounted = false;
+		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);
+				isMounted = true;
+			}
+		});
+		onUnmounted(() => {
+			if (isMounted) devtools.unmount();
+		});
+		return () => h("div", { ref: devToolRef });
+	}
 });
-export {
-  TanStackRouterDevtoolsPanel
-};
-//# sourceMappingURL=TanStackRouterDevtoolsPanel.js.map
+//#endregion
+export { TanStackRouterDevtoolsPanel };
+
+//# sourceMappingURL=TanStackRouterDevtoolsPanel.js.map

package/dist/esm/TanStackRouterDevtoolsPanel.js.map

@@ -1 +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    let isMounted = false\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        isMounted = true\n      }\n    })\n\n    onUnmounted(() => {\n      if (isMounted) {\n        devtools.unmount()\n      }\n    })\n\n    return () => h('div', { ref: devToolRef })\n  },\n})\n"],"names":["TanStackRouterDevtoolsPanel","name","props","setup","devToolRef","ref","isMounted","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;AAClD,QAAIC,YAAY;AAEhB,UAAMC,aAAaC,UAAU;AAAA,MAAEC,MAAM;AAAA,IAAM,CAAC;AAC5C,UAAMC,eAAeR,MAAMS,UAAUJ;AAErC,UAAMK,oBAAoBC,eAAe;AAAA,MAAEF,QAAQD;AAAAA,IAAa,CAAC;AAEjE,UAAMI,WAAW,IAAIC,gCAAgC;AAAA,MACnDC,OAAOd,MAAMc;AAAAA,MACbC,WAAWf,MAAMe;AAAAA,MACjBC,QAAQhB,MAAMgB;AAAAA,MACdC,WAAWjB,MAAMiB;AAAAA,MACjBC,iBAAiBlB,MAAMkB;AAAAA,MACvBC,iBAAiBnB,MAAMmB;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,CAACtB,MAAMe,WAAWf,MAAMc,OAAOd,MAAMmB,eAAe,GAC1D,MAAM;AACJP,eAASa,WAAW;AAAA,QAClBV,WAAWf,MAAMe;AAAAA,QACjBD,OAAOd,MAAMc;AAAAA,QACbK,iBAAiBnB,MAAMmB;AAAAA,MACzB,CAAC;AAAA,IACH,CACF;AAEAO,cAAU,MAAM;AACd,UAAIxB,WAAWmB,OAAO;AACpBT,iBAASe,MAAMzB,WAAWmB,KAAK;AAC/BjB,oBAAY;AAAA,MACd;AAAA,IACF,CAAC;AAEDwB,gBAAY,MAAM;AAChB,UAAIxB,WAAW;AACbQ,iBAASiB,QAAO;AAAA,MAClB;AAAA,IACF,CAAC;AAED,WAAO,MAAMC,EAAE,OAAO;AAAA,MAAE3B,KAAKD;AAAAA,IAAW,CAAC;AAAA,EAC3C;AACF,CAAC;"}
+{"version":3,"file":"TanStackRouterDevtoolsPanel.js","names":["TanStackRouterDevtoolsPanelCore","defineComponent","h","onMounted","onUnmounted","ref","watch","useRouter","useRouterState","TanStackRouterDevtoolsPanel","name","props","setup","devToolRef","isMounted","hookRouter","warn","activeRouter","router","activeRouterState","devtools","style","className","isOpen","setIsOpen","handleDragStart","shadowDOMTarget","routerState","value","setRouter","setRouterState","setOptions","mount","unmount"],"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    let isMounted = false\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        isMounted = true\n      }\n    })\n\n    onUnmounted(() => {\n      if (isMounted) {\n        devtools.unmount()\n      }\n    })\n\n    return () => h('div', { ref: devToolRef })\n  },\n})\n"],"mappings":";;;;AAoCA,IAAaS,8BAA8CR,gCAAgB;CACzES,MAAM;CACNC,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACuB;CACzBC,MAAMD,OAA2C;EAC/C,MAAME,aAAaR,IAA2B,KAAK;EACnD,IAAIS,YAAY;EAEhB,MAAMC,aAAaR,UAAU,EAAES,MAAM,OAAO,CAAC;EAC7C,MAAMC,eAAeN,MAAMO,UAAUH;EAErC,MAAMI,oBAAoBX,eAAe,EAAEU,QAAQD,cAAc,CAAC;EAElE,MAAMG,WAAW,IAAIpB,gCAAgC;GACnDqB,OAAOV,MAAMU;GACbC,WAAWX,MAAMW;GACjBC,QAAQZ,MAAMY;GACdC,WAAWb,MAAMa;GACjBC,iBAAiBd,MAAMc;GACvBC,iBAAiBf,MAAMe;GACvBR,QAAQD;GACRU,aAAaR,kBAAkBS;GAChC,CAAC;AAGFtB,cACQW,eACLC,WAAW;AACVE,YAASS,UAAUX,OAAO;IAE7B;AAGDZ,QAAMa,oBAAoBQ,gBAAgB;AACxCP,YAASU,eAAeH,YAAY;IACpC;AAGFrB,cACQ;GAACK,MAAMW;GAAWX,MAAMU;GAAOV,MAAMe;GAAgB,QACrD;AACJN,YAASW,WAAW;IAClBT,WAAWX,MAAMW;IACjBD,OAAOV,MAAMU;IACbK,iBAAiBf,MAAMe;IACxB,CAAC;IAEL;AAEDvB,kBAAgB;AACd,OAAIU,WAAWe,OAAO;AACpBR,aAASY,MAAMnB,WAAWe,MAAM;AAChCd,gBAAY;;IAEd;AAEFV,oBAAkB;AAChB,OAAIU,UACFM,UAASa,SAAS;IAEpB;AAEF,eAAa/B,EAAE,OAAO,EAAEG,KAAKQ,YAAY,CAAC;;CAE7C,CAAC"}

package/dist/esm/index.js

@@ -1,20 +1,18 @@
-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;
-  }
+import { defineComponent } from "vue";
+//#region src/index.tsx
+var 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
+var TanStackRouterDevtools = process.env.NODE_ENV !== "development" ? NullComponent : TanStackRouterDevtools$1;
+var TanStackRouterDevtoolsInProd = TanStackRouterDevtools$1;
+var TanStackRouterDevtoolsPanel = process.env.NODE_ENV !== "development" ? NullComponent : TanStackRouterDevtoolsPanel$1;
+var TanStackRouterDevtoolsPanelInProd = TanStackRouterDevtoolsPanel$1;
+//#endregion
+export { TanStackRouterDevtools, TanStackRouterDevtoolsInProd, TanStackRouterDevtoolsPanel, TanStackRouterDevtoolsPanelInProd };
+
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +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;"}
+{"version":3,"file":"index.js","names":["defineComponent","TanStackRouterDevtools","DevToolsComponent","TanStackRouterDevtoolsPanel","DevToolsPanelComponent","NullComponent","name","setup","process","env","NODE_ENV","TanStackRouterDevtoolsInProd","TanStackRouterDevtoolsPanelInProd"],"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"],"mappings":";;;;AASA,IAAMK,gBAAgCL,gCAAgB;CACpDM,MAAM;CACNC,QAAQ;AACN,eAAa;;CAEhB,CAAC;AAEF,IAAaN,yBAAAA,QAAAA,IAAAA,aACc,gBAAgBI,gBAAgBH;AAE3D,IAAaS,+BAA+BT;AAE5C,IAAaC,8BAAAA,QAAAA,IAAAA,aACc,gBACrBE,gBACAD;AAEN,IAAaQ,oCAAoCR"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-router-devtools",
-  "version": "1.166.8",
+  "version": "1.166.9",
   "description": "Modern and scalable routing for Vue applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "vite": "*",
-    "@tanstack/router-devtools-core": "1.166.8"
+    "@tanstack/router-devtools-core": "1.166.9"
   },
   "devDependencies": {
     "@vitejs/plugin-vue-jsx": "^4.1.2",
@@ -53,8 +53,8 @@
   },
   "peerDependencies": {
     "vue": "^3.5.13",
-    "@tanstack/vue-router": "^1.167.1",
-    "@tanstack/router-core": "^1.167.1"
+    "@tanstack/vue-router": "^1.167.2",
+    "@tanstack/router-core": "^1.167.2"
   },
   "peerDependenciesMeta": {
     "@tanstack/router-core": {