@tanstack/react-router-devtools 0.0.1-beta.36 → 0.0.1-beta.41

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')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactRouterDevtools = {}, global.React, global.shim));
+})(this, (function (exports, React, shim) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,8 +34,8 @@
     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) {
@@ -51,17 +51,602 @@
     };
     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];
+
+  // src/core.ts
+  var CurrentReaction = void 0;
+  var CurrentGets = null;
+  var CurrentGetsIndex = 0;
+  var EffectQueue = null;
+  var CacheClean = 0;
+  var CacheCheck = 1;
+  var CacheDirty = 2;
+  var Root;
+  var Reactive = class {
+    value;
+    fn;
+    observers = null;
+    sources = null;
+    state;
+    effect;
+    cleanups = null;
+    alwaysUpdate = false;
+    constructor(fnOrValue, type) {
+      if (type != 0 /* Signal */) {
+        this.fn = fnOrValue;
+        this.value = void 0;
+        this.state = CacheDirty;
+        if (Root)
+          Root.push(this);
+        else
+          console.error("Memos and effects must be wrapped in a createRoot");
+        this.effect = type == 2 /* Effect */;
+        if (this.effect)
+          this.update();
+      } else {
+        this.fn = void 0;
+        this.value = fnOrValue;
+        this.state = CacheClean;
+        this.effect = false;
+      }
     }
-    return target;
+    get() {
+      if (CurrentReaction) {
+        if (!CurrentGets && CurrentReaction.sources && CurrentReaction.sources[CurrentGetsIndex] == this) {
+          CurrentGetsIndex++;
+        } else {
+          if (!CurrentGets)
+            CurrentGets = [this];
+          else
+            CurrentGets.push(this);
+        }
+      }
+      if (this.fn)
+        this.updateIfNecessary();
+      return this.value;
+    }
+    set(value) {
+      const notInBatch = !EffectQueue;
+      const newValue = typeof value === "function" ? value(this.value) : value;
+      if ((this.value !== newValue || this.alwaysUpdate) && this.observers) {
+        for (let i = 0; i < this.observers.length; i++) {
+          this.observers[i].stale(CacheDirty);
+        }
+      }
+      this.value = newValue;
+      if (notInBatch)
+        stabilize();
+      return newValue;
+    }
+    stale(state) {
+      if (this.state < state) {
+        if (this.state === CacheClean && this.effect) {
+          if (EffectQueue)
+            EffectQueue.push(this);
+          else
+            EffectQueue = [this];
+        }
+        this.state = state;
+        if (this.observers) {
+          for (let i = 0; i < this.observers.length; i++) {
+            this.observers[i].stale(CacheCheck);
+          }
+        }
+      }
+    }
+    update() {
+      const oldValue = this.value;
+      const prevReaction = CurrentReaction;
+      const prevGets = CurrentGets;
+      const prevIndex = CurrentGetsIndex;
+      CurrentReaction = this;
+      CurrentGets = null;
+      CurrentGetsIndex = 0;
+      try {
+        if (this.cleanups) {
+          this.cleanups.forEach((c) => c());
+          this.cleanups = null;
+        }
+        this.value = this.fn();
+        if (CurrentGets) {
+          this.removeParentObservers(CurrentGetsIndex);
+          if (this.sources && CurrentGetsIndex > 0) {
+            this.sources.length = CurrentGetsIndex + CurrentGets.length;
+            for (let i = 0; i < CurrentGets.length; i++) {
+              this.sources[CurrentGetsIndex + i] = CurrentGets[i];
+            }
+          } else {
+            this.sources = CurrentGets;
+          }
+          for (let i = CurrentGetsIndex; i < this.sources.length; i++) {
+            const source = this.sources[i];
+            if (!source.observers) {
+              source.observers = [this];
+            } else {
+              source.observers.push(this);
+            }
+          }
+        } else if (this.sources && CurrentGetsIndex < this.sources.length) {
+          this.removeParentObservers(CurrentGetsIndex);
+          this.sources.length = CurrentGetsIndex;
+        }
+      } finally {
+        CurrentGets = prevGets;
+        CurrentReaction = prevReaction;
+        CurrentGetsIndex = prevIndex;
+      }
+      if ((oldValue !== this.value || this.alwaysUpdate) && this.observers) {
+        for (let i = 0; i < this.observers.length; i++) {
+          this.observers[i].state = CacheDirty;
+        }
+      }
+      this.state = CacheClean;
+    }
+    updateIfNecessary() {
+      if (this.state === CacheCheck) {
+        for (const source of this.sources) {
+          source.updateIfNecessary();
+          if (this.state === CacheDirty) {
+            break;
+          }
+        }
+      }
+      if (this.state === CacheDirty) {
+        this.update();
+      }
+      this.state = CacheClean;
+    }
+    removeParentObservers(index) {
+      if (!this.sources)
+        return;
+      for (let i = index; i < this.sources.length; i++) {
+        const source = this.sources[i];
+        const swap = source.observers.findIndex((v) => v === this);
+        source.observers[swap] = source.observers[source.observers.length - 1];
+        source.observers.pop();
+      }
+    }
+    destroy() {
+      if (this.cleanups) {
+        this.cleanups.forEach((c) => c());
+        this.cleanups = null;
+      }
+      this.removeParentObservers(0);
+    }
+  };
+  function stabilize() {
+    if (!EffectQueue)
+      return;
+    for (let i = 0; i < EffectQueue.length; i++) {
+      EffectQueue[i].get();
+    }
+    EffectQueue = null;
+  }
+  function createEffect(fn) {
+    const effect = new Reactive(fn, 2 /* Effect */);
+    return effect.get.bind(effect);
+  }
+  function createRoot(fn) {
+    let root = [];
+    Root = root;
+    fn();
+    Root = null;
+    return () => {
+      if (!root)
+        return;
+      root.forEach((r) => r.destroy());
+      root = null;
+    };
+  }
+  function batch(fn) {
+    EffectQueue = [];
+    let out = fn();
+    stabilize();
+    return out;
+  }
+  function untrack(fn) {
+    const listener = CurrentReaction;
+    CurrentReaction = void 0;
+    try {
+      return fn();
+    } finally {
+      CurrentReaction = listener;
+    }
+  }
+
+  // src/store.ts
+  var $RAW = Symbol("store-raw");
+  var $TRACK = Symbol("track");
+  var $PROXY = Symbol("store-proxy");
+  var $NODE = Symbol("store-node");
+  function wrap(value) {
+    let p = value[$PROXY];
+    if (!p) {
+      Object.defineProperty(value, $PROXY, {
+        value: p = new Proxy(value, proxyTraps)
+      });
+      if (!Array.isArray(value)) {
+        const keys = Object.keys(value);
+        const desc = Object.getOwnPropertyDescriptors(value);
+        for (let i = 0, l = keys.length; i < l; i++) {
+          const prop = keys[i];
+          if (desc[prop].get) {
+            const get = desc[prop].get.bind(p);
+            Object.defineProperty(value, prop, {
+              enumerable: desc[prop].enumerable,
+              get
+            });
+          }
+        }
+      }
+    }
+    return p;
+  }
+  function isWrappable(obj) {
+    let proto;
+    return obj != null && typeof obj === "object" && (obj[$PROXY] || !(proto = Object.getPrototypeOf(obj)) || proto === Object.prototype || Array.isArray(obj));
+  }
+  function unwrap(item, set = /* @__PURE__ */ new Set()) {
+    let result, unwrapped, v, prop;
+    if (result = item != null && item[$RAW])
+      return result;
+    if (!isWrappable(item) || set.has(item))
+      return item;
+    if (Array.isArray(item)) {
+      if (Object.isFrozen(item))
+        item = item.slice(0);
+      else
+        set.add(item);
+      for (let i = 0, l = item.length; i < l; i++) {
+        v = item[i];
+        if ((unwrapped = unwrap(v, set)) !== v)
+          item[i] = unwrapped;
+      }
+    } else {
+      if (Object.isFrozen(item))
+        item = Object.assign({}, item);
+      else
+        set.add(item);
+      const keys = Object.keys(item);
+      const desc = Object.getOwnPropertyDescriptors(item);
+      for (let i = 0, l = keys.length; i < l; i++) {
+        prop = keys[i];
+        if (desc[prop].get)
+          continue;
+        v = item[prop];
+        if ((unwrapped = unwrap(v, set)) !== v)
+          item[prop] = unwrapped;
+      }
+    }
+    return item;
+  }
+  function getDataNodes(target) {
+    let nodes = target[$NODE];
+    if (!nodes)
+      Object.defineProperty(target, $NODE, { value: nodes = {} });
+    return nodes;
+  }
+  function getDataNode(nodes, property, value) {
+    return nodes[property] || (nodes[property] = createDataNode(value));
+  }
+  function proxyDescriptor(target, property) {
+    const desc = Reflect.getOwnPropertyDescriptor(target, property);
+    if (!desc || desc.get || !desc.configurable || property === $PROXY || property === $NODE)
+      return desc;
+    delete desc.value;
+    delete desc.writable;
+    desc.get = () => target[$PROXY][property];
+    return desc;
+  }
+  function trackSelf(target) {
+    if (CurrentReaction) {
+      const nodes = getDataNodes(target);
+      (nodes._ || (nodes._ = createDataNode())).get();
+    }
+  }
+  function ownKeys(target) {
+    trackSelf(target);
+    return Reflect.ownKeys(target);
+  }
+  function createDataNode(value) {
+    const s = new Reactive(value, 0);
+    s.alwaysUpdate = true;
+    return s;
+  }
+  var Writing = false;
+  var proxyTraps = {
+    get(target, property, receiver) {
+      if (property === $RAW)
+        return target;
+      if (property === $PROXY)
+        return receiver;
+      if (property === $TRACK) {
+        trackSelf(target);
+        return receiver;
+      }
+      const nodes = getDataNodes(target);
+      const tracked = nodes.hasOwnProperty(property);
+      let value = tracked ? nodes[property].get() : target[property];
+      if (property === $NODE || property === "__proto__")
+        return value;
+      if (!tracked) {
+        const desc = Object.getOwnPropertyDescriptor(target, property);
+        if (CurrentReaction && (typeof value !== "function" || target.hasOwnProperty(property)) && !(desc && desc.get))
+          value = getDataNode(nodes, property, value).get();
+      }
+      return isWrappable(value) ? wrap(value) : value;
+    },
+    has(target, property) {
+      if (property === $RAW || property === $PROXY || property === $TRACK || property === $NODE || property === "__proto__")
+        return true;
+      this.get(target, property, target);
+      return property in target;
+    },
+    set(target, property, value) {
+      Writing && setProperty(target, property, unwrap(value));
+      return true;
+    },
+    deleteProperty(target, property) {
+      Writing && setProperty(target, property, void 0, true);
+      return true;
+    },
+    ownKeys,
+    getOwnPropertyDescriptor: proxyDescriptor
+  };
+  function setProperty(state, property, value, deleting = false) {
+    if (!deleting && state[property] === value)
+      return;
+    const prev = state[property];
+    const len = state.length;
+    if (deleting)
+      delete state[property];
+    else
+      state[property] = value;
+    const nodes = getDataNodes(state);
+    let node;
+    if (node = getDataNode(nodes, property, prev))
+      node.set(() => value);
+    if (Array.isArray(state) && state.length !== len)
+      (node = getDataNode(nodes, "length", len)) && node.set(state.length);
+    (node = nodes._) && node.set();
+  }
+  function createStore(store) {
+    const unwrappedStore = unwrap(store);
+    const wrappedStore = wrap(unwrappedStore);
+    const setStore = (fn) => {
+      batch(() => {
+        try {
+          Writing = true;
+          fn(wrappedStore);
+        } finally {
+          Writing = false;
+        }
+      });
+    };
+    return [wrappedStore, setStore];
+  }
+
+  var isProduction = "development" === 'production';
+  var prefix = 'Invariant failed';
+  function invariant(condition, message) {
+      if (condition) {
+          return;
+      }
+      if (isProduction) {
+          throw new Error(prefix);
+      }
+      var provided = typeof message === 'function' ? message() : message;
+      var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+      throw new Error(value);
+  }
+
+  /**
+   * router-core
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
+
+  function last(arr) {
+    return arr[arr.length - 1];
+  }
+  function warning(cond, message) {
+    if (cond) {
+      if (typeof console !== 'undefined') console.warn(message);
+      try {
+        throw new Error(message);
+      } catch {}
+    }
+    return true;
+  }
+
+  /**
+   * This function returns `a` if `b` is deeply equal.
+   * If not, it will replace any deeply equal children of `b` with those of `a`.
+   * This can be used for structural sharing between JSON values for example.
+   */
+  function sharedClone(prev, next, touchAll) {
+    const things = new Map();
+    function recurse(prev, next) {
+      if (prev === next) {
+        return prev;
+      }
+      if (things.has(next)) {
+        return things.get(next);
+      }
+      const prevIsArray = Array.isArray(prev);
+      const nextIsArray = Array.isArray(next);
+      const prevIsObj = isPlainObject(prev);
+      const nextIsObj = isPlainObject(next);
+      const isArray = prevIsArray && nextIsArray;
+      const isObj = prevIsObj && nextIsObj;
+      const isSameStructure = isArray || isObj;
+
+      // Both are arrays or objects
+      if (isSameStructure) {
+        const aSize = isArray ? prev.length : Object.keys(prev).length;
+        const bItems = isArray ? next : Object.keys(next);
+        const bSize = bItems.length;
+        const copy = isArray ? [] : {};
+        let equalItems = 0;
+        for (let i = 0; i < bSize; i++) {
+          const key = isArray ? i : bItems[i];
+          if (copy[key] === prev[key]) {
+            equalItems++;
+          }
+        }
+        if (aSize === bSize && equalItems === aSize) {
+          things.set(next, prev);
+          return prev;
+        }
+        things.set(next, copy);
+        for (let i = 0; i < bSize; i++) {
+          const key = isArray ? i : bItems[i];
+          if (typeof bItems[i] === 'function') {
+            copy[key] = prev[key];
+          } else {
+            copy[key] = recurse(prev[key], next[key]);
+          }
+          if (copy[key] === prev[key]) {
+            equalItems++;
+          }
+        }
+        return copy;
+      }
+      if (nextIsArray) {
+        const copy = [];
+        things.set(next, copy);
+        for (let i = 0; i < next.length; i++) {
+          copy[i] = recurse(undefined, next[i]);
+        }
+        return copy;
+      }
+      if (nextIsObj) {
+        const copy = {};
+        things.set(next, copy);
+        const nextKeys = Object.keys(next);
+        for (let i = 0; i < nextKeys.length; i++) {
+          const key = nextKeys[i];
+          copy[key] = recurse(undefined, next[key]);
+        }
+        return copy;
+      }
+      return next;
+    }
+    return recurse(prev, next);
+  }
+
+  // Copied from: https://github.com/jonschlinkert/is-plain-object
+  function isPlainObject(o) {
+    if (!hasObjectPrototype(o)) {
+      return false;
+    }
+
+    // If has modified constructor
+    const ctor = o.constructor;
+    if (typeof ctor === 'undefined') {
+      return true;
+    }
+
+    // If has modified prototype
+    const prot = ctor.prototype;
+    if (!hasObjectPrototype(prot)) {
+      return false;
+    }
+
+    // If constructor does not have an Object-specific method
+    if (!prot.hasOwnProperty('isPrototypeOf')) {
+      return false;
+    }
+
+    // Most likely a plain Object
+    return true;
+  }
+  function hasObjectPrototype(o) {
+    return Object.prototype.toString.call(o) === '[object Object]';
+  }
+
+  var _window$document;
+  // Detect if we're in the DOM
+  typeof window === 'undefined' || !((_window$document = window.document) != null && _window$document.createElement);
+
+  /**
+   * react-router
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
+  const routerContext = /*#__PURE__*/React__namespace.createContext(null);
+  const EMPTY = {};
+  const __useStoreValue = (seed, selector) => {
+    const valueRef = React__namespace.useRef(EMPTY);
+
+    // If there is no selector, track the seed
+    // If there is a selector, do not track the seed
+    const getValue = () => !selector ? seed() : selector(untrack(() => seed()));
+
+    // If empty, initialize the value
+    if (valueRef.current === EMPTY) {
+      valueRef.current = sharedClone(undefined, getValue());
+    }
+
+    // Snapshot should just return the current cached value
+    const getSnapshot = React__namespace.useCallback(() => valueRef.current, []);
+    const getStore = React__namespace.useCallback(cb => {
+      // A root is necessary to track effects
+      return createRoot(() => {
+        createEffect(() => {
+          // Read and update the value
+          // getValue will handle which values are accessed and
+          // thus tracked.
+          // sharedClone will both recursively track the end result
+          // and ensure that the previous value is structurally shared
+          // into the new version.
+          valueRef.current = unwrap(
+          // Unwrap the value to get rid of any proxy structures
+          sharedClone(valueRef.current, getValue()));
+          cb();
+        });
+      });
+    }, []);
+    return shim.useSyncExternalStore(getStore, getSnapshot, getSnapshot);
+  };
+  const [store, setStore] = createStore({
+    foo: 'foo',
+    bar: {
+      baz: 'baz'
+    }
+  });
+  createRoot(() => {
+    let prev;
+    createEffect(() => {
+      console.log('effect');
+      const next = sharedClone(prev, store);
+      console.log(next);
+      prev = untrack(() => next);
+    });
+  });
+  setStore(s => {
+    s.foo = '1';
+  });
+  setStore(s => {
+    s.bar.baz = '2';
+  });
+  function useRouter() {
+    const value = React__namespace.useContext(routerContext);
+    warning(!value, 'useRouter must be used inside a <Router> component!');
+    return value.router;
+  }
+  function useRouterStore(selector) {
+    const router = useRouter();
+    return __useStoreValue(() => router.store, selector);
   }
 
   function requiredArgs(required, args) {
@@ -906,7 +1491,7 @@
         return JSON.parse(itemValue);
       }
       return undefined;
-    } catch (_unused) {
+    } catch {
       return undefined;
     }
   };
@@ -928,14 +1513,13 @@
         }
         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',
@@ -952,9 +1536,9 @@
   const ThemeContext = /*#__PURE__*/React__default["default"].createContext(defaultTheme);
   function ThemeProvider(_ref) {
     let {
-        theme
-      } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      theme,
+      ...rest
+    } = _ref;
     return /*#__PURE__*/React__default["default"].createElement(ThemeContext.Provider, _extends({
       value: theme
     }, rest));
@@ -1002,10 +1586,9 @@
     return isMatch;
   }
 
-  const _excluded$2 = ["style"];
   const isServer$1 = typeof window === 'undefined';
   function getStatusColor(match, theme) {
-    return match.isFetching ? theme.active : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray;
+    return match.store.isFetching ? theme.active : match.store.status === 'error' ? theme.danger : match.store.status === 'success' ? theme.success : theme.gray;
   }
 
   // export function getQueryStatusLabel(query: Query) {
@@ -1024,19 +1607,27 @@
     }
     return /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
       let {
-          style
-        } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+        style,
+        ...rest
+      } = _ref;
       const theme = useTheme();
       const mediaStyles = Object.entries(queries).reduce((current, _ref2) => {
         let [key, value] = _ref2;
         // 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() {
@@ -1057,7 +1648,7 @@
    */
   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);
   };
 
@@ -1118,7 +1709,7 @@
 
   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
@@ -1140,7 +1731,7 @@
     height: '100%'
   }), {
     '(max-width: 700px)': (_props, theme) => ({
-      borderTop: "2px solid " + theme.gray
+      borderTop: `2px solid ${theme.gray}`
     })
   });
   const Button = styled('button', (props, theme) => ({
@@ -1179,26 +1770,26 @@
     borderRadius: '.2em',
     color: theme.inputTextColor,
     fontSize: '.9em',
-    lineHeight: "1.3",
+    lineHeight: `1.3`,
     padding: '.3em .4em'
   }));
   styled('select', (_props, theme) => ({
-    display: "inline-block",
-    fontSize: ".9em",
-    fontFamily: "sans-serif",
+    display: `inline-block`,
+    fontSize: `.9em`,
+    fontFamily: `sans-serif`,
     fontWeight: 'normal',
-    lineHeight: "1.3",
-    padding: ".3em 1.5em .3em .5em",
+    lineHeight: `1.3`,
+    padding: `.3em 1.5em .3em .5em`,
     height: 'auto',
     border: 0,
-    borderRadius: ".2em",
-    appearance: "none",
+    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%",
+    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)': {
@@ -1206,7 +1797,6 @@
     }
   });
 
-  const _excluded$1 = ["value", "defaultExpanded", "renderer", "pageSize"];
   const Entry = styled('div', {
     fontFamily: 'Menlo, monospace',
     fontSize: '.7rem',
@@ -1248,11 +1838,12 @@
       style = {}
     } = _ref;
     return /*#__PURE__*/React__namespace.createElement("span", {
-      style: _extends({
+      style: {
         display: 'inline-block',
         transition: 'all .1s ease',
-        transform: "rotate(" + (expanded ? 90 : 0) + "deg) " + (style.transform || '')
-      }, style)
+        transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,
+        ...style
+      }
     }, "\u25B6");
   };
   /**
@@ -1296,7 +1887,7 @@
       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])
@@ -1321,12 +1912,12 @@
   }
   function Explorer(_ref3) {
     let {
-        value,
-        defaultExpanded,
-        renderer = DefaultRenderer,
-        pageSize = 100
-      } = _ref3,
-      rest = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
+      value,
+      defaultExpanded,
+      renderer = DefaultRenderer,
+      pageSize = 100,
+      ...rest
+    } = _ref3;
     const [expanded, setExpanded] = React__namespace.useState(Boolean(defaultExpanded));
     const toggleExpanded = React__namespace.useCallback(() => setExpanded(old => !old), []);
     let type = typeof value;
@@ -1335,9 +1926,10 @@
       const subDefaultExpanded = defaultExpanded === true ? {
         [sub.label]: true
       } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
-      return _extends({}, sub, {
+      return {
+        ...sub,
         defaultExpanded: subDefaultExpanded
-      });
+      };
     };
     if (Array.isArray(value)) {
       type = 'array';
@@ -1362,7 +1954,7 @@
       });
     }
     const subEntryPages = chunkArray(subEntries, pageSize);
-    return renderer(_extends({
+    return renderer({
       handleEntry: entry => /*#__PURE__*/React__namespace.createElement(Explorer, _extends({
         key: entry.label,
         value: value,
@@ -1374,26 +1966,23 @@
       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.8rem',
         fontWeight: 'bolder',
         lineHeight: '1'
-      })
+      }
     }), /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         letterSpacing: '-0.05rem'
@@ -1429,13 +2018,12 @@
     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 == null ? void 0 : panelElement.getBoundingClientRect().height) ?? 0,
         pageY: startEvent.pageY
       };
       const run = moveEvent => {
@@ -1457,7 +2045,7 @@
       document.addEventListener('mouseup', unsub);
     };
     React__default["default"].useEffect(() => {
-      setIsResolvedOpen(isOpen != null ? isOpen : false);
+      setIsResolvedOpen(isOpen ?? false);
     }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
 
     // Toggle panel visibility before/after transition (depending on direction).
@@ -1492,7 +2080,7 @@
           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";
+            rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`;
           }
         };
         run();
@@ -1510,19 +2098,19 @@
       return;
     }, [isResolvedOpen]);
     const {
-        style: panelStyle = {}
-      } = panelProps,
-      otherPanelProps = _objectWithoutPropertiesLoose(panelProps, _excluded);
+      style: panelStyle = {},
+      ...otherPanelProps
+    } = panelProps;
     const {
-        style: closeButtonStyle = {},
-        onClick: onCloseClick
-      } = closeButtonProps,
-      otherCloseButtonProps = _objectWithoutPropertiesLoose(closeButtonProps, _excluded2);
+      style: closeButtonStyle = {},
+      onClick: onCloseClick,
+      ...otherCloseButtonProps
+    } = closeButtonProps;
     const {
-        style: toggleButtonStyle = {},
-        onClick: onToggleClick
-      } = toggleButtonProps,
-      otherToggleButtonProps = _objectWithoutPropertiesLoose(toggleButtonProps, _excluded3);
+      style: toggleButtonStyle = {},
+      onClick: onToggleClick,
+      ...otherToggleButtonProps
+    } = toggleButtonProps;
 
     // Do not render on the server
     if (!isMounted()) return null;
@@ -1535,35 +2123,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"
@@ -1572,20 +2163,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, {
@@ -1594,7 +2187,7 @@
         setIsOpen(true);
         onToggleClick && onToggleClick(e);
       },
-      style: _extends({
+      style: {
         appearance: 'none',
         background: 'none',
         border: 0,
@@ -1605,56 +2198,49 @@
         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$current, _router$state$pending, _router$state$pending2, _last, _last2, _last3, _last4, _last5, _last6;
+    var _Object$values, _Object$values$find, _router$store$current, _router$store$pending, _router$store$pending2, _last, _last2, _last3, _last4, _last5, _last6;
     const {
-        isOpen = true,
-        handleDragStart,
-        router: userRouter
-      } = props,
-      panelProps = _objectWithoutPropertiesLoose(props, _excluded4);
-    const routerContextValue = React__default["default"].useContext(reactRouter.routerContext);
-    const router = userRouter != null ? userRouter : routerContextValue == null ? void 0 : routerContextValue.router;
-    reactRouter.invariant(router, 'No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.');
-    const rerender = React__default["default"].useReducer(() => ({}), {})[1];
-    React__default["default"].useEffect(() => {
-      let interval = setInterval(() => {
-        router.cleanMatchCache();
-        // router.notify()
-        rerender();
-      }, 250);
-      return () => {
-        clearInterval(interval);
-      };
-    }, []);
+      isOpen = true,
+      setIsOpen,
+      handleDragStart,
+      router: userRouter,
+      ...panelProps
+    } = props;
+    const routerContextValue = React__default["default"].useContext(routerContext);
+    const router = userRouter ?? (routerContextValue == null ? void 0 : 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.');
+    useRouterStore();
     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$current = router.state.currentMatches) == null ? void 0 : _router$state$current.find(d => d.routeId === activeRouteId);
-    const matchCacheValues = multiSortBy(Object.keys(router.matchCache).filter(key => {
-      const cacheEntry = router.matchCache[key];
+    const activeMatch = ((_Object$values = Object.values(router.store.matchCache)) == null ? void 0 : (_Object$values$find = _Object$values.find(d => d.match.matchId === activeMatchId)) == null ? void 0 : _Object$values$find.match) ?? ((_router$store$current = router.store.currentMatches) == null ? void 0 : _router$store$current.find(d => d.routeId === activeRouteId));
+    const matchCacheValues = multiSortBy(Object.keys(router.store.matchCache).filter(key => {
+      const cacheEntry = router.store.matchCache[key];
       return cacheEntry.gc > Date.now();
-    }).map(key => router.matchCache[key]), [d => d.match.isFetching ? -1 : 1, d => -d.match.updatedAt]);
+    }).map(key => router.store.matchCache[key]), [d => d.match.store.isFetching ? -1 : 1, d => -d.match.store.updatedAt]);
     return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
       theme: defaultTheme
     }, /*#__PURE__*/React__default["default"].createElement(Panel, _extends({
@@ -1662,7 +2248,49 @@
       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: {
@@ -1682,7 +2310,7 @@
         minHeight: '40%',
         maxHeight: '100%',
         overflow: 'auto',
-        borderRight: "1px solid " + defaultTheme.grayAlt,
+        borderRight: `1px solid ${defaultTheme.grayAlt}`,
         display: 'flex',
         flexDirection: 'column'
       }
@@ -1725,7 +2353,7 @@
         minHeight: '40%',
         maxHeight: '100%',
         overflow: 'auto',
-        borderRight: "1px solid " + defaultTheme.grayAlt,
+        borderRight: `1px solid ${defaultTheme.grayAlt}`,
         display: 'flex',
         flexDirection: 'column'
       }
@@ -1737,15 +2365,15 @@
         top: 0,
         zIndex: 1
       }
-    }, "Active Matches"), router.state.currentMatches.map((match, i) => {
+    }, "Active Matches"), router.store.currentMatches.map((match, i) => {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         key: match.routeId || i,
         role: "button",
-        "aria-label": "Open match details for " + match.routeId,
+        "aria-label": `Open match details for ${match.routeId}`,
         onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
         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
@@ -1767,8 +2395,8 @@
         style: {
           padding: '.5em'
         }
-      }, "" + match.matchId));
-    }), (_router$state$pending = router.state.pendingMatches) != null && _router$state$pending.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+      }, `${match.matchId}`));
+    }), (_router$store$pending = router.store.pendingMatches) != null && _router$store$pending.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         marginTop: '2rem',
         padding: '.5em',
@@ -1777,15 +2405,15 @@
         top: 0,
         zIndex: 1
       }
-    }, "Pending Matches"), (_router$state$pending2 = router.state.pendingMatches) == null ? void 0 : _router$state$pending2.map((match, i) => {
+    }, "Pending Matches"), (_router$store$pending2 = router.store.pendingMatches) == null ? void 0 : _router$store$pending2.map((match, i) => {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         key: match.routeId || i,
         role: "button",
-        "aria-label": "Open match details for " + match.routeId,
+        "aria-label": `Open match details for ${match.routeId}`,
         onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
         style: {
           display: 'flex',
-          borderBottom: "solid 1px " + defaultTheme.grayAlt,
+          borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
           cursor: 'pointer',
           background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
         }
@@ -1806,7 +2434,7 @@
         style: {
           padding: '.5em'
         }
-      }, "" + match.matchId));
+      }, `${match.matchId}`));
     })) : null, matchCacheValues.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         marginTop: '2rem',
@@ -1822,8 +2450,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", null, "Match Cache"), /*#__PURE__*/React__default["default"].createElement(Button, {
       onClick: () => {
-        router.matchCache = {};
-        router.notify();
+        router.setStore(s => s.matchCache = {});
       }
     }, "Clear")), matchCacheValues.map((d, i) => {
       const {
@@ -1833,11 +2460,11 @@
       return /*#__PURE__*/React__default["default"].createElement("div", {
         key: match.matchId || i,
         role: "button",
-        "aria-label": "Open match details for " + match.matchId,
+        "aria-label": `Open match details for ${match.matchId}`,
         onClick: () => setActiveMatchId(activeMatchId === match.matchId ? '' : match.matchId),
         style: {
           display: 'flex',
-          borderBottom: "solid 1px " + defaultTheme.grayAlt,
+          borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
           cursor: 'pointer',
           background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
         }
@@ -1866,7 +2493,7 @@
           borderRadius: '.25rem',
           transition: 'all .2s ease-out'
         }
-      }), /*#__PURE__*/React__default["default"].createElement(Code, null, "" + match.matchId)), /*#__PURE__*/React__default["default"].createElement("span", {
+      }), /*#__PURE__*/React__default["default"].createElement(Code, null, `${match.matchId}`)), /*#__PURE__*/React__default["default"].createElement("span", {
         style: {
           fontSize: '.7rem',
           opacity: '.5',
@@ -1896,15 +2523,15 @@
       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", {
+    }, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.store.status)), /*#__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", {
+    }, "Invalid"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.store.isInvalid.toString())), /*#__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.store.updatedAt ? new Date(activeMatch.store.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         background: defaultTheme.backgroundAlt,
         padding: '.5em',
@@ -1921,7 +2548,6 @@
       type: "button",
       onClick: () => {
         activeMatch.invalidate();
-        router.notify();
       },
       style: {
         background: defaultTheme.warning,
@@ -1956,7 +2582,7 @@
         minHeight: '40%',
         maxHeight: '100%',
         overflow: 'auto',
-        borderRight: "1px solid " + defaultTheme.grayAlt,
+        borderRight: `1px solid ${defaultTheme.grayAlt}`,
         display: 'flex',
         flexDirection: 'column'
       }
@@ -1973,9 +2599,9 @@
       style: {
         padding: '.5em'
       }
-    }, Object.keys(((_last = reactRouter.last(router.state.currentMatches)) == null ? void 0 : _last.loaderData) || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer, {
-      value: ((_last2 = reactRouter.last(router.state.currentMatches)) == null ? void 0 : _last2.loaderData) || {},
-      defaultExpanded: Object.keys(((_last3 = reactRouter.last(router.state.currentMatches)) == null ? void 0 : _last3.loaderData) || {}).reduce((obj, next) => {
+    }, Object.keys(((_last = last(router.store.currentMatches)) == null ? void 0 : _last.store.loaderData) || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer, {
+      value: ((_last2 = last(router.store.currentMatches)) == null ? void 0 : _last2.store.loaderData) || {},
+      defaultExpanded: Object.keys(((_last3 = last(router.store.currentMatches)) == null ? void 0 : _last3.store.loaderData) || {}).reduce((obj, next) => {
         obj[next] = {};
         return obj;
       }, {})
@@ -1996,9 +2622,9 @@
       style: {
         padding: '.5em'
       }
-    }, Object.keys(((_last4 = reactRouter.last(router.state.currentMatches)) == null ? void 0 : _last4.search) || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer, {
-      value: ((_last5 = reactRouter.last(router.state.currentMatches)) == null ? void 0 : _last5.search) || {},
-      defaultExpanded: Object.keys(((_last6 = reactRouter.last(router.state.currentMatches)) == null ? void 0 : _last6.search) || {}).reduce((obj, next) => {
+    }, Object.keys(((_last4 = last(router.store.currentMatches)) == null ? void 0 : _last4.store.search) || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer, {
+      value: ((_last5 = last(router.store.currentMatches)) == null ? void 0 : _last5.store.search) || {},
+      defaultExpanded: Object.keys(((_last6 = last(router.store.currentMatches)) == null ? void 0 : _last6.store.search) || {}).reduce((obj, next) => {
         obj[next] = {};
         return obj;
       }, {})