@tanstack/react-router-devtools 0.0.1-beta.8 → 0.0.1-beta.81

package/build/esm/index.js

@@ -10,893 +10,38 @@
  */
 import * as React from 'react';
 import React__default from 'react';
-import { last } from '@tanstack/react-router';
+import { routerContext, invariant, useStore, last } from '@tanstack/react-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,74 +95,62 @@ function useMediaQuery(query) {
     if (typeof window !== 'undefined') {
       return window.matchMedia && window.matchMedia(query).matches;
     }
-
     return;
-  }); // Watch for changes
+  });
 
+  // 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 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() {
@@ -1037,22 +164,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);
@@ -1065,55 +192,20 @@ 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;
   }));
 }
 
-function multiSortBy(arr, accessors) {
-  if (accessors === void 0) {
-    accessors = [d => d];
-  }
-
-  return arr.map((d, i) => [d, i]).sort((_ref3, _ref4) => {
-    let [a, ai] = _ref3;
-    let [b, bi] = _ref4;
-
-    for (const accessor of accessors) {
-      const ao = accessor(a);
-      const bo = accessor(b);
-
-      if (typeof ao === 'undefined') {
-        if (typeof bo === 'undefined') {
-          continue;
-        }
-
-        return 1;
-      }
-
-      if (ao === bo) {
-        continue;
-      }
-
-      return ao > bo ? 1 : -1;
-    }
-
-    return ai - bi;
-  }).map(_ref5 => {
-    let [d] = _ref5;
-    return d;
-  });
-}
-
 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
@@ -1122,10 +214,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',
@@ -1134,7 +227,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) => ({
@@ -1148,10 +241,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',
@@ -1164,40 +260,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',
@@ -1233,20 +296,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
  *
@@ -1260,39 +320,34 @@ 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, 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, index) => handleEntry(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])
@@ -1312,34 +367,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({
@@ -1354,17 +404,13 @@ 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({
+  return renderer({
     handleEntry: entry => /*#__PURE__*/React.createElement(Explorer, _extends({
       key: entry.label,
       value: value,
@@ -1376,51 +422,50 @@ function Explorer(_ref3) {
     value,
     expanded,
     toggleExpanded,
-    pageSize
-  }, rest));
+    pageSize,
+    ...rest
+  });
 }
 
-const _excluded = ["style"],
-      _excluded2 = ["style", "onClick"],
-      _excluded3 = ["style", "onClick"],
-      _excluded4 = ["isOpen", "setIsOpen", "handleDragStart", "router"];
 const isServer = typeof window === 'undefined';
-
 function Logo(props) {
-  var _props$style;
-
   return /*#__PURE__*/React__default.createElement("div", _extends({}, props, {
-    style: _extends({}, (_props$style = props.style) != null ? _props$style : {}, {
+    style: {
+      ...(props.style ?? {}),
       display: 'flex',
       alignItems: 'center',
       flexDirection: 'column',
-      fontSize: '0.7rem',
-      fontWeight: '900',
+      fontSize: '0.8rem',
+      fontWeight: 'bolder',
       lineHeight: '1'
-    })
+    }
   }), /*#__PURE__*/React__default.createElement("div", {
     style: {
       letterSpacing: '-0.05rem'
     }
   }, "TANSTACK"), /*#__PURE__*/React__default.createElement("div", {
-    className: "text-transparent bg-clip-text bg-gradient-to-r from-lime-500 to-emerald-500",
     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"));
 }
-
-function TanStackRouterDevtools(_ref) {
-  let {
-    initialIsOpen,
-    panelProps = {},
-    closeButtonProps = {},
-    toggleButtonProps = {},
-    position = 'bottom-left',
-    containerElement: Container = 'footer',
-    router
-  } = _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);
@@ -1428,61 +473,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 () => {
@@ -1490,62 +525,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,
@@ -1556,35 +575,38 @@ function TanStackRouterDevtools(_ref) {
     ref: panelRef
   }, otherPanelProps, {
     router: router,
-    style: _extends({
+    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"
@@ -1593,20 +615,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, {
@@ -1615,7 +639,7 @@ function TanStackRouterDevtools(_ref) {
       setIsOpen(true);
       onToggleClick && onToggleClick(e);
     },
-    style: _extends({
+    style: {
       appearance: 'none',
       background: 'none',
       border: 0,
@@ -1626,65 +650,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);
 }
 const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
-  var _Object$values$find$m, _Object$values, _Object$values$find, _router$state$matches, _router$state$pending, _router$state$pending2, _last, _last2, _last3, _last4, _last5, _last6;
-
   const {
     isOpen = true,
+    setIsOpen,
     handleDragStart,
-    router
-  } = props,
-        panelProps = _objectWithoutPropertiesLoose(props, _excluded4);
-
-  const rerender = React__default.useReducer(() => ({}), {})[1];
-  React__default.useEffect(() => {
-    let interval = setInterval(() => {
-      router.cleanMatchCache(); // router.notify()
-
-      rerender();
-    }, 250);
-    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 [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
   const [activeMatchId, setActiveMatchId] = useLocalStorage('tanstackRouterDevtoolsActiveMatchId', '');
   React__default.useEffect(() => {
     setActiveMatchId('');
   }, [activeRouteId]);
-  const activeMatch = (_Object$values$find$m = (_Object$values = Object.values(router.matchCache)) == null ? void 0 : (_Object$values$find = _Object$values.find(d => d.match.matchId === activeMatchId)) == null ? void 0 : _Object$values$find.match) != null ? _Object$values$find$m : (_router$state$matches = router.state.matches) == null ? void 0 : _router$state$matches.find(d => d.routeId === activeRouteId);
-  const matchCacheValues = multiSortBy(Object.keys(router.matchCache).filter(key => {
-    const cacheEntry = router.matchCache[key];
-    return cacheEntry.gc > Date.now();
-  }).map(key => router.matchCache[key]), [d => d.match.isFetching ? -1 : 1, d => -d.match.updatedAt]);
+  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.id === activeMatchId) || allMatches?.find(d => d.route.id === activeRouteId);
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     theme: defaultTheme
-  }, /*#__PURE__*/React__default.createElement("script", {
-    src: "https://cdn.tailwindcss.com"
-  }), /*#__PURE__*/React__default.createElement(Panel, _extends({
+  }, /*#__PURE__*/React__default.createElement(Panel, _extends({
     ref: ref,
     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: {
@@ -1704,13 +758,17 @@ 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", {
-    className: "flex justify-start gap-2 p-2 items-center",
     style: {
+      display: 'flex',
+      justifyContent: 'start',
+      gap: '1rem',
+      padding: '1rem',
+      alignItems: 'center',
       background: defaultTheme.backgroundAlt
     }
   }, /*#__PURE__*/React__default.createElement(Logo, {
@@ -1743,7 +801,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'
     }
@@ -1755,15 +813,15 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       top: 0,
       zIndex: 1
     }
-  }, "Active Matches"), router.state.matches.map((match, i) => {
+  }, "Active Matches"), 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
@@ -1785,8 +843,8 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       style: {
         padding: '.5em'
       }
-    }, "" + match.matchId));
-  }), (_router$state$pending = router.state.pending) != null && _router$state$pending.matches.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__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',
@@ -1795,15 +853,15 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       top: 0,
       zIndex: 1
     }
-  }, "Pending Matches"), (_router$state$pending2 = router.state.pending) == null ? void 0 : _router$state$pending2.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
       }
@@ -1824,75 +882,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       style: {
         padding: '.5em'
       }
-    }, "" + match.matchId));
-  })) : null, matchCacheValues.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      marginTop: '2rem',
-      padding: '.5em',
-      background: defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      bottom: 0,
-      zIndex: 1,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    }
-  }, /*#__PURE__*/React__default.createElement("div", null, "Match Cache"), /*#__PURE__*/React__default.createElement(Button, {
-    onClick: () => {
-      router.matchCache = {};
-      router.notify();
-    }
-  }, "Clear")), matchCacheValues.map((d, i) => {
-    const {
-      match,
-      gc
-    } = d;
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: match.matchId || i,
-      role: "button",
-      "aria-label": "Open match details for " + match.matchId,
-      onClick: () => setActiveMatchId(activeMatchId === match.matchId ? '' : match.matchId),
-      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: {
-        fontSize: '.7rem',
-        opacity: '.5',
-        lineHeight: 1
-      }
-    }, "Expires", ' ', formatDistanceStrict(new Date(gc), new Date(), {
-      addSuffix: true
-    }))));
+    }, `${match.id}`));
   })) : null), activeMatch ? /*#__PURE__*/React__default.createElement(ActivePanel, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
       padding: '.5em',
@@ -1910,23 +900,15 @@ 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", {
+  }, JSON.stringify(activeMatch.id, null, 2)))), /*#__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", {
+  }, "Status"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.state.status)), /*#__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", {
-    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", {
+  }, "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',
@@ -1940,16 +922,6 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       padding: '0.5em'
     }
   }, /*#__PURE__*/React__default.createElement(Button, {
-    type: "button",
-    onClick: () => {
-      activeMatch.invalidate();
-      router.notify();
-    },
-    style: {
-      background: defaultTheme.warning,
-      color: defaultTheme.inputTextColor
-    }
-  }, "Invalidate"), ' ', /*#__PURE__*/React__default.createElement(Button, {
     type: "button",
     onClick: () => activeMatch.load(),
     style: {
@@ -1978,7 +950,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'
     }
@@ -1991,36 +963,13 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       bottom: 0,
       zIndex: 1
     }
-  }, "All 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) => {
+  }, Object.keys(last(router.state.currentMatches)?.state.search || {}).length ? /*#__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;
     }, {})