appos 0.3.6-0 → 0.3.7-0

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

@@ -1,2090 +0,0 @@
-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 };