appos 0.3.5-0 → 0.3.6-0

package/dist/exports/devtools/BaseTanStackRouterDevtoolsPanel-BBz1qLry-DUwdvyLv.js

@@ -0,0 +1,2090 @@
+import { C as setAttribute, D as useContext, E as untrack, O as useDevtoolsOnClose, S as onCleanup, T as template, a as Match, b as memo, c as Switch, d as className, f as createComponent, g as createSignal, h as createRenderEffect, i as For, m as createMemo, o as ShadowDomTargetContext, p as createEffect, s as Show, u as addEventListener, v as delegateEvents, w as spread, x as mergeProps, y as insert } from "./utils-YRTCpRgb.js";
+
+//#region ../../node_modules/.bun/tiny-invariant@1.3.3/node_modules/tiny-invariant/dist/esm/tiny-invariant.js
+var isProduction = false;
+var prefix = "Invariant failed";
+function invariant(condition, message) {
+	if (condition) return;
+	if (isProduction) throw new Error(prefix);
+	var provided = typeof message === "function" ? message() : message;
+	var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+	throw new Error(value);
+}
+
+//#endregion
+//#region ../../node_modules/.bun/@tanstack+router-core@1.141.6/node_modules/@tanstack/router-core/dist/esm/new-process-route-tree.js
+const SEGMENT_TYPE_PATHNAME = 0;
+const SEGMENT_TYPE_PARAM = 1;
+const SEGMENT_TYPE_WILDCARD = 2;
+const SEGMENT_TYPE_OPTIONAL_PARAM = 3;
+const PARAM_W_CURLY_BRACES_RE = /^([^{]*)\{\$([a-zA-Z_$][a-zA-Z0-9_$]*)\}([^}]*)$/;
+const OPTIONAL_PARAM_W_CURLY_BRACES_RE = /^([^{]*)\{-\$([a-zA-Z_$][a-zA-Z0-9_$]*)\}([^}]*)$/;
+const WILDCARD_W_CURLY_BRACES_RE = /^([^{]*)\{\$\}([^}]*)$/;
+function parseSegment(path, start, output = new Uint16Array(6)) {
+	const next = path.indexOf("/", start);
+	const end = next === -1 ? path.length : next;
+	const part = path.substring(start, end);
+	if (!part || !part.includes("$")) {
+		output[0] = SEGMENT_TYPE_PATHNAME;
+		output[1] = start;
+		output[2] = start;
+		output[3] = end;
+		output[4] = end;
+		output[5] = end;
+		return output;
+	}
+	if (part === "$") {
+		const total = path.length;
+		output[0] = SEGMENT_TYPE_WILDCARD;
+		output[1] = start;
+		output[2] = start;
+		output[3] = total;
+		output[4] = total;
+		output[5] = total;
+		return output;
+	}
+	if (part.charCodeAt(0) === 36) {
+		output[0] = SEGMENT_TYPE_PARAM;
+		output[1] = start;
+		output[2] = start + 1;
+		output[3] = end;
+		output[4] = end;
+		output[5] = end;
+		return output;
+	}
+	const wildcardBracesMatch = part.match(WILDCARD_W_CURLY_BRACES_RE);
+	if (wildcardBracesMatch) {
+		const pLength = wildcardBracesMatch[1].length;
+		output[0] = SEGMENT_TYPE_WILDCARD;
+		output[1] = start + pLength;
+		output[2] = start + pLength + 1;
+		output[3] = start + pLength + 2;
+		output[4] = start + pLength + 3;
+		output[5] = path.length;
+		return output;
+	}
+	const optionalParamBracesMatch = part.match(OPTIONAL_PARAM_W_CURLY_BRACES_RE);
+	if (optionalParamBracesMatch) {
+		const prefix$1 = optionalParamBracesMatch[1];
+		const paramName = optionalParamBracesMatch[2];
+		const suffix = optionalParamBracesMatch[3];
+		const pLength = prefix$1.length;
+		output[0] = SEGMENT_TYPE_OPTIONAL_PARAM;
+		output[1] = start + pLength;
+		output[2] = start + pLength + 3;
+		output[3] = start + pLength + 3 + paramName.length;
+		output[4] = end - suffix.length;
+		output[5] = end;
+		return output;
+	}
+	const paramBracesMatch = part.match(PARAM_W_CURLY_BRACES_RE);
+	if (paramBracesMatch) {
+		const prefix$1 = paramBracesMatch[1];
+		const paramName = paramBracesMatch[2];
+		const suffix = paramBracesMatch[3];
+		const pLength = prefix$1.length;
+		output[0] = SEGMENT_TYPE_PARAM;
+		output[1] = start + pLength;
+		output[2] = start + pLength + 2;
+		output[3] = start + pLength + 2 + paramName.length;
+		output[4] = end - suffix.length;
+		output[5] = end;
+		return output;
+	}
+	output[0] = SEGMENT_TYPE_PATHNAME;
+	output[1] = start;
+	output[2] = start;
+	output[3] = end;
+	output[4] = end;
+	output[5] = end;
+	return output;
+}
+
+//#endregion
+//#region ../../node_modules/.bun/@tanstack+router-core@1.141.6/node_modules/@tanstack/router-core/dist/esm/path.js
+function trimPathLeft(path) {
+	return path === "/" ? path : path.replace(/^\/{1,}/, "");
+}
+function trimPathRight(path) {
+	const len = path.length;
+	return len > 1 && path[len - 1] === "/" ? path.replace(/\/{1,}$/, "") : path;
+}
+function trimPath(path) {
+	return trimPathRight(trimPathLeft(path));
+}
+function encodeParam(key, params, decodeCharMap) {
+	const value = params[key];
+	if (typeof value !== "string") return value;
+	if (key === "_splat") return encodeURI(value);
+	else return encodePathParam(value, decodeCharMap);
+}
+function interpolatePath({ path, params, decodeCharMap }) {
+	let isMissingParams = false;
+	const usedParams = {};
+	if (!path || path === "/") return {
+		interpolatedPath: "/",
+		usedParams,
+		isMissingParams
+	};
+	if (!path.includes("$")) return {
+		interpolatedPath: path,
+		usedParams,
+		isMissingParams
+	};
+	const length = path.length;
+	let cursor = 0;
+	let segment;
+	let joined = "";
+	while (cursor < length) {
+		const start = cursor;
+		segment = parseSegment(path, start, segment);
+		const end = segment[5];
+		cursor = end + 1;
+		if (start === end) continue;
+		const kind = segment[0];
+		if (kind === SEGMENT_TYPE_PATHNAME) {
+			joined += "/" + path.substring(start, end);
+			continue;
+		}
+		if (kind === SEGMENT_TYPE_WILDCARD) {
+			const splat = params._splat;
+			usedParams._splat = splat;
+			usedParams["*"] = splat;
+			const prefix$1 = path.substring(start, segment[1]);
+			const suffix = path.substring(segment[4], end);
+			if (!splat) {
+				isMissingParams = true;
+				if (prefix$1 || suffix) joined += "/" + prefix$1 + suffix;
+				continue;
+			}
+			const value = encodeParam("_splat", params, decodeCharMap);
+			joined += "/" + prefix$1 + value + suffix;
+			continue;
+		}
+		if (kind === SEGMENT_TYPE_PARAM) {
+			const key = path.substring(segment[2], segment[3]);
+			if (!isMissingParams && !(key in params)) isMissingParams = true;
+			usedParams[key] = params[key];
+			const prefix$1 = path.substring(start, segment[1]);
+			const suffix = path.substring(segment[4], end);
+			const value = encodeParam(key, params, decodeCharMap) ?? "undefined";
+			joined += "/" + prefix$1 + value + suffix;
+			continue;
+		}
+		if (kind === SEGMENT_TYPE_OPTIONAL_PARAM) {
+			const key = path.substring(segment[2], segment[3]);
+			const valueRaw = params[key];
+			if (valueRaw == null) continue;
+			usedParams[key] = valueRaw;
+			const prefix$1 = path.substring(start, segment[1]);
+			const suffix = path.substring(segment[4], end);
+			const value = encodeParam(key, params, decodeCharMap) ?? "";
+			joined += "/" + prefix$1 + value + suffix;
+			continue;
+		}
+	}
+	if (path.endsWith("/")) joined += "/";
+	return {
+		usedParams,
+		interpolatedPath: joined || "/",
+		isMissingParams
+	};
+}
+function encodePathParam(value, decodeCharMap) {
+	let encoded = encodeURIComponent(value);
+	if (decodeCharMap) for (const [encodedChar, char] of decodeCharMap) encoded = encoded.replaceAll(encodedChar, char);
+	return encoded;
+}
+
+//#endregion
+//#region ../../node_modules/.bun/@tanstack+router-core@1.141.6/node_modules/@tanstack/router-core/dist/esm/root.js
+const rootRouteId = "__root__";
+
+//#endregion
+//#region ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r$1(e$1) {
+	var t$1, f$1, n$1 = "";
+	if ("string" == typeof e$1 || "number" == typeof e$1) n$1 += e$1;
+	else if ("object" == typeof e$1) if (Array.isArray(e$1)) {
+		var o$1 = e$1.length;
+		for (t$1 = 0; t$1 < o$1; t$1++) e$1[t$1] && (f$1 = r$1(e$1[t$1])) && (n$1 && (n$1 += " "), n$1 += f$1);
+	} else for (f$1 in e$1) e$1[f$1] && (n$1 && (n$1 += " "), n$1 += f$1);
+	return n$1;
+}
+function clsx() {
+	for (var e$1, t$1, f$1 = 0, n$1 = "", o$1 = arguments.length; f$1 < o$1; f$1++) (e$1 = arguments[f$1]) && (t$1 = r$1(e$1)) && (n$1 && (n$1 += " "), n$1 += t$1);
+	return n$1;
+}
+
+//#endregion
+//#region ../../node_modules/.bun/goober@2.1.18+0f41441494533184/node_modules/goober/dist/goober.modern.js
+let e = { data: "" }, t = (t$1) => {
+	if ("object" == typeof window) {
+		let e$1 = (t$1 ? t$1.querySelector("#_goober") : window._goober) || Object.assign(document.createElement("style"), {
+			innerHTML: " ",
+			id: "_goober"
+		});
+		return e$1.nonce = window.__nonce__, e$1.parentNode || (t$1 || document.head).appendChild(e$1), e$1.firstChild;
+	}
+	return t$1 || e;
+}, r = (e$1) => {
+	let r$2 = t(e$1), l$1 = r$2.data;
+	return r$2.data = "", l$1;
+}, l = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, a = /\/\*[^]*?\*\/|  +/g, n = /\n+/g, o = (e$1, t$1) => {
+	let r$2 = "", l$1 = "", a$1 = "";
+	for (let n$1 in e$1) {
+		let c$1 = e$1[n$1];
+		"@" == n$1[0] ? "i" == n$1[1] ? r$2 = n$1 + " " + c$1 + ";" : l$1 += "f" == n$1[1] ? o(c$1, n$1) : n$1 + "{" + o(c$1, "k" == n$1[1] ? "" : t$1) + "}" : "object" == typeof c$1 ? l$1 += o(c$1, t$1 ? t$1.replace(/([^,])+/g, (e$2) => n$1.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g, (t$2) => /&/.test(t$2) ? t$2.replace(/&/g, e$2) : e$2 ? e$2 + " " + t$2 : t$2)) : n$1) : null != c$1 && (n$1 = /^--/.test(n$1) ? n$1 : n$1.replace(/[A-Z]/g, "-$&").toLowerCase(), a$1 += o.p ? o.p(n$1, c$1) : n$1 + ":" + c$1 + ";");
+	}
+	return r$2 + (t$1 && a$1 ? t$1 + "{" + a$1 + "}" : a$1) + l$1;
+}, c = {}, s = (e$1) => {
+	if ("object" == typeof e$1) {
+		let t$1 = "";
+		for (let r$2 in e$1) t$1 += r$2 + s(e$1[r$2]);
+		return t$1;
+	}
+	return e$1;
+}, i = (e$1, t$1, r$2, i$1, p$1) => {
+	let u$1 = s(e$1), d$1 = c[u$1] || (c[u$1] = ((e$2) => {
+		let t$2 = 0, r$3 = 11;
+		for (; t$2 < e$2.length;) r$3 = 101 * r$3 + e$2.charCodeAt(t$2++) >>> 0;
+		return "go" + r$3;
+	})(u$1));
+	if (!c[d$1]) {
+		let t$2 = u$1 !== e$1 ? e$1 : ((e$2) => {
+			let t$3, r$3, o$1 = [{}];
+			for (; t$3 = l.exec(e$2.replace(a, ""));) t$3[4] ? o$1.shift() : t$3[3] ? (r$3 = t$3[3].replace(n, " ").trim(), o$1.unshift(o$1[0][r$3] = o$1[0][r$3] || {})) : o$1[0][t$3[1]] = t$3[2].replace(n, " ").trim();
+			return o$1[0];
+		})(e$1);
+		c[d$1] = o(p$1 ? { ["@keyframes " + d$1]: t$2 } : t$2, r$2 ? "" : "." + d$1);
+	}
+	let f$1 = r$2 && c.g ? c.g : null;
+	return r$2 && (c.g = c[d$1]), ((e$2, t$2, r$3, l$1) => {
+		l$1 ? t$2.data = t$2.data.replace(l$1, e$2) : -1 === t$2.data.indexOf(e$2) && (t$2.data = r$3 ? e$2 + t$2.data : t$2.data + e$2);
+	})(c[d$1], t$1, i$1, f$1), d$1;
+}, p = (e$1, t$1, r$2) => e$1.reduce((e$2, l$1, a$1) => {
+	let n$1 = t$1[a$1];
+	if (n$1 && n$1.call) {
+		let e$3 = n$1(r$2), t$2 = e$3 && e$3.props && e$3.props.className || /^go/.test(e$3) && e$3;
+		n$1 = t$2 ? "." + t$2 : e$3 && "object" == typeof e$3 ? e$3.props ? "" : o(e$3, "") : !1 === e$3 ? "" : e$3;
+	}
+	return e$2 + l$1 + (null == n$1 ? "" : n$1);
+}, "");
+function u(e$1) {
+	let r$2 = this || {}, l$1 = e$1.call ? e$1(r$2.p) : e$1;
+	return i(l$1.unshift ? l$1.raw ? p(l$1, [].slice.call(arguments, 1), r$2.p) : l$1.reduce((e$2, t$1) => Object.assign(e$2, t$1 && t$1.call ? t$1(r$2.p) : t$1), {}) : l$1, t(r$2.target), r$2.g, r$2.o, r$2.k);
+}
+let d, f, g, b = u.bind({ g: 1 }), h = u.bind({ k: 1 });
+
+//#endregion
+//#region ../../node_modules/.bun/@tanstack+router-devtools-core@1.141.6+2acfa48c1cd83bfa/node_modules/@tanstack/router-devtools-core/dist/BaseTanStackRouterDevtoolsPanel-BBz1qLry.js
+const isServer = typeof window === "undefined";
+function getStatusColor(match) {
+	return match.isFetching && match.status === "success" ? match.isFetching === "beforeLoad" ? "purple" : "blue" : {
+		pending: "yellow",
+		success: "green",
+		error: "red",
+		notFound: "purple",
+		redirected: "gray"
+	}[match.status];
+}
+function getRouteStatusColor(matches, route) {
+	const found = matches.find((d$1) => d$1.routeId === route.id);
+	if (!found) return "gray";
+	return getStatusColor(found);
+}
+function useIsMounted() {
+	const [isMounted, setIsMounted] = createSignal(false);
+	(isServer ? createEffect : createRenderEffect)(() => {
+		setIsMounted(true);
+	});
+	return isMounted;
+}
+const displayValue = (value) => {
+	const name = Object.getOwnPropertyNames(Object(value));
+	const newValue = typeof value === "bigint" ? `${value.toString()}n` : value;
+	try {
+		return JSON.stringify(newValue, name);
+	} catch (e$1) {
+		return `unable to stringify`;
+	}
+};
+function multiSortBy(arr, accessors = [(d$1) => d$1]) {
+	return arr.map((d$1, i$1) => [d$1, i$1]).sort(([a$1, ai], [b$1, bi]) => {
+		for (const accessor of accessors) {
+			const ao = accessor(a$1);
+			const bo = accessor(b$1);
+			if (typeof ao === "undefined") {
+				if (typeof bo === "undefined") continue;
+				return 1;
+			}
+			if (ao === bo) continue;
+			return ao > bo ? 1 : -1;
+		}
+		return ai - bi;
+	}).map(([d$1]) => d$1);
+}
+const tokens = {
+	colors: {
+		inherit: "inherit",
+		current: "currentColor",
+		transparent: "transparent",
+		black: "#000000",
+		white: "#ffffff",
+		neutral: {
+			50: "#f9fafb",
+			100: "#f2f4f7",
+			200: "#eaecf0",
+			300: "#d0d5dd",
+			400: "#98a2b3",
+			500: "#667085",
+			600: "#475467",
+			700: "#344054",
+			800: "#1d2939",
+			900: "#101828"
+		},
+		darkGray: {
+			50: "#525c7a",
+			100: "#49536e",
+			200: "#414962",
+			300: "#394056",
+			400: "#313749",
+			500: "#292e3d",
+			600: "#212530",
+			700: "#191c24",
+			800: "#111318",
+			900: "#0b0d10"
+		},
+		gray: {
+			50: "#f9fafb",
+			100: "#f2f4f7",
+			200: "#eaecf0",
+			300: "#d0d5dd",
+			400: "#98a2b3",
+			500: "#667085",
+			600: "#475467",
+			700: "#344054",
+			800: "#1d2939",
+			900: "#101828"
+		},
+		blue: {
+			25: "#F5FAFF",
+			50: "#EFF8FF",
+			100: "#D1E9FF",
+			200: "#B2DDFF",
+			300: "#84CAFF",
+			400: "#53B1FD",
+			500: "#2E90FA",
+			600: "#1570EF",
+			700: "#175CD3",
+			800: "#1849A9",
+			900: "#194185"
+		},
+		green: {
+			25: "#F6FEF9",
+			50: "#ECFDF3",
+			100: "#D1FADF",
+			200: "#A6F4C5",
+			300: "#6CE9A6",
+			400: "#32D583",
+			500: "#12B76A",
+			600: "#039855",
+			700: "#027A48",
+			800: "#05603A",
+			900: "#054F31"
+		},
+		red: {
+			50: "#fef2f2",
+			100: "#fee2e2",
+			200: "#fecaca",
+			300: "#fca5a5",
+			400: "#f87171",
+			500: "#ef4444",
+			600: "#dc2626",
+			700: "#b91c1c",
+			800: "#991b1b",
+			900: "#7f1d1d",
+			950: "#450a0a"
+		},
+		yellow: {
+			25: "#FFFCF5",
+			50: "#FFFAEB",
+			100: "#FEF0C7",
+			200: "#FEDF89",
+			300: "#FEC84B",
+			400: "#FDB022",
+			500: "#F79009",
+			600: "#DC6803",
+			700: "#B54708",
+			800: "#93370D",
+			900: "#7A2E0E"
+		},
+		purple: {
+			25: "#FAFAFF",
+			50: "#F4F3FF",
+			100: "#EBE9FE",
+			200: "#D9D6FE",
+			300: "#BDB4FE",
+			400: "#9B8AFB",
+			500: "#7A5AF8",
+			600: "#6938EF",
+			700: "#5925DC",
+			800: "#4A1FB8",
+			900: "#3E1C96"
+		},
+		teal: {
+			25: "#F6FEFC",
+			50: "#F0FDF9",
+			100: "#CCFBEF",
+			200: "#99F6E0",
+			300: "#5FE9D0",
+			400: "#2ED3B7",
+			500: "#15B79E",
+			600: "#0E9384",
+			700: "#107569",
+			800: "#125D56",
+			900: "#134E48"
+		},
+		pink: {
+			25: "#fdf2f8",
+			50: "#fce7f3",
+			100: "#fbcfe8",
+			200: "#f9a8d4",
+			300: "#f472b6",
+			400: "#ec4899",
+			500: "#db2777",
+			600: "#be185d",
+			700: "#9d174d",
+			800: "#831843",
+			900: "#500724"
+		},
+		cyan: {
+			25: "#ecfeff",
+			50: "#cffafe",
+			100: "#a5f3fc",
+			200: "#67e8f9",
+			300: "#22d3ee",
+			400: "#06b6d4",
+			500: "#0891b2",
+			600: "#0e7490",
+			700: "#155e75",
+			800: "#164e63",
+			900: "#083344"
+		}
+	},
+	alpha: {
+		90: "e5",
+		70: "b3",
+		20: "33"
+	},
+	font: {
+		size: {
+			"2xs": "calc(var(--tsrd-font-size) * 0.625)",
+			xs: "calc(var(--tsrd-font-size) * 0.75)",
+			sm: "calc(var(--tsrd-font-size) * 0.875)",
+			md: "var(--tsrd-font-size)"
+		},
+		lineHeight: {
+			xs: "calc(var(--tsrd-font-size) * 1)",
+			sm: "calc(var(--tsrd-font-size) * 1.25)"
+		},
+		weight: {
+			normal: "400",
+			medium: "500",
+			semibold: "600",
+			bold: "700"
+		},
+		fontFamily: {
+			sans: "ui-sans-serif, Inter, system-ui, sans-serif, sans-serif",
+			mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`
+		}
+	},
+	border: { radius: {
+		xs: "calc(var(--tsrd-font-size) * 0.125)",
+		sm: "calc(var(--tsrd-font-size) * 0.25)",
+		md: "calc(var(--tsrd-font-size) * 0.375)",
+		full: "9999px"
+	} },
+	size: {
+		0: "0px",
+		.5: "calc(var(--tsrd-font-size) * 0.125)",
+		1: "calc(var(--tsrd-font-size) * 0.25)",
+		1.5: "calc(var(--tsrd-font-size) * 0.375)",
+		2: "calc(var(--tsrd-font-size) * 0.5)",
+		2.5: "calc(var(--tsrd-font-size) * 0.625)",
+		3: "calc(var(--tsrd-font-size) * 0.75)",
+		3.5: "calc(var(--tsrd-font-size) * 0.875)",
+		4: "calc(var(--tsrd-font-size) * 1)",
+		5: "calc(var(--tsrd-font-size) * 1.25)",
+		8: "calc(var(--tsrd-font-size) * 2)"
+	}
+};
+const stylesFactory$1 = (shadowDOMTarget) => {
+	const { colors, font, size, alpha, border } = tokens;
+	const { fontFamily, lineHeight, size: fontSize } = font;
+	const css = shadowDOMTarget ? u.bind({ target: shadowDOMTarget }) : u;
+	return {
+		devtoolsPanelContainer: css`
+      direction: ltr;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      z-index: 99999;
+      width: 100%;
+      max-height: 90%;
+      border-top: 1px solid ${colors.gray[700]};
+      transform-origin: top;
+    `,
+		devtoolsPanelContainerVisibility: (isOpen) => {
+			return css`
+        visibility: ${isOpen ? "visible" : "hidden"};
+      `;
+		},
+		devtoolsPanelContainerResizing: (isResizing) => {
+			if (isResizing()) return css`
+          transition: none;
+        `;
+			return css`
+        transition: all 0.4s ease;
+      `;
+		},
+		devtoolsPanelContainerAnimation: (isOpen, height) => {
+			if (isOpen) return css`
+          pointer-events: auto;
+          transform: translateY(0);
+        `;
+			return css`
+        pointer-events: none;
+        transform: translateY(${height}px);
+      `;
+		},
+		logo: css`
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      background-color: transparent;
+      border: none;
+      font-family: ${fontFamily.sans};
+      gap: ${tokens.size[.5]};
+      padding: 0px;
+      &:hover {
+        opacity: 0.7;
+      }
+      &:focus-visible {
+        outline-offset: 4px;
+        border-radius: ${border.radius.xs};
+        outline: 2px solid ${colors.blue[800]};
+      }
+    `,
+		tanstackLogo: css`
+      font-size: ${font.size.md};
+      font-weight: ${font.weight.bold};
+      line-height: ${font.lineHeight.xs};
+      white-space: nowrap;
+      color: ${colors.gray[300]};
+    `,
+		routerLogo: css`
+      font-weight: ${font.weight.semibold};
+      font-size: ${font.size.xs};
+      background: linear-gradient(to right, #84cc16, #10b981);
+      background-clip: text;
+      -webkit-background-clip: text;
+      line-height: 1;
+      -webkit-text-fill-color: transparent;
+      white-space: nowrap;
+    `,
+		devtoolsPanel: css`
+      display: flex;
+      font-size: ${fontSize.sm};
+      font-family: ${fontFamily.sans};
+      background-color: ${colors.darkGray[700]};
+      color: ${colors.gray[300]};
+
+      @media (max-width: 700px) {
+        flex-direction: column;
+      }
+      @media (max-width: 600px) {
+        font-size: ${fontSize.xs};
+      }
+    `,
+		dragHandle: css`
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 4px;
+      cursor: row-resize;
+      z-index: 100000;
+      &:hover {
+        background-color: ${colors.purple[400]}${alpha[90]};
+      }
+    `,
+		firstContainer: css`
+      flex: 1 1 500px;
+      min-height: 40%;
+      max-height: 100%;
+      overflow: auto;
+      border-right: 1px solid ${colors.gray[700]};
+      display: flex;
+      flex-direction: column;
+    `,
+		routerExplorerContainer: css`
+      overflow-y: auto;
+      flex: 1;
+    `,
+		routerExplorer: css`
+      padding: ${tokens.size[2]};
+    `,
+		row: css`
+      display: flex;
+      align-items: center;
+      padding: ${tokens.size[2]} ${tokens.size[2.5]};
+      gap: ${tokens.size[2.5]};
+      border-bottom: ${colors.darkGray[500]} 1px solid;
+      align-items: center;
+    `,
+		detailsHeader: css`
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      background-color: ${colors.darkGray[600]};
+      padding: 0px ${tokens.size[2]};
+      font-weight: ${font.weight.medium};
+      font-size: ${font.size.xs};
+      min-height: ${tokens.size[8]};
+      line-height: ${font.lineHeight.xs};
+      text-align: left;
+      display: flex;
+      align-items: center;
+    `,
+		maskedBadge: css`
+      background: ${colors.yellow[900]}${alpha[70]};
+      color: ${colors.yellow[300]};
+      display: inline-block;
+      padding: ${tokens.size[0]} ${tokens.size[2.5]};
+      border-radius: ${border.radius.full};
+      font-size: ${font.size.xs};
+      font-weight: ${font.weight.normal};
+      border: 1px solid ${colors.yellow[300]};
+    `,
+		maskedLocation: css`
+      color: ${colors.yellow[300]};
+    `,
+		detailsContent: css`
+      padding: ${tokens.size[1.5]} ${tokens.size[2]};
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: ${font.size.xs};
+    `,
+		routeMatchesToggle: css`
+      display: flex;
+      align-items: center;
+      border: 1px solid ${colors.gray[500]};
+      border-radius: ${border.radius.sm};
+      overflow: hidden;
+    `,
+		routeMatchesToggleBtn: (active, showBorder) => {
+			const classes = [css`
+        appearance: none;
+        border: none;
+        font-size: 12px;
+        padding: 4px 8px;
+        background: transparent;
+        cursor: pointer;
+        font-family: ${fontFamily.sans};
+        font-weight: ${font.weight.medium};
+      `];
+			if (active) {
+				const activeStyles = css`
+          background: ${colors.darkGray[400]};
+          color: ${colors.gray[300]};
+        `;
+				classes.push(activeStyles);
+			} else {
+				const inactiveStyles = css`
+          color: ${colors.gray[500]};
+          background: ${colors.darkGray[800]}${alpha[20]};
+        `;
+				classes.push(inactiveStyles);
+			}
+			if (showBorder) classes.push(css`
+          border-right: 1px solid ${tokens.colors.gray[500]};
+        `);
+			return classes;
+		},
+		detailsHeaderInfo: css`
+      flex: 1;
+      justify-content: flex-end;
+      display: flex;
+      align-items: center;
+      font-weight: ${font.weight.normal};
+      color: ${colors.gray[400]};
+    `,
+		matchRow: (active) => {
+			const classes = [css`
+        display: flex;
+        border-bottom: 1px solid ${colors.darkGray[400]};
+        cursor: pointer;
+        align-items: center;
+        padding: ${size[1]} ${size[2]};
+        gap: ${size[2]};
+        font-size: ${fontSize.xs};
+        color: ${colors.gray[300]};
+      `];
+			if (active) {
+				const activeStyles = css`
+          background: ${colors.darkGray[500]};
+        `;
+				classes.push(activeStyles);
+			}
+			return classes;
+		},
+		matchIndicator: (color) => {
+			const classes = [css`
+        flex: 0 0 auto;
+        width: ${size[3]};
+        height: ${size[3]};
+        background: ${colors[color][900]};
+        border: 1px solid ${colors[color][500]};
+        border-radius: ${border.radius.full};
+        transition: all 0.25s ease-out;
+        box-sizing: border-box;
+      `];
+			if (color === "gray") {
+				const grayStyles = css`
+          background: ${colors.gray[700]};
+          border-color: ${colors.gray[400]};
+        `;
+				classes.push(grayStyles);
+			}
+			return classes;
+		},
+		matchID: css`
+      flex: 1;
+      line-height: ${lineHeight["xs"]};
+    `,
+		ageTicker: (showWarning) => {
+			const classes = [css`
+        display: flex;
+        gap: ${size[1]};
+        font-size: ${fontSize.xs};
+        color: ${colors.gray[400]};
+        font-variant-numeric: tabular-nums;
+        line-height: ${lineHeight["xs"]};
+      `];
+			if (showWarning) {
+				const warningStyles = css`
+          color: ${colors.yellow[400]};
+        `;
+				classes.push(warningStyles);
+			}
+			return classes;
+		},
+		secondContainer: css`
+      flex: 1 1 500px;
+      min-height: 40%;
+      max-height: 100%;
+      overflow: auto;
+      border-right: 1px solid ${colors.gray[700]};
+      display: flex;
+      flex-direction: column;
+    `,
+		thirdContainer: css`
+      flex: 1 1 500px;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      border-right: 1px solid ${colors.gray[700]};
+
+      @media (max-width: 700px) {
+        border-top: 2px solid ${colors.gray[700]};
+      }
+    `,
+		fourthContainer: css`
+      flex: 1 1 500px;
+      min-height: 40%;
+      max-height: 100%;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+    `,
+		routesContainer: css`
+      overflow-x: auto;
+      overflow-y: visible;
+    `,
+		routesRowContainer: (active, isMatch) => {
+			const classes = [css`
+        display: flex;
+        border-bottom: 1px solid ${colors.darkGray[400]};
+        align-items: center;
+        padding: ${size[1]} ${size[2]};
+        gap: ${size[2]};
+        font-size: ${fontSize.xs};
+        color: ${colors.gray[300]};
+        cursor: ${isMatch ? "pointer" : "default"};
+        line-height: ${lineHeight["xs"]};
+      `];
+			if (active) {
+				const activeStyles = css`
+          background: ${colors.darkGray[500]};
+        `;
+				classes.push(activeStyles);
+			}
+			return classes;
+		},
+		routesRow: (isMatch) => {
+			const classes = [css`
+        flex: 1 0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: ${fontSize.xs};
+        line-height: ${lineHeight["xs"]};
+      `];
+			if (!isMatch) {
+				const matchStyles = css`
+          color: ${colors.gray[400]};
+        `;
+				classes.push(matchStyles);
+			}
+			return classes;
+		},
+		routesRowInner: css`
+      display: 'flex';
+      align-items: 'center';
+      flex-grow: 1;
+      min-width: 0;
+    `,
+		routeParamInfo: css`
+      color: ${colors.gray[400]};
+      font-size: ${fontSize.xs};
+      line-height: ${lineHeight["xs"]};
+    `,
+		nestedRouteRow: (isRoot) => {
+			return css`
+        margin-left: ${isRoot ? 0 : size[3.5]};
+        border-left: ${isRoot ? "" : `solid 1px ${colors.gray[700]}`};
+      `;
+		},
+		code: css`
+      font-size: ${fontSize.xs};
+      line-height: ${lineHeight["xs"]};
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    `,
+		matchesContainer: css`
+      flex: 1 1 auto;
+      overflow-y: auto;
+    `,
+		cachedMatchesContainer: css`
+      flex: 1 1 auto;
+      overflow-y: auto;
+      max-height: 50%;
+    `,
+		historyContainer: css`
+      display: flex;
+      flex: 1 1 auto;
+      overflow-y: auto;
+      max-height: 50%;
+    `,
+		historyOverflowContainer: css`
+      padding: ${size[1]} ${size[2]};
+      font-size: ${tokens.font.size.xs};
+    `,
+		maskedBadgeContainer: css`
+      flex: 1;
+      justify-content: flex-end;
+      display: flex;
+    `,
+		matchDetails: css`
+      display: flex;
+      flex-direction: column;
+      padding: ${tokens.size[2]};
+      font-size: ${tokens.font.size.xs};
+      color: ${tokens.colors.gray[300]};
+      line-height: ${tokens.font.lineHeight.sm};
+    `,
+		matchStatus: (status, isFetching) => {
+			const color = isFetching && status === "success" ? isFetching === "beforeLoad" ? "purple" : "blue" : {
+				pending: "yellow",
+				success: "green",
+				error: "red",
+				notFound: "purple",
+				redirected: "gray"
+			}[status];
+			return css`
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 40px;
+        border-radius: ${tokens.border.radius.sm};
+        font-weight: ${tokens.font.weight.normal};
+        background-color: ${tokens.colors[color][900]}${tokens.alpha[90]};
+        color: ${tokens.colors[color][300]};
+        border: 1px solid ${tokens.colors[color][600]};
+        margin-bottom: ${tokens.size[2]};
+        transition: all 0.25s ease-out;
+      `;
+		},
+		matchDetailsInfo: css`
+      display: flex;
+      justify-content: flex-end;
+      flex: 1;
+    `,
+		matchDetailsInfoLabel: css`
+      display: flex;
+    `,
+		mainCloseBtn: css`
+      background: ${colors.darkGray[700]};
+      padding: ${size[1]} ${size[2]} ${size[1]} ${size[1.5]};
+      border-radius: ${border.radius.md};
+      position: fixed;
+      z-index: 99999;
+      display: inline-flex;
+      width: fit-content;
+      cursor: pointer;
+      appearance: none;
+      border: 0;
+      gap: 8px;
+      align-items: center;
+      border: 1px solid ${colors.gray[500]};
+      font-size: ${font.size.xs};
+      cursor: pointer;
+      transition: all 0.25s ease-out;
+
+      &:hover {
+        background: ${colors.darkGray[500]};
+      }
+    `,
+		mainCloseBtnPosition: (position) => {
+			return css`
+        ${position === "top-left" ? `top: ${size[2]}; left: ${size[2]};` : ""}
+        ${position === "top-right" ? `top: ${size[2]}; right: ${size[2]};` : ""}
+        ${position === "bottom-left" ? `bottom: ${size[2]}; left: ${size[2]};` : ""}
+        ${position === "bottom-right" ? `bottom: ${size[2]}; right: ${size[2]};` : ""}
+      `;
+		},
+		mainCloseBtnAnimation: (isOpen) => {
+			if (!isOpen) return css`
+          opacity: 1;
+          pointer-events: auto;
+          visibility: visible;
+        `;
+			return css`
+        opacity: 0;
+        pointer-events: none;
+        visibility: hidden;
+      `;
+		},
+		routerLogoCloseButton: css`
+      font-weight: ${font.weight.semibold};
+      font-size: ${font.size.xs};
+      background: linear-gradient(to right, #98f30c, #00f4a3);
+      background-clip: text;
+      -webkit-background-clip: text;
+      line-height: 1;
+      -webkit-text-fill-color: transparent;
+      white-space: nowrap;
+    `,
+		mainCloseBtnDivider: css`
+      width: 1px;
+      background: ${tokens.colors.gray[600]};
+      height: 100%;
+      border-radius: 999999px;
+      color: transparent;
+    `,
+		mainCloseBtnIconContainer: css`
+      position: relative;
+      width: ${size[5]};
+      height: ${size[5]};
+      background: pink;
+      border-radius: 999999px;
+      overflow: hidden;
+    `,
+		mainCloseBtnIconOuter: css`
+      width: ${size[5]};
+      height: ${size[5]};
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      filter: blur(3px) saturate(1.8) contrast(2);
+    `,
+		mainCloseBtnIconInner: css`
+      width: ${size[4]};
+      height: ${size[4]};
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    `,
+		panelCloseBtn: css`
+      position: absolute;
+      cursor: pointer;
+      z-index: 100001;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      outline: none;
+      background-color: ${colors.darkGray[700]};
+      &:hover {
+        background-color: ${colors.darkGray[500]};
+      }
+
+      top: 0;
+      right: ${size[2]};
+      transform: translate(0, -100%);
+      border-right: ${colors.darkGray[300]} 1px solid;
+      border-left: ${colors.darkGray[300]} 1px solid;
+      border-top: ${colors.darkGray[300]} 1px solid;
+      border-bottom: none;
+      border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;
+      padding: ${size[1]} ${size[1.5]} ${size[.5]} ${size[1.5]};
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        top: 100%;
+        left: -${size[2.5]};
+        height: ${size[1.5]};
+        width: calc(100% + ${size[5]});
+      }
+    `,
+		panelCloseBtnIcon: css`
+      color: ${colors.gray[400]};
+      width: ${size[2]};
+      height: ${size[2]};
+    `,
+		navigateButton: css`
+      background: none;
+      border: none;
+      padding: 0 0 0 4px;
+      margin: 0;
+      color: ${colors.gray[400]};
+      font-size: ${fontSize.md};
+      cursor: pointer;
+      line-height: 1;
+      vertical-align: middle;
+      margin-right: 0.5ch;
+      flex-shrink: 0;
+      &:hover {
+        color: ${colors.blue[300]};
+      }
+    `
+	};
+};
+function useStyles$1() {
+	const [_styles] = createSignal(stylesFactory$1(useContext(ShadowDomTargetContext)));
+	return _styles;
+}
+const getItem = (key) => {
+	try {
+		const itemValue = localStorage.getItem(key);
+		if (typeof itemValue === "string") return JSON.parse(itemValue);
+		return;
+	} catch {
+		return;
+	}
+};
+function useLocalStorage(key, defaultValue) {
+	const [value, setValue] = createSignal();
+	createEffect(() => {
+		const initialValue = getItem(key);
+		if (typeof initialValue === "undefined" || initialValue === null) setValue(typeof defaultValue === "function" ? defaultValue() : defaultValue);
+		else setValue(initialValue);
+	});
+	const setter = (updater) => {
+		setValue((old) => {
+			let newVal = updater;
+			if (typeof updater == "function") newVal = updater(old);
+			try {
+				localStorage.setItem(key, JSON.stringify(newVal));
+			} catch {}
+			return newVal;
+		});
+	};
+	return [value, setter];
+}
+var _tmpl$$3 = /* @__PURE__ */ template(`<span><svg xmlns=http://www.w3.org/2000/svg width=12 height=12 fill=none viewBox="0 0 24 24"><path stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 18l6-6-6-6">`), _tmpl$2$1 = /* @__PURE__ */ template(`<div>`), _tmpl$3$1 = /* @__PURE__ */ template(`<button><span> `), _tmpl$4$1 = /* @__PURE__ */ template(`<div><div><button> [<!> ... <!>]`), _tmpl$5$1 = /* @__PURE__ */ template(`<button><span></span> 🔄 `), _tmpl$6$1 = /* @__PURE__ */ template(`<span>:`), _tmpl$7$1 = /* @__PURE__ */ template(`<span>`);
+const Expander = ({ expanded, style = {} }) => {
+	const styles = useStyles();
+	return (() => {
+		var _el$ = _tmpl$$3(), _el$2 = _el$.firstChild;
+		createRenderEffect((_p$) => {
+			var _v$ = styles().expander, _v$2 = clsx(styles().expanderIcon(expanded));
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$2, "class", _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
+};
+function chunkArray(array, size) {
+	if (size < 1) return [];
+	let i$1 = 0;
+	const result = [];
+	while (i$1 < array.length) {
+		result.push(array.slice(i$1, i$1 + size));
+		i$1 = i$1 + size;
+	}
+	return result;
+}
+function isIterable(x) {
+	return Symbol.iterator in x;
+}
+function Explorer({ value, defaultExpanded, pageSize = 100, filterSubEntries, ...rest }) {
+	const [expanded, setExpanded] = createSignal(Boolean(defaultExpanded));
+	const toggleExpanded = () => setExpanded((old) => !old);
+	const type = createMemo(() => typeof value());
+	const subEntries = createMemo(() => {
+		let entries = [];
+		const makeProperty = (sub) => {
+			const subDefaultExpanded = defaultExpanded === true ? { [sub.label]: true } : defaultExpanded?.[sub.label];
+			return {
+				...sub,
+				value: () => sub.value,
+				defaultExpanded: subDefaultExpanded
+			};
+		};
+		if (Array.isArray(value())) entries = value().map((d$1, i$1) => makeProperty({
+			label: i$1.toString(),
+			value: d$1
+		}));
+		else if (value() !== null && typeof value() === "object" && isIterable(value()) && typeof value()[Symbol.iterator] === "function") entries = Array.from(value(), (val, i$1) => makeProperty({
+			label: i$1.toString(),
+			value: val
+		}));
+		else if (typeof value() === "object" && value() !== null) entries = Object.entries(value()).map(([key, val]) => makeProperty({
+			label: key,
+			value: val
+		}));
+		return filterSubEntries ? filterSubEntries(entries) : entries;
+	});
+	const subEntryPages = createMemo(() => chunkArray(subEntries(), pageSize));
+	const [expandedPages, setExpandedPages] = createSignal([]);
+	const [valueSnapshot, setValueSnapshot] = createSignal(void 0);
+	const styles = useStyles();
+	const refreshValueSnapshot = () => {
+		setValueSnapshot(value()());
+	};
+	const handleEntry = (entry) => createComponent(Explorer, mergeProps({
+		value,
+		filterSubEntries
+	}, rest, entry));
+	return (() => {
+		var _el$3 = _tmpl$2$1();
+		insert(_el$3, (() => {
+			var _c$ = memo(() => !!subEntryPages().length);
+			return () => _c$() ? [(() => {
+				var _el$4 = _tmpl$3$1(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild;
+				_el$4.$$click = () => toggleExpanded();
+				insert(_el$4, createComponent(Expander, { get expanded() {
+					return expanded() ?? false;
+				} }), _el$5);
+				insert(_el$4, () => rest.label, _el$5);
+				insert(_el$5, () => String(type).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$6);
+				insert(_el$5, () => subEntries().length, _el$6);
+				insert(_el$5, () => subEntries().length > 1 ? `items` : `item`, null);
+				createRenderEffect((_p$) => {
+					var _v$3 = styles().expandButton, _v$4 = styles().info;
+					_v$3 !== _p$.e && className(_el$4, _p$.e = _v$3);
+					_v$4 !== _p$.t && className(_el$5, _p$.t = _v$4);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$4;
+			})(), memo(() => memo(() => !!(expanded() ?? false))() ? memo(() => subEntryPages().length === 1)() ? (() => {
+				var _el$7 = _tmpl$2$1();
+				insert(_el$7, () => subEntries().map((entry, index) => handleEntry(entry)));
+				createRenderEffect(() => className(_el$7, styles().subEntries));
+				return _el$7;
+			})() : (() => {
+				var _el$8 = _tmpl$2$1();
+				insert(_el$8, () => subEntryPages().map((entries, index) => {
+					return (() => {
+						var _el$9 = _tmpl$4$1(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$15 = _el$10.nextSibling, _el$16 = _el$15.nextSibling.nextSibling;
+						_el$16.nextSibling;
+						_el$1.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d$1) => d$1 !== index) : [...old, index]);
+						insert(_el$1, createComponent(Expander, { get expanded() {
+							return expandedPages().includes(index);
+						} }), _el$10);
+						insert(_el$1, index * pageSize, _el$15);
+						insert(_el$1, index * pageSize + pageSize - 1, _el$16);
+						insert(_el$0, (() => {
+							var _c$2 = memo(() => !!expandedPages().includes(index));
+							return () => _c$2() ? (() => {
+								var _el$17 = _tmpl$2$1();
+								insert(_el$17, () => entries.map((entry) => handleEntry(entry)));
+								createRenderEffect(() => className(_el$17, styles().subEntries));
+								return _el$17;
+							})() : null;
+						})(), null);
+						createRenderEffect((_p$) => {
+							var _v$5 = styles().entry, _v$6 = clsx(styles().labelButton, "labelButton");
+							_v$5 !== _p$.e && className(_el$0, _p$.e = _v$5);
+							_v$6 !== _p$.t && className(_el$1, _p$.t = _v$6);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0
+						});
+						return _el$9;
+					})();
+				}));
+				createRenderEffect(() => className(_el$8, styles().subEntries));
+				return _el$8;
+			})() : null)] : memo(() => type() === "function")() ? createComponent(Explorer, {
+				get label() {
+					return (() => {
+						var _el$18 = _tmpl$5$1(), _el$19 = _el$18.firstChild;
+						_el$18.$$click = refreshValueSnapshot;
+						insert(_el$19, () => rest.label);
+						createRenderEffect(() => className(_el$18, styles().refreshValueBtn));
+						return _el$18;
+					})();
+				},
+				value: valueSnapshot,
+				defaultExpanded: {}
+			}) : [
+				(() => {
+					var _el$20 = _tmpl$6$1(), _el$21 = _el$20.firstChild;
+					insert(_el$20, () => rest.label, _el$21);
+					return _el$20;
+				})(),
+				" ",
+				(() => {
+					var _el$22 = _tmpl$7$1();
+					insert(_el$22, () => displayValue(value()));
+					createRenderEffect(() => className(_el$22, styles().value));
+					return _el$22;
+				})()
+			];
+		})());
+		createRenderEffect(() => className(_el$3, styles().entry));
+		return _el$3;
+	})();
+}
+const stylesFactory = (shadowDOMTarget) => {
+	const { colors, font, size } = tokens;
+	const { fontFamily, lineHeight, size: fontSize } = font;
+	const css = shadowDOMTarget ? u.bind({ target: shadowDOMTarget }) : u;
+	return {
+		entry: css`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+      line-height: ${lineHeight.sm};
+      outline: none;
+      word-break: break-word;
+    `,
+		labelButton: css`
+      cursor: pointer;
+      color: inherit;
+      font: inherit;
+      outline: inherit;
+      background: transparent;
+      border: none;
+      padding: 0;
+    `,
+		expander: css`
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: ${size[3]};
+      height: ${size[3]};
+      padding-left: 3px;
+      box-sizing: content-box;
+    `,
+		expanderIcon: (expanded) => {
+			if (expanded) return css`
+          transform: rotate(90deg);
+          transition: transform 0.1s ease;
+        `;
+			return css`
+        transform: rotate(0deg);
+        transition: transform 0.1s ease;
+      `;
+		},
+		expandButton: css`
+      display: flex;
+      gap: ${size[1]};
+      align-items: center;
+      cursor: pointer;
+      color: inherit;
+      font: inherit;
+      outline: inherit;
+      background: transparent;
+      border: none;
+      padding: 0;
+    `,
+		value: css`
+      color: ${colors.purple[400]};
+    `,
+		subEntries: css`
+      margin-left: ${size[2]};
+      padding-left: ${size[2]};
+      border-left: 2px solid ${colors.darkGray[400]};
+    `,
+		info: css`
+      color: ${colors.gray[500]};
+      font-size: ${fontSize["2xs"]};
+      padding-left: ${size[1]};
+    `,
+		refreshValueBtn: css`
+      appearance: none;
+      border: 0;
+      cursor: pointer;
+      background: transparent;
+      color: inherit;
+      padding: 0;
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+    `
+	};
+};
+function useStyles() {
+	const [_styles] = createSignal(stylesFactory(useContext(ShadowDomTargetContext)));
+	return _styles;
+}
+delegateEvents(["click"]);
+var _tmpl$$2 = /* @__PURE__ */ template(`<div><div></div><div>/</div><div></div><div>/</div><div>`);
+function formatTime(ms) {
+	const units = [
+		"s",
+		"min",
+		"h",
+		"d"
+	];
+	const values = [
+		ms / 1e3,
+		ms / 6e4,
+		ms / 36e5,
+		ms / 864e5
+	];
+	let chosenUnitIndex = 0;
+	for (let i$1 = 1; i$1 < values.length; i$1++) {
+		if (values[i$1] < 1) break;
+		chosenUnitIndex = i$1;
+	}
+	return new Intl.NumberFormat(navigator.language, {
+		compactDisplay: "short",
+		notation: "compact",
+		maximumFractionDigits: 0
+	}).format(values[chosenUnitIndex]) + units[chosenUnitIndex];
+}
+function AgeTicker({ match, router }) {
+	const styles = useStyles$1();
+	if (!match) return null;
+	const route = router().looseRoutesById[match.routeId];
+	if (!route.options.loader) return null;
+	const age = Date.now() - match.updatedAt;
+	const staleTime = route.options.staleTime ?? router().options.defaultStaleTime ?? 0;
+	const gcTime = route.options.gcTime ?? router().options.defaultGcTime ?? 1800 * 1e3;
+	return (() => {
+		var _el$ = _tmpl$$2(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling.nextSibling, _el$6 = _el$4.nextSibling.nextSibling;
+		insert(_el$2, () => formatTime(age));
+		insert(_el$4, () => formatTime(staleTime));
+		insert(_el$6, () => formatTime(gcTime));
+		createRenderEffect(() => className(_el$, clsx(styles().ageTicker(age > staleTime))));
+		return _el$;
+	})();
+}
+var _tmpl$$1 = /* @__PURE__ */ template(`<button type=button>➔`);
+function NavigateButton({ to, params, search, router }) {
+	const styles = useStyles$1();
+	return (() => {
+		var _el$ = _tmpl$$1();
+		_el$.$$click = (e$1) => {
+			e$1.stopPropagation();
+			router().navigate({
+				to,
+				params,
+				search
+			});
+		};
+		setAttribute(_el$, "title", `Navigate to ${to}`);
+		createRenderEffect(() => className(_el$, styles().navigateButton));
+		return _el$;
+	})();
+}
+delegateEvents(["click"]);
+var _tmpl$ = /* @__PURE__ */ template(`<button><div>TANSTACK</div><div>TanStack Router v1`), _tmpl$2 = /* @__PURE__ */ template(`<div style=display:flex;align-items:center;width:100%><div style=flex-grow:1;min-width:0>`), _tmpl$3 = /* @__PURE__ */ template(`<code> `), _tmpl$4 = /* @__PURE__ */ template(`<code>`), _tmpl$5 = /* @__PURE__ */ template(`<div><div role=button><div>`), _tmpl$6 = /* @__PURE__ */ template(`<div>`), _tmpl$7 = /* @__PURE__ */ template(`<div><ul>`), _tmpl$8 = /* @__PURE__ */ template(`<div><button><svg xmlns=http://www.w3.org/2000/svg width=10 height=6 fill=none viewBox="0 0 10 6"><path stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=1.667 d="M1 1l4 4 4-4"></path></svg></button><div><div></div><div><div></div></div></div><div><div><div><span>Pathname</span></div><div><code></code></div><div><div><button type=button>Routes</button><button type=button>Matches</button><button type=button>History</button></div><div><div>age / staleTime / gcTime</div></div></div><div>`), _tmpl$9 = /* @__PURE__ */ template(`<div><span>masked`), _tmpl$0 = /* @__PURE__ */ template(`<div role=button><div>`), _tmpl$1 = /* @__PURE__ */ template(`<li><div>`), _tmpl$10 = /* @__PURE__ */ template(`<li>This panel displays the most recent 15 navigations.`), _tmpl$11 = /* @__PURE__ */ template(`<div><div><div>Cached Matches</div><div>age / staleTime / gcTime</div></div><div>`), _tmpl$12 = /* @__PURE__ */ template(`<div><div>Match Details</div><div><div><div><div></div></div><div><div>ID:</div><div><code></code></div></div><div><div>State:</div><div></div></div><div><div>Last Updated:</div><div></div></div></div></div><div>Explorer</div><div>`), _tmpl$13 = /* @__PURE__ */ template(`<div>Loader Data`), _tmpl$14 = /* @__PURE__ */ template(`<div><div><span>Search Params</span></div><div>`), _tmpl$15 = /* @__PURE__ */ template(`<span style=margin-left:0.5rem>`), _tmpl$16 = /* @__PURE__ */ template(`<button type=button aria-label="Copy value to clipboard"style=cursor:pointer>`);
+const HISTORY_LIMIT = 15;
+function Logo(props) {
+	const { className: className$1, ...rest } = props;
+	const styles = useStyles$1();
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+		spread(_el$, mergeProps(rest, { get ["class"]() {
+			return clsx(styles().logo, className$1 ? className$1() : "");
+		} }), false, true);
+		createRenderEffect((_p$) => {
+			var _v$ = styles().tanstackLogo, _v$2 = styles().routerLogo;
+			_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+			_v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
+}
+function NavigateLink(props) {
+	return (() => {
+		var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild;
+		insert(_el$4, () => props.left, _el$5);
+		insert(_el$5, () => props.children);
+		insert(_el$4, () => props.right, null);
+		createRenderEffect(() => className(_el$4, props.class));
+		return _el$4;
+	})();
+}
+function RouteComp({ routerState, router, route, isRoot, activeId, setActiveId }) {
+	const styles = useStyles$1();
+	const matches = createMemo(() => routerState().pendingMatches || routerState().matches);
+	const match = createMemo(() => routerState().matches.find((d$1) => d$1.routeId === route.id));
+	const param = createMemo(() => {
+		try {
+			if (match()?.params) {
+				const p$1 = match()?.params;
+				const r$2 = route.path || trimPath(route.id);
+				if (r$2.startsWith("$")) {
+					const trimmed = r$2.slice(1);
+					if (p$1[trimmed]) return `(${p$1[trimmed]})`;
+				}
+			}
+			return "";
+		} catch (error) {
+			return "";
+		}
+	});
+	const navigationTarget = createMemo(() => {
+		if (isRoot) return void 0;
+		if (!route.path) return void 0;
+		const allParams = Object.assign({}, ...matches().map((m) => m.params));
+		const interpolated = interpolatePath({
+			path: route.fullPath,
+			params: allParams,
+			decodeCharMap: router().pathParamsDecodeCharMap
+		});
+		return !interpolated.isMissingParams ? interpolated.interpolatedPath : void 0;
+	});
+	return (() => {
+		var _el$6 = _tmpl$5(), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild;
+		_el$7.$$click = () => {
+			if (match()) setActiveId(activeId() === route.id ? "" : route.id);
+		};
+		insert(_el$7, createComponent(NavigateLink, {
+			get ["class"]() {
+				return clsx(styles().routesRow(!!match()));
+			},
+			get left() {
+				return createComponent(Show, {
+					get when() {
+						return navigationTarget();
+					},
+					children: (navigate) => createComponent(NavigateButton, {
+						get to() {
+							return navigate();
+						},
+						router
+					})
+				});
+			},
+			get right() {
+				return createComponent(AgeTicker, {
+					get match() {
+						return match();
+					},
+					router
+				});
+			},
+			get children() {
+				return [(() => {
+					var _el$9 = _tmpl$3(), _el$0 = _el$9.firstChild;
+					insert(_el$9, () => isRoot ? rootRouteId : route.path || trimPath(route.id), _el$0);
+					createRenderEffect(() => className(_el$9, styles().code));
+					return _el$9;
+				})(), (() => {
+					var _el$1 = _tmpl$4();
+					insert(_el$1, param);
+					createRenderEffect(() => className(_el$1, styles().routeParamInfo));
+					return _el$1;
+				})()];
+			}
+		}), null);
+		insert(_el$6, (() => {
+			var _c$ = memo(() => !!route.children?.length);
+			return () => _c$() ? (() => {
+				var _el$10 = _tmpl$6();
+				insert(_el$10, () => [...route.children].sort((a$1, b$1) => {
+					return a$1.rank - b$1.rank;
+				}).map((r$2) => createComponent(RouteComp, {
+					routerState,
+					router,
+					route: r$2,
+					activeId,
+					setActiveId
+				})));
+				createRenderEffect(() => className(_el$10, styles().nestedRouteRow(!!isRoot)));
+				return _el$10;
+			})() : null;
+		})(), null);
+		createRenderEffect((_p$) => {
+			var _v$3 = `Open match details for ${route.id}`, _v$4 = clsx(styles().routesRowContainer(route.id === activeId(), !!match())), _v$5 = clsx(styles().matchIndicator(getRouteStatusColor(matches(), route)));
+			_v$3 !== _p$.e && setAttribute(_el$7, "aria-label", _p$.e = _v$3);
+			_v$4 !== _p$.t && className(_el$7, _p$.t = _v$4);
+			_v$5 !== _p$.a && className(_el$8, _p$.a = _v$5);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$6;
+	})();
+}
+const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel2({ ...props }) {
+	const { isOpen = true, setIsOpen, handleDragStart, router, routerState, shadowDOMTarget, ...panelProps } = props;
+	const { onCloseClick } = useDevtoolsOnClose();
+	const styles = useStyles$1();
+	const { className: className$1, style, ...otherPanelProps } = panelProps;
+	invariant(router, "No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.");
+	const [currentTab, setCurrentTab] = useLocalStorage("tanstackRouterDevtoolsActiveTab", "routes");
+	const [activeId, setActiveId] = useLocalStorage("tanstackRouterDevtoolsActiveRouteId", "");
+	const [history, setHistory] = createSignal([]);
+	const [hasHistoryOverflowed, setHasHistoryOverflowed] = createSignal(false);
+	createEffect(() => {
+		const matches = routerState().matches;
+		const currentMatch = matches[matches.length - 1];
+		if (!currentMatch) return;
+		const historyUntracked = untrack(() => history());
+		const lastMatch = historyUntracked[0];
+		const sameLocation = lastMatch && lastMatch.pathname === currentMatch.pathname && JSON.stringify(lastMatch.search ?? {}) === JSON.stringify(currentMatch.search ?? {});
+		if (!lastMatch || !sameLocation) {
+			if (historyUntracked.length >= HISTORY_LIMIT) setHasHistoryOverflowed(true);
+			setHistory((prev) => {
+				const newHistory = [currentMatch, ...prev];
+				newHistory.splice(HISTORY_LIMIT);
+				return newHistory;
+			});
+		}
+	});
+	const activeMatch = createMemo(() => {
+		return [
+			...routerState().pendingMatches ?? [],
+			...routerState().matches,
+			...routerState().cachedMatches
+		].find((d$1) => d$1.routeId === activeId() || d$1.id === activeId());
+	});
+	const hasSearch = createMemo(() => Object.keys(routerState().location.search).length);
+	const explorerState = createMemo(() => {
+		return {
+			...router(),
+			state: routerState()
+		};
+	});
+	const routerExplorerValue = createMemo(() => Object.fromEntries(multiSortBy(Object.keys(explorerState()), [
+		"state",
+		"routesById",
+		"routesByPath",
+		"options",
+		"manifest"
+	].map((d$1) => (dd) => dd !== d$1)).map((key) => [key, explorerState()[key]]).filter((d$1) => typeof d$1[1] !== "function" && ![
+		"__store",
+		"basepath",
+		"injectedHtml",
+		"subscribers",
+		"latestLoadPromise",
+		"navigateTimeout",
+		"resetNextScroll",
+		"tempLocationKey",
+		"latestLocation",
+		"routeTree",
+		"history"
+	].includes(d$1[0]))));
+	const activeMatchLoaderData = createMemo(() => activeMatch()?.loaderData);
+	const activeMatchValue = createMemo(() => activeMatch());
+	const locationSearchValue = createMemo(() => routerState().location.search);
+	return (() => {
+		var _el$11 = _tmpl$8(), _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$14.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild;
+		_el$20.firstChild;
+		var _el$22 = _el$20.nextSibling, _el$23 = _el$22.firstChild, _el$24 = _el$22.nextSibling, _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling, _el$28 = _el$27.nextSibling, _el$29 = _el$25.nextSibling, _el$30 = _el$24.nextSibling;
+		spread(_el$11, mergeProps({
+			get ["class"]() {
+				return clsx(styles().devtoolsPanel, "TanStackRouterDevtoolsPanel", className$1 ? className$1() : "");
+			},
+			get style() {
+				return style ? style() : "";
+			}
+		}, otherPanelProps), false, true);
+		insert(_el$11, handleDragStart ? (() => {
+			var _el$34 = _tmpl$6();
+			addEventListener(_el$34, "mousedown", handleDragStart, true);
+			createRenderEffect(() => className(_el$34, styles().dragHandle));
+			return _el$34;
+		})() : null, _el$12);
+		_el$12.$$click = (e$1) => {
+			if (setIsOpen) setIsOpen(false);
+			onCloseClick(e$1);
+		};
+		insert(_el$15, createComponent(Logo, {
+			"aria-hidden": true,
+			onClick: (e$1) => {
+				if (setIsOpen) setIsOpen(false);
+				onCloseClick(e$1);
+			}
+		}));
+		insert(_el$17, createComponent(Explorer, {
+			label: "Router",
+			value: routerExplorerValue,
+			defaultExpanded: {
+				state: {},
+				context: {},
+				options: {}
+			},
+			filterSubEntries: (subEntries) => {
+				return subEntries.filter((d$1) => typeof d$1.value() !== "function");
+			}
+		}));
+		insert(_el$20, (() => {
+			var _c$2 = memo(() => !!routerState().location.maskedLocation);
+			return () => _c$2() ? (() => {
+				var _el$35 = _tmpl$9(), _el$36 = _el$35.firstChild;
+				createRenderEffect((_p$) => {
+					var _v$24 = styles().maskedBadgeContainer, _v$25 = styles().maskedBadge;
+					_v$24 !== _p$.e && className(_el$35, _p$.e = _v$24);
+					_v$25 !== _p$.t && className(_el$36, _p$.t = _v$25);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$35;
+			})() : null;
+		})(), null);
+		insert(_el$23, () => routerState().location.pathname);
+		insert(_el$22, (() => {
+			var _c$3 = memo(() => !!routerState().location.maskedLocation);
+			return () => _c$3() ? (() => {
+				var _el$37 = _tmpl$4();
+				insert(_el$37, () => routerState().location.maskedLocation?.pathname);
+				createRenderEffect(() => className(_el$37, styles().maskedLocation));
+				return _el$37;
+			})() : null;
+		})(), null);
+		_el$26.$$click = () => {
+			setCurrentTab("routes");
+		};
+		_el$27.$$click = () => {
+			setCurrentTab("matches");
+		};
+		_el$28.$$click = () => {
+			setCurrentTab("history");
+		};
+		insert(_el$30, createComponent(Switch, { get children() {
+			return [
+				createComponent(Match, {
+					get when() {
+						return currentTab() === "routes";
+					},
+					get children() {
+						return createComponent(RouteComp, {
+							routerState,
+							router,
+							get route() {
+								return router().routeTree;
+							},
+							isRoot: true,
+							activeId,
+							setActiveId
+						});
+					}
+				}),
+				createComponent(Match, {
+					get when() {
+						return currentTab() === "matches";
+					},
+					get children() {
+						var _el$31 = _tmpl$6();
+						insert(_el$31, () => (routerState().pendingMatches?.length ? routerState().pendingMatches : routerState().matches)?.map((match, _i) => {
+							return (() => {
+								var _el$38 = _tmpl$0(), _el$39 = _el$38.firstChild;
+								_el$38.$$click = () => setActiveId(activeId() === match.id ? "" : match.id);
+								insert(_el$38, createComponent(NavigateLink, {
+									get left() {
+										return createComponent(NavigateButton, {
+											get to() {
+												return match.pathname;
+											},
+											get params() {
+												return match.params;
+											},
+											get search() {
+												return match.search;
+											},
+											router
+										});
+									},
+									get right() {
+										return createComponent(AgeTicker, {
+											match,
+											router
+										});
+									},
+									get children() {
+										var _el$40 = _tmpl$4();
+										insert(_el$40, () => `${match.routeId === rootRouteId ? rootRouteId : match.pathname}`);
+										createRenderEffect(() => className(_el$40, styles().matchID));
+										return _el$40;
+									}
+								}), null);
+								createRenderEffect((_p$) => {
+									var _v$26 = `Open match details for ${match.id}`, _v$27 = clsx(styles().matchRow(match === activeMatch())), _v$28 = clsx(styles().matchIndicator(getStatusColor(match)));
+									_v$26 !== _p$.e && setAttribute(_el$38, "aria-label", _p$.e = _v$26);
+									_v$27 !== _p$.t && className(_el$38, _p$.t = _v$27);
+									_v$28 !== _p$.a && className(_el$39, _p$.a = _v$28);
+									return _p$;
+								}, {
+									e: void 0,
+									t: void 0,
+									a: void 0
+								});
+								return _el$38;
+							})();
+						}));
+						return _el$31;
+					}
+				}),
+				createComponent(Match, {
+					get when() {
+						return currentTab() === "history";
+					},
+					get children() {
+						var _el$32 = _tmpl$7(), _el$33 = _el$32.firstChild;
+						insert(_el$33, createComponent(For, {
+							get each() {
+								return history();
+							},
+							children: (match, index) => (() => {
+								var _el$41 = _tmpl$1(), _el$42 = _el$41.firstChild;
+								insert(_el$41, createComponent(NavigateLink, {
+									get left() {
+										return createComponent(NavigateButton, {
+											get to() {
+												return match.pathname;
+											},
+											get params() {
+												return match.params;
+											},
+											get search() {
+												return match.search;
+											},
+											router
+										});
+									},
+									get right() {
+										return createComponent(AgeTicker, {
+											match,
+											router
+										});
+									},
+									get children() {
+										var _el$43 = _tmpl$4();
+										insert(_el$43, () => `${match.routeId === rootRouteId ? rootRouteId : match.pathname}`);
+										createRenderEffect(() => className(_el$43, styles().matchID));
+										return _el$43;
+									}
+								}), null);
+								createRenderEffect((_p$) => {
+									var _v$29 = clsx(styles().matchRow(match === activeMatch())), _v$30 = clsx(styles().matchIndicator(index() === 0 ? "green" : "gray"));
+									_v$29 !== _p$.e && className(_el$41, _p$.e = _v$29);
+									_v$30 !== _p$.t && className(_el$42, _p$.t = _v$30);
+									return _p$;
+								}, {
+									e: void 0,
+									t: void 0
+								});
+								return _el$41;
+							})()
+						}), null);
+						insert(_el$33, (() => {
+							var _c$4 = memo(() => !!hasHistoryOverflowed());
+							return () => _c$4() ? (() => {
+								var _el$44 = _tmpl$10();
+								createRenderEffect(() => className(_el$44, styles().historyOverflowContainer));
+								return _el$44;
+							})() : null;
+						})(), null);
+						return _el$32;
+					}
+				})
+			];
+		} }));
+		insert(_el$18, (() => {
+			var _c$5 = memo(() => !!routerState().cachedMatches.length);
+			return () => _c$5() ? (() => {
+				var _el$45 = _tmpl$11(), _el$46 = _el$45.firstChild, _el$48 = _el$46.firstChild.nextSibling, _el$49 = _el$46.nextSibling;
+				insert(_el$49, () => routerState().cachedMatches.map((match) => {
+					return (() => {
+						var _el$50 = _tmpl$0(), _el$51 = _el$50.firstChild;
+						_el$50.$$click = () => setActiveId(activeId() === match.id ? "" : match.id);
+						insert(_el$50, createComponent(NavigateLink, {
+							get left() {
+								return createComponent(NavigateButton, {
+									get to() {
+										return match.pathname;
+									},
+									get params() {
+										return match.params;
+									},
+									get search() {
+										return match.search;
+									},
+									router
+								});
+							},
+							get right() {
+								return createComponent(AgeTicker, {
+									match,
+									router
+								});
+							},
+							get children() {
+								var _el$52 = _tmpl$4();
+								insert(_el$52, () => `${match.id}`);
+								createRenderEffect(() => className(_el$52, styles().matchID));
+								return _el$52;
+							}
+						}), null);
+						createRenderEffect((_p$) => {
+							var _v$34 = `Open match details for ${match.id}`, _v$35 = clsx(styles().matchRow(match === activeMatch())), _v$36 = clsx(styles().matchIndicator(getStatusColor(match)));
+							_v$34 !== _p$.e && setAttribute(_el$50, "aria-label", _p$.e = _v$34);
+							_v$35 !== _p$.t && className(_el$50, _p$.t = _v$35);
+							_v$36 !== _p$.a && className(_el$51, _p$.a = _v$36);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0,
+							a: void 0
+						});
+						return _el$50;
+					})();
+				}));
+				createRenderEffect((_p$) => {
+					var _v$31 = styles().cachedMatchesContainer, _v$32 = styles().detailsHeader, _v$33 = styles().detailsHeaderInfo;
+					_v$31 !== _p$.e && className(_el$45, _p$.e = _v$31);
+					_v$32 !== _p$.t && className(_el$46, _p$.t = _v$32);
+					_v$33 !== _p$.a && className(_el$48, _p$.a = _v$33);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				});
+				return _el$45;
+			})() : null;
+		})(), null);
+		insert(_el$11, (() => {
+			var _c$6 = memo(() => !!(activeMatch() && activeMatch()?.status));
+			return () => _c$6() ? (() => {
+				var _el$53 = _tmpl$12(), _el$54 = _el$53.firstChild, _el$55 = _el$54.nextSibling, _el$56 = _el$55.firstChild, _el$57 = _el$56.firstChild, _el$58 = _el$57.firstChild, _el$59 = _el$57.nextSibling, _el$61 = _el$59.firstChild.nextSibling, _el$62 = _el$61.firstChild, _el$63 = _el$59.nextSibling, _el$65 = _el$63.firstChild.nextSibling, _el$66 = _el$63.nextSibling, _el$68 = _el$66.firstChild.nextSibling, _el$69 = _el$55.nextSibling, _el$70 = _el$69.nextSibling;
+				insert(_el$58, (() => {
+					var _c$8 = memo(() => !!(activeMatch()?.status === "success" && activeMatch()?.isFetching));
+					return () => _c$8() ? "fetching" : activeMatch()?.status;
+				})());
+				insert(_el$62, () => activeMatch()?.id);
+				insert(_el$65, (() => {
+					var _c$9 = memo(() => !!routerState().pendingMatches?.find((d$1) => d$1.id === activeMatch()?.id));
+					return () => _c$9() ? "Pending" : routerState().matches.find((d$1) => d$1.id === activeMatch()?.id) ? "Active" : "Cached";
+				})());
+				insert(_el$68, (() => {
+					var _c$0 = memo(() => !!activeMatch()?.updatedAt);
+					return () => _c$0() ? new Date(activeMatch()?.updatedAt).toLocaleTimeString() : "N/A";
+				})());
+				insert(_el$53, (() => {
+					var _c$1 = memo(() => !!activeMatchLoaderData());
+					return () => _c$1() ? [(() => {
+						var _el$71 = _tmpl$13();
+						createRenderEffect(() => className(_el$71, styles().detailsHeader));
+						return _el$71;
+					})(), (() => {
+						var _el$72 = _tmpl$6();
+						insert(_el$72, createComponent(Explorer, {
+							label: "loaderData",
+							value: activeMatchLoaderData,
+							defaultExpanded: {}
+						}));
+						createRenderEffect(() => className(_el$72, styles().detailsContent));
+						return _el$72;
+					})()] : null;
+				})(), _el$69);
+				insert(_el$70, createComponent(Explorer, {
+					label: "Match",
+					value: activeMatchValue,
+					defaultExpanded: {}
+				}));
+				createRenderEffect((_p$) => {
+					var _v$37 = styles().thirdContainer, _v$38 = styles().detailsHeader, _v$39 = styles().matchDetails, _v$40 = styles().matchStatus(activeMatch()?.status, activeMatch()?.isFetching), _v$41 = styles().matchDetailsInfoLabel, _v$42 = styles().matchDetailsInfo, _v$43 = styles().matchDetailsInfoLabel, _v$44 = styles().matchDetailsInfo, _v$45 = styles().matchDetailsInfoLabel, _v$46 = styles().matchDetailsInfo, _v$47 = styles().detailsHeader, _v$48 = styles().detailsContent;
+					_v$37 !== _p$.e && className(_el$53, _p$.e = _v$37);
+					_v$38 !== _p$.t && className(_el$54, _p$.t = _v$38);
+					_v$39 !== _p$.a && className(_el$56, _p$.a = _v$39);
+					_v$40 !== _p$.o && className(_el$57, _p$.o = _v$40);
+					_v$41 !== _p$.i && className(_el$59, _p$.i = _v$41);
+					_v$42 !== _p$.n && className(_el$61, _p$.n = _v$42);
+					_v$43 !== _p$.s && className(_el$63, _p$.s = _v$43);
+					_v$44 !== _p$.h && className(_el$65, _p$.h = _v$44);
+					_v$45 !== _p$.r && className(_el$66, _p$.r = _v$45);
+					_v$46 !== _p$.d && className(_el$68, _p$.d = _v$46);
+					_v$47 !== _p$.l && className(_el$69, _p$.l = _v$47);
+					_v$48 !== _p$.u && className(_el$70, _p$.u = _v$48);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0,
+					i: void 0,
+					n: void 0,
+					s: void 0,
+					h: void 0,
+					r: void 0,
+					d: void 0,
+					l: void 0,
+					u: void 0
+				});
+				return _el$53;
+			})() : null;
+		})(), null);
+		insert(_el$11, (() => {
+			var _c$7 = memo(() => !!hasSearch());
+			return () => _c$7() ? (() => {
+				var _el$73 = _tmpl$14(), _el$74 = _el$73.firstChild;
+				_el$74.firstChild;
+				var _el$76 = _el$74.nextSibling;
+				insert(_el$74, typeof navigator !== "undefined" ? (() => {
+					var _el$77 = _tmpl$15();
+					insert(_el$77, createComponent(CopyButton, { getValue: () => {
+						const search = routerState().location.search;
+						return JSON.stringify(search);
+					} }));
+					return _el$77;
+				})() : null, null);
+				insert(_el$76, createComponent(Explorer, {
+					value: locationSearchValue,
+					get defaultExpanded() {
+						return Object.keys(routerState().location.search).reduce((obj, next) => {
+							obj[next] = {};
+							return obj;
+						}, {});
+					}
+				}));
+				createRenderEffect((_p$) => {
+					var _v$49 = styles().fourthContainer, _v$50 = styles().detailsHeader, _v$51 = styles().detailsContent;
+					_v$49 !== _p$.e && className(_el$73, _p$.e = _v$49);
+					_v$50 !== _p$.t && className(_el$74, _p$.t = _v$50);
+					_v$51 !== _p$.a && className(_el$76, _p$.a = _v$51);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				});
+				return _el$73;
+			})() : null;
+		})(), null);
+		createRenderEffect((_p$) => {
+			var _v$6 = styles().panelCloseBtn, _v$7 = styles().panelCloseBtnIcon, _v$8 = styles().firstContainer, _v$9 = styles().row, _v$0 = styles().routerExplorerContainer, _v$1 = styles().routerExplorer, _v$10 = styles().secondContainer, _v$11 = styles().matchesContainer, _v$12 = styles().detailsHeader, _v$13 = styles().detailsContent, _v$14 = styles().detailsHeader, _v$15 = styles().routeMatchesToggle, _v$16 = currentTab() === "routes", _v$17 = clsx(styles().routeMatchesToggleBtn(currentTab() === "routes", true)), _v$18 = currentTab() === "matches", _v$19 = clsx(styles().routeMatchesToggleBtn(currentTab() === "matches", true)), _v$20 = currentTab() === "history", _v$21 = clsx(styles().routeMatchesToggleBtn(currentTab() === "history", false)), _v$22 = styles().detailsHeaderInfo, _v$23 = clsx(styles().routesContainer);
+			_v$6 !== _p$.e && className(_el$12, _p$.e = _v$6);
+			_v$7 !== _p$.t && setAttribute(_el$13, "class", _p$.t = _v$7);
+			_v$8 !== _p$.a && className(_el$14, _p$.a = _v$8);
+			_v$9 !== _p$.o && className(_el$15, _p$.o = _v$9);
+			_v$0 !== _p$.i && className(_el$16, _p$.i = _v$0);
+			_v$1 !== _p$.n && className(_el$17, _p$.n = _v$1);
+			_v$10 !== _p$.s && className(_el$18, _p$.s = _v$10);
+			_v$11 !== _p$.h && className(_el$19, _p$.h = _v$11);
+			_v$12 !== _p$.r && className(_el$20, _p$.r = _v$12);
+			_v$13 !== _p$.d && className(_el$22, _p$.d = _v$13);
+			_v$14 !== _p$.l && className(_el$24, _p$.l = _v$14);
+			_v$15 !== _p$.u && className(_el$25, _p$.u = _v$15);
+			_v$16 !== _p$.c && (_el$26.disabled = _p$.c = _v$16);
+			_v$17 !== _p$.w && className(_el$26, _p$.w = _v$17);
+			_v$18 !== _p$.m && (_el$27.disabled = _p$.m = _v$18);
+			_v$19 !== _p$.f && className(_el$27, _p$.f = _v$19);
+			_v$20 !== _p$.y && (_el$28.disabled = _p$.y = _v$20);
+			_v$21 !== _p$.g && className(_el$28, _p$.g = _v$21);
+			_v$22 !== _p$.p && className(_el$29, _p$.p = _v$22);
+			_v$23 !== _p$.b && className(_el$30, _p$.b = _v$23);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0,
+			h: void 0,
+			r: void 0,
+			d: void 0,
+			l: void 0,
+			u: void 0,
+			c: void 0,
+			w: void 0,
+			m: void 0,
+			f: void 0,
+			y: void 0,
+			g: void 0,
+			p: void 0,
+			b: void 0
+		});
+		return _el$11;
+	})();
+};
+function CopyButton({ getValue }) {
+	const [copied, setCopied] = createSignal(false);
+	let timeoutId = null;
+	const handleCopy = async () => {
+		if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
+			console.warn("TanStack Router Devtools: Clipboard API unavailable");
+			return;
+		}
+		try {
+			const value = getValue();
+			await navigator.clipboard.writeText(value);
+			setCopied(true);
+			if (timeoutId) clearTimeout(timeoutId);
+			timeoutId = setTimeout(() => setCopied(false), 2500);
+		} catch (e$1) {
+			console.error("TanStack Router Devtools: Failed to copy", e$1);
+		}
+	};
+	onCleanup(() => {
+		if (timeoutId) clearTimeout(timeoutId);
+	});
+	return (() => {
+		var _el$78 = _tmpl$16();
+		_el$78.$$click = handleCopy;
+		insert(_el$78, () => copied() ? "✅" : "📋");
+		createRenderEffect(() => setAttribute(_el$78, "title", copied() ? "Copied!" : "Copy"));
+		return _el$78;
+	})();
+}
+delegateEvents(["click", "mousedown"]);
+const BaseTanStackRouterDevtoolsPanel$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+	__proto__: null,
+	BaseTanStackRouterDevtoolsPanel,
+	default: BaseTanStackRouterDevtoolsPanel
+}, Symbol.toStringTag, { value: "Module" }));
+
+//#endregion
+export { BaseTanStackRouterDevtoolsPanel as B, useIsMounted as a, useStyles$1 as b, BaseTanStackRouterDevtoolsPanel$1 as c, clsx as t, useLocalStorage as u };