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

package/build/umd/index.development.js

@@ -9,10 +9,10 @@
  * @license MIT
  */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@tanstack/react-router')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@tanstack/react-router'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactRouterDevtools = {}, global.React, global.ReactRouter));
-})(this, (function (exports, React, reactRouter) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim/with-selector')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim/with-selector'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactRouterDevtools = {}, global.React, global.withSelector));
+})(this, (function (exports, React, withSelector) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,894 +34,133 @@
     return Object.freeze(n);
   }
 
-  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
+  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
   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');
-    }
+  var prefix = 'Invariant failed';
+  function invariant(condition, message) {
+      if (condition) {
+          return;
+      }
+      var provided = typeof message === 'function' ? message() : message;
+      var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+      throw new Error(value);
   }
 
   /**
-   * @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.
+   * router
    *
-   * If the argument is a number, it is treated as a timestamp.
+   * Copyright (c) TanStack
    *
-   * If the argument is none of the above, the function returns Invalid Date.
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
    *
-   * **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
+   * @license MIT
    */
 
-  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;
+  function last(arr) {
+    return arr[arr.length - 1];
   }
 
   /**
-   * 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)
+   * react-store
    *
-   * Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above,
-   * which would lead to incorrect calculations.
+   * Copyright (c) TanStack
    *
-   * 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
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
    *
-   * @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
-   * // ]
+   * @license MIT
    */
 
-  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;
-    }
+  function useStore(store, selector = d => d, compareShallow) {
+    const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, compareShallow ? shallow : undefined);
+    return slice;
   }
-
-  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'
+  function shallow(objA, objB) {
+    if (Object.is(objA, objB)) {
+      return true;
     }
-  };
-
-  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 (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+      return false;
     }
 
-    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'
+    // if (objA instanceof Map && objB instanceof Map) {
+    //   if (objA.size !== objB.size) return false
+
+    //   for (const [key, value] of objA) {
+    //     if (!Object.is(value, objB.get(key))) {
+    //       return false
+    //     }
+    //   }
+    //   return true
+    // }
+
+    // if (objA instanceof Set && objB instanceof Set) {
+    //   if (objA.size !== objB.size) return false
+
+    //   for (const value of objA) {
+    //     if (!objB.has(value)) {
+    //       return false
+    //     }
+    //   }
+    //   return true
+    // }
+
+    const keysA = Object.keys(objA);
+    if (keysA.length !== Object.keys(objB).length) {
+      return false;
     }
-  };
-  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';
+    for (let i = 0; i < keysA.length; i++) {
+      if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+        return false;
       }
     }
-
-    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);
+    return true;
   }
 
-  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'
+   * react-router
    *
-   * @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'
+   * Copyright (c) TanStack
    *
-   * @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'
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
    *
-   * @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'
+   * @license MIT
    */
-
-  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 routerContext = /*#__PURE__*/React__namespace.createContext(null);
 
   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["default"].useState();
     React__default["default"].useEffect(() => {
       const initialValue = getItem(key);
-
       if (typeof initialValue === 'undefined' || initialValue === null) {
         setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
       } else {
@@ -931,22 +170,18 @@
     const setter = React__default["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',
@@ -961,12 +196,10 @@
     warning: '#ffb200'
   };
   const ThemeContext = /*#__PURE__*/React__default["default"].createContext(defaultTheme);
-  function ThemeProvider(_ref) {
-    let {
-      theme
-    } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-
+  function ThemeProvider({
+    theme,
+    ...rest
+  }) {
     return /*#__PURE__*/React__default["default"].createElement(ThemeContext.Provider, _extends({
       value: theme
     }, rest));
@@ -981,74 +214,62 @@
       if (typeof window !== 'undefined') {
         return window.matchMedia && window.matchMedia(query).matches;
       }
-
       return;
-    }); // Watch for changes
+    });
 
+    // Watch for changes
     React__default["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["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["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["default"].createElement(type, _extends({}, rest, {
-        style: _extends({}, typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles, style, mediaStyles),
+      return /*#__PURE__*/React__default["default"].createElement(type, {
+        ...rest,
+        style: {
+          ...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
+          ...style,
+          ...mediaStyles
+        },
         ref
-      }));
+      });
     });
   }
   function useIsMounted() {
@@ -1062,22 +283,22 @@
     }, []);
     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["default"].useState(initialState);
@@ -1090,55 +311,20 @@
     }, [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
@@ -1147,10 +333,11 @@
       flexDirection: 'column'
     },
     '(max-width: 600px)': {
-      fontSize: '.9em' // flexDirection: 'column',
-
+      fontSize: '.9em'
+      // flexDirection: 'column',
     }
   });
+
   const ActivePanel = styled('div', () => ({
     flex: '1 1 500px',
     display: 'flex',
@@ -1159,7 +346,7 @@
     height: '100%'
   }), {
     '(max-width: 700px)': (_props, theme) => ({
-      borderTop: "2px solid " + theme.gray
+      borderTop: `2px solid ${theme.gray}`
     })
   });
   const Button = styled('button', (props, theme) => ({
@@ -1173,10 +360,13 @@
     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',
@@ -1189,40 +379,7 @@
   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',
@@ -1258,20 +415,17 @@
     color: 'grey',
     fontSize: '.7em'
   });
-  const Expander = _ref => {
-    let {
-      expanded,
-      style = {}
-    } = _ref;
-    return /*#__PURE__*/React__namespace.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__namespace.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
    *
@@ -1285,39 +439,34 @@
     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__namespace.useState([]);
     const [valueSnapshot, setValueSnapshot] = React__namespace.useState(undefined);
-
     const refreshValueSnapshot = () => {
       setValueSnapshot(value());
     };
-
     return /*#__PURE__*/React__namespace.createElement(Entry, null, subEntryPages.length ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ExpandButton, {
       onClick: () => toggleExpanded()
     }, /*#__PURE__*/React__namespace.createElement(Expander, {
       expanded: expanded
-    }), " ", label, ' ', /*#__PURE__*/React__namespace.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntries.map((entry, index) => handleEntry(entry))) : /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React__namespace.createElement("div", {
+    }), " ", label, ' ', /*#__PURE__*/React__namespace.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? `items` : `item`)), expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntries.map((entry, index) => handleEntry(entry))) : /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React__namespace.createElement("div", {
       key: index
     }, /*#__PURE__*/React__namespace.createElement(Entry, null, /*#__PURE__*/React__namespace.createElement(LabelButton, {
       onClick: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index])
@@ -1337,34 +486,29 @@
       defaultExpanded: {}
     })) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Label, null, label, ":"), " ", /*#__PURE__*/React__namespace.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__namespace.useState(Boolean(defaultExpanded));
     const toggleExpanded = React__namespace.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({
@@ -1379,17 +523,13 @@
       }));
     } 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__namespace.createElement(Explorer, _extends({
         key: entry.label,
         value: value,
@@ -1401,51 +541,50 @@
       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["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["default"].createElement("div", {
       style: {
         letterSpacing: '-0.05rem'
       }
     }, "TANSTACK"), /*#__PURE__*/React__default["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["default"].useRef(null);
     const panelRef = React__default["default"].useRef(null);
     const [isOpen, setIsOpen] = useLocalStorage('tanstackRouterDevtoolsOpen', initialIsOpen);
@@ -1453,61 +592,51 @@
     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["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["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 () => {
@@ -1515,62 +644,46 @@
           ref.removeEventListener('transitionend', handlePanelTransitionEnd);
         };
       }
-
       return;
     }, [isResolvedOpen]);
     React__default["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["default"].createElement(Container, {
       ref: rootRef,
@@ -1581,35 +694,38 @@
       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["default"].createElement(Button, _extends({
       type: "button",
       "aria-label": "Close TanStack Router Devtools"
@@ -1618,20 +734,22 @@
         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["default"].createElement("button", _extends({
       type: "button"
     }, otherToggleButtonProps, {
@@ -1640,7 +758,7 @@
         setIsOpen(true);
         onToggleClick && onToggleClick(e);
       },
-      style: _extends({
+      style: {
         appearance: 'none',
         background: 'none',
         border: 0,
@@ -1651,65 +769,95 @@
         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["default"].createElement(Logo, {
       "aria-hidden": true
     })) : null);
   }
   const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["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["default"].useReducer(() => ({}), {})[1];
-    React__default["default"].useEffect(() => {
-      let interval = setInterval(() => {
-        router.cleanMatchCache(); // router.notify()
-
-        rerender();
-      }, 250);
-      return () => {
-        clearInterval(interval);
-      };
-    }, []);
+      router: userRouter,
+      ...panelProps
+    } = props;
+    const routerContextValue = React__default["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["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["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["default"].createElement(ThemeProvider, {
       theme: defaultTheme
-    }, /*#__PURE__*/React__default["default"].createElement("script", {
-      src: "https://cdn.tailwindcss.com"
-    }), /*#__PURE__*/React__default["default"].createElement(Panel, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(Panel, _extends({
       ref: ref,
       className: "TanStackRouterDevtoolsPanel"
     }, panelProps), /*#__PURE__*/React__default["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["default"].createElement("div", {
       style: {
@@ -1729,13 +877,17 @@
         minHeight: '40%',
         maxHeight: '100%',
         overflow: 'auto',
-        borderRight: "1px solid " + defaultTheme.grayAlt,
+        borderRight: `1px solid ${defaultTheme.grayAlt}`,
         display: 'flex',
         flexDirection: 'column'
       }
     }, /*#__PURE__*/React__default["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["default"].createElement(Logo, {
@@ -1768,7 +920,7 @@
         minHeight: '40%',
         maxHeight: '100%',
         overflow: 'auto',
-        borderRight: "1px solid " + defaultTheme.grayAlt,
+        borderRight: `1px solid ${defaultTheme.grayAlt}`,
         display: 'flex',
         flexDirection: 'column'
       }
@@ -1780,15 +932,15 @@
         top: 0,
         zIndex: 1
       }
-    }, "Active Matches"), router.state.matches.map((match, i) => {
+    }, "Active Matches"), router.state.currentMatches.map((match, i) => {
       return /*#__PURE__*/React__default["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
@@ -1810,8 +962,8 @@
         style: {
           padding: '.5em'
         }
-      }, "" + match.matchId));
-    }), (_router$state$pending = router.state.pending) != null && _router$state$pending.matches.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+      }, `${match.id}`));
+    }), router.state.pendingMatches?.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         marginTop: '2rem',
         padding: '.5em',
@@ -1820,15 +972,15 @@
         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["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
         }
@@ -1849,75 +1001,7 @@
         style: {
           padding: '.5em'
         }
-      }, "" + match.matchId));
-    })) : null, matchCacheValues.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["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["default"].createElement("div", null, "Match Cache"), /*#__PURE__*/React__default["default"].createElement(Button, {
-      onClick: () => {
-        router.matchCache = {};
-        router.notify();
-      }
-    }, "Clear")), matchCacheValues.map((d, i) => {
-      const {
-        match,
-        gc
-      } = d;
-      return /*#__PURE__*/React__default["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["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          flexDirection: 'column',
-          padding: '.5rem',
-          gap: '.3rem'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          alignItems: 'center',
-          gap: '.5rem'
-        }
-      }, /*#__PURE__*/React__default["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["default"].createElement(Code, null, "" + match.matchId)), /*#__PURE__*/React__default["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["default"].createElement(ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         padding: '.5em',
@@ -1935,23 +1019,15 @@
       style: {
         lineHeight: '1.8em'
       }
-    }, JSON.stringify(activeMatch.matchId, null, 2)))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
-      style: {
-        opacity: '.5'
-      }
-    }, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
-      style: {
-        opacity: '.5'
-      }
-    }, "Pending"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.isPending.toString())), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+    }, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
       style: {
         opacity: '.5'
       }
-    }, "Invalid"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.isInvalid.toString())), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+    }, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.state.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
       style: {
         opacity: '.5'
       }
-    }, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.state.updatedAt ? new Date(activeMatch.state.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         background: defaultTheme.backgroundAlt,
         padding: '.5em',
@@ -1965,16 +1041,6 @@
         padding: '0.5em'
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button, {
-      type: "button",
-      onClick: () => {
-        activeMatch.invalidate();
-        router.notify();
-      },
-      style: {
-        background: defaultTheme.warning,
-        color: defaultTheme.inputTextColor
-      }
-    }, "Invalidate"), ' ', /*#__PURE__*/React__default["default"].createElement(Button, {
       type: "button",
       onClick: () => activeMatch.load(),
       style: {
@@ -2003,7 +1069,7 @@
         minHeight: '40%',
         maxHeight: '100%',
         overflow: 'auto',
-        borderRight: "1px solid " + defaultTheme.grayAlt,
+        borderRight: `1px solid ${defaultTheme.grayAlt}`,
         display: 'flex',
         flexDirection: 'column'
       }
@@ -2016,36 +1082,13 @@
         bottom: 0,
         zIndex: 1
       }
-    }, "All Loader Data"), /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        padding: '.5em'
-      }
-    }, Object.keys(((_last = reactRouter.last(router.state.matches)) == null ? void 0 : _last.loaderData) || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer, {
-      value: ((_last2 = reactRouter.last(router.state.matches)) == null ? void 0 : _last2.loaderData) || {},
-      defaultExpanded: Object.keys(((_last3 = reactRouter.last(router.state.matches)) == null ? void 0 : _last3.loaderData) || {}).reduce((obj, next) => {
-        obj[next] = {};
-        return obj;
-      }, {})
-    }) : /*#__PURE__*/React__default["default"].createElement("em", {
-      style: {
-        opacity: 0.5
-      }
-    }, '{ }')), /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        padding: '.5em',
-        background: defaultTheme.backgroundAlt,
-        position: 'sticky',
-        top: 0,
-        bottom: 0,
-        zIndex: 1
-      }
     }, "Search Params"), /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         padding: '.5em'
       }
-    }, Object.keys(((_last4 = reactRouter.last(router.state.matches)) == null ? void 0 : _last4.search) || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer, {
-      value: ((_last5 = reactRouter.last(router.state.matches)) == null ? void 0 : _last5.search) || {},
-      defaultExpanded: Object.keys(((_last6 = reactRouter.last(router.state.matches)) == null ? void 0 : _last6.search) || {}).reduce((obj, next) => {
+    }, Object.keys(last(router.state.currentMatches)?.state.search || {}).length ? /*#__PURE__*/React__default["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;
       }, {})