@tanstack/router-devtools-core 1.121.0-alpha.22 → 1.121.0-alpha.28

package/dist/cjs/TanStackRouterDevtoolsCore.cjs

@@ -1,60 +1,52 @@
 "use strict";
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var _router, _routerState, _position, _initialIsOpen, _shadowDOMTarget, _panelProps, _closeButtonProps, _toggleButtonProps, _containerElement, _isMounted, _Component, _dispose;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
 const context = require("./context.cjs");
 class TanStackRouterDevtoolsCore {
+  #router;
+  #routerState;
+  #position;
+  #initialIsOpen;
+  #shadowDOMTarget;
+  #panelProps;
+  #closeButtonProps;
+  #toggleButtonProps;
+  #containerElement;
+  #isMounted = false;
+  #Component;
+  #dispose;
   constructor(config) {
-    __privateAdd(this, _router);
-    __privateAdd(this, _routerState);
-    __privateAdd(this, _position);
-    __privateAdd(this, _initialIsOpen);
-    __privateAdd(this, _shadowDOMTarget);
-    __privateAdd(this, _panelProps);
-    __privateAdd(this, _closeButtonProps);
-    __privateAdd(this, _toggleButtonProps);
-    __privateAdd(this, _containerElement);
-    __privateAdd(this, _isMounted, false);
-    __privateAdd(this, _Component);
-    __privateAdd(this, _dispose);
-    __privateSet(this, _router, solidJs.createSignal(config.router));
-    __privateSet(this, _routerState, solidJs.createSignal(config.routerState));
-    __privateSet(this, _position, config.position ?? "bottom-left");
-    __privateSet(this, _initialIsOpen, config.initialIsOpen ?? false);
-    __privateSet(this, _shadowDOMTarget, config.shadowDOMTarget);
-    __privateSet(this, _panelProps, config.panelProps);
-    __privateSet(this, _closeButtonProps, config.closeButtonProps);
-    __privateSet(this, _toggleButtonProps, config.toggleButtonProps);
-    __privateSet(this, _containerElement, config.containerElement);
+    this.#router = solidJs.createSignal(config.router);
+    this.#routerState = solidJs.createSignal(config.routerState);
+    this.#position = config.position ?? "bottom-left";
+    this.#initialIsOpen = config.initialIsOpen ?? false;
+    this.#shadowDOMTarget = config.shadowDOMTarget;
+    this.#panelProps = config.panelProps;
+    this.#closeButtonProps = config.closeButtonProps;
+    this.#toggleButtonProps = config.toggleButtonProps;
+    this.#containerElement = config.containerElement;
   }
   mount(el) {
-    if (__privateGet(this, _isMounted)) {
+    if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
     }
     const dispose = web.render(() => {
-      const [router] = __privateGet(this, _router);
-      const [routerState] = __privateGet(this, _routerState);
-      const position = __privateGet(this, _position);
-      const initialIsOpen = __privateGet(this, _initialIsOpen);
-      const shadowDOMTarget = __privateGet(this, _shadowDOMTarget);
-      const panelProps = __privateGet(this, _panelProps);
-      const closeButtonProps = __privateGet(this, _closeButtonProps);
-      const toggleButtonProps = __privateGet(this, _toggleButtonProps);
-      const containerElement = __privateGet(this, _containerElement);
+      const [router] = this.#router;
+      const [routerState] = this.#routerState;
+      const position = this.#position;
+      const initialIsOpen = this.#initialIsOpen;
+      const shadowDOMTarget = this.#shadowDOMTarget;
+      const panelProps = this.#panelProps;
+      const closeButtonProps = this.#closeButtonProps;
+      const toggleButtonProps = this.#toggleButtonProps;
+      const containerElement = this.#containerElement;
       let Devtools;
-      if (__privateGet(this, _Component)) {
-        Devtools = __privateGet(this, _Component);
+      if (this.#Component) {
+        Devtools = this.#Component;
       } else {
         Devtools = solidJs.lazy(() => Promise.resolve().then(() => require("./FloatingTanStackRouterDevtools.cjs")));
-        __privateSet(this, _Component, Devtools);
+        this.#Component = Devtools;
       }
       return web.createComponent(context.ShadowDomTargetContext.Provider, {
         value: shadowDOMTarget,
@@ -73,49 +65,36 @@ class TanStackRouterDevtoolsCore {
         }
       });
     }, el);
-    __privateSet(this, _isMounted, true);
-    __privateSet(this, _dispose, dispose);
+    this.#isMounted = true;
+    this.#dispose = dispose;
   }
   unmount() {
-    var _a;
-    if (!__privateGet(this, _isMounted)) {
+    if (!this.#isMounted) {
       throw new Error("Devtools is not mounted");
     }
-    (_a = __privateGet(this, _dispose)) == null ? void 0 : _a.call(this);
-    __privateSet(this, _isMounted, false);
+    this.#dispose?.();
+    this.#isMounted = false;
   }
   setRouter(router) {
-    __privateGet(this, _router)[1](router);
+    this.#router[1](router);
   }
   setRouterState(routerState) {
-    __privateGet(this, _routerState)[1](routerState);
+    this.#routerState[1](routerState);
   }
   setOptions(options) {
     if (options.position !== void 0) {
-      __privateSet(this, _position, options.position);
+      this.#position = options.position;
     }
     if (options.initialIsOpen !== void 0) {
-      __privateSet(this, _initialIsOpen, options.initialIsOpen);
+      this.#initialIsOpen = options.initialIsOpen;
     }
     if (options.shadowDOMTarget !== void 0) {
-      __privateSet(this, _shadowDOMTarget, options.shadowDOMTarget);
+      this.#shadowDOMTarget = options.shadowDOMTarget;
     }
     if (options.containerElement !== void 0) {
-      __privateSet(this, _containerElement, options.containerElement);
+      this.#containerElement = options.containerElement;
     }
   }
 }
-_router = new WeakMap();
-_routerState = new WeakMap();
-_position = new WeakMap();
-_initialIsOpen = new WeakMap();
-_shadowDOMTarget = new WeakMap();
-_panelProps = new WeakMap();
-_closeButtonProps = new WeakMap();
-_toggleButtonProps = new WeakMap();
-_containerElement = new WeakMap();
-_isMounted = new WeakMap();
-_Component = new WeakMap();
-_dispose = new WeakMap();
 exports.TanStackRouterDevtoolsCore = TanStackRouterDevtoolsCore;
 //# sourceMappingURL=TanStackRouterDevtoolsCore.cjs.map

package/dist/cjs/TanStackRouterDevtoolsCore.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TanStackRouterDevtoolsCore.cjs","sources":["../../src/TanStackRouterDevtoolsCore.tsx"],"sourcesContent":["import { createSignal, lazy } from 'solid-js'\nimport { render } from 'solid-js/web'\nimport { ShadowDomTargetContext } from './context'\nimport type { AnyRouter } from '@tanstack/router-core'\nimport type { Signal } from 'solid-js'\n\ninterface DevtoolsOptions {\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 class, style (merge and override default style), etc.\n   */\n  panelProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: any & {\n    ref?: any\n  }\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   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router: AnyRouter\n  routerState: any\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nclass TanStackRouterDevtoolsCore {\n  #router: Signal<AnyRouter>\n  #routerState: Signal<any>\n  #position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  #initialIsOpen: boolean\n  #shadowDOMTarget?: ShadowRoot\n\n  #panelProps: any\n  #closeButtonProps: any\n  #toggleButtonProps: any\n  #containerElement?: string | any\n\n  #isMounted = false\n  #Component: any\n  #dispose?: () => void\n\n  constructor(config: DevtoolsOptions) {\n    this.#router = createSignal(config.router)\n    this.#routerState = createSignal(config.routerState)\n    this.#position = config.position ?? 'bottom-left'\n    this.#initialIsOpen = config.initialIsOpen ?? false\n    this.#shadowDOMTarget = config.shadowDOMTarget\n\n    this.#panelProps = config.panelProps\n    this.#closeButtonProps = config.closeButtonProps\n    this.#toggleButtonProps = config.toggleButtonProps\n    this.#containerElement = config.containerElement\n  }\n\n  mount<T extends HTMLElement>(el: T) {\n    if (this.#isMounted) {\n      throw new Error('Devtools is already mounted')\n    }\n\n    const dispose = render(() => {\n      const [router] = this.#router\n      const [routerState] = this.#routerState\n      const position = this.#position\n      const initialIsOpen = this.#initialIsOpen\n      const shadowDOMTarget = this.#shadowDOMTarget\n\n      const panelProps = this.#panelProps\n      const closeButtonProps = this.#closeButtonProps\n      const toggleButtonProps = this.#toggleButtonProps\n      const containerElement = this.#containerElement\n\n      let Devtools\n\n      if (this.#Component) {\n        Devtools = this.#Component\n      } else {\n        Devtools = lazy(() => import('./FloatingTanStackRouterDevtools'))\n        this.#Component = Devtools\n      }\n\n      return (\n        <ShadowDomTargetContext.Provider value={shadowDOMTarget}>\n          <Devtools\n            position={position}\n            initialIsOpen={initialIsOpen}\n            router={router}\n            routerState={routerState}\n            shadowDOMTarget={shadowDOMTarget}\n            panelProps={panelProps}\n            closeButtonProps={closeButtonProps}\n            toggleButtonProps={toggleButtonProps}\n            containerElement={containerElement}\n          />\n        </ShadowDomTargetContext.Provider>\n      )\n    }, el)\n\n    this.#isMounted = true\n    this.#dispose = dispose\n  }\n\n  unmount() {\n    if (!this.#isMounted) {\n      throw new Error('Devtools is not mounted')\n    }\n    this.#dispose?.()\n    this.#isMounted = false\n  }\n\n  setRouter(router: AnyRouter) {\n    this.#router[1](router)\n  }\n\n  setRouterState(routerState: any) {\n    this.#routerState[1](routerState)\n  }\n\n  setOptions(options: Partial<DevtoolsOptions>) {\n    if (options.position !== undefined) {\n      this.#position = options.position\n    }\n\n    if (options.initialIsOpen !== undefined) {\n      this.#initialIsOpen = options.initialIsOpen\n    }\n\n    if (options.shadowDOMTarget !== undefined) {\n      this.#shadowDOMTarget = options.shadowDOMTarget\n    }\n\n    if (options.containerElement !== undefined) {\n      this.#containerElement = options.containerElement\n    }\n  }\n}\n\nexport { TanStackRouterDevtoolsCore }\n"],"names":["TanStackRouterDevtoolsCore","constructor","config","createSignal","router","routerState","position","initialIsOpen","shadowDOMTarget","panelProps","closeButtonProps","toggleButtonProps","containerElement","mount","el","Error","dispose","render","Devtools","lazy","_$createComponent","ShadowDomTargetContext","Provider","value","children","unmount","setRouter","setRouterState","setOptions","options","undefined"],"mappings":";;;;;;;;;;;;;AAmDA,MAAMA,2BAA2B;AAAA,EAgB/BC,YAAYC,QAAyB;AAfrC;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA,mCAAa;AACb;AACA;AAGO,uBAAA,SAAUC,qBAAaD,OAAOE,MAAM;AACpC,uBAAA,cAAeD,qBAAaD,OAAOG,WAAW;AAC9C,uBAAA,WAAYH,OAAOI,YAAY;AAC/B,uBAAA,gBAAiBJ,OAAOK,iBAAiB;AAC9C,uBAAK,kBAAmBL,OAAOM;AAE/B,uBAAK,aAAcN,OAAOO;AAC1B,uBAAK,mBAAoBP,OAAOQ;AAChC,uBAAK,oBAAqBR,OAAOS;AACjC,uBAAK,mBAAoBT,OAAOU;AAAAA,EAAAA;AAAAA,EAGlCC,MAA6BC,IAAO;AAClC,QAAI,mBAAK,aAAY;AACb,YAAA,IAAIC,MAAM,6BAA6B;AAAA,IAAA;AAGzCC,UAAAA,UAAUC,IAAAA,OAAO,MAAM;AACrB,YAAA,CAACb,MAAM,IAAI,mBAAK;AAChB,YAAA,CAACC,WAAW,IAAI,mBAAK;AAC3B,YAAMC,WAAW,mBAAK;AACtB,YAAMC,gBAAgB,mBAAK;AAC3B,YAAMC,kBAAkB,mBAAK;AAE7B,YAAMC,aAAa,mBAAK;AACxB,YAAMC,mBAAmB,mBAAK;AAC9B,YAAMC,oBAAoB,mBAAK;AAC/B,YAAMC,mBAAmB,mBAAK;AAE1BM,UAAAA;AAEJ,UAAI,mBAAK,aAAY;AACnBA,mBAAW,mBAAK;AAAA,MAAA,OACX;AACLA,mBAAWC,QAAK,KAAA,MAAM,QAAO,QAAA,EAAA,KAAA,MAAA,QAAA,sCAAkC,EAAC;AAChE,2BAAK,YAAaD;AAAAA,MAAAA;AAGpBE,aAAAA,IAAAA,gBACGC,+BAAuBC,UAAQ;AAAA,QAACC,OAAOf;AAAAA,QAAe,IAAAgB,WAAA;AAAA,iBAAAJ,IAAAA,gBACpDF,UAAQ;AAAA,YACPZ;AAAAA,YACAC;AAAAA,YACAH;AAAAA,YACAC;AAAAA,YACAG;AAAAA,YACAC;AAAAA,YACAC;AAAAA,YACAC;AAAAA,YACAC;AAAAA,UAAAA,CAAkC;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,OAIvCE,EAAE;AAEL,uBAAK,YAAa;AAClB,uBAAK,UAAWE;AAAAA,EAAAA;AAAAA,EAGlBS,UAAU;;AACJ,QAAA,CAAC,mBAAK,aAAY;AACd,YAAA,IAAIV,MAAM,yBAAyB;AAAA,IAAA;AAE3C,6BAAK,cAAL;AACA,uBAAK,YAAa;AAAA,EAAA;AAAA,EAGpBW,UAAUtB,QAAmB;AACtB,uBAAA,SAAQ,CAAC,EAAEA,MAAM;AAAA,EAAA;AAAA,EAGxBuB,eAAetB,aAAkB;AAC1B,uBAAA,cAAa,CAAC,EAAEA,WAAW;AAAA,EAAA;AAAA,EAGlCuB,WAAWC,SAAmC;AACxCA,QAAAA,QAAQvB,aAAawB,QAAW;AAClC,yBAAK,WAAYD,QAAQvB;AAAAA,IAAAA;AAGvBuB,QAAAA,QAAQtB,kBAAkBuB,QAAW;AACvC,yBAAK,gBAAiBD,QAAQtB;AAAAA,IAAAA;AAG5BsB,QAAAA,QAAQrB,oBAAoBsB,QAAW;AACzC,yBAAK,kBAAmBD,QAAQrB;AAAAA,IAAAA;AAG9BqB,QAAAA,QAAQjB,qBAAqBkB,QAAW;AAC1C,yBAAK,mBAAoBD,QAAQjB;AAAAA,IAAAA;AAAAA,EACnC;AAEJ;AA5GE;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;;"}
+{"version":3,"file":"TanStackRouterDevtoolsCore.cjs","sources":["../../src/TanStackRouterDevtoolsCore.tsx"],"sourcesContent":["import { createSignal, lazy } from 'solid-js'\nimport { render } from 'solid-js/web'\nimport { ShadowDomTargetContext } from './context'\nimport type { AnyRouter } from '@tanstack/router-core'\nimport type { Signal } from 'solid-js'\n\ninterface DevtoolsOptions {\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 class, style (merge and override default style), etc.\n   */\n  panelProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: any & {\n    ref?: any\n  }\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   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router: AnyRouter\n  routerState: any\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nclass TanStackRouterDevtoolsCore {\n  #router: Signal<AnyRouter>\n  #routerState: Signal<any>\n  #position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  #initialIsOpen: boolean\n  #shadowDOMTarget?: ShadowRoot\n\n  #panelProps: any\n  #closeButtonProps: any\n  #toggleButtonProps: any\n  #containerElement?: string | any\n\n  #isMounted = false\n  #Component: any\n  #dispose?: () => void\n\n  constructor(config: DevtoolsOptions) {\n    this.#router = createSignal(config.router)\n    this.#routerState = createSignal(config.routerState)\n    this.#position = config.position ?? 'bottom-left'\n    this.#initialIsOpen = config.initialIsOpen ?? false\n    this.#shadowDOMTarget = config.shadowDOMTarget\n\n    this.#panelProps = config.panelProps\n    this.#closeButtonProps = config.closeButtonProps\n    this.#toggleButtonProps = config.toggleButtonProps\n    this.#containerElement = config.containerElement\n  }\n\n  mount<T extends HTMLElement>(el: T) {\n    if (this.#isMounted) {\n      throw new Error('Devtools is already mounted')\n    }\n\n    const dispose = render(() => {\n      const [router] = this.#router\n      const [routerState] = this.#routerState\n      const position = this.#position\n      const initialIsOpen = this.#initialIsOpen\n      const shadowDOMTarget = this.#shadowDOMTarget\n\n      const panelProps = this.#panelProps\n      const closeButtonProps = this.#closeButtonProps\n      const toggleButtonProps = this.#toggleButtonProps\n      const containerElement = this.#containerElement\n\n      let Devtools\n\n      if (this.#Component) {\n        Devtools = this.#Component\n      } else {\n        Devtools = lazy(() => import('./FloatingTanStackRouterDevtools'))\n        this.#Component = Devtools\n      }\n\n      return (\n        <ShadowDomTargetContext.Provider value={shadowDOMTarget}>\n          <Devtools\n            position={position}\n            initialIsOpen={initialIsOpen}\n            router={router}\n            routerState={routerState}\n            shadowDOMTarget={shadowDOMTarget}\n            panelProps={panelProps}\n            closeButtonProps={closeButtonProps}\n            toggleButtonProps={toggleButtonProps}\n            containerElement={containerElement}\n          />\n        </ShadowDomTargetContext.Provider>\n      )\n    }, el)\n\n    this.#isMounted = true\n    this.#dispose = dispose\n  }\n\n  unmount() {\n    if (!this.#isMounted) {\n      throw new Error('Devtools is not mounted')\n    }\n    this.#dispose?.()\n    this.#isMounted = false\n  }\n\n  setRouter(router: AnyRouter) {\n    this.#router[1](router)\n  }\n\n  setRouterState(routerState: any) {\n    this.#routerState[1](routerState)\n  }\n\n  setOptions(options: Partial<DevtoolsOptions>) {\n    if (options.position !== undefined) {\n      this.#position = options.position\n    }\n\n    if (options.initialIsOpen !== undefined) {\n      this.#initialIsOpen = options.initialIsOpen\n    }\n\n    if (options.shadowDOMTarget !== undefined) {\n      this.#shadowDOMTarget = options.shadowDOMTarget\n    }\n\n    if (options.containerElement !== undefined) {\n      this.#containerElement = options.containerElement\n    }\n  }\n}\n\nexport { TanStackRouterDevtoolsCore }\n"],"names":["TanStackRouterDevtoolsCore","constructor","config","createSignal","router","routerState","position","initialIsOpen","shadowDOMTarget","panelProps","closeButtonProps","toggleButtonProps","containerElement","mount","el","Error","dispose","render","Devtools","lazy","_$createComponent","ShadowDomTargetContext","Provider","value","children","unmount","setRouter","setRouterState","setOptions","options","undefined"],"mappings":";;;;;AAmDA,MAAMA,2BAA2B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EAEAC,YAAYC,QAAyB;AACnC,SAAK,UAAUC,qBAAaD,OAAOE,MAAM;AACzC,SAAK,eAAeD,qBAAaD,OAAOG,WAAW;AACnD,SAAK,YAAYH,OAAOI,YAAY;AACpC,SAAK,iBAAiBJ,OAAOK,iBAAiB;AAC9C,SAAK,mBAAmBL,OAAOM;AAE/B,SAAK,cAAcN,OAAOO;AAC1B,SAAK,oBAAoBP,OAAOQ;AAChC,SAAK,qBAAqBR,OAAOS;AACjC,SAAK,oBAAoBT,OAAOU;AAAAA,EAClC;AAAA,EAEAC,MAA6BC,IAAO;AAClC,QAAI,KAAK,YAAY;AACnB,YAAM,IAAIC,MAAM,6BAA6B;AAAA,IAC/C;AAEA,UAAMC,UAAUC,IAAAA,OAAO,MAAM;AAC3B,YAAM,CAACb,MAAM,IAAI,KAAK;AACtB,YAAM,CAACC,WAAW,IAAI,KAAK;AAC3B,YAAMC,WAAW,KAAK;AACtB,YAAMC,gBAAgB,KAAK;AAC3B,YAAMC,kBAAkB,KAAK;AAE7B,YAAMC,aAAa,KAAK;AACxB,YAAMC,mBAAmB,KAAK;AAC9B,YAAMC,oBAAoB,KAAK;AAC/B,YAAMC,mBAAmB,KAAK;AAE9B,UAAIM;AAEJ,UAAI,KAAK,YAAY;AACnBA,mBAAW,KAAK;AAAA,MAClB,OAAO;AACLA,mBAAWC,QAAAA,KAAK,MAAM,QAAA,QAAA,EAAA,KAAA,MAAA,QAAO,sCAAkC,EAAC;AAChE,aAAK,aAAaD;AAAAA,MACpB;AAEA,aAAAE,IAAAA,gBACGC,QAAAA,uBAAuBC,UAAQ;AAAA,QAACC,OAAOf;AAAAA,QAAe,IAAAgB,WAAA;AAAA,iBAAAJ,IAAAA,gBACpDF,UAAQ;AAAA,YACPZ;AAAAA,YACAC;AAAAA,YACAH;AAAAA,YACAC;AAAAA,YACAG;AAAAA,YACAC;AAAAA,YACAC;AAAAA,YACAC;AAAAA,YACAC;AAAAA,UAAAA,CAAkC;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAI1C,GAAGE,EAAE;AAEL,SAAK,aAAa;AAClB,SAAK,WAAWE;AAAAA,EAClB;AAAA,EAEAS,UAAU;AACR,QAAI,CAAC,KAAK,YAAY;AACpB,YAAM,IAAIV,MAAM,yBAAyB;AAAA,IAC3C;AACA,SAAK,WAAA;AACL,SAAK,aAAa;AAAA,EACpB;AAAA,EAEAW,UAAUtB,QAAmB;AAC3B,SAAK,QAAQ,CAAC,EAAEA,MAAM;AAAA,EACxB;AAAA,EAEAuB,eAAetB,aAAkB;AAC/B,SAAK,aAAa,CAAC,EAAEA,WAAW;AAAA,EAClC;AAAA,EAEAuB,WAAWC,SAAmC;AAC5C,QAAIA,QAAQvB,aAAawB,QAAW;AAClC,WAAK,YAAYD,QAAQvB;AAAAA,IAC3B;AAEA,QAAIuB,QAAQtB,kBAAkBuB,QAAW;AACvC,WAAK,iBAAiBD,QAAQtB;AAAAA,IAChC;AAEA,QAAIsB,QAAQrB,oBAAoBsB,QAAW;AACzC,WAAK,mBAAmBD,QAAQrB;AAAAA,IAClC;AAEA,QAAIqB,QAAQjB,qBAAqBkB,QAAW;AAC1C,WAAK,oBAAoBD,QAAQjB;AAAAA,IACnC;AAAA,EACF;AACF;;"}

package/dist/cjs/TanStackRouterDevtoolsPanelCore.cjs

@@ -1,51 +1,51 @@
 "use strict";
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var _router, _routerState, _shadowDOMTarget, _isMounted, _setIsOpen, _dispose, _Component;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
 const context = require("./context.cjs");
 class TanStackRouterDevtoolsPanelCore {
+  #router;
+  #routerState;
+  #style;
+  #className;
+  #shadowDOMTarget;
+  #isMounted = false;
+  #setIsOpen;
+  #dispose;
+  #Component;
   constructor(config) {
-    __privateAdd(this, _router);
-    __privateAdd(this, _routerState);
-    __privateAdd(this, _shadowDOMTarget);
-    __privateAdd(this, _isMounted, false);
-    __privateAdd(this, _setIsOpen);
-    __privateAdd(this, _dispose);
-    __privateAdd(this, _Component);
     const {
       router,
       routerState,
       shadowDOMTarget,
-      setIsOpen
+      setIsOpen,
+      style,
+      className
     } = config;
-    __privateSet(this, _router, solidJs.createSignal(router));
-    __privateSet(this, _routerState, solidJs.createSignal(routerState));
-    __privateSet(this, _shadowDOMTarget, shadowDOMTarget);
-    __privateSet(this, _setIsOpen, setIsOpen);
+    this.#router = solidJs.createSignal(router);
+    this.#routerState = solidJs.createSignal(routerState);
+    this.#style = solidJs.createSignal(style);
+    this.#className = solidJs.createSignal(className);
+    this.#shadowDOMTarget = shadowDOMTarget;
+    this.#setIsOpen = setIsOpen;
   }
   mount(el) {
-    if (__privateGet(this, _isMounted)) {
+    if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
     }
     const dispose = web.render(() => {
-      const [router] = __privateGet(this, _router);
-      const [routerState] = __privateGet(this, _routerState);
-      const shadowDOMTarget = __privateGet(this, _shadowDOMTarget);
-      const setIsOpen = __privateGet(this, _setIsOpen);
+      const [router] = this.#router;
+      const [routerState] = this.#routerState;
+      const [style] = this.#style;
+      const [className] = this.#className;
+      const shadowDOMTarget = this.#shadowDOMTarget;
+      const setIsOpen = this.#setIsOpen;
       let BaseTanStackRouterDevtoolsPanel;
-      if (__privateGet(this, _Component)) {
-        BaseTanStackRouterDevtoolsPanel = __privateGet(this, _Component);
+      if (this.#Component) {
+        BaseTanStackRouterDevtoolsPanel = this.#Component;
       } else {
         BaseTanStackRouterDevtoolsPanel = solidJs.lazy(() => Promise.resolve().then(() => require("./BaseTanStackRouterDevtoolsPanel.cjs")));
-        __privateSet(this, _Component, BaseTanStackRouterDevtoolsPanel);
+        this.#Component = BaseTanStackRouterDevtoolsPanel;
       }
       return web.createComponent(context.ShadowDomTargetContext.Provider, {
         value: shadowDOMTarget,
@@ -60,33 +60,40 @@ class TanStackRouterDevtoolsPanelCore {
                 router,
                 routerState,
                 shadowDOMTarget,
-                setIsOpen
+                setIsOpen,
+                style,
+                className
               });
             }
           });
         }
       });
     }, el);
-    __privateSet(this, _isMounted, true);
-    __privateSet(this, _dispose, dispose);
+    this.#isMounted = true;
+    this.#dispose = dispose;
   }
   unmount() {
-    var _a;
-    if (!__privateGet(this, _isMounted)) {
+    if (!this.#isMounted) {
       throw new Error("Devtools is not mounted");
     }
-    (_a = __privateGet(this, _dispose)) == null ? void 0 : _a.call(this);
-    __privateSet(this, _isMounted, false);
+    this.#dispose?.();
+    this.#isMounted = false;
   }
   setRouter(router) {
-    __privateGet(this, _router)[1](router);
+    this.#router[1](router);
   }
   setRouterState(routerState) {
-    __privateGet(this, _routerState)[1](routerState);
+    this.#routerState[1](routerState);
+  }
+  setStyle(style) {
+    this.#style[1](style);
+  }
+  setClassName(className) {
+    this.#className[1](className);
   }
   setOptions(options) {
     if (options.shadowDOMTarget !== void 0) {
-      __privateSet(this, _shadowDOMTarget, options.shadowDOMTarget);
+      this.#shadowDOMTarget = options.shadowDOMTarget;
     }
     if (options.router !== void 0) {
       this.setRouter(options.router);
@@ -94,14 +101,13 @@ class TanStackRouterDevtoolsPanelCore {
     if (options.routerState !== void 0) {
       this.setRouterState(options.routerState);
     }
+    if (options.style !== void 0) {
+      this.setStyle(options.style);
+    }
+    if (options.className !== void 0) {
+      this.setClassName(options.className);
+    }
   }
 }
-_router = new WeakMap();
-_routerState = new WeakMap();
-_shadowDOMTarget = new WeakMap();
-_isMounted = new WeakMap();
-_setIsOpen = new WeakMap();
-_dispose = new WeakMap();
-_Component = new WeakMap();
 exports.TanStackRouterDevtoolsPanelCore = TanStackRouterDevtoolsPanelCore;
 //# sourceMappingURL=TanStackRouterDevtoolsPanelCore.cjs.map

package/dist/cjs/TanStackRouterDevtoolsPanelCore.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TanStackRouterDevtoolsPanelCore.cjs","sources":["../../src/TanStackRouterDevtoolsPanelCore.tsx"],"sourcesContent":["import { render } from 'solid-js/web'\nimport { createSignal, lazy } from 'solid-js'\nimport { DevtoolsOnCloseContext, ShadowDomTargetContext } from './context'\nimport type { JSX } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/router-core'\n\ninterface TanStackRouterDevtoolsPanelCoreOptions {\n  /**\n   * The standard React style object used to style a component with inline styles\n   */\n  style?: JSX.CSSProperties\n  /**\n   * The standard React 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   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router: AnyRouter\n\n  routerState: any\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nclass TanStackRouterDevtoolsPanelCore {\n  #router: any\n  #routerState: any\n  #shadowDOMTarget?: ShadowRoot\n  #isMounted = false\n  #setIsOpen?: (isOpen: boolean) => void\n  #dispose?: () => void\n  #Component: any\n\n  constructor(config: TanStackRouterDevtoolsPanelCoreOptions) {\n    const { router, routerState, shadowDOMTarget, setIsOpen } = config\n\n    this.#router = createSignal(router)\n    this.#routerState = createSignal(routerState)\n    this.#shadowDOMTarget = shadowDOMTarget\n    this.#setIsOpen = setIsOpen\n  }\n\n  mount<T extends HTMLElement>(el: T) {\n    if (this.#isMounted) {\n      throw new Error('Devtools is already mounted')\n    }\n\n    const dispose = render(() => {\n      const [router] = this.#router\n      const [routerState] = this.#routerState\n      const shadowDOMTarget = this.#shadowDOMTarget\n      const setIsOpen = this.#setIsOpen\n\n      let BaseTanStackRouterDevtoolsPanel\n\n      if (this.#Component) {\n        BaseTanStackRouterDevtoolsPanel = this.#Component\n      } else {\n        BaseTanStackRouterDevtoolsPanel = lazy(\n          () => import('./BaseTanStackRouterDevtoolsPanel'),\n        )\n        this.#Component = BaseTanStackRouterDevtoolsPanel\n      }\n\n      return (\n        <ShadowDomTargetContext.Provider value={shadowDOMTarget}>\n          <DevtoolsOnCloseContext.Provider\n            value={{\n              onCloseClick: () => {},\n            }}\n          >\n            <BaseTanStackRouterDevtoolsPanel\n              router={router}\n              routerState={routerState}\n              shadowDOMTarget={shadowDOMTarget}\n              setIsOpen={setIsOpen}\n            />\n          </DevtoolsOnCloseContext.Provider>\n        </ShadowDomTargetContext.Provider>\n      )\n    }, el)\n\n    this.#isMounted = true\n    this.#dispose = dispose\n  }\n\n  unmount() {\n    if (!this.#isMounted) {\n      throw new Error('Devtools is not mounted')\n    }\n    this.#dispose?.()\n    this.#isMounted = false\n  }\n\n  setRouter(router: AnyRouter) {\n    this.#router[1](router)\n  }\n\n  setRouterState(routerState: any) {\n    this.#routerState[1](routerState)\n  }\n\n  setOptions(options: Partial<TanStackRouterDevtoolsPanelCoreOptions>) {\n    if (options.shadowDOMTarget !== undefined) {\n      this.#shadowDOMTarget = options.shadowDOMTarget\n    }\n    if (options.router !== undefined) {\n      this.setRouter(options.router)\n    }\n    if (options.routerState !== undefined) {\n      this.setRouterState(options.routerState)\n    }\n  }\n}\n\nexport { TanStackRouterDevtoolsPanelCore }\n"],"names":["TanStackRouterDevtoolsPanelCore","constructor","config","router","routerState","shadowDOMTarget","setIsOpen","createSignal","mount","el","Error","dispose","render","BaseTanStackRouterDevtoolsPanel","lazy","_$createComponent","ShadowDomTargetContext","Provider","value","children","DevtoolsOnCloseContext","onCloseClick","unmount","setRouter","setRouterState","setOptions","options","undefined"],"mappings":";;;;;;;;;;;;;AAuCA,MAAMA,gCAAgC;AAAA,EASpCC,YAAYC,QAAgD;AAR5D;AACA;AACA;AACA,mCAAa;AACb;AACA;AACA;AAGQ,UAAA;AAAA,MAAEC;AAAAA,MAAQC;AAAAA,MAAaC;AAAAA,MAAiBC;AAAAA,IAAAA,IAAcJ;AAEvD,uBAAA,SAAUK,qBAAaJ,MAAM;AAC7B,uBAAA,cAAeI,qBAAaH,WAAW;AAC5C,uBAAK,kBAAmBC;AACxB,uBAAK,YAAaC;AAAAA,EAAAA;AAAAA,EAGpBE,MAA6BC,IAAO;AAClC,QAAI,mBAAK,aAAY;AACb,YAAA,IAAIC,MAAM,6BAA6B;AAAA,IAAA;AAGzCC,UAAAA,UAAUC,IAAAA,OAAO,MAAM;AACrB,YAAA,CAACT,MAAM,IAAI,mBAAK;AAChB,YAAA,CAACC,WAAW,IAAI,mBAAK;AAC3B,YAAMC,kBAAkB,mBAAK;AAC7B,YAAMC,YAAY,mBAAK;AAEnBO,UAAAA;AAEJ,UAAI,mBAAK,aAAY;AACnBA,0CAAkC,mBAAK;AAAA,MAAA,OAClC;AACLA,0CAAkCC,QAChC,KAAA,MAAM,QAAO,QAAA,EAAA,KAAA,MAAA,QAAA,uCAAmC,EAClD;AACA,2BAAK,YAAaD;AAAAA,MAAAA;AAGpBE,aAAAA,IAAAA,gBACGC,+BAAuBC,UAAQ;AAAA,QAACC,OAAOb;AAAAA,QAAe,IAAAc,WAAA;AAAAJ,iBAAAA,IAAAA,gBACpDK,+BAAuBH,UAAQ;AAAA,YAC9BC,OAAO;AAAA,cACLG,cAAcA,MAAM;AAAA,cAAA;AAAA,YACtB;AAAA,YAAC,IAAAF,WAAA;AAAA,qBAAAJ,IAAAA,gBAEAF,iCAA+B;AAAA,gBAC9BV;AAAAA,gBACAC;AAAAA,gBACAC;AAAAA,gBACAC;AAAAA,cAAAA,CAAoB;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,OAK3BG,EAAE;AAEL,uBAAK,YAAa;AAClB,uBAAK,UAAWE;AAAAA,EAAAA;AAAAA,EAGlBW,UAAU;;AACJ,QAAA,CAAC,mBAAK,aAAY;AACd,YAAA,IAAIZ,MAAM,yBAAyB;AAAA,IAAA;AAE3C,6BAAK,cAAL;AACA,uBAAK,YAAa;AAAA,EAAA;AAAA,EAGpBa,UAAUpB,QAAmB;AACtB,uBAAA,SAAQ,CAAC,EAAEA,MAAM;AAAA,EAAA;AAAA,EAGxBqB,eAAepB,aAAkB;AAC1B,uBAAA,cAAa,CAAC,EAAEA,WAAW;AAAA,EAAA;AAAA,EAGlCqB,WAAWC,SAA0D;AAC/DA,QAAAA,QAAQrB,oBAAoBsB,QAAW;AACzC,yBAAK,kBAAmBD,QAAQrB;AAAAA,IAAAA;AAE9BqB,QAAAA,QAAQvB,WAAWwB,QAAW;AAC3BJ,WAAAA,UAAUG,QAAQvB,MAAM;AAAA,IAAA;AAE3BuB,QAAAA,QAAQtB,gBAAgBuB,QAAW;AAChCH,WAAAA,eAAeE,QAAQtB,WAAW;AAAA,IAAA;AAAA,EACzC;AAEJ;AAxFE;AACA;AACA;AACA;AACA;AACA;AACA;;"}
+{"version":3,"file":"TanStackRouterDevtoolsPanelCore.cjs","sources":["../../src/TanStackRouterDevtoolsPanelCore.tsx"],"sourcesContent":["import { render } from 'solid-js/web'\nimport { createSignal, lazy } from 'solid-js'\nimport { DevtoolsOnCloseContext, ShadowDomTargetContext } from './context'\nimport type { JSX } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/router-core'\n\ninterface TanStackRouterDevtoolsPanelCoreOptions {\n  /**\n   * The standard React style object used to style a component with inline styles\n   */\n  style?: JSX.CSSProperties\n  /**\n   * The standard React 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   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router: AnyRouter\n\n  routerState: any\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nclass TanStackRouterDevtoolsPanelCore {\n  #router: any\n  #routerState: any\n  #style: any\n  #className: any\n  #shadowDOMTarget?: ShadowRoot\n  #isMounted = false\n  #setIsOpen?: (isOpen: boolean) => void\n  #dispose?: () => void\n  #Component: any\n\n  constructor(config: TanStackRouterDevtoolsPanelCoreOptions) {\n    const {\n      router,\n      routerState,\n      shadowDOMTarget,\n      setIsOpen,\n      style,\n      className,\n    } = config\n\n    this.#router = createSignal(router)\n    this.#routerState = createSignal(routerState)\n    this.#style = createSignal(style)\n    this.#className = createSignal(className)\n    this.#shadowDOMTarget = shadowDOMTarget\n    this.#setIsOpen = setIsOpen\n  }\n\n  mount<T extends HTMLElement>(el: T) {\n    if (this.#isMounted) {\n      throw new Error('Devtools is already mounted')\n    }\n\n    const dispose = render(() => {\n      const [router] = this.#router\n      const [routerState] = this.#routerState\n      const [style] = this.#style\n      const [className] = this.#className\n      const shadowDOMTarget = this.#shadowDOMTarget\n      const setIsOpen = this.#setIsOpen\n\n      let BaseTanStackRouterDevtoolsPanel\n\n      if (this.#Component) {\n        BaseTanStackRouterDevtoolsPanel = this.#Component\n      } else {\n        BaseTanStackRouterDevtoolsPanel = lazy(\n          () => import('./BaseTanStackRouterDevtoolsPanel'),\n        )\n        this.#Component = BaseTanStackRouterDevtoolsPanel\n      }\n\n      return (\n        <ShadowDomTargetContext.Provider value={shadowDOMTarget}>\n          <DevtoolsOnCloseContext.Provider\n            value={{\n              onCloseClick: () => {},\n            }}\n          >\n            <BaseTanStackRouterDevtoolsPanel\n              router={router}\n              routerState={routerState}\n              shadowDOMTarget={shadowDOMTarget}\n              setIsOpen={setIsOpen}\n              style={style}\n              className={className}\n            />\n          </DevtoolsOnCloseContext.Provider>\n        </ShadowDomTargetContext.Provider>\n      )\n    }, el)\n\n    this.#isMounted = true\n    this.#dispose = dispose\n  }\n\n  unmount() {\n    if (!this.#isMounted) {\n      throw new Error('Devtools is not mounted')\n    }\n    this.#dispose?.()\n    this.#isMounted = false\n  }\n\n  setRouter(router: AnyRouter) {\n    this.#router[1](router)\n  }\n\n  setRouterState(routerState: any) {\n    this.#routerState[1](routerState)\n  }\n\n  setStyle(style: any) {\n    this.#style[1](style)\n  }\n\n  setClassName(className: any) {\n    this.#className[1](className)\n  }\n\n  setOptions(options: Partial<TanStackRouterDevtoolsPanelCoreOptions>) {\n    if (options.shadowDOMTarget !== undefined) {\n      this.#shadowDOMTarget = options.shadowDOMTarget\n    }\n    if (options.router !== undefined) {\n      this.setRouter(options.router)\n    }\n    if (options.routerState !== undefined) {\n      this.setRouterState(options.routerState)\n    }\n\n    if (options.style !== undefined) {\n      this.setStyle(options.style)\n    }\n\n    if (options.className !== undefined) {\n      this.setClassName(options.className)\n    }\n  }\n}\n\nexport { TanStackRouterDevtoolsPanelCore }\n"],"names":["TanStackRouterDevtoolsPanelCore","constructor","config","router","routerState","shadowDOMTarget","setIsOpen","style","className","createSignal","mount","el","Error","dispose","render","BaseTanStackRouterDevtoolsPanel","lazy","_$createComponent","ShadowDomTargetContext","Provider","value","children","DevtoolsOnCloseContext","onCloseClick","unmount","setRouter","setRouterState","setStyle","setClassName","setOptions","options","undefined"],"mappings":";;;;;AAuCA,MAAMA,gCAAgC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EAEAC,YAAYC,QAAgD;AAC1D,UAAM;AAAA,MACJC;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACAC;AAAAA,IAAAA,IACEN;AAEJ,SAAK,UAAUO,QAAAA,aAAaN,MAAM;AAClC,SAAK,eAAeM,QAAAA,aAAaL,WAAW;AAC5C,SAAK,SAASK,QAAAA,aAAaF,KAAK;AAChC,SAAK,aAAaE,QAAAA,aAAaD,SAAS;AACxC,SAAK,mBAAmBH;AACxB,SAAK,aAAaC;AAAAA,EACpB;AAAA,EAEAI,MAA6BC,IAAO;AAClC,QAAI,KAAK,YAAY;AACnB,YAAM,IAAIC,MAAM,6BAA6B;AAAA,IAC/C;AAEA,UAAMC,UAAUC,IAAAA,OAAO,MAAM;AAC3B,YAAM,CAACX,MAAM,IAAI,KAAK;AACtB,YAAM,CAACC,WAAW,IAAI,KAAK;AAC3B,YAAM,CAACG,KAAK,IAAI,KAAK;AACrB,YAAM,CAACC,SAAS,IAAI,KAAK;AACzB,YAAMH,kBAAkB,KAAK;AAC7B,YAAMC,YAAY,KAAK;AAEvB,UAAIS;AAEJ,UAAI,KAAK,YAAY;AACnBA,0CAAkC,KAAK;AAAA,MACzC,OAAO;AACLA,0CAAkCC,QAAAA,KAChC,MAAM,QAAA,QAAA,EAAA,KAAA,MAAA,QAAO,uCAAmC,EAClD;AACA,aAAK,aAAaD;AAAAA,MACpB;AAEA,aAAAE,IAAAA,gBACGC,QAAAA,uBAAuBC,UAAQ;AAAA,QAACC,OAAOf;AAAAA,QAAe,IAAAgB,WAAA;AAAA,iBAAAJ,IAAAA,gBACpDK,QAAAA,uBAAuBH,UAAQ;AAAA,YAC9BC,OAAO;AAAA,cACLG,cAAcA,MAAM;AAAA,cAAC;AAAA,YAAA;AAAA,YACtB,IAAAF,WAAA;AAAA,qBAAAJ,IAAAA,gBAEAF,iCAA+B;AAAA,gBAC9BZ;AAAAA,gBACAC;AAAAA,gBACAC;AAAAA,gBACAC;AAAAA,gBACAC;AAAAA,gBACAC;AAAAA,cAAAA,CAAoB;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAK9B,GAAGG,EAAE;AAEL,SAAK,aAAa;AAClB,SAAK,WAAWE;AAAAA,EAClB;AAAA,EAEAW,UAAU;AACR,QAAI,CAAC,KAAK,YAAY;AACpB,YAAM,IAAIZ,MAAM,yBAAyB;AAAA,IAC3C;AACA,SAAK,WAAA;AACL,SAAK,aAAa;AAAA,EACpB;AAAA,EAEAa,UAAUtB,QAAmB;AAC3B,SAAK,QAAQ,CAAC,EAAEA,MAAM;AAAA,EACxB;AAAA,EAEAuB,eAAetB,aAAkB;AAC/B,SAAK,aAAa,CAAC,EAAEA,WAAW;AAAA,EAClC;AAAA,EAEAuB,SAASpB,OAAY;AACnB,SAAK,OAAO,CAAC,EAAEA,KAAK;AAAA,EACtB;AAAA,EAEAqB,aAAapB,WAAgB;AAC3B,SAAK,WAAW,CAAC,EAAEA,SAAS;AAAA,EAC9B;AAAA,EAEAqB,WAAWC,SAA0D;AACnE,QAAIA,QAAQzB,oBAAoB0B,QAAW;AACzC,WAAK,mBAAmBD,QAAQzB;AAAAA,IAClC;AACA,QAAIyB,QAAQ3B,WAAW4B,QAAW;AAChC,WAAKN,UAAUK,QAAQ3B,MAAM;AAAA,IAC/B;AACA,QAAI2B,QAAQ1B,gBAAgB2B,QAAW;AACrC,WAAKL,eAAeI,QAAQ1B,WAAW;AAAA,IACzC;AAEA,QAAI0B,QAAQvB,UAAUwB,QAAW;AAC/B,WAAKJ,SAASG,QAAQvB,KAAK;AAAA,IAC7B;AAEA,QAAIuB,QAAQtB,cAAcuB,QAAW;AACnC,WAAKH,aAAaE,QAAQtB,SAAS;AAAA,IACrC;AAAA,EACF;AACF;;"}

package/dist/cjs/TanStackRouterDevtoolsPanelCore.d.cts

@@ -38,6 +38,8 @@ declare class TanStackRouterDevtoolsPanelCore {
     unmount(): void;
     setRouter(router: AnyRouter): void;
     setRouterState(routerState: any): void;
+    setStyle(style: any): void;
+    setClassName(className: any): void;
     setOptions(options: Partial<TanStackRouterDevtoolsPanelCoreOptions>): void;
 }
 export { TanStackRouterDevtoolsPanelCore };

package/dist/cjs/context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"context.cjs","sources":["../../src/context.ts"],"sourcesContent":["import { createContext, useContext } from 'solid-js'\n\nexport const ShadowDomTargetContext = createContext<ShadowRoot | undefined>(\n  undefined,\n)\n\nexport const DevtoolsOnCloseContext = createContext<\n  | {\n      onCloseClick: (\n        e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element },\n      ) => void\n    }\n  | undefined\n>(undefined)\n\nexport const useDevtoolsOnClose = () => {\n  const context = useContext(DevtoolsOnCloseContext)\n  if (!context) {\n    throw new Error(\n      'useDevtoolsOnClose must be used within a TanStackRouterDevtools component',\n    )\n  }\n  return context\n}\n"],"names":["createContext","useContext"],"mappings":";;;AAEO,MAAM,yBAAyBA,QAAA;AAAA,EACpC;AACF;AAEa,MAAA,yBAAyBA,sBAOpC,MAAS;AAEJ,MAAM,qBAAqB,MAAM;AAChC,QAAA,UAAUC,mBAAW,sBAAsB;AACjD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EAAA;AAEK,SAAA;AACT;;;;"}
+{"version":3,"file":"context.cjs","sources":["../../src/context.ts"],"sourcesContent":["import { createContext, useContext } from 'solid-js'\n\nexport const ShadowDomTargetContext = createContext<ShadowRoot | undefined>(\n  undefined,\n)\n\nexport const DevtoolsOnCloseContext = createContext<\n  | {\n      onCloseClick: (\n        e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element },\n      ) => void\n    }\n  | undefined\n>(undefined)\n\nexport const useDevtoolsOnClose = () => {\n  const context = useContext(DevtoolsOnCloseContext)\n  if (!context) {\n    throw new Error(\n      'useDevtoolsOnClose must be used within a TanStackRouterDevtools component',\n    )\n  }\n  return context\n}\n"],"names":["createContext","useContext"],"mappings":";;;AAEO,MAAM,yBAAyBA,QAAAA;AAAAA,EACpC;AACF;AAEO,MAAM,yBAAyBA,QAAAA,cAOpC,MAAS;AAEJ,MAAM,qBAAqB,MAAM;AACtC,QAAM,UAAUC,QAAAA,WAAW,sBAAsB;AACjD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;;;;"}

package/dist/cjs/logo.cjs

@@ -6,85 +6,85 @@ var _tmpl$ = /* @__PURE__ */ web.template(`<svg xmlns=http://www.w3.org/2000/svg
 function TanStackLogo() {
   const id = solidJs.createUniqueId();
   return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$5.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$7.nextSibling, _el$10 = _el$9.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$10.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling, _el$15 = _el$14.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$15.nextSibling, _el$18 = _el$17.firstChild, _el$19 = _el$17.nextSibling, _el$20 = _el$19.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$20.nextSibling, _el$23 = _el$22.firstChild, _el$24 = _el$22.nextSibling, _el$25 = _el$24.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$25.nextSibling, _el$28 = _el$27.firstChild, _el$29 = _el$27.nextSibling, _el$30 = _el$29.nextSibling, _el$31 = _el$30.firstChild, _el$32 = _el$30.nextSibling, _el$33 = _el$32.firstChild, _el$34 = _el$32.nextSibling, _el$35 = _el$34.nextSibling, _el$36 = _el$35.firstChild, _el$37 = _el$35.nextSibling, _el$38 = _el$37.firstChild, _el$39 = _el$37.nextSibling, _el$40 = _el$39.firstChild, _el$41 = _el$40.nextSibling, _el$42 = _el$41.nextSibling, _el$43 = _el$39.nextSibling, _el$44 = _el$43.firstChild, _el$45 = _el$43.nextSibling, _el$46 = _el$45.firstChild, _el$47 = _el$45.nextSibling, _el$48 = _el$47.firstChild, _el$49 = _el$48.nextSibling, _el$50 = _el$49.nextSibling, _el$51 = _el$50.nextSibling, _el$52 = _el$51.nextSibling, _el$53 = _el$52.nextSibling, _el$54 = _el$53.nextSibling, _el$55 = _el$54.nextSibling, _el$56 = _el$55.nextSibling, _el$57 = _el$56.nextSibling, _el$58 = _el$57.nextSibling, _el$59 = _el$58.nextSibling, _el$60 = _el$59.nextSibling, _el$61 = _el$60.nextSibling, _el$62 = _el$47.nextSibling, _el$63 = _el$62.firstChild, _el$64 = _el$62.nextSibling, _el$65 = _el$64.firstChild, _el$66 = _el$64.nextSibling, _el$67 = _el$66.nextSibling, _el$68 = _el$67.nextSibling, _el$69 = _el$68.firstChild, _el$70 = _el$68.nextSibling, _el$71 = _el$70.firstChild, _el$72 = _el$70.nextSibling, _el$73 = _el$72.firstChild, _el$74 = _el$73.firstChild, _el$75 = _el$74.nextSibling, _el$76 = _el$75.nextSibling, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling, _el$79 = _el$78.nextSibling, _el$80 = _el$79.nextSibling, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling, _el$83 = _el$82.nextSibling, _el$84 = _el$83.nextSibling, _el$85 = _el$84.nextSibling, _el$86 = _el$85.nextSibling, _el$87 = _el$86.nextSibling, _el$88 = _el$87.nextSibling, _el$89 = _el$88.nextSibling, _el$90 = _el$89.nextSibling, _el$91 = _el$90.nextSibling;
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$5.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$7.nextSibling, _el$0 = _el$9.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$0.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$10.nextSibling, _el$13 = _el$12.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$13.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$15.nextSibling, _el$18 = _el$17.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$20.nextSibling, _el$23 = _el$22.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$23.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$25.nextSibling, _el$28 = _el$27.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$28.nextSibling, _el$31 = _el$30.firstChild, _el$32 = _el$30.nextSibling, _el$33 = _el$32.nextSibling, _el$34 = _el$33.firstChild, _el$35 = _el$33.nextSibling, _el$36 = _el$35.firstChild, _el$37 = _el$35.nextSibling, _el$38 = _el$37.firstChild, _el$39 = _el$38.nextSibling, _el$40 = _el$39.nextSibling, _el$41 = _el$37.nextSibling, _el$42 = _el$41.firstChild, _el$43 = _el$41.nextSibling, _el$44 = _el$43.firstChild, _el$45 = _el$43.nextSibling, _el$46 = _el$45.firstChild, _el$47 = _el$46.nextSibling, _el$48 = _el$47.nextSibling, _el$49 = _el$48.nextSibling, _el$50 = _el$49.nextSibling, _el$51 = _el$50.nextSibling, _el$52 = _el$51.nextSibling, _el$53 = _el$52.nextSibling, _el$54 = _el$53.nextSibling, _el$55 = _el$54.nextSibling, _el$56 = _el$55.nextSibling, _el$57 = _el$56.nextSibling, _el$58 = _el$57.nextSibling, _el$59 = _el$58.nextSibling, _el$60 = _el$45.nextSibling, _el$61 = _el$60.firstChild, _el$62 = _el$60.nextSibling, _el$63 = _el$62.firstChild, _el$64 = _el$62.nextSibling, _el$65 = _el$64.nextSibling, _el$66 = _el$65.nextSibling, _el$67 = _el$66.firstChild, _el$68 = _el$66.nextSibling, _el$69 = _el$68.firstChild, _el$70 = _el$68.nextSibling, _el$71 = _el$70.firstChild, _el$72 = _el$71.firstChild, _el$73 = _el$72.nextSibling, _el$74 = _el$73.nextSibling, _el$75 = _el$74.nextSibling, _el$76 = _el$75.nextSibling, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling, _el$79 = _el$78.nextSibling, _el$80 = _el$79.nextSibling, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling, _el$83 = _el$82.nextSibling, _el$84 = _el$83.nextSibling, _el$85 = _el$84.nextSibling, _el$86 = _el$85.nextSibling, _el$87 = _el$86.nextSibling, _el$88 = _el$87.nextSibling, _el$89 = _el$88.nextSibling;
     web.setAttribute(_el$3, "id", `a-${id}`);
     web.setAttribute(_el$4, "fill", `url(#a-${id})`);
     web.setAttribute(_el$6, "id", `b-${id}`);
     web.setAttribute(_el$7, "id", `c-${id}`);
     web.setAttribute(_el$8, "filter", `url(#b-${id})`);
     web.setAttribute(_el$9, "mask", `url(#c-${id})`);
-    web.setAttribute(_el$11, "id", `d-${id}`);
-    web.setAttribute(_el$12, "id", `e-${id}`);
-    web.setAttribute(_el$13, "filter", `url(#d-${id})`);
-    web.setAttribute(_el$14, "mask", `url(#e-${id})`);
-    web.setAttribute(_el$16, "id", `f-${id}`);
-    web.setAttribute(_el$17, "id", `g-${id}`);
-    web.setAttribute(_el$18, "filter", `url(#f-${id})`);
-    web.setAttribute(_el$19, "mask", `url(#g-${id})`);
-    web.setAttribute(_el$21, "id", `h-${id}`);
-    web.setAttribute(_el$22, "id", `i-${id}`);
-    web.setAttribute(_el$23, "filter", `url(#h-${id})`);
-    web.setAttribute(_el$24, "mask", `url(#i-${id})`);
-    web.setAttribute(_el$26, "id", `j-${id}`);
-    web.setAttribute(_el$27, "id", `k-${id}`);
-    web.setAttribute(_el$28, "filter", `url(#j-${id})`);
-    web.setAttribute(_el$29, "mask", `url(#k-${id})`);
-    web.setAttribute(_el$31, "id", `l-${id}`);
-    web.setAttribute(_el$32, "id", `m-${id}`);
-    web.setAttribute(_el$33, "filter", `url(#l-${id})`);
-    web.setAttribute(_el$34, "mask", `url(#m-${id})`);
-    web.setAttribute(_el$36, "id", `n-${id}`);
-    web.setAttribute(_el$37, "id", `o-${id}`);
-    web.setAttribute(_el$38, "filter", `url(#n-${id})`);
-    web.setAttribute(_el$39, "mask", `url(#o-${id})`);
-    web.setAttribute(_el$41, "id", `p-${id}`);
-    web.setAttribute(_el$42, "fill", `url(#p-${id})`);
-    web.setAttribute(_el$44, "id", `q-${id}`);
-    web.setAttribute(_el$45, "id", `r-${id}`);
-    web.setAttribute(_el$46, "filter", `url(#q-${id})`);
-    web.setAttribute(_el$47, "mask", `url(#r-${id})`);
-    web.setAttribute(_el$48, "id", `s-${id}`);
-    web.setAttribute(_el$49, "fill", `url(#s-${id})`);
-    web.setAttribute(_el$50, "id", `t-${id}`);
-    web.setAttribute(_el$51, "fill", `url(#t-${id})`);
-    web.setAttribute(_el$52, "id", `u-${id}`);
-    web.setAttribute(_el$53, "fill", `url(#u-${id})`);
-    web.setAttribute(_el$54, "id", `v-${id}`);
-    web.setAttribute(_el$55, "fill", `url(#v-${id})`);
-    web.setAttribute(_el$56, "id", `w-${id}`);
-    web.setAttribute(_el$57, "fill", `url(#w-${id})`);
-    web.setAttribute(_el$58, "id", `x-${id}`);
-    web.setAttribute(_el$59, "fill", `url(#x-${id})`);
-    web.setAttribute(_el$60, "id", `y-${id}`);
-    web.setAttribute(_el$61, "fill", `url(#y-${id})`);
-    web.setAttribute(_el$63, "id", `z-${id}`);
-    web.setAttribute(_el$64, "id", `A-${id}`);
-    web.setAttribute(_el$65, "filter", `url(#z-${id})`);
-    web.setAttribute(_el$66, "id", `B-${id}`);
-    web.setAttribute(_el$67, "fill", `url(#B-${id})`);
-    web.setAttribute(_el$67, "mask", `url(#A-${id})`);
-    web.setAttribute(_el$69, "id", `C-${id}`);
-    web.setAttribute(_el$70, "id", `D-${id}`);
-    web.setAttribute(_el$71, "filter", `url(#C-${id})`);
-    web.setAttribute(_el$72, "mask", `url(#D-${id})`);
-    web.setAttribute(_el$74, "id", `E-${id}`);
-    web.setAttribute(_el$75, "fill", `url(#E-${id})`);
-    web.setAttribute(_el$76, "id", `F-${id}`);
-    web.setAttribute(_el$77, "stroke", `url(#F-${id})`);
-    web.setAttribute(_el$78, "id", `G-${id}`);
-    web.setAttribute(_el$79, "stroke", `url(#G-${id})`);
-    web.setAttribute(_el$80, "id", `H-${id}`);
-    web.setAttribute(_el$81, "stroke", `url(#H-${id})`);
-    web.setAttribute(_el$82, "id", `I-${id}`);
-    web.setAttribute(_el$83, "stroke", `url(#I-${id})`);
-    web.setAttribute(_el$84, "id", `J-${id}`);
-    web.setAttribute(_el$85, "stroke", `url(#J-${id})`);
-    web.setAttribute(_el$86, "id", `K-${id}`);
-    web.setAttribute(_el$87, "stroke", `url(#K-${id})`);
-    web.setAttribute(_el$88, "id", `L-${id}`);
-    web.setAttribute(_el$89, "stroke", `url(#L-${id})`);
-    web.setAttribute(_el$90, "id", `M-${id}`);
-    web.setAttribute(_el$91, "stroke", `url(#M-${id})`);
+    web.setAttribute(_el$1, "id", `d-${id}`);
+    web.setAttribute(_el$10, "id", `e-${id}`);
+    web.setAttribute(_el$11, "filter", `url(#d-${id})`);
+    web.setAttribute(_el$12, "mask", `url(#e-${id})`);
+    web.setAttribute(_el$14, "id", `f-${id}`);
+    web.setAttribute(_el$15, "id", `g-${id}`);
+    web.setAttribute(_el$16, "filter", `url(#f-${id})`);
+    web.setAttribute(_el$17, "mask", `url(#g-${id})`);
+    web.setAttribute(_el$19, "id", `h-${id}`);
+    web.setAttribute(_el$20, "id", `i-${id}`);
+    web.setAttribute(_el$21, "filter", `url(#h-${id})`);
+    web.setAttribute(_el$22, "mask", `url(#i-${id})`);
+    web.setAttribute(_el$24, "id", `j-${id}`);
+    web.setAttribute(_el$25, "id", `k-${id}`);
+    web.setAttribute(_el$26, "filter", `url(#j-${id})`);
+    web.setAttribute(_el$27, "mask", `url(#k-${id})`);
+    web.setAttribute(_el$29, "id", `l-${id}`);
+    web.setAttribute(_el$30, "id", `m-${id}`);
+    web.setAttribute(_el$31, "filter", `url(#l-${id})`);
+    web.setAttribute(_el$32, "mask", `url(#m-${id})`);
+    web.setAttribute(_el$34, "id", `n-${id}`);
+    web.setAttribute(_el$35, "id", `o-${id}`);
+    web.setAttribute(_el$36, "filter", `url(#n-${id})`);
+    web.setAttribute(_el$37, "mask", `url(#o-${id})`);
+    web.setAttribute(_el$39, "id", `p-${id}`);
+    web.setAttribute(_el$40, "fill", `url(#p-${id})`);
+    web.setAttribute(_el$42, "id", `q-${id}`);
+    web.setAttribute(_el$43, "id", `r-${id}`);
+    web.setAttribute(_el$44, "filter", `url(#q-${id})`);
+    web.setAttribute(_el$45, "mask", `url(#r-${id})`);
+    web.setAttribute(_el$46, "id", `s-${id}`);
+    web.setAttribute(_el$47, "fill", `url(#s-${id})`);
+    web.setAttribute(_el$48, "id", `t-${id}`);
+    web.setAttribute(_el$49, "fill", `url(#t-${id})`);
+    web.setAttribute(_el$50, "id", `u-${id}`);
+    web.setAttribute(_el$51, "fill", `url(#u-${id})`);
+    web.setAttribute(_el$52, "id", `v-${id}`);
+    web.setAttribute(_el$53, "fill", `url(#v-${id})`);
+    web.setAttribute(_el$54, "id", `w-${id}`);
+    web.setAttribute(_el$55, "fill", `url(#w-${id})`);
+    web.setAttribute(_el$56, "id", `x-${id}`);
+    web.setAttribute(_el$57, "fill", `url(#x-${id})`);
+    web.setAttribute(_el$58, "id", `y-${id}`);
+    web.setAttribute(_el$59, "fill", `url(#y-${id})`);
+    web.setAttribute(_el$61, "id", `z-${id}`);
+    web.setAttribute(_el$62, "id", `A-${id}`);
+    web.setAttribute(_el$63, "filter", `url(#z-${id})`);
+    web.setAttribute(_el$64, "id", `B-${id}`);
+    web.setAttribute(_el$65, "fill", `url(#B-${id})`);
+    web.setAttribute(_el$65, "mask", `url(#A-${id})`);
+    web.setAttribute(_el$67, "id", `C-${id}`);
+    web.setAttribute(_el$68, "id", `D-${id}`);
+    web.setAttribute(_el$69, "filter", `url(#C-${id})`);
+    web.setAttribute(_el$70, "mask", `url(#D-${id})`);
+    web.setAttribute(_el$72, "id", `E-${id}`);
+    web.setAttribute(_el$73, "fill", `url(#E-${id})`);
+    web.setAttribute(_el$74, "id", `F-${id}`);
+    web.setAttribute(_el$75, "stroke", `url(#F-${id})`);
+    web.setAttribute(_el$76, "id", `G-${id}`);
+    web.setAttribute(_el$77, "stroke", `url(#G-${id})`);
+    web.setAttribute(_el$78, "id", `H-${id}`);
+    web.setAttribute(_el$79, "stroke", `url(#H-${id})`);
+    web.setAttribute(_el$80, "id", `I-${id}`);
+    web.setAttribute(_el$81, "stroke", `url(#I-${id})`);
+    web.setAttribute(_el$82, "id", `J-${id}`);
+    web.setAttribute(_el$83, "stroke", `url(#J-${id})`);
+    web.setAttribute(_el$84, "id", `K-${id}`);
+    web.setAttribute(_el$85, "stroke", `url(#K-${id})`);
+    web.setAttribute(_el$86, "id", `L-${id}`);
+    web.setAttribute(_el$87, "stroke", `url(#L-${id})`);
+    web.setAttribute(_el$88, "id", `M-${id}`);
+    web.setAttribute(_el$89, "stroke", `url(#M-${id})`);
     return _el$;
   })();
 }