@tanstack/solid-router-devtools

--- package/package.json (excerpt) ---
{
  "name": "@tanstack/solid-router-devtools",
  "version": "2.0.0-beta.14",
  "description": "Modern and scalable routing for Solid applications",
  "author": "Tanner Linsley",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/TanStack/router.git",
    "directory": "packages/solid-router-devtools"
  },
  "homepage": "https://tanstack.com/router",
  "funding": {
    "type": "github",
    "url": "https://github.com/sponsors/tannerlinsley"
  },
  "keywords": [
    "react",
    "location",
    "router",
    "routing",
    "async",
    "async router",
    "typescript"
  ],
  "type": "module",
  "types": "./dist/esm/index.d.ts",
  "main": "./dist/cjs/index.cjs",
  "module": "./dist/esm/index.js",
  "exports": {
    ".": {
      "solid": {
        "types": "./dist/source/index.d.ts",
        "default": "./dist/source/index.jsx"
      },
      "import": {
        "types": "./dist/esm/index.d.ts",
        "default": "./dist/esm/index.js"
      },
      "require": {
        "types": "./dist/cjs/index.d.cts",
        "default": "./dist/cjs/index.cjs"
      }
    },
    "./package.json": "./package.json"
  },
  "sideEffects": false,
  "files": [
    "dist",
    "src"
  ],
  "engines": {
    "node": ">=20.19"
  },
  "dependencies": {
    "@solidjs/web": "2.0.0-beta.14",
    "@tanstack/router-devtools-core": "1.167.1"
  },
  "devDependencies": {
    "@solidjs/web": "2.0.0-beta.14",
    "@types/node": ">=20",
    "solid-js": "2.0.0-beta.14",
    "v

--- bundled output (OSV-MAL flagged — LLM scope expansion) ---

--- dist/source/TanStackRouterDevtools.d.ts (bundled) ---
import type { AnyRouter } from '@tanstack/solid-router';
import type { Component } from 'solid-js';
import type { JSX } from '@solidjs/web';
export interface TanStackRouterDevtoolsOptions {
    /**
     * Set this true if you want the dev tools to default to being open
     */
    initialIsOpen?: boolean;
    /**
     * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
     */
    panelProps?: JSX.HTMLAttributes<HTMLDivElement>;
    /**
     * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
     */
    closeButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
    /**
     * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
     */
    toggleButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
    /**
     * The position of the TanStack Router logo to open and close the devtools panel.
     * Defaults to 'bottom-left'.
     */
    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
    /**
     * Use this to render the devtools inside a different type of container element for a11y purposes.
     * Any string which corresponds to a valid intrinsic JSX element is allowed.
     * Defaults to 'footer'.
     */
    containerElement?: string | any;
    /**
     * The router instance to use for the devtools.
     */
    router?: AnyRouter;
    /**
     * Use this to attach the devtool's styles to specific element in the DOM.
     */
    shadowDOMTarget?: ShadowRoot;
}
export declare const TanStackRouterDevtools: Component<TanStackRouterDevtoolsOptions>;


--- dist/source/TanStackRouterDevtoolsPanel.d.ts (bundled) ---
import type { AnyRouter } from '@tanstack/solid-router';
import type { Component } from 'solid-js';
import type { JSX } from '@solidjs/web';
export interface TanStackRouterDevtoolsPanelOptions {
    /**
     * 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;
    /**
     * Use this to attach the devtool's styles to specific element in the DOM.
     */
    shadowDOMTarget?: ShadowRoot;
}
export declare const TanStackRouterDevtoolsPanel: Component<TanStackRouterDevtoolsPanelOptions>;


--- dist/source/index.d.ts (bundled) ---
import * as Devtools from './TanStackRouterDevtools';
import * as DevtoolsPanel from './TanStackRouterDevtoolsPanel';
export declare const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools'];
export declare const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools'];
export declare const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'];
export declare const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'];


--- dist/esm/TanStackRouterDevtools.d.ts (bundled) ---
import { AnyRouter } from '@tanstack/solid-router';
import { Component } from 'solid-js';
import { JSX } from '@solidjs/web';
export interface TanStackRouterDevtoolsOptions {
    /**
     * Set this true if you want the dev tools to default to being open
     */
    initialIsOpen?: boolean;
    /**
     * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
     */
    panelProps?: JSX.HTMLAttributes<HTMLDivElement>;
    /**
     * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
     */
    closeButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
    /**
     * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
     */
    toggleButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
    /**
     * The position of the TanStack Router logo to open and close the devtools panel.
     * Defaults to 'bottom-left'.
     */
    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
    /**
     * Use this to render the devtools inside a different type of container element for a11y purposes.
     * Any string which corresponds to a valid intrinsic JSX element is allowed.
     * Defaults to 'footer'.
     */
    containerElement?: string | any;
    /**
     * The router instance to use for the devtools.
     */
    router?: AnyRouter;
    /**
     * Use this to attach the devtool's styles to specific element in the DOM.
     */
    shadowDOMTarget?: ShadowRoot;
}
export declare const TanStackRouterDevtools: Component<TanStackRouterDevtoolsOptions>;


--- dist/esm/TanStackRouterDevtools.js (bundled) ---
import { ref, template } from "@solidjs/web";
import { useRouter, useRouterState } from "@tanstack/solid-router";
import { TanStackRouterDevtoolsCore } from "@tanstack/router-devtools-core";
import { createEffect, createSignal, onCleanup } from "solid-js";
//#region src/TanStackRouterDevtools.tsx
var _tmpl$ = /* @__PURE__ */ template(`<div>`);
var TanStackRouterDevtools = (props) => {
	const activeRouter = props.router ?? useRouter();
	const activeRouterState = useRouterState({ router: activeRouter });
	const usedProps = {
		...props,
		router: activeRouter,
		routerState: activeRouterState
	};
	const [devToolRef, setDevToolRef] = createSignal();
	const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps));
	createEffect(devtools, (d) => {
		d.setRouter(usedProps.router);
	});
	createEffect(devtools, (d) => {
		d.setRouterState(usedProps.routerState);
	});
	createEffect(devtools, (d) => {
		d.setOptions({
			initialIsOpen: usedProps.initialIsOpen,
			panelProps: usedProps.panelProps,
			closeButtonProps: usedProps.closeButtonProps,
			toggleButtonProps: usedProps.toggleButtonProps,
			position: usedProps.position,
			containerElement: usedProps.containerElement,
			shadowDOMTarget: usedProps.shadowDOMTarget
		});
	});
	createEffect(() => ({
		d: devtools(),
		el: devToolRef()
	}), ({ d, el }) => {
		if (el) {
			d.mount(el);
			onCleanup(() => {
				d.unmount();
			});
		}
	});
	return (() => {
		var _el$ = _tmpl$();
		ref(() => (el) => {
			setDevToolRef(el);
		}, _el$);
		return _el$;
	})();
};
//#endregion
export { TanStackRouterDevtools };

//# sourceMappingURL=TanStackRouterDevtools.js.map

--- dist/esm/TanStackRouterDevtoolsPanel.d.ts (bundled) ---
import { AnyRouter } from '@tanstack/solid-router';
import { Component } from 'solid-js';
import { JSX } from '@solidjs/web';
export interface TanStackRouterDevtoolsPanelOptions {
    /**
     * 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;
    /*