@tanstack/router-devtools 0.0.1-alpha.1 → 0.0.1-beta.101

package/build/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * react-router-devtools
+ * router-devtools
  *
  * Copyright (c) TanStack
  *
@@ -10,893 +10,38 @@
  */
 import * as React from 'react';
 import React__default from 'react';
-import { last, useRouter } from '@tanstack/react-router';
+import { routerContext, invariant, useStore, last } from '@tanstack/router';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function requiredArgs(required, args) {
-  if (args.length < required) {
-    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
-  }
-}
-
-/**
- * @name toDate
- * @category Common Helpers
- * @summary Convert the given argument to an instance of Date.
- *
- * @description
- * Convert the given argument to an instance of Date.
- *
- * If the argument is an instance of Date, the function returns its clone.
- *
- * If the argument is a number, it is treated as a timestamp.
- *
- * If the argument is none of the above, the function returns Invalid Date.
- *
- * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
- *
- * @param {Date|Number} argument - the value to convert
- * @returns {Date} the parsed date in the local time zone
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // Clone the date:
- * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
- * //=> Tue Feb 11 2014 11:30:30
- *
- * @example
- * // Convert the timestamp to date:
- * const result = toDate(1392098430000)
- * //=> Tue Feb 11 2014 11:30:30
- */
-
-function toDate(argument) {
-  requiredArgs(1, arguments);
-  var argStr = Object.prototype.toString.call(argument); // Clone the date
-
-  if (argument instanceof Date || typeof argument === 'object' && argStr === '[object Date]') {
-    // Prevent the date to lose the milliseconds when passed to new Date() in IE10
-    return new Date(argument.getTime());
-  } else if (typeof argument === 'number' || argStr === '[object Number]') {
-    return new Date(argument);
-  } else {
-    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
-      // eslint-disable-next-line no-console
-      console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments"); // eslint-disable-next-line no-console
-
-      console.warn(new Error().stack);
-    }
-
-    return new Date(NaN);
-  }
-}
-
-var defaultOptions = {};
-function getDefaultOptions() {
-  return defaultOptions;
-}
-
-/**
- * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds.
- * They usually appear for dates that denote time before the timezones were introduced
- * (e.g. for 'Europe/Prague' timezone the offset is GMT+00:57:44 before 1 October 1891
- * and GMT+01:00:00 after that date)
- *
- * Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above,
- * which would lead to incorrect calculations.
- *
- * This function returns the timezone offset in milliseconds that takes seconds in account.
- */
-function getTimezoneOffsetInMilliseconds(date) {
-  var utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
-  utcDate.setUTCFullYear(date.getFullYear());
-  return date.getTime() - utcDate.getTime();
-}
-
-/**
- * @name compareAsc
- * @category Common Helpers
- * @summary Compare the two dates and return -1, 0 or 1.
- *
- * @description
- * Compare the two dates and return 1 if the first date is after the second,
- * -1 if the first date is before the second or 0 if dates are equal.
- *
- * @param {Date|Number} dateLeft - the first date to compare
- * @param {Date|Number} dateRight - the second date to compare
- * @returns {Number} the result of the comparison
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // Compare 11 February 1987 and 10 July 1989:
- * const result = compareAsc(new Date(1987, 1, 11), new Date(1989, 6, 10))
- * //=> -1
- *
- * @example
- * // Sort the array of dates:
- * const result = [
- *   new Date(1995, 6, 2),
- *   new Date(1987, 1, 11),
- *   new Date(1989, 6, 10)
- * ].sort(compareAsc)
- * //=> [
- * //   Wed Feb 11 1987 00:00:00,
- * //   Mon Jul 10 1989 00:00:00,
- * //   Sun Jul 02 1995 00:00:00
- * // ]
- */
-
-function compareAsc(dirtyDateLeft, dirtyDateRight) {
-  requiredArgs(2, arguments);
-  var dateLeft = toDate(dirtyDateLeft);
-  var dateRight = toDate(dirtyDateRight);
-  var diff = dateLeft.getTime() - dateRight.getTime();
-
-  if (diff < 0) {
-    return -1;
-  } else if (diff > 0) {
-    return 1; // Return 0 if diff is 0; return NaN if diff is NaN
-  } else {
-    return diff;
-  }
-}
-
-var formatDistanceLocale = {
-  lessThanXSeconds: {
-    one: 'less than a second',
-    other: 'less than {{count}} seconds'
-  },
-  xSeconds: {
-    one: '1 second',
-    other: '{{count}} seconds'
-  },
-  halfAMinute: 'half a minute',
-  lessThanXMinutes: {
-    one: 'less than a minute',
-    other: 'less than {{count}} minutes'
-  },
-  xMinutes: {
-    one: '1 minute',
-    other: '{{count}} minutes'
-  },
-  aboutXHours: {
-    one: 'about 1 hour',
-    other: 'about {{count}} hours'
-  },
-  xHours: {
-    one: '1 hour',
-    other: '{{count}} hours'
-  },
-  xDays: {
-    one: '1 day',
-    other: '{{count}} days'
-  },
-  aboutXWeeks: {
-    one: 'about 1 week',
-    other: 'about {{count}} weeks'
-  },
-  xWeeks: {
-    one: '1 week',
-    other: '{{count}} weeks'
-  },
-  aboutXMonths: {
-    one: 'about 1 month',
-    other: 'about {{count}} months'
-  },
-  xMonths: {
-    one: '1 month',
-    other: '{{count}} months'
-  },
-  aboutXYears: {
-    one: 'about 1 year',
-    other: 'about {{count}} years'
-  },
-  xYears: {
-    one: '1 year',
-    other: '{{count}} years'
-  },
-  overXYears: {
-    one: 'over 1 year',
-    other: 'over {{count}} years'
-  },
-  almostXYears: {
-    one: 'almost 1 year',
-    other: 'almost {{count}} years'
-  }
-};
-
-var formatDistance = function (token, count, options) {
-  var result;
-  var tokenValue = formatDistanceLocale[token];
-
-  if (typeof tokenValue === 'string') {
-    result = tokenValue;
-  } else if (count === 1) {
-    result = tokenValue.one;
-  } else {
-    result = tokenValue.other.replace('{{count}}', count.toString());
-  }
-
-  if (options !== null && options !== void 0 && options.addSuffix) {
-    if (options.comparison && options.comparison > 0) {
-      return 'in ' + result;
-    } else {
-      return result + ' ago';
-    }
-  }
-
-  return result;
-};
-
-var formatDistance$1 = formatDistance;
-
-function buildFormatLongFn(args) {
-  return function () {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    // TODO: Remove String()
-    var width = options.width ? String(options.width) : args.defaultWidth;
-    var format = args.formats[width] || args.formats[args.defaultWidth];
-    return format;
-  };
-}
-
-var dateFormats = {
-  full: 'EEEE, MMMM do, y',
-  long: 'MMMM do, y',
-  medium: 'MMM d, y',
-  short: 'MM/dd/yyyy'
-};
-var timeFormats = {
-  full: 'h:mm:ss a zzzz',
-  long: 'h:mm:ss a z',
-  medium: 'h:mm:ss a',
-  short: 'h:mm a'
-};
-var dateTimeFormats = {
-  full: "{{date}} 'at' {{time}}",
-  long: "{{date}} 'at' {{time}}",
-  medium: '{{date}}, {{time}}',
-  short: '{{date}}, {{time}}'
-};
-var formatLong = {
-  date: buildFormatLongFn({
-    formats: dateFormats,
-    defaultWidth: 'full'
-  }),
-  time: buildFormatLongFn({
-    formats: timeFormats,
-    defaultWidth: 'full'
-  }),
-  dateTime: buildFormatLongFn({
-    formats: dateTimeFormats,
-    defaultWidth: 'full'
-  })
-};
-var formatLong$1 = formatLong;
-
-var formatRelativeLocale = {
-  lastWeek: "'last' eeee 'at' p",
-  yesterday: "'yesterday at' p",
-  today: "'today at' p",
-  tomorrow: "'tomorrow at' p",
-  nextWeek: "eeee 'at' p",
-  other: 'P'
-};
-
-var formatRelative = function (token, _date, _baseDate, _options) {
-  return formatRelativeLocale[token];
-};
-
-var formatRelative$1 = formatRelative;
-
-function buildLocalizeFn(args) {
-  return function (dirtyIndex, options) {
-    var context = options !== null && options !== void 0 && options.context ? String(options.context) : 'standalone';
-    var valuesArray;
-
-    if (context === 'formatting' && args.formattingValues) {
-      var defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
-      var width = options !== null && options !== void 0 && options.width ? String(options.width) : defaultWidth;
-      valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth];
-    } else {
-      var _defaultWidth = args.defaultWidth;
-
-      var _width = options !== null && options !== void 0 && options.width ? String(options.width) : args.defaultWidth;
-
-      valuesArray = args.values[_width] || args.values[_defaultWidth];
-    }
-
-    var index = args.argumentCallback ? args.argumentCallback(dirtyIndex) : dirtyIndex; // @ts-ignore: For some reason TypeScript just don't want to match it, no matter how hard we try. I challenge you to try to remove it!
-
-    return valuesArray[index];
-  };
-}
-
-var eraValues = {
-  narrow: ['B', 'A'],
-  abbreviated: ['BC', 'AD'],
-  wide: ['Before Christ', 'Anno Domini']
-};
-var quarterValues = {
-  narrow: ['1', '2', '3', '4'],
-  abbreviated: ['Q1', 'Q2', 'Q3', 'Q4'],
-  wide: ['1st quarter', '2nd quarter', '3rd quarter', '4th quarter']
-}; // Note: in English, the names of days of the week and months are capitalized.
-// If you are making a new locale based on this one, check if the same is true for the language you're working on.
-// Generally, formatted dates should look like they are in the middle of a sentence,
-// e.g. in Spanish language the weekdays and months should be in the lowercase.
-
-var monthValues = {
-  narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
-  abbreviated: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-  wide: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-};
-var dayValues = {
-  narrow: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
-  short: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-  abbreviated: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-  wide: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
-};
-var dayPeriodValues = {
-  narrow: {
-    am: 'a',
-    pm: 'p',
-    midnight: 'mi',
-    noon: 'n',
-    morning: 'morning',
-    afternoon: 'afternoon',
-    evening: 'evening',
-    night: 'night'
-  },
-  abbreviated: {
-    am: 'AM',
-    pm: 'PM',
-    midnight: 'midnight',
-    noon: 'noon',
-    morning: 'morning',
-    afternoon: 'afternoon',
-    evening: 'evening',
-    night: 'night'
-  },
-  wide: {
-    am: 'a.m.',
-    pm: 'p.m.',
-    midnight: 'midnight',
-    noon: 'noon',
-    morning: 'morning',
-    afternoon: 'afternoon',
-    evening: 'evening',
-    night: 'night'
-  }
-};
-var formattingDayPeriodValues = {
-  narrow: {
-    am: 'a',
-    pm: 'p',
-    midnight: 'mi',
-    noon: 'n',
-    morning: 'in the morning',
-    afternoon: 'in the afternoon',
-    evening: 'in the evening',
-    night: 'at night'
-  },
-  abbreviated: {
-    am: 'AM',
-    pm: 'PM',
-    midnight: 'midnight',
-    noon: 'noon',
-    morning: 'in the morning',
-    afternoon: 'in the afternoon',
-    evening: 'in the evening',
-    night: 'at night'
-  },
-  wide: {
-    am: 'a.m.',
-    pm: 'p.m.',
-    midnight: 'midnight',
-    noon: 'noon',
-    morning: 'in the morning',
-    afternoon: 'in the afternoon',
-    evening: 'in the evening',
-    night: 'at night'
-  }
-};
-
-var ordinalNumber = function (dirtyNumber, _options) {
-  var number = Number(dirtyNumber); // If ordinal numbers depend on context, for example,
-  // if they are different for different grammatical genders,
-  // use `options.unit`.
-  //
-  // `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear',
-  // 'day', 'hour', 'minute', 'second'.
-
-  var rem100 = number % 100;
-
-  if (rem100 > 20 || rem100 < 10) {
-    switch (rem100 % 10) {
-      case 1:
-        return number + 'st';
-
-      case 2:
-        return number + 'nd';
-
-      case 3:
-        return number + 'rd';
-    }
-  }
-
-  return number + 'th';
-};
-
-var localize = {
-  ordinalNumber: ordinalNumber,
-  era: buildLocalizeFn({
-    values: eraValues,
-    defaultWidth: 'wide'
-  }),
-  quarter: buildLocalizeFn({
-    values: quarterValues,
-    defaultWidth: 'wide',
-    argumentCallback: function (quarter) {
-      return quarter - 1;
-    }
-  }),
-  month: buildLocalizeFn({
-    values: monthValues,
-    defaultWidth: 'wide'
-  }),
-  day: buildLocalizeFn({
-    values: dayValues,
-    defaultWidth: 'wide'
-  }),
-  dayPeriod: buildLocalizeFn({
-    values: dayPeriodValues,
-    defaultWidth: 'wide',
-    formattingValues: formattingDayPeriodValues,
-    defaultFormattingWidth: 'wide'
-  })
-};
-var localize$1 = localize;
-
-function buildMatchFn(args) {
-  return function (string) {
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var width = options.width;
-    var matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
-    var matchResult = string.match(matchPattern);
-
-    if (!matchResult) {
-      return null;
-    }
-
-    var matchedString = matchResult[0];
-    var parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
-    var key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, function (pattern) {
-      return pattern.test(matchedString);
-    }) : findKey(parsePatterns, function (pattern) {
-      return pattern.test(matchedString);
-    });
-    var value;
-    value = args.valueCallback ? args.valueCallback(key) : key;
-    value = options.valueCallback ? options.valueCallback(value) : value;
-    var rest = string.slice(matchedString.length);
-    return {
-      value: value,
-      rest: rest
-    };
-  };
-}
-
-function findKey(object, predicate) {
-  for (var key in object) {
-    if (object.hasOwnProperty(key) && predicate(object[key])) {
-      return key;
-    }
-  }
-
-  return undefined;
-}
-
-function findIndex(array, predicate) {
-  for (var key = 0; key < array.length; key++) {
-    if (predicate(array[key])) {
-      return key;
-    }
-  }
-
-  return undefined;
-}
-
-function buildMatchPatternFn(args) {
-  return function (string) {
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var matchResult = string.match(args.matchPattern);
-    if (!matchResult) return null;
-    var matchedString = matchResult[0];
-    var parseResult = string.match(args.parsePattern);
-    if (!parseResult) return null;
-    var value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
-    value = options.valueCallback ? options.valueCallback(value) : value;
-    var rest = string.slice(matchedString.length);
-    return {
-      value: value,
-      rest: rest
-    };
-  };
-}
-
-var matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i;
-var parseOrdinalNumberPattern = /\d+/i;
-var matchEraPatterns = {
-  narrow: /^(b|a)/i,
-  abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,
-  wide: /^(before christ|before common era|anno domini|common era)/i
-};
-var parseEraPatterns = {
-  any: [/^b/i, /^(a|c)/i]
-};
-var matchQuarterPatterns = {
-  narrow: /^[1234]/i,
-  abbreviated: /^q[1234]/i,
-  wide: /^[1234](th|st|nd|rd)? quarter/i
-};
-var parseQuarterPatterns = {
-  any: [/1/i, /2/i, /3/i, /4/i]
-};
-var matchMonthPatterns = {
-  narrow: /^[jfmasond]/i,
-  abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,
-  wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i
-};
-var parseMonthPatterns = {
-  narrow: [/^j/i, /^f/i, /^m/i, /^a/i, /^m/i, /^j/i, /^j/i, /^a/i, /^s/i, /^o/i, /^n/i, /^d/i],
-  any: [/^ja/i, /^f/i, /^mar/i, /^ap/i, /^may/i, /^jun/i, /^jul/i, /^au/i, /^s/i, /^o/i, /^n/i, /^d/i]
-};
-var matchDayPatterns = {
-  narrow: /^[smtwf]/i,
-  short: /^(su|mo|tu|we|th|fr|sa)/i,
-  abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i,
-  wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i
-};
-var parseDayPatterns = {
-  narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i],
-  any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i]
-};
-var matchDayPeriodPatterns = {
-  narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,
-  any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i
-};
-var parseDayPeriodPatterns = {
-  any: {
-    am: /^a/i,
-    pm: /^p/i,
-    midnight: /^mi/i,
-    noon: /^no/i,
-    morning: /morning/i,
-    afternoon: /afternoon/i,
-    evening: /evening/i,
-    night: /night/i
-  }
-};
-var match = {
-  ordinalNumber: buildMatchPatternFn({
-    matchPattern: matchOrdinalNumberPattern,
-    parsePattern: parseOrdinalNumberPattern,
-    valueCallback: function (value) {
-      return parseInt(value, 10);
-    }
-  }),
-  era: buildMatchFn({
-    matchPatterns: matchEraPatterns,
-    defaultMatchWidth: 'wide',
-    parsePatterns: parseEraPatterns,
-    defaultParseWidth: 'any'
-  }),
-  quarter: buildMatchFn({
-    matchPatterns: matchQuarterPatterns,
-    defaultMatchWidth: 'wide',
-    parsePatterns: parseQuarterPatterns,
-    defaultParseWidth: 'any',
-    valueCallback: function (index) {
-      return index + 1;
-    }
-  }),
-  month: buildMatchFn({
-    matchPatterns: matchMonthPatterns,
-    defaultMatchWidth: 'wide',
-    parsePatterns: parseMonthPatterns,
-    defaultParseWidth: 'any'
-  }),
-  day: buildMatchFn({
-    matchPatterns: matchDayPatterns,
-    defaultMatchWidth: 'wide',
-    parsePatterns: parseDayPatterns,
-    defaultParseWidth: 'any'
-  }),
-  dayPeriod: buildMatchFn({
-    matchPatterns: matchDayPeriodPatterns,
-    defaultMatchWidth: 'any',
-    parsePatterns: parseDayPeriodPatterns,
-    defaultParseWidth: 'any'
-  })
-};
-var match$1 = match;
-
-/**
- * @type {Locale}
- * @category Locales
- * @summary English locale (United States).
- * @language English
- * @iso-639-2 eng
- * @author Sasha Koss [@kossnocorp]{@link https://github.com/kossnocorp}
- * @author Lesha Koss [@leshakoss]{@link https://github.com/leshakoss}
- */
-var locale = {
-  code: 'en-US',
-  formatDistance: formatDistance$1,
-  formatLong: formatLong$1,
-  formatRelative: formatRelative$1,
-  localize: localize$1,
-  match: match$1,
-  options: {
-    weekStartsOn: 0
-    /* Sunday */
-    ,
-    firstWeekContainsDate: 1
-  }
-};
-var defaultLocale = locale;
-
-function assign(target, object) {
-  if (target == null) {
-    throw new TypeError('assign requires that input parameter not be null or undefined');
-  }
-
-  for (var property in object) {
-    if (Object.prototype.hasOwnProperty.call(object, property)) {
-      target[property] = object[property];
-    }
-  }
-
-  return target;
-}
-
-function cloneObject(object) {
-  return assign({}, object);
-}
-
-var MILLISECONDS_IN_MINUTE = 1000 * 60;
-var MINUTES_IN_DAY = 60 * 24;
-var MINUTES_IN_MONTH = MINUTES_IN_DAY * 30;
-var MINUTES_IN_YEAR = MINUTES_IN_DAY * 365;
-/**
- * @name formatDistanceStrict
- * @category Common Helpers
- * @summary Return the distance between the given dates in words.
- *
- * @description
- * Return the distance between the given dates in words, using strict units.
- * This is like `formatDistance`, but does not use helpers like 'almost', 'over',
- * 'less than' and the like.
- *
- * | Distance between dates | Result              |
- * |------------------------|---------------------|
- * | 0 ... 59 secs          | [0..59] seconds     |
- * | 1 ... 59 mins          | [1..59] minutes     |
- * | 1 ... 23 hrs           | [1..23] hours       |
- * | 1 ... 29 days          | [1..29] days        |
- * | 1 ... 11 months        | [1..11] months      |
- * | 1 ... N years          | [1..N]  years       |
- *
- * @param {Date|Number} date - the date
- * @param {Date|Number} baseDate - the date to compare with
- * @param {Object} [options] - an object with options.
- * @param {Boolean} [options.addSuffix=false] - result indicates if the second date is earlier or later than the first
- * @param {'second'|'minute'|'hour'|'day'|'month'|'year'} [options.unit] - if specified, will force a unit
- * @param {'floor'|'ceil'|'round'} [options.roundingMethod='round'] - which way to round partial units
- * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
- * @returns {String} the distance in words
- * @throws {TypeError} 2 arguments required
- * @throws {RangeError} `date` must not be Invalid Date
- * @throws {RangeError} `baseDate` must not be Invalid Date
- * @throws {RangeError} `options.roundingMethod` must be 'floor', 'ceil' or 'round'
- * @throws {RangeError} `options.unit` must be 'second', 'minute', 'hour', 'day', 'month' or 'year'
- * @throws {RangeError} `options.locale` must contain `formatDistance` property
- *
- * @example
- * // What is the distance between 2 July 2014 and 1 January 2015?
- * const result = formatDistanceStrict(new Date(2014, 6, 2), new Date(2015, 0, 2))
- * //=> '6 months'
- *
- * @example
- * // What is the distance between 1 January 2015 00:00:15
- * // and 1 January 2015 00:00:00?
- * const result = formatDistanceStrict(
- *   new Date(2015, 0, 1, 0, 0, 15),
- *   new Date(2015, 0, 1, 0, 0, 0)
- * )
- * //=> '15 seconds'
- *
- * @example
- * // What is the distance from 1 January 2016
- * // to 1 January 2015, with a suffix?
- * const result = formatDistanceStrict(new Date(2015, 0, 1), new Date(2016, 0, 1), {
- *   addSuffix: true
- * })
- * //=> '1 year ago'
- *
- * @example
- * // What is the distance from 1 January 2016
- * // to 1 January 2015, in minutes?
- * const result = formatDistanceStrict(new Date(2016, 0, 1), new Date(2015, 0, 1), {
- *   unit: 'minute'
- * })
- * //=> '525600 minutes'
- *
- * @example
- * // What is the distance from 1 January 2015
- * // to 28 January 2015, in months, rounded up?
- * const result = formatDistanceStrict(new Date(2015, 0, 28), new Date(2015, 0, 1), {
- *   unit: 'month',
- *   roundingMethod: 'ceil'
- * })
- * //=> '1 month'
- *
- * @example
- * // What is the distance between 1 August 2016 and 1 January 2015 in Esperanto?
- * import { eoLocale } from 'date-fns/locale/eo'
- * const result = formatDistanceStrict(new Date(2016, 7, 1), new Date(2015, 0, 1), {
- *   locale: eoLocale
- * })
- * //=> '1 jaro'
- */
-
-function formatDistanceStrict(dirtyDate, dirtyBaseDate, options) {
-  var _ref, _options$locale, _options$roundingMeth;
-
-  requiredArgs(2, arguments);
-  var defaultOptions = getDefaultOptions();
-  var locale = (_ref = (_options$locale = options === null || options === void 0 ? void 0 : options.locale) !== null && _options$locale !== void 0 ? _options$locale : defaultOptions.locale) !== null && _ref !== void 0 ? _ref : defaultLocale;
-
-  if (!locale.formatDistance) {
-    throw new RangeError('locale must contain localize.formatDistance property');
-  }
-
-  var comparison = compareAsc(dirtyDate, dirtyBaseDate);
-
-  if (isNaN(comparison)) {
-    throw new RangeError('Invalid time value');
-  }
-
-  var localizeOptions = assign(cloneObject(options), {
-    addSuffix: Boolean(options === null || options === void 0 ? void 0 : options.addSuffix),
-    comparison: comparison
-  });
-  var dateLeft;
-  var dateRight;
-
-  if (comparison > 0) {
-    dateLeft = toDate(dirtyBaseDate);
-    dateRight = toDate(dirtyDate);
-  } else {
-    dateLeft = toDate(dirtyDate);
-    dateRight = toDate(dirtyBaseDate);
-  }
-
-  var roundingMethod = String((_options$roundingMeth = options === null || options === void 0 ? void 0 : options.roundingMethod) !== null && _options$roundingMeth !== void 0 ? _options$roundingMeth : 'round');
-  var roundingMethodFn;
-
-  if (roundingMethod === 'floor') {
-    roundingMethodFn = Math.floor;
-  } else if (roundingMethod === 'ceil') {
-    roundingMethodFn = Math.ceil;
-  } else if (roundingMethod === 'round') {
-    roundingMethodFn = Math.round;
-  } else {
-    throw new RangeError("roundingMethod must be 'floor', 'ceil' or 'round'");
-  }
-
-  var milliseconds = dateRight.getTime() - dateLeft.getTime();
-  var minutes = milliseconds / MILLISECONDS_IN_MINUTE;
-  var timezoneOffset = getTimezoneOffsetInMilliseconds(dateRight) - getTimezoneOffsetInMilliseconds(dateLeft); // Use DST-normalized difference in minutes for years, months and days;
-  // use regular difference in minutes for hours, minutes and seconds.
-
-  var dstNormalizedMinutes = (milliseconds - timezoneOffset) / MILLISECONDS_IN_MINUTE;
-  var defaultUnit = options === null || options === void 0 ? void 0 : options.unit;
-  var unit;
-
-  if (!defaultUnit) {
-    if (minutes < 1) {
-      unit = 'second';
-    } else if (minutes < 60) {
-      unit = 'minute';
-    } else if (minutes < MINUTES_IN_DAY) {
-      unit = 'hour';
-    } else if (dstNormalizedMinutes < MINUTES_IN_MONTH) {
-      unit = 'day';
-    } else if (dstNormalizedMinutes < MINUTES_IN_YEAR) {
-      unit = 'month';
-    } else {
-      unit = 'year';
-    }
-  } else {
-    unit = String(defaultUnit);
-  } // 0 up to 60 seconds
-
-
-  if (unit === 'second') {
-    var seconds = roundingMethodFn(milliseconds / 1000);
-    return locale.formatDistance('xSeconds', seconds, localizeOptions); // 1 up to 60 mins
-  } else if (unit === 'minute') {
-    var roundedMinutes = roundingMethodFn(minutes);
-    return locale.formatDistance('xMinutes', roundedMinutes, localizeOptions); // 1 up to 24 hours
-  } else if (unit === 'hour') {
-    var hours = roundingMethodFn(minutes / 60);
-    return locale.formatDistance('xHours', hours, localizeOptions); // 1 up to 30 days
-  } else if (unit === 'day') {
-    var days = roundingMethodFn(dstNormalizedMinutes / MINUTES_IN_DAY);
-    return locale.formatDistance('xDays', days, localizeOptions); // 1 up to 12 months
-  } else if (unit === 'month') {
-    var months = roundingMethodFn(dstNormalizedMinutes / MINUTES_IN_MONTH);
-    return months === 12 && defaultUnit !== 'month' ? locale.formatDistance('xYears', 1, localizeOptions) : locale.formatDistance('xMonths', months, localizeOptions); // 1 year up to max Date
-  } else if (unit === 'year') {
-    var years = roundingMethodFn(dstNormalizedMinutes / MINUTES_IN_YEAR);
-    return locale.formatDistance('xYears', years, localizeOptions);
-  }
-
-  throw new RangeError("unit must be 'second', 'minute', 'hour', 'day', 'month' or 'year'");
-}
-
 const getItem = key => {
   try {
     const itemValue = localStorage.getItem(key);
-
     if (typeof itemValue === 'string') {
       return JSON.parse(itemValue);
     }
-
     return undefined;
-  } catch (_unused) {
+  } catch {
     return undefined;
   }
 };
-
 function useLocalStorage(key, defaultValue) {
   const [value, setValue] = React__default.useState();
   React__default.useEffect(() => {
     const initialValue = getItem(key);
-
     if (typeof initialValue === 'undefined' || initialValue === null) {
       setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
     } else {
@@ -906,22 +51,18 @@ function useLocalStorage(key, defaultValue) {
   const setter = React__default.useCallback(updater => {
     setValue(old => {
       let newVal = updater;
-
       if (typeof updater == 'function') {
         newVal = updater(old);
       }
-
       try {
         localStorage.setItem(key, JSON.stringify(newVal));
-      } catch (_unused2) {}
-
+      } catch {}
       return newVal;
     });
   }, [key]);
   return [value, setter];
 }
 
-const _excluded$3 = ["theme"];
 const defaultTheme = {
   background: '#0b1521',
   backgroundAlt: '#132337',
@@ -936,12 +77,10 @@ const defaultTheme = {
   warning: '#ffb200'
 };
 const ThemeContext = /*#__PURE__*/React__default.createContext(defaultTheme);
-function ThemeProvider(_ref) {
-  let {
-    theme
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-
+function ThemeProvider({
+  theme,
+  ...rest
+}) {
   return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, _extends({
     value: theme
   }, rest));
@@ -956,70 +95,66 @@ function useMediaQuery(query) {
     if (typeof window !== 'undefined') {
       return window.matchMedia && window.matchMedia(query).matches;
     }
-  }); // Watch for changes
+    return;
+  });
 
+  // Watch for changes
   React__default.useEffect(() => {
     if (typeof window !== 'undefined') {
       if (!window.matchMedia) {
         return;
-      } // Create a matcher
-
-
-      const matcher = window.matchMedia(query); // Create our handler
+      }
 
-      const onChange = _ref => {
-        let {
-          matches
-        } = _ref;
-        return setIsMatch(matches);
-      }; // Listen for changes
+      // Create a matcher
+      const matcher = window.matchMedia(query);
 
+      // Create our handler
+      const onChange = ({
+        matches
+      }) => setIsMatch(matches);
 
+      // Listen for changes
       matcher.addListener(onChange);
       return () => {
         // Stop listening for changes
         matcher.removeListener(onChange);
       };
     }
+    return;
   }, [isMatch, query, setIsMatch]);
   return isMatch;
 }
 
-const _excluded$2 = ["style"];
 const isServer$1 = typeof window === 'undefined';
 function getStatusColor(match, theme) {
-  return match.isPending ? theme.warning : match.isFetching ? theme.active : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray;
-} // export function getQueryStatusLabel(query: Query) {
-//   return query.state.isFetching
-//     ? 'fetching'
-//     : !query.getObserversCount()
-//     ? 'inactive'
-//     : query.isStale()
-//     ? 'stale'
-//     : 'fresh'
-// }
-
-function styled(type, newStyles, queries) {
-  if (queries === void 0) {
-    queries = {};
-  }
-
-  return /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-    let {
-      style
-    } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-
+  return match.state.status === 'pending' ? theme.active : match.state.status === 'error' ? theme.danger : match.state.status === 'success' ? theme.success : theme.gray;
+}
+function getRouteStatusColor(matches, route, theme) {
+  const found = matches.find(d => d.route === route);
+  return found ? found.route.status === 'pending' ? theme.active : found.state.status === 'error' ? theme.danger : found.state.status === 'success' ? theme.success : theme.gray : theme.gray;
+}
+function styled(type, newStyles, queries = {}) {
+  return /*#__PURE__*/React__default.forwardRef(({
+    style,
+    ...rest
+  }, ref) => {
     const theme = useTheme();
-    const mediaStyles = Object.entries(queries).reduce((current, _ref2) => {
-      let [key, value] = _ref2;
+    const mediaStyles = Object.entries(queries).reduce((current, [key, value]) => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      return useMediaQuery(key) ? _extends({}, current, typeof value === 'function' ? value(rest, theme) : value) : current;
+      return useMediaQuery(key) ? {
+        ...current,
+        ...(typeof value === 'function' ? value(rest, theme) : value)
+      } : current;
     }, {});
-    return /*#__PURE__*/React__default.createElement(type, _extends({}, rest, {
-      style: _extends({}, typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles, style, mediaStyles),
+    return /*#__PURE__*/React__default.createElement(type, {
+      ...rest,
+      style: {
+        ...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
+        ...style,
+        ...mediaStyles
+      },
       ref
-    }));
+    });
   });
 }
 function useIsMounted() {
@@ -1033,22 +168,22 @@ function useIsMounted() {
   }, []);
   return isMounted;
 }
+
 /**
  * Displays a string regardless the type of the data
  * @param {unknown} value Value to be stringified
  */
-
 const displayValue = value => {
   const name = Object.getOwnPropertyNames(Object(value));
-  const newValue = typeof value === 'bigint' ? value.toString() + "n" : value;
+  const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value;
   return JSON.stringify(newValue, name);
 };
+
 /**
  * This hook is a safe useState version which schedules state updates in microtasks
  * to prevent updating a component state while React is rendering different components
  * or when the component is not mounted anymore.
  */
-
 function useSafeState(initialState) {
   const isMounted = useIsMounted();
   const [state, setState] = React__default.useState(initialState);
@@ -1061,11 +196,11 @@ function useSafeState(initialState) {
   }, [isMounted]);
   return [state, safeSetState];
 }
+
 /**
  * Schedules a microtask.
  * This can be useful to schedule state updates after rendering.
  */
-
 function scheduleMicrotask(callback) {
   Promise.resolve().then(callback).catch(error => setTimeout(() => {
     throw error;
@@ -1074,7 +209,7 @@ function scheduleMicrotask(callback) {
 
 const Panel = styled('div', (_props, theme) => ({
   fontSize: 'clamp(12px, 1.5vw, 14px)',
-  fontFamily: "sans-serif",
+  fontFamily: `sans-serif`,
   display: 'flex',
   backgroundColor: theme.background,
   color: theme.foreground
@@ -1083,10 +218,11 @@ const Panel = styled('div', (_props, theme) => ({
     flexDirection: 'column'
   },
   '(max-width: 600px)': {
-    fontSize: '.9em' // flexDirection: 'column',
-
+    fontSize: '.9em'
+    // flexDirection: 'column',
   }
 });
+
 const ActivePanel = styled('div', () => ({
   flex: '1 1 500px',
   display: 'flex',
@@ -1095,7 +231,7 @@ const ActivePanel = styled('div', () => ({
   height: '100%'
 }), {
   '(max-width: 700px)': (_props, theme) => ({
-    borderTop: "2px solid " + theme.gray
+    borderTop: `2px solid ${theme.gray}`
   })
 });
 const Button = styled('button', (props, theme) => ({
@@ -1109,10 +245,13 @@ const Button = styled('button', (props, theme) => ({
   padding: '.5em',
   opacity: props.disabled ? '.5' : undefined,
   cursor: 'pointer'
-})); // export const QueryKeys = styled('span', {
+}));
+
+// export const QueryKeys = styled('span', {
 //   display: 'inline-block',
 //   fontSize: '0.9em',
 // })
+
 // export const QueryKey = styled('span', {
 //   display: 'inline-flex',
 //   alignItems: 'center',
@@ -1125,40 +264,7 @@ const Button = styled('button', (props, theme) => ({
 const Code = styled('code', {
   fontSize: '.9em'
 });
-styled('input', (_props, theme) => ({
-  backgroundColor: theme.inputBackgroundColor,
-  border: 0,
-  borderRadius: '.2em',
-  color: theme.inputTextColor,
-  fontSize: '.9em',
-  lineHeight: "1.3",
-  padding: '.3em .4em'
-}));
-styled('select', (_props, theme) => ({
-  display: "inline-block",
-  fontSize: ".9em",
-  fontFamily: "sans-serif",
-  fontWeight: 'normal',
-  lineHeight: "1.3",
-  padding: ".3em 1.5em .3em .5em",
-  height: 'auto',
-  border: 0,
-  borderRadius: ".2em",
-  appearance: "none",
-  WebkitAppearance: 'none',
-  backgroundColor: theme.inputBackgroundColor,
-  backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")",
-  backgroundRepeat: "no-repeat",
-  backgroundPosition: "right .55em center",
-  backgroundSize: ".65em auto, 100%",
-  color: theme.inputTextColor
-}), {
-  '(max-width: 500px)': {
-    display: 'none'
-  }
-});
 
-const _excluded$1 = ["value", "defaultExpanded", "renderer", "pageSize"];
 const Entry = styled('div', {
   fontFamily: 'Menlo, monospace',
   fontSize: '.7rem',
@@ -1194,20 +300,17 @@ const Info = styled('span', {
   color: 'grey',
   fontSize: '.7em'
 });
-const Expander = _ref => {
-  let {
-    expanded,
-    style = {}
-  } = _ref;
-  return /*#__PURE__*/React.createElement("span", {
-    style: _extends({
-      display: 'inline-block',
-      transition: 'all .1s ease',
-      transform: "rotate(" + (expanded ? 90 : 0) + "deg) " + (style.transform || '')
-    }, style)
-  }, "\u25B6");
-};
-
+const Expander = ({
+  expanded,
+  style = {}
+}) => /*#__PURE__*/React.createElement("span", {
+  style: {
+    display: 'inline-block',
+    transition: 'all .1s ease',
+    transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,
+    ...style
+  }
+}, "\u25B6");
 /**
  * Chunk elements in the array by size
  *
@@ -1221,53 +324,40 @@ function chunkArray(array, size) {
   if (size < 1) return [];
   let i = 0;
   const result = [];
-
   while (i < array.length) {
     result.push(array.slice(i, i + size));
     i = i + size;
   }
-
   return result;
 }
-const DefaultRenderer = _ref2 => {
-  let {
-    HandleEntry,
-    label,
-    value,
-    subEntries = [],
-    subEntryPages = [],
-    type,
-    expanded = false,
-    toggleExpanded,
-    pageSize,
-    renderer
-  } = _ref2;
+const DefaultRenderer = ({
+  handleEntry,
+  label,
+  value,
+  subEntries = [],
+  subEntryPages = [],
+  type,
+  expanded = false,
+  toggleExpanded,
+  pageSize,
+  renderer
+}) => {
   const [expandedPages, setExpandedPages] = React.useState([]);
   const [valueSnapshot, setValueSnapshot] = React.useState(undefined);
-
   const refreshValueSnapshot = () => {
     setValueSnapshot(value());
   };
-
-  return /*#__PURE__*/React.createElement(Entry, {
-    key: label
-  }, subEntryPages.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ExpandButton, {
+  return /*#__PURE__*/React.createElement(Entry, null, subEntryPages.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ExpandButton, {
     onClick: () => toggleExpanded()
   }, /*#__PURE__*/React.createElement(Expander, {
     expanded: expanded
-  }), " ", label, ' ', /*#__PURE__*/React.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React.createElement(SubEntries, null, subEntries.map(entry => /*#__PURE__*/React.createElement(HandleEntry, {
-    key: entry.label,
-    entry: entry
-  }))) : /*#__PURE__*/React.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React.createElement("div", {
+  }), " ", label, ' ', /*#__PURE__*/React.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? `items` : `item`)), expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React.createElement(SubEntries, null, subEntries.map((entry, index) => handleEntry(entry))) : /*#__PURE__*/React.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React.createElement("div", {
     key: index
   }, /*#__PURE__*/React.createElement(Entry, null, /*#__PURE__*/React.createElement(LabelButton, {
     onClick: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index])
   }, /*#__PURE__*/React.createElement(Expander, {
     expanded: expanded
-  }), " [", index * pageSize, " ...", ' ', index * pageSize + pageSize - 1, "]"), expandedPages.includes(index) ? /*#__PURE__*/React.createElement(SubEntries, null, entries.map(entry => /*#__PURE__*/React.createElement(HandleEntry, {
-    key: entry.label,
-    entry: entry
-  }))) : null)))) : null) : type === 'function' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Explorer, {
+  }), " [", index * pageSize, " ...", ' ', index * pageSize + pageSize - 1, "]"), expandedPages.includes(index) ? /*#__PURE__*/React.createElement(SubEntries, null, entries.map(entry => handleEntry(entry))) : null)))) : null) : type === 'function' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Explorer, {
     renderer: renderer,
     label: /*#__PURE__*/React.createElement("button", {
       onClick: refreshValueSnapshot,
@@ -1281,34 +371,29 @@ const DefaultRenderer = _ref2 => {
     defaultExpanded: {}
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, null, label, ":"), " ", /*#__PURE__*/React.createElement(Value, null, displayValue(value))));
 };
-
 function isIterable(x) {
   return Symbol.iterator in x;
 }
-
-function Explorer(_ref3) {
-  let {
-    value,
-    defaultExpanded,
-    renderer = DefaultRenderer,
-    pageSize = 100
-  } = _ref3,
-      rest = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
-
+function Explorer({
+  value,
+  defaultExpanded,
+  renderer = DefaultRenderer,
+  pageSize = 100,
+  ...rest
+}) {
   const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded));
   const toggleExpanded = React.useCallback(() => setExpanded(old => !old), []);
   let type = typeof value;
   let subEntries = [];
-
   const makeProperty = sub => {
     const subDefaultExpanded = defaultExpanded === true ? {
       [sub.label]: true
-    } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
-    return _extends({}, sub, {
+    } : defaultExpanded?.[sub.label];
+    return {
+      ...sub,
       defaultExpanded: subDefaultExpanded
-    });
+    };
   };
-
   if (Array.isArray(value)) {
     type = 'array';
     subEntries = value.map((d, i) => makeProperty({
@@ -1323,87 +408,68 @@ function Explorer(_ref3) {
     }));
   } else if (typeof value === 'object' && value !== null) {
     type = 'object';
-    subEntries = Object.entries(value).map(_ref4 => {
-      let [key, val] = _ref4;
-      return makeProperty({
-        label: key,
-        value: val
-      });
-    });
+    subEntries = Object.entries(value).map(([key, val]) => makeProperty({
+      label: key,
+      value: val
+    }));
   }
-
   const subEntryPages = chunkArray(subEntries, pageSize);
-  return renderer(_extends({
-    HandleEntry: _ref5 => {
-      let {
-        entry
-      } = _ref5;
-      return /*#__PURE__*/React.createElement(Explorer, _extends({
-        value: value,
-        renderer: renderer
-      }, rest, entry));
-    },
+  return renderer({
+    handleEntry: entry => /*#__PURE__*/React.createElement(Explorer, _extends({
+      key: entry.label,
+      value: value,
+      renderer: renderer
+    }, rest, entry)),
     type,
     subEntries,
     subEntryPages,
     value,
     expanded,
     toggleExpanded,
-    pageSize
-  }, rest));
+    pageSize,
+    ...rest
+  });
 }
 
+const isServer = typeof window === 'undefined';
 function Logo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    width: "40px",
-    height: "40px",
-    viewBox: "0 0 190 190",
-    version: "1.1"
-  }, props), /*#__PURE__*/React.createElement("g", {
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("g", {
-    id: "og-white",
-    transform: "translate(-28.000000, -21.000000)"
-  }, /*#__PURE__*/React.createElement("g", {
-    id: "Group-2",
-    transform: "translate(28.000000, 31.000000)"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M39.7239712,51.3436237 C36.631224,36.362877 35.9675112,24.8727722 37.9666331,16.5293551 C39.1555965,11.5671678 41.3293088,7.51908462 44.6346064,4.59846305 C48.1241394,1.51504777 52.5360327,0.00201216606 57.493257,0.00201216606 C65.6712013,0.00201216606 74.2682602,3.72732143 83.4557246,10.8044264 C87.2031203,13.6910458 91.0924366,17.170411 95.1316515,21.2444746 C95.4531404,20.8310265 95.8165416,20.4410453 96.2214301,20.0806152 C107.64098,9.91497158 117.255245,3.59892716 125.478408,1.16365068 C130.367899,-0.284364005 134.958526,-0.422317978 139.138936,0.983031021 C143.551631,2.46646844 147.06766,5.53294888 149.548314,9.82810912 C153.642288,16.9166735 154.721918,26.2310983 153.195595,37.7320243 C152.573451,42.4199112 151.50985,47.5263831 150.007094,53.0593153 C150.574045,53.1277086 151.142416,53.2532808 151.705041,53.4395297 C166.193932,58.2358678 176.453582,63.3937462 182.665021,69.2882839 C186.360669,72.7953831 188.773972,76.6998434 189.646365,81.0218204 C190.567176,85.5836746 189.669313,90.1593316 187.191548,94.4512967 C183.105211,101.529614 175.591643,107.11221 164.887587,111.534031 C160.589552,113.309539 155.726579,114.917559 150.293259,116.363748 C150.541176,116.92292 150.733521,117.516759 150.862138,118.139758 C153.954886,133.120505 154.618598,144.61061 152.619477,152.954027 C151.430513,157.916214 149.256801,161.964297 145.951503,164.884919 C142.46197,167.968334 138.050077,169.48137 133.092853,169.48137 C124.914908,169.48137 116.31785,165.756061 107.130385,158.678956 C103.343104,155.761613 99.4108655,152.238839 95.3254337,148.108619 C94.9050753,148.765474 94.3889681,149.376011 93.7785699,149.919385 C82.3590198,160.085028 72.744755,166.401073 64.5215915,168.836349 C59.6321009,170.284364 55.0414736,170.422318 50.8610636,169.016969 C46.4483686,167.533532 42.9323404,164.467051 40.4516862,160.171891 C36.3577116,153.083327 35.2780823,143.768902 36.8044053,132.267976 C37.449038,127.410634 38.56762,122.103898 40.1575891,116.339009 C39.5361041,116.276104 38.9120754,116.144816 38.2949591,115.940529 C23.8060684,111.144191 13.5464184,105.986312 7.33497892,100.091775 C3.63933121,96.5846754 1.22602752,92.6802151 0.353635235,88.3582381 C-0.567176333,83.7963839 0.330686581,79.2207269 2.80845236,74.9287618 C6.89478863,67.8504443 14.4083565,62.2678481 25.1124133,57.8460273 C29.5385143,56.0176154 34.5637208,54.366822 40.1939394,52.8874674 C39.9933393,52.3969171 39.8349374,51.8811235 39.7239712,51.3436237 Z",
-    id: "Path",
-    fill: "#002C4B",
-    fillRule: "nonzero",
-    transform: "translate(95.000000, 85.000000) scale(-1, 1) translate(-95.000000, -85.000000) "
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M76.1109918,91 L89.6216773,114.999606 L80.3968824,115 C78.6058059,115 76.9515387,114.041975 76.0601262,112.488483 L69.9456773,101.831606 L76.1109918,91 Z M118.814677,103.999606 L113.944933,112.488483 C113.053521,114.041975 111.399254,115 109.608177,115 L97.1836773,114.999606 L91,104 L118.814677,103.999606 Z M102.995798,71 L111,84.540954 L103.052984,98 L87.0061086,98 L79,84.3838793 L86.9562003,71 L102.995798,71 Z M124.136677,74.2726062 L128.577138,82.0115174 C129.461464,83.5526583 129.461464,85.4473417 128.577138,86.9884826 L122.257677,97.9996062 L110,98 L124.136677,74.2726062 Z M80,72 L66.1336773,95.1896062 L61.4279211,86.9884826 C60.543596,85.4473417 60.543596,83.5526583 61.4279211,82.0115174 L67.1716773,71.9996062 L80,72 Z M109.608177,54 C111.399254,54 113.053521,54.958025 113.944933,56.5115174 L120.835677,68.5206062 L114.929178,79 L100.820677,53.9996062 L109.608177,54 Z M93.7696773,53.9996062 L100,65 L71.1886773,64.9996062 L76.0601262,56.5115174 C76.9515387,54.958025 78.6058059,54 80.3968824,54 L93.7696773,53.9996062 Z",
-    id: "Polygon-3",
-    fill: "#FFD94C"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M54.8601729,98.3577578 C56.1715224,97.6082856 57.8360246,98.0746014 58.5779424,99.3993034 L58.5779424,99.3993034 L59.0525843,100.24352 C62.8563392,106.982993 66.8190116,113.380176 70.9406016,119.435068 C75.8078808,126.585427 81.28184,133.82411 87.3624792,141.151115 C88.3168778,142.30114 88.1849437,144.011176 87.065686,144.997937 L87.065686,144.997937 L86.4542085,145.534625 C66.3465389,163.103314 53.2778188,166.612552 47.2480482,156.062341 C41.3500652,145.742717 43.4844915,126.982888 53.6513274,99.7828526 C53.876818,99.1795821 54.3045861,98.675291 54.8601729,98.3577578 Z M140.534177,119.041504 C141.986131,118.785177 143.375496,119.742138 143.65963,121.194242 L143.65963,121.194242 L143.812815,121.986376 C148.782365,147.995459 145.283348,161 133.315764,161 C121.609745,161 106.708724,149.909007 88.6127018,127.727022 C88.2113495,127.235047 87.9945723,126.617371 88,125.981509 C88.013158,124.480686 89.2357854,123.274651 90.730918,123.287756 L90.730918,123.287756 L91.6846544,123.294531 C99.3056979,123.335994 106.714387,123.071591 113.910723,122.501323 C122.409039,121.82788 131.283523,120.674607 140.534177,119.041504 Z M147.408726,63.8119663 C147.932139,62.4026903 149.508386,61.6634537 150.954581,62.149012 L150.954581,62.149012 L151.742552,62.4154854 C177.583763,71.217922 187.402356,80.8916805 181.198332,91.4367609 C175.129904,101.751366 157.484347,109.260339 128.26166,113.963678 C127.613529,114.067994 126.948643,113.945969 126.382735,113.618843 C125.047025,112.846729 124.602046,111.158214 125.388848,109.847438 L125.388848,109.847438 L125.889328,109.0105 C129.877183,102.31633 133.481358,95.6542621 136.701854,89.0242957 C140.50501,81.1948179 144.073967,72.7907081 147.408726,63.8119663 Z M61.7383398,56.0363218 C62.3864708,55.9320063 63.0513565,56.0540315 63.6172646,56.3811573 C64.9529754,57.153271 65.3979538,58.8417862 64.6111517,60.1525615 L64.6111517,60.1525615 L64.1106718,60.9895001 C60.1228168,67.6836699 56.5186416,74.3457379 53.2981462,80.9757043 C49.49499,88.8051821 45.9260328,97.2092919 42.5912744,106.188034 C42.0678608,107.59731 40.4916142,108.336546 39.045419,107.850988 L39.045419,107.850988 L38.2574475,107.584515 C12.4162372,98.782078 2.59764398,89.1083195 8.80166786,78.5632391 C14.8700957,68.2486335 32.515653,60.7396611 61.7383398,56.0363218 Z M103.545792,24.4653746 C123.653461,6.89668641 136.722181,3.38744778 142.751952,13.9376587 C148.649935,24.2572826 146.515508,43.0171122 136.348673,70.2171474 C136.123182,70.8204179 135.695414,71.324709 135.139827,71.6422422 C133.828478,72.3917144 132.163975,71.9253986 131.422058,70.6006966 L131.422058,70.6006966 L130.947416,69.7564798 C127.143661,63.0170065 123.180988,56.6198239 119.059398,50.564932 C114.192119,43.4145727 108.71816,36.1758903 102.637521,28.8488847 C101.683122,27.6988602 101.815056,25.9888243 102.934314,25.0020629 L102.934314,25.0020629 Z M57.6842361,8 C69.3902551,8 84.2912758,19.0909926 102.387298,41.2729777 C102.788651,41.7649527 103.005428,42.3826288 103,43.0184911 C102.986842,44.5193144 101.764215,45.7253489 100.269082,45.7122445 L100.269082,45.7122445 L99.3153456,45.7054689 C91.6943021,45.6640063 84.2856126,45.9284091 77.0892772,46.4986773 C68.5909612,47.17212 59.7164767,48.325393 50.4658235,49.9584962 C49.0138691,50.2148231 47.6245044,49.2578618 47.3403697,47.805758 L47.3403697,47.805758 L47.1871846,47.0136235 C42.2176347,21.0045412 45.7166519,8 57.6842361,8 Z",
-    id: "Combined-Shape",
-    fill: "#FF4154"
-  })))));
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, props, {
+    style: {
+      ...(props.style ?? {}),
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column',
+      fontSize: '0.8rem',
+      fontWeight: 'bolder',
+      lineHeight: '1'
+    }
+  }), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      letterSpacing: '-0.05rem'
+    }
+  }, "TANSTACK"), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))',
+      // @ts-ignore
+      '--tw-gradient-from': '#84cc16',
+      '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)',
+      '--tw-gradient-to': '#10b981',
+      WebkitBackgroundClip: 'text',
+      color: 'transparent',
+      letterSpacing: '0.1rem',
+      marginRight: '-0.2rem'
+    }
+  }, "ROUTER"));
 }
-
-const _excluded = ["style"],
-      _excluded2 = ["style", "onClick"],
-      _excluded3 = ["style", "onClick"],
-      _excluded4 = ["isOpen", "setIsOpen", "handleDragStart", "useRouter"],
-      _excluded5 = ["listeners", "buildLocation", "mount", "update", "buildNext", "navigate", "cancelMatches", "loadLocation", "cleanPreloadCache", "loadRoute", "matchRoutes", "loadMatches", "invalidateRoute", "resolvePath", "matchRoute", "buildLink", "__experimental__createSnapshot", "destroy"],
-      _excluded6 = ["cancel", "load", "router", "Link", "MatchRoute", "buildLink", "linkProps", "matchRoute", "navigate"];
-const isServer = typeof window === 'undefined';
-function TanStackRouterDevtools(_ref) {
-  let {
-    initialIsOpen,
-    panelProps = {},
-    closeButtonProps = {},
-    toggleButtonProps = {},
-    position = 'bottom-left',
-    containerElement: Container = 'footer',
-    useRouter: useRouterImpl = useRouter
-  } = _ref;
+function TanStackRouterDevtools({
+  initialIsOpen,
+  panelProps = {},
+  closeButtonProps = {},
+  toggleButtonProps = {},
+  position = 'bottom-left',
+  containerElement: Container = 'footer',
+  router
+}) {
   const rootRef = React__default.useRef(null);
   const panelRef = React__default.useRef(null);
   const [isOpen, setIsOpen] = useLocalStorage('tanstackRouterDevtoolsOpen', initialIsOpen);
@@ -1411,61 +477,51 @@ function TanStackRouterDevtools(_ref) {
   const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false);
   const [isResizing, setIsResizing] = useSafeState(false);
   const isMounted = useIsMounted();
-
-  const _handleDragStart = (panelElement, startEvent) => {
-    var _panelElement$getBoun;
-
+  const handleDragStart = (panelElement, startEvent) => {
     if (startEvent.button !== 0) return; // Only allow left click for drag
 
     setIsResizing(true);
     const dragInfo = {
-      originalHeight: (_panelElement$getBoun = panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) != null ? _panelElement$getBoun : 0,
+      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,
       pageY: startEvent.pageY
     };
-
     const run = moveEvent => {
       const delta = dragInfo.pageY - moveEvent.pageY;
-      const newHeight = (dragInfo == null ? void 0 : dragInfo.originalHeight) + delta;
+      const newHeight = dragInfo?.originalHeight + delta;
       setDevtoolsHeight(newHeight);
-
       if (newHeight < 70) {
         setIsOpen(false);
       } else {
         setIsOpen(true);
       }
     };
-
     const unsub = () => {
       setIsResizing(false);
       document.removeEventListener('mousemove', run);
       document.removeEventListener('mouseUp', unsub);
     };
-
     document.addEventListener('mousemove', run);
     document.addEventListener('mouseup', unsub);
   };
-
   React__default.useEffect(() => {
-    setIsResolvedOpen(isOpen != null ? isOpen : false);
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen]); // Toggle panel visibility before/after transition (depending on direction).
-  // Prevents focusing in a closed panel.
+    setIsResolvedOpen(isOpen ?? false);
+  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
 
+  // Toggle panel visibility before/after transition (depending on direction).
+  // Prevents focusing in a closed panel.
   React__default.useEffect(() => {
     const ref = panelRef.current;
-
     if (ref) {
       const handlePanelTransitionStart = () => {
         if (ref && isResolvedOpen) {
           ref.style.visibility = 'visible';
         }
       };
-
       const handlePanelTransitionEnd = () => {
         if (ref && !isResolvedOpen) {
           ref.style.visibility = 'hidden';
         }
       };
-
       ref.addEventListener('transitionstart', handlePanelTransitionStart);
       ref.addEventListener('transitionend', handlePanelTransitionEnd);
       return () => {
@@ -1473,62 +529,46 @@ function TanStackRouterDevtools(_ref) {
         ref.removeEventListener('transitionend', handlePanelTransitionEnd);
       };
     }
-
     return;
   }, [isResolvedOpen]);
   React__default[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
     if (isResolvedOpen) {
-      var _rootRef$current, _rootRef$current$pare;
-
-      const previousValue = (_rootRef$current = rootRef.current) == null ? void 0 : (_rootRef$current$pare = _rootRef$current.parentElement) == null ? void 0 : _rootRef$current$pare.style.paddingBottom;
-
+      const previousValue = rootRef.current?.parentElement?.style.paddingBottom;
       const run = () => {
-        var _panelRef$current, _rootRef$current2;
-
-        const containerHeight = (_panelRef$current = panelRef.current) == null ? void 0 : _panelRef$current.getBoundingClientRect().height;
-
-        if ((_rootRef$current2 = rootRef.current) != null && _rootRef$current2.parentElement) {
-          rootRef.current.parentElement.style.paddingBottom = containerHeight + "px";
+        const containerHeight = panelRef.current?.getBoundingClientRect().height;
+        if (rootRef.current?.parentElement) {
+          rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`;
         }
       };
-
       run();
-
       if (typeof window !== 'undefined') {
         window.addEventListener('resize', run);
         return () => {
-          var _rootRef$current3;
-
           window.removeEventListener('resize', run);
-
-          if ((_rootRef$current3 = rootRef.current) != null && _rootRef$current3.parentElement && typeof previousValue === 'string') {
+          if (rootRef.current?.parentElement && typeof previousValue === 'string') {
             rootRef.current.parentElement.style.paddingBottom = previousValue;
           }
         };
       }
     }
-
     return;
   }, [isResolvedOpen]);
-
   const {
-    style: panelStyle = {}
-  } = panelProps,
-        otherPanelProps = _objectWithoutPropertiesLoose(panelProps, _excluded);
-
+    style: panelStyle = {},
+    ...otherPanelProps
+  } = panelProps;
   const {
     style: closeButtonStyle = {},
-    onClick: onCloseClick
-  } = closeButtonProps,
-        otherCloseButtonProps = _objectWithoutPropertiesLoose(closeButtonProps, _excluded2);
-
+    onClick: onCloseClick,
+    ...otherCloseButtonProps
+  } = closeButtonProps;
   const {
     style: toggleButtonStyle = {},
-    onClick: onToggleClick
-  } = toggleButtonProps,
-        otherToggleButtonProps = _objectWithoutPropertiesLoose(toggleButtonProps, _excluded3); // Do not render on the server
-
+    onClick: onToggleClick,
+    ...otherToggleButtonProps
+  } = toggleButtonProps;
 
+  // Do not render on the server
   if (!isMounted()) return null;
   return /*#__PURE__*/React__default.createElement(Container, {
     ref: rootRef,
@@ -1538,36 +578,39 @@ function TanStackRouterDevtools(_ref) {
   }, /*#__PURE__*/React__default.createElement(TanStackRouterDevtoolsPanel, _extends({
     ref: panelRef
   }, otherPanelProps, {
-    useRouter: useRouterImpl,
-    style: _extends({
+    router: router,
+    style: {
       position: 'fixed',
       bottom: '0',
       right: '0',
       zIndex: 99999,
       width: '100%',
-      height: devtoolsHeight != null ? devtoolsHeight : 500,
+      height: devtoolsHeight ?? 500,
       maxHeight: '90%',
       boxShadow: '0 0 20px rgba(0,0,0,.3)',
-      borderTop: "1px solid " + defaultTheme.gray,
+      borderTop: `1px solid ${defaultTheme.gray}`,
       transformOrigin: 'top',
       // visibility will be toggled after transitions, but set initial state here
-      visibility: isOpen ? 'visible' : 'hidden'
-    }, panelStyle, isResizing ? {
-      transition: "none"
-    } : {
-      transition: "all .2s ease"
-    }, isResolvedOpen ? {
-      opacity: 1,
-      pointerEvents: 'all',
-      transform: "translateY(0) scale(1)"
-    } : {
-      opacity: 0,
-      pointerEvents: 'none',
-      transform: "translateY(15px) scale(1.02)"
-    }),
+      visibility: isOpen ? 'visible' : 'hidden',
+      ...panelStyle,
+      ...(isResizing ? {
+        transition: `none`
+      } : {
+        transition: `all .2s ease`
+      }),
+      ...(isResolvedOpen ? {
+        opacity: 1,
+        pointerEvents: 'all',
+        transform: `translateY(0) scale(1)`
+      } : {
+        opacity: 0,
+        pointerEvents: 'none',
+        transform: `translateY(15px) scale(1.02)`
+      })
+    },
     isOpen: isResolvedOpen,
     setIsOpen: setIsOpen,
-    handleDragStart: e => _handleDragStart(panelRef.current, e)
+    handleDragStart: e => handleDragStart(panelRef.current, e)
   })), isResolvedOpen ? /*#__PURE__*/React__default.createElement(Button, _extends({
     type: "button",
     "aria-label": "Close TanStack Router Devtools"
@@ -1576,20 +619,22 @@ function TanStackRouterDevtools(_ref) {
       setIsOpen(false);
       onCloseClick && onCloseClick(e);
     },
-    style: _extends({
+    style: {
       position: 'fixed',
       zIndex: 99999,
       margin: '.5em',
-      bottom: 0
-    }, position === 'top-right' ? {
-      right: '0'
-    } : position === 'top-left' ? {
-      left: '0'
-    } : position === 'bottom-right' ? {
-      right: '0'
-    } : {
-      left: '0'
-    }, closeButtonStyle)
+      bottom: 0,
+      ...(position === 'top-right' ? {
+        right: '0'
+      } : position === 'top-left' ? {
+        left: '0'
+      } : position === 'bottom-right' ? {
+        right: '0'
+      } : {
+        left: '0'
+      }),
+      ...closeButtonStyle
+    }
   }), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React__default.createElement("button", _extends({
     type: "button"
   }, otherToggleButtonProps, {
@@ -1598,7 +643,7 @@ function TanStackRouterDevtools(_ref) {
       setIsOpen(true);
       onToggleClick && onToggleClick(e);
     },
-    style: _extends({
+    style: {
       appearance: 'none',
       background: 'none',
       border: 0,
@@ -1609,46 +654,95 @@ function TanStackRouterDevtools(_ref) {
       fontSize: '1.5em',
       margin: '.5em',
       cursor: 'pointer',
-      width: 'fit-content'
-    }, position === 'top-right' ? {
-      top: '0',
-      right: '0'
-    } : position === 'top-left' ? {
-      top: '0',
-      left: '0'
-    } : position === 'bottom-right' ? {
-      bottom: '0',
-      right: '0'
-    } : {
-      bottom: '0',
-      left: '0'
-    }, toggleButtonStyle)
+      width: 'fit-content',
+      ...(position === 'top-right' ? {
+        top: '0',
+        right: '0'
+      } : position === 'top-left' ? {
+        top: '0',
+        left: '0'
+      } : position === 'bottom-right' ? {
+        bottom: '0',
+        right: '0'
+      } : {
+        bottom: '0',
+        left: '0'
+      }),
+      ...toggleButtonStyle
+    }
   }), /*#__PURE__*/React__default.createElement(Logo, {
     "aria-hidden": true
   })) : null);
 }
+function RouteComp({
+  route,
+  isRoot,
+  matches,
+  activeRouteId,
+  setActiveRouteId
+}) {
+  const isActive = matches.find(d => d.route === route);
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    role: "button",
+    "aria-label": `Open match details for ${route.id}`,
+    onClick: () => setActiveRouteId(activeRouteId === route.id ? '' : route.id),
+    style: {
+      display: 'flex',
+      borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
+      cursor: 'pointer',
+      alignItems: 'center',
+      background: route.id === activeRouteId ? 'rgba(255,255,255,.1)' : undefined
+    }
+  }, isRoot ? null : /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      flex: '0 0 auto',
+      width: '.7rem',
+      height: '.7rem',
+      margin: '.5rem .75rem',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontWeight: 'bold',
+      borderRadius: '100%',
+      transition: 'all .2s ease-out',
+      background: getRouteStatusColor(matches, route, defaultTheme),
+      opacity: isActive ? 1 : 0.3
+    }
+  }), /*#__PURE__*/React__default.createElement(Code, {
+    style: {
+      padding: '.25rem 0',
+      paddingLeft: isRoot ? '.5rem' : 0,
+      opacity: isActive ? 1 : 0.7
+    }
+  }, `${route.id}`)), route.children?.length ? /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      marginLeft: isRoot ? 0 : '1rem',
+      borderLeft: isRoot ? '' : `solid 1px ${defaultTheme.grayAlt}`
+    }
+  }, route.children.map(r => /*#__PURE__*/React__default.createElement(RouteComp, {
+    key: r.id,
+    route: r,
+    matches: matches,
+    activeRouteId: activeRouteId,
+    setActiveRouteId: setActiveRouteId
+  }))) : null);
+}
 const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
-  var _router$state$matches, _router$state$pending, _last, _last2, _last3, _last4, _last5, _last6;
-
   const {
     isOpen = true,
+    setIsOpen,
     handleDragStart,
-    useRouter
-  } = props,
-        panelProps = _objectWithoutPropertiesLoose(props, _excluded4);
-
-  const router = useRouter();
-  React__default.useEffect(() => {
-    let interval = setInterval(() => {
-      router.cleanPreloadCache();
-      router.notify();
-    }, 1000);
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
+    router: userRouter,
+    ...panelProps
+  } = props;
+  const routerContextValue = React__default.useContext(routerContext);
+  const router = userRouter ?? routerContextValue?.router;
+  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.');
+  useStore(router.__store);
+  const [showMatches, setShowMatches] = useLocalStorage('tanstackRouterDevtoolsShowMatches', true);
   const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
-  const activeMatch = (_router$state$matches = router.state.matches) == null ? void 0 : _router$state$matches.find(d => d.routeId === activeRouteId);
+  const allMatches = React__default.useMemo(() => [...Object.values(router.state.currentMatches), ...Object.values(router.state.pendingMatches ?? [])], [router.state.currentMatches, router.state.pendingMatches]);
+  const activeMatch = allMatches?.find(d => d.route.id === activeRouteId);
+  const hasSearch = Object.keys(last(router.state.currentMatches)?.state.search || {}).length;
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React__default.createElement(Panel, _extends({
@@ -1656,7 +750,49 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     className: "TanStackRouterDevtoolsPanel"
   }, panelProps), /*#__PURE__*/React__default.createElement("style", {
     dangerouslySetInnerHTML: {
-      __html: "\n\n            .TanStackRouterDevtoolsPanel * {\n              scrollbar-color: " + defaultTheme.backgroundAlt + " " + defaultTheme.gray + ";\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {\n              width: 1em;\n              height: 1em;\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {\n              background: " + defaultTheme.backgroundAlt + ";\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {\n              background: " + defaultTheme.gray + ";\n              border-radius: .5em;\n              border: 3px solid " + defaultTheme.backgroundAlt + ";\n            }\n\n            .TanStackRouterDevtoolsPanel table {\n              width: 100%;\n            }\n\n            .TanStackRouterDevtoolsPanel table tr {\n              border-bottom: 2px dotted rgba(255, 255, 255, .2);\n            }\n\n            .TanStackRouterDevtoolsPanel table tr:last-child {\n              border-bottom: none\n            }\n\n            .TanStackRouterDevtoolsPanel table td {\n              padding: .25rem .5rem;\n              border-right: 2px dotted rgba(255, 255, 255, .05);\n            }\n\n            .TanStackRouterDevtoolsPanel table td:last-child {\n              border-right: none\n            }\n\n          "
+      __html: `
+
+            .TanStackRouterDevtoolsPanel * {
+              scrollbar-color: ${defaultTheme.backgroundAlt} ${defaultTheme.gray};
+            }
+
+            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {
+              width: 1em;
+              height: 1em;
+            }
+
+            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {
+              background: ${defaultTheme.backgroundAlt};
+            }
+
+            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {
+              background: ${defaultTheme.gray};
+              border-radius: .5em;
+              border: 3px solid ${defaultTheme.backgroundAlt};
+            }
+
+            .TanStackRouterDevtoolsPanel table {
+              width: 100%;
+            }
+
+            .TanStackRouterDevtoolsPanel table tr {
+              border-bottom: 2px dotted rgba(255, 255, 255, .2);
+            }
+
+            .TanStackRouterDevtoolsPanel table tr:last-child {
+              border-bottom: none
+            }
+
+            .TanStackRouterDevtoolsPanel table td {
+              padding: .25rem .5rem;
+              border-right: 2px dotted rgba(255, 255, 255, .05);
+            }
+
+            .TanStackRouterDevtoolsPanel table td:last-child {
+              border-right: none
+            }
+
+          `
     }
   }), /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -1676,30 +812,27 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       minHeight: '40%',
       maxHeight: '100%',
       overflow: 'auto',
-      borderRight: "1px solid " + defaultTheme.grayAlt,
+      borderRight: `1px solid ${defaultTheme.grayAlt}`,
       display: 'flex',
       flexDirection: 'column'
     }
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
-      padding: '.5em',
-      background: defaultTheme.backgroundAlt,
       display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center'
+      justifyContent: 'start',
+      gap: '1rem',
+      padding: '1rem',
+      alignItems: 'center',
+      background: defaultTheme.backgroundAlt
     }
   }, /*#__PURE__*/React__default.createElement(Logo, {
-    "aria-hidden": true,
-    style: {
-      marginRight: '.5em'
-    }
+    "aria-hidden": true
   }), /*#__PURE__*/React__default.createElement("div", {
     style: {
-      marginRight: 'auto',
       fontSize: 'clamp(.8rem, 2vw, 1.3rem)',
       fontWeight: 'bold'
     }
-  }, "TanStack Router", ' ', /*#__PURE__*/React__default.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement("span", {
     style: {
       fontWeight: 100
     }
@@ -1714,11 +847,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     }
   }, /*#__PURE__*/React__default.createElement(Explorer, {
     label: "Router",
-    value: (() => {
-      const rest = _objectWithoutPropertiesLoose(router, _excluded5);
-
-      return rest;
-    })(),
+    value: router,
     defaultExpanded: {}
   })))), /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -1726,7 +855,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       minHeight: '40%',
       maxHeight: '100%',
       overflow: 'auto',
-      borderRight: "1px solid " + defaultTheme.grayAlt,
+      borderRight: `1px solid ${defaultTheme.grayAlt}`,
       display: 'flex',
       flexDirection: 'column'
     }
@@ -1736,17 +865,44 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       background: defaultTheme.backgroundAlt,
       position: 'sticky',
       top: 0,
-      zIndex: 1
+      zIndex: 1,
+      display: 'flex',
+      alignItems: 'center',
+      gap: '.5rem'
     }
-  }, "Current Matches"), router.state.matches.map((match, i) => {
+  }, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    onClick: () => {
+      setShowMatches(false);
+    },
+    disabled: !showMatches,
+    style: {
+      opacity: showMatches ? 0.5 : 1
+    }
+  }, "Routes"), "/", /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    onClick: () => {
+      setShowMatches(true);
+    },
+    disabled: showMatches,
+    style: {
+      opacity: !showMatches ? 0.5 : 1
+    }
+  }, "Matches")), !showMatches ? /*#__PURE__*/React__default.createElement(RouteComp, {
+    route: router.routeTree,
+    isRoot: true,
+    matches: allMatches,
+    activeRouteId: activeRouteId,
+    setActiveRouteId: setActiveRouteId
+  }) : /*#__PURE__*/React__default.createElement("div", null, router.state.currentMatches.map((match, i) => {
     return /*#__PURE__*/React__default.createElement("div", {
-      key: match.routeId || i,
+      key: match.route.id || i,
       role: "button",
-      "aria-label": "Open match details for " + match.routeId,
-      onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
+      "aria-label": `Open match details for ${match.route.id}`,
+      onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
       style: {
         display: 'flex',
-        borderBottom: "solid 1px " + defaultTheme.grayAlt,
+        borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
         cursor: 'pointer',
         alignItems: 'center',
         background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
@@ -1768,8 +924,8 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       style: {
         padding: '.5em'
       }
-    }, "" + match.matchId));
-  }), /*#__PURE__*/React__default.createElement("div", {
+    }, `${match.id}`));
+  }), router.state.pendingMatches?.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
       marginTop: '2rem',
       padding: '.5em',
@@ -1778,15 +934,15 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       top: 0,
       zIndex: 1
     }
-  }, "Pending Matches"), (_router$state$pending = router.state.pending) == null ? void 0 : _router$state$pending.matches.map((match, i) => {
+  }, "Pending Matches"), router.state.pendingMatches?.map((match, i) => {
     return /*#__PURE__*/React__default.createElement("div", {
-      key: match.routeId || i,
+      key: match.route.id || i,
       role: "button",
-      "aria-label": "Open match details for " + match.routeId,
-      onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
+      "aria-label": `Open match details for ${match.route.id}`,
+      onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
       style: {
         display: 'flex',
-        borderBottom: "solid 1px " + defaultTheme.grayAlt,
+        borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
         cursor: 'pointer',
         background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
       }
@@ -1807,77 +963,14 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       style: {
         padding: '.5em'
       }
-    }, "" + match.matchId));
-  }), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      marginTop: '2rem',
-      padding: '.5em',
-      background: defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      zIndex: 1
-    }
-  }, "Preloading Matches"), Object.keys(router.preloadCache).filter(key => {
-    var _cacheEntry$match$upd;
-
-    const cacheEntry = router.preloadCache[key];
-    return ((_cacheEntry$match$upd = cacheEntry.match.updatedAt) != null ? _cacheEntry$match$upd : Date.now()) + cacheEntry.maxAge > Date.now();
-  }).map((key, i) => {
-    var _match$updatedAt;
-
-    const {
-      match,
-      maxAge
-    } = router.preloadCache[key];
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: match.matchId || i,
-      role: "button",
-      "aria-label": "Open match details for " + match.matchId,
-      onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
-      style: {
-        display: 'flex',
-        borderBottom: "solid 1px " + defaultTheme.grayAlt,
-        cursor: 'pointer',
-        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '.5rem',
-        gap: '.3rem'
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '.5rem'
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        flex: '0 0 auto',
-        width: '1.3rem',
-        height: '1.3rem',
-        background: getStatusColor(match, defaultTheme),
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontWeight: 'bold',
-        borderRadius: '.25rem',
-        transition: 'all .2s ease-out'
-      }
-    }), /*#__PURE__*/React__default.createElement(Code, null, "" + match.matchId)), /*#__PURE__*/React__default.createElement("span", {
-      style: {
-        opacity: '.5'
-      }
-    }, "Expires", ' ', formatDistanceStrict(new Date(), new Date(((_match$updatedAt = match.updatedAt) != null ? _match$updatedAt : Date.now()) + maxAge), {
-      addSuffix: true
-    }))));
-  })), activeMatch ? /*#__PURE__*/React__default.createElement(ActivePanel, null, /*#__PURE__*/React__default.createElement("div", {
+    }, `${match.id}`));
+  })) : null)), activeMatch ? /*#__PURE__*/React__default.createElement(ActivePanel, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
       padding: '.5em',
       background: defaultTheme.backgroundAlt,
       position: 'sticky',
       top: 0,
+      bottom: 0,
       zIndex: 1
     }
   }, "Match Details"), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("table", null, /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
@@ -1888,56 +981,21 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     style: {
       lineHeight: '1.8em'
     }
-  }, JSON.stringify(activeMatch.matchId, null, 2)))), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
-    style: {
-      opacity: '.5'
-    }
-  }, "Status"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.status)), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
-    style: {
-      opacity: '.5'
-    }
-  }, "Pending"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.isPending.toString())), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+  }, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     style: {
       opacity: '.5'
     }
-  }, "Invalid"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.isInvalid.toString())), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+  }, "Status"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.state.status)), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     style: {
       opacity: '.5'
     }
-  }, "Last Updated"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      background: defaultTheme.backgroundAlt,
-      padding: '.5em',
-      position: 'sticky',
-      top: 0,
-      zIndex: 1
-    }
-  }, "Actions"), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '0.5em'
-    }
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    type: "button",
-    onClick: () => {
-      router.invalidateRoute(activeMatch);
-      router.notify();
-    },
-    style: {
-      background: defaultTheme.warning,
-      color: defaultTheme.inputTextColor
-    }
-  }, "Invalidate"), ' ', /*#__PURE__*/React__default.createElement(Button, {
-    type: "button",
-    onClick: () => router.reload(),
-    style: {
-      background: defaultTheme.gray
-    }
-  }, "Reload")), /*#__PURE__*/React__default.createElement("div", {
+  }, "Last Updated"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.state.updatedAt ? new Date(activeMatch.state.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       background: defaultTheme.backgroundAlt,
       padding: '.5em',
       position: 'sticky',
       top: 0,
+      bottom: 0,
       zIndex: 1
     }
   }, "Explorer"), /*#__PURE__*/React__default.createElement("div", {
@@ -1946,19 +1004,15 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     }
   }, /*#__PURE__*/React__default.createElement(Explorer, {
     label: "Match",
-    value: (() => {
-      const rest = _objectWithoutPropertiesLoose(activeMatch, _excluded6);
-
-      return rest;
-    })(),
+    value: activeMatch,
     defaultExpanded: {}
-  }))) : null, /*#__PURE__*/React__default.createElement("div", {
+  }))) : null, hasSearch ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       flex: '1 1 500px',
       minHeight: '40%',
       maxHeight: '100%',
       overflow: 'auto',
-      borderRight: "1px solid " + defaultTheme.grayAlt,
+      borderRight: `1px solid ${defaultTheme.grayAlt}`,
       display: 'flex',
       flexDirection: 'column'
     }
@@ -1968,45 +1022,20 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       background: defaultTheme.backgroundAlt,
       position: 'sticky',
       top: 0,
-      zIndex: 1
-    }
-  }, "Loader Data"), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5em'
-    }
-  }, Object.keys(((_last = last(router.state.matches)) == null ? void 0 : _last.loaderData) || {}).length ? /*#__PURE__*/React__default.createElement(Explorer, {
-    value: ((_last2 = last(router.state.matches)) == null ? void 0 : _last2.loaderData) || {},
-    defaultExpanded: Object.keys(((_last3 = last(router.state.matches)) == null ? void 0 : _last3.loaderData) || {}).reduce((obj, next) => {
-      obj[next] = {};
-      return obj;
-    }, {})
-  }) : /*#__PURE__*/React__default.createElement("em", {
-    style: {
-      opacity: 0.5
-    }
-  }, '{ }')), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5em',
-      background: defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
+      bottom: 0,
       zIndex: 1
     }
   }, "Search Params"), /*#__PURE__*/React__default.createElement("div", {
     style: {
       padding: '.5em'
     }
-  }, Object.keys(((_last4 = last(router.state.matches)) == null ? void 0 : _last4.search) || {}).length ? /*#__PURE__*/React__default.createElement(Explorer, {
-    value: ((_last5 = last(router.state.matches)) == null ? void 0 : _last5.search) || {},
-    defaultExpanded: Object.keys(((_last6 = last(router.state.matches)) == null ? void 0 : _last6.search) || {}).reduce((obj, next) => {
+  }, /*#__PURE__*/React__default.createElement(Explorer, {
+    value: last(router.state.currentMatches)?.state.search || {},
+    defaultExpanded: Object.keys(last(router.state.currentMatches)?.state.search || {}).reduce((obj, next) => {
       obj[next] = {};
       return obj;
     }, {})
-  }) : /*#__PURE__*/React__default.createElement("em", {
-    style: {
-      opacity: 0.5
-    }
-  }, '{ }')))));
+  }))) : null));
 });
 
 export { TanStackRouterDevtools, TanStackRouterDevtoolsPanel };