@tanstack/router-devtools-core 1.121.19 → 1.121.21

package/dist/esm/FloatingTanStackRouterDevtools.js

@@ -0,0 +1,204 @@
+import { createComponent, Dynamic, mergeProps, template, spread, insert, effect, className } from "solid-js/web";
+import { clsx } from "clsx";
+import { createSignal, createEffect, createMemo } from "solid-js";
+import { DevtoolsOnCloseContext } from "./context.js";
+import { useIsMounted } from "./utils.js";
+import { BaseTanStackRouterDevtoolsPanel } from "./BaseTanStackRouterDevtoolsPanel.js";
+import useLocalStorage from "./useLocalStorage.js";
+import { TanStackLogo } from "./logo.js";
+import { useStyles } from "./useStyles.js";
+var _tmpl$ = /* @__PURE__ */ template(`<button type=button><div><div></div><div></div></div><div>-</div><div>TanStack Router`);
+function FloatingTanStackRouterDevtools({
+  initialIsOpen,
+  panelProps = {},
+  closeButtonProps = {},
+  toggleButtonProps = {},
+  position = "bottom-left",
+  containerElement: Container = "footer",
+  router,
+  routerState,
+  shadowDOMTarget
+}) {
+  const [rootEl, setRootEl] = createSignal();
+  let panelRef = void 0;
+  const [isOpen, setIsOpen] = useLocalStorage("tanstackRouterDevtoolsOpen", initialIsOpen);
+  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage("tanstackRouterDevtoolsHeight", null);
+  const [isResolvedOpen, setIsResolvedOpen] = createSignal(false);
+  const [isResizing, setIsResizing] = createSignal(false);
+  const isMounted = useIsMounted();
+  const styles = useStyles();
+  const handleDragStart = (panelElement, startEvent) => {
+    if (startEvent.button !== 0) return;
+    setIsResizing(true);
+    const dragInfo = {
+      originalHeight: (panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) ?? 0,
+      pageY: startEvent.pageY
+    };
+    const run = (moveEvent) => {
+      const delta = dragInfo.pageY - moveEvent.pageY;
+      const newHeight = dragInfo.originalHeight + delta;
+      setDevtoolsHeight(newHeight);
+      if (newHeight < 70) {
+        setIsOpen(false);
+      } else {
+        setIsOpen(true);
+      }
+    };
+    const unsub = () => {
+      setIsResizing(false);
+      document.removeEventListener("mousemove", run);
+      document.removeEventListener("mouseUp", unsub);
+    };
+    document.addEventListener("mousemove", run);
+    document.addEventListener("mouseup", unsub);
+  };
+  isOpen() ?? false;
+  createEffect(() => {
+    setIsResolvedOpen(isOpen() ?? false);
+  });
+  createEffect(() => {
+    var _a, _b, _c;
+    if (isResolvedOpen()) {
+      const previousValue = (_b = (_a = rootEl()) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.style.paddingBottom;
+      const run = () => {
+        var _a2;
+        const containerHeight = panelRef.getBoundingClientRect().height;
+        if ((_a2 = rootEl()) == null ? void 0 : _a2.parentElement) {
+          setRootEl((prev) => {
+            if (prev == null ? void 0 : prev.parentElement) {
+              prev.parentElement.style.paddingBottom = `${containerHeight}px`;
+            }
+            return prev;
+          });
+        }
+      };
+      run();
+      if (typeof window !== "undefined") {
+        window.addEventListener("resize", run);
+        return () => {
+          var _a2;
+          window.removeEventListener("resize", run);
+          if (((_a2 = rootEl()) == null ? void 0 : _a2.parentElement) && typeof previousValue === "string") {
+            setRootEl((prev) => {
+              prev.parentElement.style.paddingBottom = previousValue;
+              return prev;
+            });
+          }
+        };
+      }
+    } else {
+      if ((_c = rootEl()) == null ? void 0 : _c.parentElement) {
+        setRootEl((prev) => {
+          if (prev == null ? void 0 : prev.parentElement) {
+            prev.parentElement.removeAttribute("style");
+          }
+          return prev;
+        });
+      }
+    }
+    return;
+  });
+  createEffect(() => {
+    if (rootEl()) {
+      const el = rootEl();
+      const fontSize = getComputedStyle(el).fontSize;
+      el == null ? void 0 : el.style.setProperty("--tsrd-font-size", fontSize);
+    }
+  });
+  const {
+    style: panelStyle = {},
+    ...otherPanelProps
+  } = panelProps;
+  const {
+    style: closeButtonStyle = {},
+    onClick: onCloseClick,
+    ...otherCloseButtonProps
+  } = closeButtonProps;
+  const {
+    onClick: onToggleClick,
+    class: toggleButtonClassName,
+    ...otherToggleButtonProps
+  } = toggleButtonProps;
+  if (!isMounted()) return null;
+  const resolvedHeight = createMemo(() => devtoolsHeight() ?? 500);
+  const basePanelClass = createMemo(() => {
+    return clsx(styles().devtoolsPanelContainer, styles().devtoolsPanelContainerVisibility(!!isOpen()), styles().devtoolsPanelContainerResizing(isResizing), styles().devtoolsPanelContainerAnimation(isResolvedOpen(), resolvedHeight() + 16));
+  });
+  const basePanelStyle = createMemo(() => {
+    return {
+      height: `${resolvedHeight()}px`,
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      ...panelStyle || {}
+    };
+  });
+  const buttonStyle = createMemo(() => {
+    return clsx(styles().mainCloseBtn, styles().mainCloseBtnPosition(position), styles().mainCloseBtnAnimation(!!isOpen()), toggleButtonClassName);
+  });
+  return createComponent(Dynamic, {
+    component: Container,
+    ref: setRootEl,
+    "class": "TanStackRouterDevtools",
+    get children() {
+      return [createComponent(DevtoolsOnCloseContext.Provider, {
+        value: {
+          onCloseClick: onCloseClick ?? (() => {
+          })
+        },
+        get children() {
+          return createComponent(BaseTanStackRouterDevtoolsPanel, mergeProps({
+            ref(r$) {
+              var _ref$ = panelRef;
+              typeof _ref$ === "function" ? _ref$(r$) : panelRef = r$;
+            }
+          }, otherPanelProps, {
+            router,
+            routerState,
+            className: basePanelClass,
+            style: basePanelStyle,
+            get isOpen() {
+              return isResolvedOpen();
+            },
+            setIsOpen,
+            handleDragStart: (e) => handleDragStart(panelRef, e),
+            shadowDOMTarget
+          }));
+        }
+      }), (() => {
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.nextSibling;
+        spread(_el$, mergeProps(otherToggleButtonProps, {
+          "aria-label": "Open TanStack Router Devtools",
+          "onClick": (e) => {
+            setIsOpen(true);
+            onToggleClick && onToggleClick(e);
+          },
+          get ["class"]() {
+            return buttonStyle();
+          }
+        }), false, true);
+        insert(_el$3, createComponent(TanStackLogo, {}));
+        insert(_el$4, createComponent(TanStackLogo, {}));
+        effect((_p$) => {
+          var _v$ = styles().mainCloseBtnIconContainer, _v$2 = styles().mainCloseBtnIconOuter, _v$3 = styles().mainCloseBtnIconInner, _v$4 = styles().mainCloseBtnDivider, _v$5 = styles().routerLogoCloseButton;
+          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+          _v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
+          _v$4 !== _p$.o && className(_el$5, _p$.o = _v$4);
+          _v$5 !== _p$.i && className(_el$6, _p$.i = _v$5);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0
+        });
+        return _el$;
+      })()];
+    }
+  });
+}
+export {
+  FloatingTanStackRouterDevtools,
+  FloatingTanStackRouterDevtools as default
+};
+//# sourceMappingURL=FloatingTanStackRouterDevtools.js.map

package/dist/esm/FloatingTanStackRouterDevtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingTanStackRouterDevtools.js","sources":["../../src/FloatingTanStackRouterDevtools.tsx"],"sourcesContent":["import { clsx as cx } from 'clsx'\n\nimport { createEffect, createMemo, createSignal } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\n\nimport { DevtoolsOnCloseContext } from './context'\nimport { useIsMounted } from './utils'\nimport { BaseTanStackRouterDevtoolsPanel } from './BaseTanStackRouterDevtoolsPanel'\nimport useLocalStorage from './useLocalStorage'\nimport { TanStackLogo } from './logo'\nimport { useStyles } from './useStyles'\nimport type { Accessor, JSX } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/router-core'\n\nexport interface FloatingDevtoolsOptions {\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: Accessor<AnyRouter>\n  routerState: Accessor<any>\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport function FloatingTanStackRouterDevtools({\n  initialIsOpen,\n  panelProps = {},\n  closeButtonProps = {},\n  toggleButtonProps = {},\n  position = 'bottom-left',\n  containerElement: Container = 'footer',\n  router,\n  routerState,\n  shadowDOMTarget,\n}: FloatingDevtoolsOptions): JSX.Element | null {\n  const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n\n  // eslint-disable-next-line prefer-const\n  let panelRef: HTMLDivElement | undefined = undefined\n\n  const [isOpen, setIsOpen] = useLocalStorage(\n    'tanstackRouterDevtoolsOpen',\n    initialIsOpen,\n  )\n\n  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n    'tanstackRouterDevtoolsHeight',\n    null,\n  )\n\n  const [isResolvedOpen, setIsResolvedOpen] = createSignal(false)\n  const [isResizing, setIsResizing] = createSignal(false)\n  const isMounted = useIsMounted()\n  const styles = useStyles()\n\n  const handleDragStart = (\n    panelElement: HTMLDivElement | undefined,\n    startEvent: any,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight = dragInfo.originalHeight + delta\n\n      setDevtoolsHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  const isButtonClosed = isOpen() ?? false\n\n  createEffect(() => {\n    setIsResolvedOpen(isOpen() ?? false)\n  })\n\n  createEffect(() => {\n    if (isResolvedOpen()) {\n      const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        const containerHeight = panelRef!.getBoundingClientRect().height\n        if (rootEl()?.parentElement) {\n          setRootEl((prev) => {\n            if (prev?.parentElement) {\n              prev.parentElement.style.paddingBottom = `${containerHeight}px`\n            }\n            return prev\n          })\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          if (rootEl()?.parentElement && typeof previousValue === 'string') {\n            setRootEl((prev) => {\n              prev!.parentElement!.style.paddingBottom = previousValue\n              return prev\n            })\n          }\n        }\n      }\n    } else {\n      // Reset padding when devtools are closed\n      if (rootEl()?.parentElement) {\n        setRootEl((prev) => {\n          if (prev?.parentElement) {\n            prev.parentElement.removeAttribute('style')\n          }\n          return prev\n        })\n      }\n    }\n    return\n  })\n\n  createEffect(() => {\n    if (rootEl()) {\n      const el = rootEl()\n      const fontSize = getComputedStyle(el!).fontSize\n      el?.style.setProperty('--tsrd-font-size', fontSize)\n    }\n  })\n\n  const { style: panelStyle = {}, ...otherPanelProps } = panelProps as {\n    style?: Record<string, any>\n  }\n\n  const {\n    style: closeButtonStyle = {},\n    onClick: onCloseClick,\n    ...otherCloseButtonProps\n  } = closeButtonProps\n\n  const {\n    onClick: onToggleClick,\n    class: toggleButtonClassName,\n    ...otherToggleButtonProps\n  } = toggleButtonProps\n\n  // Do not render on the server\n  if (!isMounted()) return null\n\n  const resolvedHeight = createMemo(() => devtoolsHeight() ?? 500)\n\n  const basePanelClass = createMemo(() => {\n    return cx(\n      styles().devtoolsPanelContainer,\n      styles().devtoolsPanelContainerVisibility(!!isOpen()),\n      styles().devtoolsPanelContainerResizing(isResizing),\n      styles().devtoolsPanelContainerAnimation(\n        isResolvedOpen(),\n        resolvedHeight() + 16,\n      ),\n    )\n  })\n\n  const basePanelStyle = createMemo(() => {\n    return {\n      height: `${resolvedHeight()}px`,\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      ...(panelStyle || {}),\n    }\n  })\n\n  const buttonStyle = createMemo(() => {\n    return cx(\n      styles().mainCloseBtn,\n      styles().mainCloseBtnPosition(position),\n      styles().mainCloseBtnAnimation(!!isOpen()),\n      toggleButtonClassName,\n    )\n  })\n\n  return (\n    <Dynamic\n      component={Container}\n      ref={setRootEl}\n      class=\"TanStackRouterDevtools\"\n    >\n      <DevtoolsOnCloseContext.Provider\n        value={{\n          onCloseClick: onCloseClick ?? (() => {}),\n        }}\n      >\n        {/* {router() ? ( */}\n        <BaseTanStackRouterDevtoolsPanel\n          ref={panelRef as any}\n          {...otherPanelProps}\n          router={router}\n          routerState={routerState}\n          className={basePanelClass}\n          style={basePanelStyle}\n          isOpen={isResolvedOpen()}\n          setIsOpen={setIsOpen}\n          handleDragStart={(e) => handleDragStart(panelRef, e)}\n          shadowDOMTarget={shadowDOMTarget}\n        />\n        {/* ) : (\n          <p>No router</p>\n        )} */}\n      </DevtoolsOnCloseContext.Provider>\n\n      <button\n        type=\"button\"\n        {...otherToggleButtonProps}\n        aria-label=\"Open TanStack Router Devtools\"\n        onClick={(e) => {\n          setIsOpen(true)\n          onToggleClick && onToggleClick(e)\n        }}\n        class={buttonStyle()}\n      >\n        <div class={styles().mainCloseBtnIconContainer}>\n          <div class={styles().mainCloseBtnIconOuter}>\n            <TanStackLogo />\n          </div>\n          <div class={styles().mainCloseBtnIconInner}>\n            <TanStackLogo />\n          </div>\n        </div>\n        <div class={styles().mainCloseBtnDivider}>-</div>\n        <div class={styles().routerLogoCloseButton}>TanStack Router</div>\n      </button>\n    </Dynamic>\n  )\n}\n\nexport default FloatingTanStackRouterDevtools\n"],"names":["FloatingTanStackRouterDevtools","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","Container","router","routerState","shadowDOMTarget","rootEl","setRootEl","createSignal","panelRef","undefined","isOpen","setIsOpen","useLocalStorage","devtoolsHeight","setDevtoolsHeight","isResolvedOpen","setIsResolvedOpen","isResizing","setIsResizing","isMounted","useIsMounted","styles","useStyles","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","delta","newHeight","unsub","removeEventListener","addEventListener","createEffect","previousValue","parentElement","style","paddingBottom","containerHeight","prev","window","removeAttribute","el","fontSize","getComputedStyle","setProperty","panelStyle","otherPanelProps","closeButtonStyle","onClick","onCloseClick","otherCloseButtonProps","onToggleClick","class","toggleButtonClassName","otherToggleButtonProps","resolvedHeight","createMemo","basePanelClass","cx","devtoolsPanelContainer","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","devtoolsPanelContainerAnimation","basePanelStyle","buttonStyle","mainCloseBtn","mainCloseBtnPosition","mainCloseBtnAnimation","_$createComponent","Dynamic","component","ref","children","DevtoolsOnCloseContext","Provider","value","BaseTanStackRouterDevtoolsPanel","_$mergeProps","r$","_ref$","className","e","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$insert","TanStackLogo","_$effect","_p$","_v$","mainCloseBtnIconContainer","_v$2","mainCloseBtnIconOuter","_v$3","mainCloseBtnIconInner","_v$4","mainCloseBtnDivider","_v$5","routerLogoCloseButton","_$className","t","a","o","i"],"mappings":"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"}

package/dist/esm/NavigateButton.d.ts

@@ -0,0 +1,7 @@
+import { AnyRouter, NavigateOptions } from '@tanstack/router-core';
+import { Accessor } from 'solid-js';
+interface Props extends NavigateOptions {
+    router: Accessor<AnyRouter>;
+}
+export declare function NavigateButton({ to, params, search, router }: Props): import("solid-js").JSX.Element;
+export {};

package/dist/esm/NavigateButton.js

@@ -0,0 +1,30 @@
+import { template, setAttribute, effect, className, delegateEvents } from "solid-js/web";
+import { useStyles } from "./useStyles.js";
+var _tmpl$ = /* @__PURE__ */ template(`<button type=button>➔`);
+function NavigateButton({
+  to,
+  params,
+  search,
+  router
+}) {
+  const styles = useStyles();
+  return (() => {
+    var _el$ = _tmpl$();
+    _el$.$$click = (e) => {
+      e.stopPropagation();
+      router().navigate({
+        to,
+        params,
+        search
+      });
+    };
+    setAttribute(_el$, "title", `Navigate to ${to}`);
+    effect(() => className(_el$, styles().navigateButton));
+    return _el$;
+  })();
+}
+delegateEvents(["click"]);
+export {
+  NavigateButton
+};
+//# sourceMappingURL=NavigateButton.js.map

package/dist/esm/NavigateButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigateButton.js","sources":["../../src/NavigateButton.tsx"],"sourcesContent":["import { useStyles } from './useStyles'\nimport type { AnyRouter, NavigateOptions } from '@tanstack/router-core'\nimport type { Accessor } from 'solid-js'\n\ninterface Props extends NavigateOptions {\n  router: Accessor<AnyRouter>\n}\n\nexport function NavigateButton({ to, params, search, router }: Props) {\n  const styles = useStyles()\n\n  return (\n    <button\n      type=\"button\"\n      title={`Navigate to ${to}`}\n      class={styles().navigateButton}\n      onClick={(e) => {\n        e.stopPropagation()\n        router().navigate({ to, params, search })\n      }}\n    >\n      ➔\n    </button>\n  )\n}\n"],"names":["NavigateButton","to","params","search","router","styles","useStyles","_el$","_tmpl$","$$click","e","stopPropagation","navigate","_$setAttribute","_$effect","_$className","navigateButton","_$delegateEvents"],"mappings":";;;AAQO,SAASA,eAAe;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAQC;AAAAA,EAAQC;AAAc,GAAG;AACpE,QAAMC,SAASC,UAAU;AAEzB,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAAD,SAAAE,UAKcC,CAAM,MAAA;AACdA,QAAEC,gBAAgB;AAClBP,aAAAA,EAASQ,SAAS;AAAA,QAAEX;AAAAA,QAAIC;AAAAA,QAAQC;AAAAA,MAAAA,CAAQ;AAAA,IAC1C;AAACU,iBAAAN,MALM,SAAA,eAAeN,EAAE,EAAE;AAAAa,WAAA,MAAAC,UAAAR,MACnBF,OAAO,EAAEW,cAAc,CAAA;AAAAT,WAAAA;AAAAA,EAAAA,GAAA;AASpC;AAACU,eAAA,CAAA,OAAA,CAAA;"}

package/dist/esm/TanStackRouterDevtoolsCore.d.ts

@@ -0,0 +1,55 @@
+import { AnyRouter } from '@tanstack/router-core';
+interface DevtoolsOptions {
+    /**
+     * 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 class, style (merge and override default style), etc.
+     */
+    panelProps?: any & {
+        ref?: any;
+    };
+    /**
+     * 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.
+     */
+    closeButtonProps?: any & {
+        ref?: any;
+    };
+    /**
+     * 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.
+     */
+    toggleButtonProps?: any & {
+        ref?: 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;
+    /**
+     * A boolean variable indicating if the "lite" version of the library is being used
+     */
+    router: AnyRouter;
+    routerState: any;
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+}
+declare class TanStackRouterDevtoolsCore {
+    #private;
+    constructor(config: DevtoolsOptions);
+    mount<T extends HTMLElement>(el: T): void;
+    unmount(): void;
+    setRouter(router: AnyRouter): void;
+    setRouterState(routerState: any): void;
+    setOptions(options: Partial<DevtoolsOptions>): void;
+}
+export { TanStackRouterDevtoolsCore };

package/dist/esm/TanStackRouterDevtoolsCore.js

@@ -0,0 +1,121 @@
+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;
+import { render, createComponent } from "solid-js/web";
+import { createSignal, lazy } from "solid-js";
+import { ShadowDomTargetContext } from "./context.js";
+class TanStackRouterDevtoolsCore {
+  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, createSignal(config.router));
+    __privateSet(this, _routerState, 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);
+  }
+  mount(el) {
+    if (__privateGet(this, _isMounted)) {
+      throw new Error("Devtools is already mounted");
+    }
+    const dispose = 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);
+      let Devtools;
+      if (__privateGet(this, _Component)) {
+        Devtools = __privateGet(this, _Component);
+      } else {
+        Devtools = lazy(() => import("./FloatingTanStackRouterDevtools.js"));
+        __privateSet(this, _Component, Devtools);
+      }
+      return createComponent(ShadowDomTargetContext.Provider, {
+        value: shadowDOMTarget,
+        get children() {
+          return createComponent(Devtools, {
+            position,
+            initialIsOpen,
+            router,
+            routerState,
+            shadowDOMTarget,
+            panelProps,
+            closeButtonProps,
+            toggleButtonProps,
+            containerElement
+          });
+        }
+      });
+    }, el);
+    __privateSet(this, _isMounted, true);
+    __privateSet(this, _dispose, dispose);
+  }
+  unmount() {
+    var _a;
+    if (!__privateGet(this, _isMounted)) {
+      throw new Error("Devtools is not mounted");
+    }
+    (_a = __privateGet(this, _dispose)) == null ? void 0 : _a.call(this);
+    __privateSet(this, _isMounted, false);
+  }
+  setRouter(router) {
+    __privateGet(this, _router)[1](router);
+  }
+  setRouterState(routerState) {
+    __privateGet(this, _routerState)[1](routerState);
+  }
+  setOptions(options) {
+    if (options.position !== void 0) {
+      __privateSet(this, _position, options.position);
+    }
+    if (options.initialIsOpen !== void 0) {
+      __privateSet(this, _initialIsOpen, options.initialIsOpen);
+    }
+    if (options.shadowDOMTarget !== void 0) {
+      __privateSet(this, _shadowDOMTarget, options.shadowDOMTarget);
+    }
+    if (options.containerElement !== void 0) {
+      __privateSet(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();
+export {
+  TanStackRouterDevtoolsCore
+};
+//# sourceMappingURL=TanStackRouterDevtoolsCore.js.map

package/dist/esm/TanStackRouterDevtoolsCore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TanStackRouterDevtoolsCore.js","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,aAAaD,OAAOE,MAAM;AACpC,uBAAA,cAAeD,aAAaD,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,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,KAAK,MAAM,OAAO,qCAAkC,CAAC;AAChE,2BAAK,YAAaD;AAAAA,MAAAA;AAGpBE,aAAAA,gBACGC,uBAAuBC,UAAQ;AAAA,QAACC,OAAOf;AAAAA,QAAe,IAAAgB,WAAA;AAAA,iBAAAJ,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;"}

package/dist/esm/TanStackRouterDevtoolsPanelCore.d.ts

@@ -0,0 +1,43 @@
+import { JSX } from 'solid-js';
+import { AnyRouter } from '@tanstack/router-core';
+interface TanStackRouterDevtoolsPanelCoreOptions {
+    /**
+     * The standard React style object used to style a component with inline styles
+     */
+    style?: JSX.CSSProperties;
+    /**
+     * The standard React 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;
+    /**
+     * A boolean variable indicating if the "lite" version of the library is being used
+     */
+    router: AnyRouter;
+    routerState: any;
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+}
+declare class TanStackRouterDevtoolsPanelCore {
+    #private;
+    constructor(config: TanStackRouterDevtoolsPanelCoreOptions);
+    mount<T extends HTMLElement>(el: T): void;
+    unmount(): void;
+    setRouter(router: AnyRouter): void;
+    setRouterState(routerState: any): void;
+    setOptions(options: Partial<TanStackRouterDevtoolsPanelCoreOptions>): void;
+}
+export { TanStackRouterDevtoolsPanelCore };

package/dist/esm/TanStackRouterDevtoolsPanelCore.js

@@ -0,0 +1,107 @@
+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;
+import { render, createComponent } from "solid-js/web";
+import { createSignal, lazy } from "solid-js";
+import { ShadowDomTargetContext, DevtoolsOnCloseContext } from "./context.js";
+class TanStackRouterDevtoolsPanelCore {
+  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
+    } = config;
+    __privateSet(this, _router, createSignal(router));
+    __privateSet(this, _routerState, createSignal(routerState));
+    __privateSet(this, _shadowDOMTarget, shadowDOMTarget);
+    __privateSet(this, _setIsOpen, setIsOpen);
+  }
+  mount(el) {
+    if (__privateGet(this, _isMounted)) {
+      throw new Error("Devtools is already mounted");
+    }
+    const dispose = render(() => {
+      const [router] = __privateGet(this, _router);
+      const [routerState] = __privateGet(this, _routerState);
+      const shadowDOMTarget = __privateGet(this, _shadowDOMTarget);
+      const setIsOpen = __privateGet(this, _setIsOpen);
+      let BaseTanStackRouterDevtoolsPanel;
+      if (__privateGet(this, _Component)) {
+        BaseTanStackRouterDevtoolsPanel = __privateGet(this, _Component);
+      } else {
+        BaseTanStackRouterDevtoolsPanel = lazy(() => import("./BaseTanStackRouterDevtoolsPanel.js"));
+        __privateSet(this, _Component, BaseTanStackRouterDevtoolsPanel);
+      }
+      return createComponent(ShadowDomTargetContext.Provider, {
+        value: shadowDOMTarget,
+        get children() {
+          return createComponent(DevtoolsOnCloseContext.Provider, {
+            value: {
+              onCloseClick: () => {
+              }
+            },
+            get children() {
+              return createComponent(BaseTanStackRouterDevtoolsPanel, {
+                router,
+                routerState,
+                shadowDOMTarget,
+                setIsOpen
+              });
+            }
+          });
+        }
+      });
+    }, el);
+    __privateSet(this, _isMounted, true);
+    __privateSet(this, _dispose, dispose);
+  }
+  unmount() {
+    var _a;
+    if (!__privateGet(this, _isMounted)) {
+      throw new Error("Devtools is not mounted");
+    }
+    (_a = __privateGet(this, _dispose)) == null ? void 0 : _a.call(this);
+    __privateSet(this, _isMounted, false);
+  }
+  setRouter(router) {
+    __privateGet(this, _router)[1](router);
+  }
+  setRouterState(routerState) {
+    __privateGet(this, _routerState)[1](routerState);
+  }
+  setOptions(options) {
+    if (options.shadowDOMTarget !== void 0) {
+      __privateSet(this, _shadowDOMTarget, options.shadowDOMTarget);
+    }
+    if (options.router !== void 0) {
+      this.setRouter(options.router);
+    }
+    if (options.routerState !== void 0) {
+      this.setRouterState(options.routerState);
+    }
+  }
+}
+_router = new WeakMap();
+_routerState = new WeakMap();
+_shadowDOMTarget = new WeakMap();
+_isMounted = new WeakMap();
+_setIsOpen = new WeakMap();
+_dispose = new WeakMap();
+_Component = new WeakMap();
+export {
+  TanStackRouterDevtoolsPanelCore
+};
+//# sourceMappingURL=TanStackRouterDevtoolsPanelCore.js.map

package/dist/esm/TanStackRouterDevtoolsPanelCore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TanStackRouterDevtoolsPanelCore.js","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,aAAaJ,MAAM;AAC7B,uBAAA,cAAeI,aAAaH,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,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,KAChC,MAAM,OAAO,sCAAmC,CAClD;AACA,2BAAK,YAAaD;AAAAA,MAAAA;AAGpBE,aAAAA,gBACGC,uBAAuBC,UAAQ;AAAA,QAACC,OAAOb;AAAAA,QAAe,IAAAc,WAAA;AAAAJ,iBAAAA,gBACpDK,uBAAuBH,UAAQ;AAAA,YAC9BC,OAAO;AAAA,cACLG,cAAcA,MAAM;AAAA,cAAA;AAAA,YACtB;AAAA,YAAC,IAAAF,WAAA;AAAA,qBAAAJ,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;"}

package/dist/esm/context.d.ts

@@ -0,0 +1,13 @@
+export declare const ShadowDomTargetContext: import('solid-js').Context<ShadowRoot | undefined>;
+export declare const DevtoolsOnCloseContext: import('solid-js').Context<{
+    onCloseClick: (e: MouseEvent & {
+        currentTarget: HTMLButtonElement;
+        target: Element;
+    }) => void;
+} | undefined>;
+export declare const useDevtoolsOnClose: () => {
+    onCloseClick: (e: MouseEvent & {
+        currentTarget: HTMLButtonElement;
+        target: Element;
+    }) => void;
+};