@tanstack/query-devtools 5.52.3 → 5.55.1

package/build/index.cjs

@@ -2985,215 +2985,504 @@ var init_utils = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.15.1/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
-function removeAccents(str) {
-  return str.replace(allAccents, (match) => {
-    return characterMap[match];
-  });
-}
-function rankItem(item, value, options) {
-  var _options$threshold;
-  options = options || {};
-  options.threshold = (_options$threshold = options.threshold) != null ? _options$threshold : rankings.MATCHES;
-  if (!options.accessors) {
-    const rank = getMatchRanking(item, value, options);
-    return {
-      // ends up being duplicate of 'item' in matches but consistent
-      rankedValue: item,
-      rank,
-      accessorIndex: -1,
-      accessorThreshold: options.threshold,
-      passed: rank >= options.threshold
-    };
-  }
-  const valuesToRank = getAllValuesToRank(item, options.accessors);
-  const rankingInfo = {
-    rankedValue: item,
-    rank: rankings.NO_MATCH,
-    accessorIndex: -1,
-    accessorThreshold: options.threshold,
-    passed: false
+// ../../node_modules/.pnpm/@solid-primitives+utils@6.2.3_solid-js@1.8.19/node_modules/@solid-primitives/utils/dist/chunk/R5675YMU.js
+function chain(callbacks) {
+  return (...args) => {
+    for (const callback of callbacks)
+      callback && callback(...args);
   };
-  for (let i2 = 0; i2 < valuesToRank.length; i2++) {
-    const rankValue = valuesToRank[i2];
-    let newRank = getMatchRanking(rankValue.itemValue, value, options);
-    const {
-      minRanking,
-      maxRanking,
-      threshold = options.threshold
-    } = rankValue.attributes;
-    if (newRank < minRanking && newRank >= rankings.MATCHES) {
-      newRank = minRanking;
-    } else if (newRank > maxRanking) {
-      newRank = maxRanking;
-    }
-    newRank = Math.min(newRank, maxRanking);
-    if (newRank >= threshold && newRank > rankingInfo.rank) {
-      rankingInfo.rank = newRank;
-      rankingInfo.passed = true;
-      rankingInfo.accessorIndex = i2;
-      rankingInfo.accessorThreshold = threshold;
-      rankingInfo.rankedValue = rankValue.itemValue;
-    }
-  }
-  return rankingInfo;
-}
-function getMatchRanking(testString, stringToRank, options) {
-  testString = prepareValueForComparison(testString, options);
-  stringToRank = prepareValueForComparison(stringToRank, options);
-  if (stringToRank.length > testString.length) {
-    return rankings.NO_MATCH;
-  }
-  if (testString === stringToRank) {
-    return rankings.CASE_SENSITIVE_EQUAL;
-  }
-  testString = testString.toLowerCase();
-  stringToRank = stringToRank.toLowerCase();
-  if (testString === stringToRank) {
-    return rankings.EQUAL;
-  }
-  if (testString.startsWith(stringToRank)) {
-    return rankings.STARTS_WITH;
-  }
-  if (testString.includes(` ${stringToRank}`)) {
-    return rankings.WORD_STARTS_WITH;
-  }
-  if (testString.includes(stringToRank)) {
-    return rankings.CONTAINS;
-  } else if (stringToRank.length === 1) {
-    return rankings.NO_MATCH;
-  }
-  if (getAcronym(testString).includes(stringToRank)) {
-    return rankings.ACRONYM;
-  }
-  return getClosenessRanking(testString, stringToRank);
 }
-function getAcronym(string) {
-  let acronym = "";
-  const wordsInString = string.split(" ");
-  wordsInString.forEach((wordInString) => {
-    const splitByHyphenWords = wordInString.split("-");
-    splitByHyphenWords.forEach((splitByHyphenWord) => {
-      acronym += splitByHyphenWord.substr(0, 1);
-    });
-  });
-  return acronym;
+function accessWith(valueOrFn, ...args) {
+  return typeof valueOrFn === "function" ? valueOrFn(...args) : valueOrFn;
 }
-function getClosenessRanking(testString, stringToRank) {
-  let matchingInOrderCharCount = 0;
-  let charNumber = 0;
-  function findMatchingCharacter(matchChar, string, index) {
-    for (let j = index, J = string.length; j < J; j++) {
-      const stringChar = string[j];
-      if (stringChar === matchChar) {
-        matchingInOrderCharCount += 1;
-        return j + 1;
-      }
-    }
-    return -1;
-  }
-  function getRanking(spread3) {
-    const spreadPercentage = 1 / spread3;
-    const inOrderPercentage = matchingInOrderCharCount / stringToRank.length;
-    const ranking = rankings.MATCHES + inOrderPercentage * spreadPercentage;
-    return ranking;
-  }
-  const firstIndex = findMatchingCharacter(stringToRank[0], testString, 0);
-  if (firstIndex < 0) {
-    return rankings.NO_MATCH;
-  }
-  charNumber = firstIndex;
-  for (let i2 = 1, I = stringToRank.length; i2 < I; i2++) {
-    const matchChar = stringToRank[i2];
-    charNumber = findMatchingCharacter(matchChar, testString, charNumber);
-    const found = charNumber > -1;
-    if (!found) {
-      return rankings.NO_MATCH;
-    }
+function handleDiffArray(current, prev, handleAdded, handleRemoved) {
+  const currLength = current.length;
+  const prevLength = prev.length;
+  let i2 = 0;
+  if (!prevLength) {
+    for (; i2 < currLength; i2++)
+      handleAdded(current[i2]);
+    return;
   }
-  const spread2 = charNumber - firstIndex;
-  return getRanking(spread2);
-}
-function prepareValueForComparison(value, _ref) {
-  let {
-    keepDiacritics
-  } = _ref;
-  value = `${value}`;
-  if (!keepDiacritics) {
-    value = removeAccents(value);
+  if (!currLength) {
+    for (; i2 < prevLength; i2++)
+      handleRemoved(prev[i2]);
+    return;
   }
-  return value;
-}
-function getItemValues(item, accessor) {
-  let accessorFn = accessor;
-  if (typeof accessor === "object") {
-    accessorFn = accessor.accessor;
+  for (; i2 < prevLength; i2++) {
+    if (prev[i2] !== current[i2])
+      break;
   }
-  const value = accessorFn(item);
-  if (value == null) {
-    return [];
+  let prevEl;
+  let currEl;
+  prev = prev.slice(i2);
+  current = current.slice(i2);
+  for (prevEl of prev) {
+    if (!current.includes(prevEl))
+      handleRemoved(prevEl);
   }
-  if (Array.isArray(value)) {
-    return value;
+  for (currEl of current) {
+    if (!prev.includes(currEl))
+      handleAdded(currEl);
   }
-  return [String(value)];
 }
-function getAllValuesToRank(item, accessors) {
-  const allValues = [];
-  for (let j = 0, J = accessors.length; j < J; j++) {
-    const accessor = accessors[j];
-    const attributes = getAccessorAttributes(accessor);
-    const itemValues = getItemValues(item, accessor);
-    for (let i2 = 0, I = itemValues.length; i2 < I; i2++) {
-      allValues.push({
-        itemValue: itemValues[i2],
-        attributes
-      });
-    }
+var isClient, isDev, noop, isNonNullable, filterNonNullable, access, asArray, tryOnCleanup;
+var init_R5675YMU = __esm({
+  "../../node_modules/.pnpm/@solid-primitives+utils@6.2.3_solid-js@1.8.19/node_modules/@solid-primitives/utils/dist/chunk/R5675YMU.js"() {
+    init_solid();
+    init_web();
+    isClient = !isServer;
+    isDev = isClient && !!DEV;
+    noop = () => void 0;
+    isNonNullable = (i2) => i2 != null;
+    filterNonNullable = (arr) => arr.filter(isNonNullable);
+    access = (v) => typeof v === "function" && !v.length ? v() : v;
+    asArray = (value) => Array.isArray(value) ? value : value ? [value] : [];
+    tryOnCleanup = isDev ? (fn) => getOwner() ? onCleanup(fn) : fn : onCleanup;
   }
-  return allValues;
-}
-function getAccessorAttributes(accessor) {
-  if (typeof accessor === "function") {
-    return defaultKeyAttributes;
+});
+
+// ../../node_modules/.pnpm/@solid-primitives+utils@6.2.3_solid-js@1.8.19/node_modules/@solid-primitives/utils/dist/index/index.js
+var init_index = __esm({
+  "../../node_modules/.pnpm/@solid-primitives+utils@6.2.3_solid-js@1.8.19/node_modules/@solid-primitives/utils/dist/index/index.js"() {
+    init_R5675YMU();
   }
-  return {
-    ...defaultKeyAttributes,
-    ...accessor
+});
+
+// ../../node_modules/.pnpm/@solid-primitives+storage@1.3.11_solid-js@1.8.19/node_modules/@solid-primitives/storage/dist/index.js
+function createStorage(props) {
+  const [error, setError] = createSignal();
+  const handleError2 = props?.throw ? (err, fallback) => {
+    setError(err instanceof Error ? err : new Error(fallback));
+    throw err;
+  } : (err, fallback) => {
+    setError(err instanceof Error ? err : new Error(fallback));
   };
-}
-var characterMap, chars, allAccents, rankings, defaultKeyAttributes;
-var init_lib = __esm({
-  "../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.15.1/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs"() {
-    characterMap = {
-      \u00C0: "A",
-      \u00C1: "A",
-      \u00C2: "A",
-      \u00C3: "A",
-      \u00C4: "A",
-      \u00C5: "A",
-      \u1EA4: "A",
-      \u1EAE: "A",
-      \u1EB2: "A",
-      \u1EB4: "A",
-      \u1EB6: "A",
-      \u00C6: "AE",
-      \u1EA6: "A",
-      \u1EB0: "A",
-      \u0202: "A",
-      \u00C7: "C",
-      \u1E08: "C",
-      \u00C8: "E",
-      \u00C9: "E",
-      \u00CA: "E",
-      \u00CB: "E",
-      \u1EBE: "E",
-      \u1E16: "E",
-      \u1EC0: "E",
-      \u1E14: "E",
-      \u1E1C: "E",
-      \u0206: "E",
-      \u00CC: "I",
+  const apis = props?.api ? Array.isArray(props.api) ? props.api : [props.api] : [globalThis.localStorage].filter(Boolean);
+  const prefix = props?.prefix ? `${props.prefix}.` : "";
+  const signals = /* @__PURE__ */ new Map();
+  const store = new Proxy(
+    {},
+    {
+      get(_, key) {
+        let node = signals.get(key);
+        if (!node) {
+          node = createSignal(void 0, { equals: false });
+          signals.set(key, node);
+        }
+        node[0]();
+        const value = apis.reduce(
+          (result, api) => {
+            if (result !== null || !api) {
+              return result;
+            }
+            try {
+              return api.getItem(`${prefix}${key}`);
+            } catch (err) {
+              handleError2(err, `Error reading ${prefix}${key} from ${api["name"]}`);
+              return null;
+            }
+          },
+          null
+        );
+        if (value !== null && props?.deserializer) {
+          return props.deserializer(value, key, props.options);
+        }
+        return value;
+      }
+    }
+  );
+  const setter = (key, value, options) => {
+    const filteredValue = props?.serializer ? props.serializer(value, key, options ?? props.options) : value;
+    const apiKey = `${prefix}${key}`;
+    apis.forEach((api) => {
+      try {
+        api.getItem(apiKey) !== filteredValue && api.setItem(apiKey, filteredValue);
+      } catch (err) {
+        handleError2(err, `Error setting ${prefix}${key} to ${filteredValue} in ${api.name}`);
+      }
+    });
+    const node = signals.get(key);
+    node && node[1]();
+  };
+  const remove = (key) => apis.forEach((api) => {
+    try {
+      api.removeItem(`${prefix}${key}`);
+    } catch (err) {
+      handleError2(err, `Error removing ${prefix}${key} from ${api.name}`);
+    }
+  });
+  const clear = () => apis.forEach((api) => {
+    try {
+      api.clear();
+    } catch (err) {
+      handleError2(err, `Error clearing ${api.name}`);
+    }
+  });
+  const toJSON = () => {
+    const result = {};
+    const addValue = (key, value) => {
+      if (!result.hasOwnProperty(key)) {
+        const filteredValue = value && props?.deserializer ? props.deserializer(value, key, props.options) : value;
+        if (filteredValue) {
+          result[key] = filteredValue;
+        }
+      }
+    };
+    apis.forEach((api) => {
+      if (typeof api.getAll === "function") {
+        let values;
+        try {
+          values = api.getAll();
+        } catch (err) {
+          handleError2(err, `Error getting all values from in ${api.name}`);
+        }
+        for (const key of values) {
+          addValue(key, values[key]);
+        }
+      } else {
+        let index = 0, key;
+        try {
+          while (key = api.key(index++)) {
+            if (!result.hasOwnProperty(key)) {
+              addValue(key, api.getItem(key));
+            }
+          }
+        } catch (err) {
+          handleError2(err, `Error getting all values from ${api.name}`);
+        }
+      }
+    });
+    return result;
+  };
+  props?.sync !== false && onMount(() => {
+    const listener = (ev) => {
+      let changed = false;
+      apis.forEach((api) => {
+        try {
+          if (api !== ev.storageArea && ev.key && ev.newValue !== api.getItem(ev.key)) {
+            ev.newValue ? api.setItem(ev.key, ev.newValue) : api.removeItem(ev.key);
+            changed = true;
+          }
+        } catch (err) {
+          handleError2(
+            err,
+            `Error synching api ${api.name} from storage event (${ev.key}=${ev.newValue})`
+          );
+        }
+      });
+      changed && ev.key && signals.get(ev.key)?.[1]();
+    };
+    if ("addEventListener" in globalThis) {
+      globalThis.addEventListener("storage", listener);
+      onCleanup(() => globalThis.removeEventListener("storage", listener));
+    } else {
+      apis.forEach((api) => api.addEventListener?.("storage", listener));
+      onCleanup(() => apis.forEach((api) => api.removeEventListener?.("storage", listener)));
+    }
+  });
+  return [
+    store,
+    setter,
+    {
+      clear,
+      error,
+      remove,
+      toJSON
+    }
+  ];
+}
+var createLocalStorage, addClearMethod, serializeCookieOptions, cookieStorage;
+var init_dist4 = __esm({
+  "../../node_modules/.pnpm/@solid-primitives+storage@1.3.11_solid-js@1.8.19/node_modules/@solid-primitives/storage/dist/index.js"() {
+    init_solid();
+    createLocalStorage = createStorage;
+    addClearMethod = (storage) => {
+      if (typeof storage.clear === "function") {
+        return storage;
+      }
+      storage.clear = () => {
+        let key;
+        while (key = storage.key(0)) {
+          storage.removeItem(key);
+        }
+      };
+      return storage;
+    };
+    serializeCookieOptions = (options) => {
+      if (!options) {
+        return "";
+      }
+      let memo = "";
+      for (const key in options) {
+        if (!options.hasOwnProperty(key)) {
+          continue;
+        }
+        const value = options[key];
+        memo += value instanceof Date ? `; ${key}=${value.toUTCString()}` : typeof value === "boolean" ? `; ${key}` : `; ${key}=${value}`;
+      }
+      return memo;
+    };
+    cookieStorage = addClearMethod({
+      _cookies: [globalThis.document, "cookie"],
+      getItem: (key) => cookieStorage._cookies[0][cookieStorage._cookies[1]].match("(^|;)\\s*" + key + "\\s*=\\s*([^;]+)")?.pop() ?? null,
+      setItem: (key, value, options) => {
+        const oldValue = cookieStorage.getItem(key);
+        cookieStorage._cookies[0][cookieStorage._cookies[1]] = `${key}=${value}${serializeCookieOptions(
+          options
+        )}`;
+        const storageEvent = Object.assign(new Event("storage"), {
+          key,
+          oldValue,
+          newValue: value,
+          url: globalThis.document.URL,
+          storageArea: cookieStorage
+        });
+        window.dispatchEvent(storageEvent);
+      },
+      removeItem: (key) => {
+        cookieStorage._cookies[0][cookieStorage._cookies[1]] = `${key}=deleted${serializeCookieOptions({
+          expires: /* @__PURE__ */ new Date(0)
+        })}`;
+      },
+      key: (index) => {
+        let key = null;
+        let count = 0;
+        cookieStorage._cookies[0][cookieStorage._cookies[1]].replace(
+          /(?:^|;)\s*(.+?)\s*=\s*[^;]+/g,
+          (_, found) => {
+            if (!key && found && count++ === index) {
+              key = found;
+            }
+            return "";
+          }
+        );
+        return key;
+      },
+      get length() {
+        let length = 0;
+        cookieStorage._cookies[0][cookieStorage._cookies[1]].replace(
+          /(?:^|;)\s*.+?\s*=\s*[^;]+/g,
+          (found) => {
+            length += found ? 1 : 0;
+            return "";
+          }
+        );
+        return length;
+      }
+    });
+  }
+});
+
+// ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.15.1/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
+function removeAccents(str) {
+  return str.replace(allAccents, (match) => {
+    return characterMap[match];
+  });
+}
+function rankItem(item, value, options) {
+  var _options$threshold;
+  options = options || {};
+  options.threshold = (_options$threshold = options.threshold) != null ? _options$threshold : rankings.MATCHES;
+  if (!options.accessors) {
+    const rank = getMatchRanking(item, value, options);
+    return {
+      // ends up being duplicate of 'item' in matches but consistent
+      rankedValue: item,
+      rank,
+      accessorIndex: -1,
+      accessorThreshold: options.threshold,
+      passed: rank >= options.threshold
+    };
+  }
+  const valuesToRank = getAllValuesToRank(item, options.accessors);
+  const rankingInfo = {
+    rankedValue: item,
+    rank: rankings.NO_MATCH,
+    accessorIndex: -1,
+    accessorThreshold: options.threshold,
+    passed: false
+  };
+  for (let i2 = 0; i2 < valuesToRank.length; i2++) {
+    const rankValue = valuesToRank[i2];
+    let newRank = getMatchRanking(rankValue.itemValue, value, options);
+    const {
+      minRanking,
+      maxRanking,
+      threshold = options.threshold
+    } = rankValue.attributes;
+    if (newRank < minRanking && newRank >= rankings.MATCHES) {
+      newRank = minRanking;
+    } else if (newRank > maxRanking) {
+      newRank = maxRanking;
+    }
+    newRank = Math.min(newRank, maxRanking);
+    if (newRank >= threshold && newRank > rankingInfo.rank) {
+      rankingInfo.rank = newRank;
+      rankingInfo.passed = true;
+      rankingInfo.accessorIndex = i2;
+      rankingInfo.accessorThreshold = threshold;
+      rankingInfo.rankedValue = rankValue.itemValue;
+    }
+  }
+  return rankingInfo;
+}
+function getMatchRanking(testString, stringToRank, options) {
+  testString = prepareValueForComparison(testString, options);
+  stringToRank = prepareValueForComparison(stringToRank, options);
+  if (stringToRank.length > testString.length) {
+    return rankings.NO_MATCH;
+  }
+  if (testString === stringToRank) {
+    return rankings.CASE_SENSITIVE_EQUAL;
+  }
+  testString = testString.toLowerCase();
+  stringToRank = stringToRank.toLowerCase();
+  if (testString === stringToRank) {
+    return rankings.EQUAL;
+  }
+  if (testString.startsWith(stringToRank)) {
+    return rankings.STARTS_WITH;
+  }
+  if (testString.includes(` ${stringToRank}`)) {
+    return rankings.WORD_STARTS_WITH;
+  }
+  if (testString.includes(stringToRank)) {
+    return rankings.CONTAINS;
+  } else if (stringToRank.length === 1) {
+    return rankings.NO_MATCH;
+  }
+  if (getAcronym(testString).includes(stringToRank)) {
+    return rankings.ACRONYM;
+  }
+  return getClosenessRanking(testString, stringToRank);
+}
+function getAcronym(string) {
+  let acronym = "";
+  const wordsInString = string.split(" ");
+  wordsInString.forEach((wordInString) => {
+    const splitByHyphenWords = wordInString.split("-");
+    splitByHyphenWords.forEach((splitByHyphenWord) => {
+      acronym += splitByHyphenWord.substr(0, 1);
+    });
+  });
+  return acronym;
+}
+function getClosenessRanking(testString, stringToRank) {
+  let matchingInOrderCharCount = 0;
+  let charNumber = 0;
+  function findMatchingCharacter(matchChar, string, index) {
+    for (let j = index, J = string.length; j < J; j++) {
+      const stringChar = string[j];
+      if (stringChar === matchChar) {
+        matchingInOrderCharCount += 1;
+        return j + 1;
+      }
+    }
+    return -1;
+  }
+  function getRanking(spread3) {
+    const spreadPercentage = 1 / spread3;
+    const inOrderPercentage = matchingInOrderCharCount / stringToRank.length;
+    const ranking = rankings.MATCHES + inOrderPercentage * spreadPercentage;
+    return ranking;
+  }
+  const firstIndex = findMatchingCharacter(stringToRank[0], testString, 0);
+  if (firstIndex < 0) {
+    return rankings.NO_MATCH;
+  }
+  charNumber = firstIndex;
+  for (let i2 = 1, I = stringToRank.length; i2 < I; i2++) {
+    const matchChar = stringToRank[i2];
+    charNumber = findMatchingCharacter(matchChar, testString, charNumber);
+    const found = charNumber > -1;
+    if (!found) {
+      return rankings.NO_MATCH;
+    }
+  }
+  const spread2 = charNumber - firstIndex;
+  return getRanking(spread2);
+}
+function prepareValueForComparison(value, _ref) {
+  let {
+    keepDiacritics
+  } = _ref;
+  value = `${value}`;
+  if (!keepDiacritics) {
+    value = removeAccents(value);
+  }
+  return value;
+}
+function getItemValues(item, accessor) {
+  let accessorFn = accessor;
+  if (typeof accessor === "object") {
+    accessorFn = accessor.accessor;
+  }
+  const value = accessorFn(item);
+  if (value == null) {
+    return [];
+  }
+  if (Array.isArray(value)) {
+    return value;
+  }
+  return [String(value)];
+}
+function getAllValuesToRank(item, accessors) {
+  const allValues = [];
+  for (let j = 0, J = accessors.length; j < J; j++) {
+    const accessor = accessors[j];
+    const attributes = getAccessorAttributes(accessor);
+    const itemValues = getItemValues(item, accessor);
+    for (let i2 = 0, I = itemValues.length; i2 < I; i2++) {
+      allValues.push({
+        itemValue: itemValues[i2],
+        attributes
+      });
+    }
+  }
+  return allValues;
+}
+function getAccessorAttributes(accessor) {
+  if (typeof accessor === "function") {
+    return defaultKeyAttributes;
+  }
+  return {
+    ...defaultKeyAttributes,
+    ...accessor
+  };
+}
+var characterMap, chars, allAccents, rankings, defaultKeyAttributes;
+var init_lib = __esm({
+  "../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.15.1/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs"() {
+    characterMap = {
+      \u00C0: "A",
+      \u00C1: "A",
+      \u00C2: "A",
+      \u00C3: "A",
+      \u00C4: "A",
+      \u00C5: "A",
+      \u1EA4: "A",
+      \u1EAE: "A",
+      \u1EB2: "A",
+      \u1EB4: "A",
+      \u1EB6: "A",
+      \u00C6: "AE",
+      \u1EA6: "A",
+      \u1EB0: "A",
+      \u0202: "A",
+      \u00C7: "C",
+      \u1E08: "C",
+      \u00C8: "E",
+      \u00C9: "E",
+      \u00CA: "E",
+      \u00CB: "E",
+      \u1EBE: "E",
+      \u1E16: "E",
+      \u1EC0: "E",
+      \u1E14: "E",
+      \u1E1C: "E",
+      \u0206: "E",
+      \u00CC: "I",
       \u00CD: "I",
       \u00CE: "I",
       \u00CF: "I",
@@ -3581,737 +3870,448 @@ var init_lib = __esm({
     defaultKeyAttributes = {
       maxRanking: Infinity,
       minRanking: -Infinity
-    };
-  }
-});
-
-// ../../node_modules/.pnpm/goober@2.1.14_csstype@3.1.3/node_modules/goober/dist/goober.modern.js
-function u(e2) {
-  let r2 = this || {}, l2 = e2.call ? e2(r2.p) : e2;
-  return i(l2.unshift ? l2.raw ? p(l2, [].slice.call(arguments, 1), r2.p) : l2.reduce((e3, t2) => Object.assign(e3, t2 && t2.call ? t2(r2.p) : t2), {}) : l2, t(r2.target), r2.g, r2.o, r2.k);
-}
-var e, t, l, a, n, o, c, s, i, p;
-var init_goober_modern = __esm({
-  "../../node_modules/.pnpm/goober@2.1.14_csstype@3.1.3/node_modules/goober/dist/goober.modern.js"() {
-    e = { data: "" };
-    t = (t2) => "object" == typeof window ? ((t2 ? t2.querySelector("#_goober") : window._goober) || Object.assign((t2 || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : t2 || e;
-    l = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g;
-    a = /\/\*[^]*?\*\/|  +/g;
-    n = /\n+/g;
-    o = (e2, t2) => {
-      let r2 = "", l2 = "", a2 = "";
-      for (let n2 in e2) {
-        let c2 = e2[n2];
-        "@" == n2[0] ? "i" == n2[1] ? r2 = n2 + " " + c2 + ";" : l2 += "f" == n2[1] ? o(c2, n2) : n2 + "{" + o(c2, "k" == n2[1] ? "" : t2) + "}" : "object" == typeof c2 ? l2 += o(c2, t2 ? t2.replace(/([^,])+/g, (e3) => n2.replace(/(^:.*)|([^,])+/g, (t3) => /&/.test(t3) ? t3.replace(/&/g, e3) : e3 ? e3 + " " + t3 : t3)) : n2) : null != c2 && (n2 = /^--/.test(n2) ? n2 : n2.replace(/[A-Z]/g, "-$&").toLowerCase(), a2 += o.p ? o.p(n2, c2) : n2 + ":" + c2 + ";");
-      }
-      return r2 + (t2 && a2 ? t2 + "{" + a2 + "}" : a2) + l2;
-    };
-    c = {};
-    s = (e2) => {
-      if ("object" == typeof e2) {
-        let t2 = "";
-        for (let r2 in e2)
-          t2 += r2 + s(e2[r2]);
-        return t2;
-      }
-      return e2;
-    };
-    i = (e2, t2, r2, i2, p2) => {
-      let u2 = s(e2), d = c[u2] || (c[u2] = ((e3) => {
-        let t3 = 0, r3 = 11;
-        for (; t3 < e3.length; )
-          r3 = 101 * r3 + e3.charCodeAt(t3++) >>> 0;
-        return "go" + r3;
-      })(u2));
-      if (!c[d]) {
-        let t3 = u2 !== e2 ? e2 : ((e3) => {
-          let t4, r3, o2 = [{}];
-          for (; t4 = l.exec(e3.replace(a, "")); )
-            t4[4] ? o2.shift() : t4[3] ? (r3 = t4[3].replace(n, " ").trim(), o2.unshift(o2[0][r3] = o2[0][r3] || {})) : o2[0][t4[1]] = t4[2].replace(n, " ").trim();
-          return o2[0];
-        })(e2);
-        c[d] = o(p2 ? { ["@keyframes " + d]: t3 } : t3, r2 ? "" : "." + d);
-      }
-      let f = r2 && c.g ? c.g : null;
-      return r2 && (c.g = c[d]), ((e3, t3, r3, l2) => {
-        l2 ? t3.data = t3.data.replace(l2, e3) : -1 === t3.data.indexOf(e3) && (t3.data = r3 ? e3 + t3.data : t3.data + e3);
-      })(c[d], t2, i2, f), d;
-    };
-    p = (e2, t2, r2) => e2.reduce((e3, l2, a2) => {
-      let n2 = t2[a2];
-      if (n2 && n2.call) {
-        let e4 = n2(r2), t3 = e4 && e4.props && e4.props.className || /^go/.test(e4) && e4;
-        n2 = t3 ? "." + t3 : e4 && "object" == typeof e4 ? e4.props ? "" : o(e4, "") : false === e4 ? "" : e4;
-      }
-      return e3 + l2 + (null == n2 ? "" : n2);
-    }, "");
-    u.bind({ g: 1 });
-    u.bind({ k: 1 });
-  }
-});
-
-// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
-function r(e2) {
-  var t2, f, n2 = "";
-  if ("string" == typeof e2 || "number" == typeof e2)
-    n2 += e2;
-  else if ("object" == typeof e2)
-    if (Array.isArray(e2)) {
-      var o2 = e2.length;
-      for (t2 = 0; t2 < o2; t2++)
-        e2[t2] && (f = r(e2[t2])) && (n2 && (n2 += " "), n2 += f);
-    } else
-      for (f in e2)
-        e2[f] && (n2 && (n2 += " "), n2 += f);
-  return n2;
-}
-function clsx() {
-  for (var e2, t2, f = 0, n2 = "", o2 = arguments.length; f < o2; f++)
-    (e2 = arguments[f]) && (t2 = r(e2)) && (n2 && (n2 += " "), n2 += t2);
-  return n2;
-}
-var init_clsx = __esm({
-  "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs"() {
-  }
-});
-
-// ../../node_modules/.pnpm/@solid-primitives+transition-group@1.0.5_solid-js@1.8.19/node_modules/@solid-primitives/transition-group/dist/index.js
-function createListTransition(source, options) {
-  const initSource = untrack(source);
-  if (isServer) {
-    const copy2 = initSource.slice();
-    return () => copy2;
-  }
-  const { onChange } = options;
-  let prevSet = new Set(options.appear ? void 0 : initSource);
-  const exiting = /* @__PURE__ */ new WeakSet();
-  const [toRemove, setToRemove] = createSignal([], { equals: false });
-  const [isTransitionPending] = useTransition();
-  const finishRemoved = options.exitMethod === "remove" ? noop : (els) => {
-    setToRemove((p2) => (p2.push.apply(p2, els), p2));
-    for (const el of els)
-      exiting.delete(el);
-  };
-  const handleRemoved = options.exitMethod === "remove" ? noop : options.exitMethod === "keep-index" ? (els, el, i2) => els.splice(i2, 0, el) : (els, el) => els.push(el);
-  return createMemo(
-    (prev) => {
-      const elsToRemove = toRemove();
-      const sourceList = source();
-      sourceList[$TRACK];
-      if (untrack(isTransitionPending)) {
-        isTransitionPending();
-        return prev;
-      }
-      if (elsToRemove.length) {
-        const next = prev.filter((e2) => !elsToRemove.includes(e2));
-        elsToRemove.length = 0;
-        onChange({ list: next, added: [], removed: [], unchanged: next, finishRemoved });
-        return next;
-      }
-      return untrack(() => {
-        const nextSet = new Set(sourceList);
-        const next = sourceList.slice();
-        const added = [];
-        const removed = [];
-        const unchanged = [];
-        for (const el of sourceList) {
-          (prevSet.has(el) ? unchanged : added).push(el);
-        }
-        let nothingChanged = !added.length;
-        for (let i2 = 0; i2 < prev.length; i2++) {
-          const el = prev[i2];
-          if (!nextSet.has(el)) {
-            if (!exiting.has(el)) {
-              removed.push(el);
-              exiting.add(el);
-            }
-            handleRemoved(next, el, i2);
-          }
-          if (nothingChanged && el !== next[i2])
-            nothingChanged = false;
-        }
-        if (!removed.length && nothingChanged)
-          return prev;
-        onChange({ list: next, added, removed, unchanged, finishRemoved });
-        prevSet = nextSet;
-        return next;
-      });
-    },
-    options.appear ? [] : initSource.slice()
-  );
-}
-var noop;
-var init_dist4 = __esm({
-  "../../node_modules/.pnpm/@solid-primitives+transition-group@1.0.5_solid-js@1.8.19/node_modules/@solid-primitives/transition-group/dist/index.js"() {
-    init_solid();
-    init_web();
-    noop = () => {
-    };
-  }
-});
-
-// ../../node_modules/.pnpm/@solid-primitives+utils@6.2.3_solid-js@1.8.19/node_modules/@solid-primitives/utils/dist/chunk/R5675YMU.js
-function chain(callbacks) {
-  return (...args) => {
-    for (const callback of callbacks)
-      callback && callback(...args);
-  };
-}
-function accessWith(valueOrFn, ...args) {
-  return typeof valueOrFn === "function" ? valueOrFn(...args) : valueOrFn;
-}
-function handleDiffArray(current, prev, handleAdded, handleRemoved) {
-  const currLength = current.length;
-  const prevLength = prev.length;
-  let i2 = 0;
-  if (!prevLength) {
-    for (; i2 < currLength; i2++)
-      handleAdded(current[i2]);
-    return;
-  }
-  if (!currLength) {
-    for (; i2 < prevLength; i2++)
-      handleRemoved(prev[i2]);
-    return;
-  }
-  for (; i2 < prevLength; i2++) {
-    if (prev[i2] !== current[i2])
-      break;
-  }
-  let prevEl;
-  let currEl;
-  prev = prev.slice(i2);
-  current = current.slice(i2);
-  for (prevEl of prev) {
-    if (!current.includes(prevEl))
-      handleRemoved(prevEl);
-  }
-  for (currEl of current) {
-    if (!prev.includes(currEl))
-      handleAdded(currEl);
-  }
-}
-var isClient, isDev, noop2, isNonNullable, filterNonNullable, access, asArray, tryOnCleanup;
-var init_R5675YMU = __esm({
-  "../../node_modules/.pnpm/@solid-primitives+utils@6.2.3_solid-js@1.8.19/node_modules/@solid-primitives/utils/dist/chunk/R5675YMU.js"() {
-    init_solid();
-    init_web();
-    isClient = !isServer;
-    isDev = isClient && !!DEV;
-    noop2 = () => void 0;
-    isNonNullable = (i2) => i2 != null;
-    filterNonNullable = (arr) => arr.filter(isNonNullable);
-    access = (v) => typeof v === "function" && !v.length ? v() : v;
-    asArray = (value) => Array.isArray(value) ? value : value ? [value] : [];
-    tryOnCleanup = isDev ? (fn) => getOwner() ? onCleanup(fn) : fn : onCleanup;
+    };
   }
 });
 
-// ../../node_modules/.pnpm/@solid-primitives+utils@6.2.3_solid-js@1.8.19/node_modules/@solid-primitives/utils/dist/index/index.js
-var init_index = __esm({
-  "../../node_modules/.pnpm/@solid-primitives+utils@6.2.3_solid-js@1.8.19/node_modules/@solid-primitives/utils/dist/index/index.js"() {
-    init_R5675YMU();
+// ../../node_modules/.pnpm/goober@2.1.14_csstype@3.1.3/node_modules/goober/dist/goober.modern.js
+function u(e2) {
+  let r2 = this || {}, l2 = e2.call ? e2(r2.p) : e2;
+  return i(l2.unshift ? l2.raw ? p(l2, [].slice.call(arguments, 1), r2.p) : l2.reduce((e3, t2) => Object.assign(e3, t2 && t2.call ? t2(r2.p) : t2), {}) : l2, t(r2.target), r2.g, r2.o, r2.k);
+}
+var e, t, l, a, n, o, c, s, i, p;
+var init_goober_modern = __esm({
+  "../../node_modules/.pnpm/goober@2.1.14_csstype@3.1.3/node_modules/goober/dist/goober.modern.js"() {
+    e = { data: "" };
+    t = (t2) => "object" == typeof window ? ((t2 ? t2.querySelector("#_goober") : window._goober) || Object.assign((t2 || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : t2 || e;
+    l = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g;
+    a = /\/\*[^]*?\*\/|  +/g;
+    n = /\n+/g;
+    o = (e2, t2) => {
+      let r2 = "", l2 = "", a2 = "";
+      for (let n2 in e2) {
+        let c2 = e2[n2];
+        "@" == n2[0] ? "i" == n2[1] ? r2 = n2 + " " + c2 + ";" : l2 += "f" == n2[1] ? o(c2, n2) : n2 + "{" + o(c2, "k" == n2[1] ? "" : t2) + "}" : "object" == typeof c2 ? l2 += o(c2, t2 ? t2.replace(/([^,])+/g, (e3) => n2.replace(/(^:.*)|([^,])+/g, (t3) => /&/.test(t3) ? t3.replace(/&/g, e3) : e3 ? e3 + " " + t3 : t3)) : n2) : null != c2 && (n2 = /^--/.test(n2) ? n2 : n2.replace(/[A-Z]/g, "-$&").toLowerCase(), a2 += o.p ? o.p(n2, c2) : n2 + ":" + c2 + ";");
+      }
+      return r2 + (t2 && a2 ? t2 + "{" + a2 + "}" : a2) + l2;
+    };
+    c = {};
+    s = (e2) => {
+      if ("object" == typeof e2) {
+        let t2 = "";
+        for (let r2 in e2)
+          t2 += r2 + s(e2[r2]);
+        return t2;
+      }
+      return e2;
+    };
+    i = (e2, t2, r2, i2, p2) => {
+      let u2 = s(e2), d = c[u2] || (c[u2] = ((e3) => {
+        let t3 = 0, r3 = 11;
+        for (; t3 < e3.length; )
+          r3 = 101 * r3 + e3.charCodeAt(t3++) >>> 0;
+        return "go" + r3;
+      })(u2));
+      if (!c[d]) {
+        let t3 = u2 !== e2 ? e2 : ((e3) => {
+          let t4, r3, o2 = [{}];
+          for (; t4 = l.exec(e3.replace(a, "")); )
+            t4[4] ? o2.shift() : t4[3] ? (r3 = t4[3].replace(n, " ").trim(), o2.unshift(o2[0][r3] = o2[0][r3] || {})) : o2[0][t4[1]] = t4[2].replace(n, " ").trim();
+          return o2[0];
+        })(e2);
+        c[d] = o(p2 ? { ["@keyframes " + d]: t3 } : t3, r2 ? "" : "." + d);
+      }
+      let f = r2 && c.g ? c.g : null;
+      return r2 && (c.g = c[d]), ((e3, t3, r3, l2) => {
+        l2 ? t3.data = t3.data.replace(l2, e3) : -1 === t3.data.indexOf(e3) && (t3.data = r3 ? e3 + t3.data : t3.data + e3);
+      })(c[d], t2, i2, f), d;
+    };
+    p = (e2, t2, r2) => e2.reduce((e3, l2, a2) => {
+      let n2 = t2[a2];
+      if (n2 && n2.call) {
+        let e4 = n2(r2), t3 = e4 && e4.props && e4.props.className || /^go/.test(e4) && e4;
+        n2 = t3 ? "." + t3 : e4 && "object" == typeof e4 ? e4.props ? "" : o(e4, "") : false === e4 ? "" : e4;
+      }
+      return e3 + l2 + (null == n2 ? "" : n2);
+    }, "");
+    u.bind({ g: 1 });
+    u.bind({ k: 1 });
   }
 });
 
-// ../../node_modules/.pnpm/@solid-primitives+refs@1.0.8_solid-js@1.8.19/node_modules/@solid-primitives/refs/dist/index.js
-function mergeRefs(...refs) {
-  return chain(refs);
-}
-function getResolvedElements(value, predicate) {
-  if (predicate(value))
-    return value;
-  if (typeof value === "function" && !value.length)
-    return getResolvedElements(value(), predicate);
-  if (Array.isArray(value)) {
-    const results = [];
-    for (const item of value) {
-      const result = getResolvedElements(item, predicate);
-      if (result)
-        Array.isArray(result) ? results.push.apply(results, result) : results.push(result);
-    }
-    return results.length ? results : null;
-  }
-  return null;
+// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e2) {
+  var t2, f, n2 = "";
+  if ("string" == typeof e2 || "number" == typeof e2)
+    n2 += e2;
+  else if ("object" == typeof e2)
+    if (Array.isArray(e2)) {
+      var o2 = e2.length;
+      for (t2 = 0; t2 < o2; t2++)
+        e2[t2] && (f = r(e2[t2])) && (n2 && (n2 += " "), n2 += f);
+    } else
+      for (f in e2)
+        e2[f] && (n2 && (n2 += " "), n2 += f);
+  return n2;
 }
-function resolveElements(fn, predicate = defaultElementPredicate, serverPredicate = defaultElementPredicate) {
-  const children2 = createMemo(fn);
-  const memo = createMemo(
-    () => getResolvedElements(children2(), isServer ? serverPredicate : predicate)
-  );
-  memo.toArray = () => {
-    const value = memo();
-    return Array.isArray(value) ? value : value ? [value] : [];
-  };
-  return memo;
+function clsx() {
+  for (var e2, t2, f = 0, n2 = "", o2 = arguments.length; f < o2; f++)
+    (e2 = arguments[f]) && (t2 = r(e2)) && (n2 && (n2 += " "), n2 += t2);
+  return n2;
 }
-var defaultElementPredicate;
-var init_dist5 = __esm({
-  "../../node_modules/.pnpm/@solid-primitives+refs@1.0.8_solid-js@1.8.19/node_modules/@solid-primitives/refs/dist/index.js"() {
-    init_index();
-    init_solid();
-    init_web();
-    defaultElementPredicate = isServer ? (item) => item != null && typeof item === "object" && "t" in item : (item) => item instanceof Element;
+var init_clsx = __esm({
+  "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs"() {
   }
 });
 
-// ../../node_modules/.pnpm/solid-transition-group@0.2.3_solid-js@1.8.19/node_modules/solid-transition-group/dist/index.js
-function createClassnames(props) {
-  return createMemo(() => {
-    const name = props.name || "s";
-    return {
-      enterActive: (props.enterActiveClass || name + "-enter-active").split(" "),
-      enter: (props.enterClass || name + "-enter").split(" "),
-      enterTo: (props.enterToClass || name + "-enter-to").split(" "),
-      exitActive: (props.exitActiveClass || name + "-exit-active").split(" "),
-      exit: (props.exitClass || name + "-exit").split(" "),
-      exitTo: (props.exitToClass || name + "-exit-to").split(" "),
-      move: (props.moveClass || name + "-move").split(" ")
-    };
-  });
-}
-function nextFrame(fn) {
-  requestAnimationFrame(() => requestAnimationFrame(fn));
-}
-function enterTransition(classes, events, el, done) {
-  const { onBeforeEnter, onEnter, onAfterEnter } = events;
-  onBeforeEnter?.(el);
-  el.classList.add(...classes.enter);
-  el.classList.add(...classes.enterActive);
-  queueMicrotask(() => {
-    if (!el.parentNode)
-      return done?.();
-    onEnter?.(el, () => endTransition());
-  });
-  nextFrame(() => {
-    el.classList.remove(...classes.enter);
-    el.classList.add(...classes.enterTo);
-    if (!onEnter || onEnter.length < 2) {
-      el.addEventListener("transitionend", endTransition);
-      el.addEventListener("animationend", endTransition);
-    }
-  });
-  function endTransition(e2) {
-    if (!e2 || e2.target === el) {
-      el.removeEventListener("transitionend", endTransition);
-      el.removeEventListener("animationend", endTransition);
-      el.classList.remove(...classes.enterActive);
-      el.classList.remove(...classes.enterTo);
-      onAfterEnter?.(el);
-    }
-  }
-}
-function exitTransition(classes, events, el, done) {
-  const { onBeforeExit, onExit, onAfterExit } = events;
-  if (!el.parentNode)
-    return done?.();
-  onBeforeExit?.(el);
-  el.classList.add(...classes.exit);
-  el.classList.add(...classes.exitActive);
-  onExit?.(el, () => endTransition());
-  nextFrame(() => {
-    el.classList.remove(...classes.exit);
-    el.classList.add(...classes.exitTo);
-    if (!onExit || onExit.length < 2) {
-      el.addEventListener("transitionend", endTransition);
-      el.addEventListener("animationend", endTransition);
-    }
-  });
-  function endTransition(e2) {
-    if (!e2 || e2.target === el) {
-      done?.();
-      el.removeEventListener("transitionend", endTransition);
-      el.removeEventListener("animationend", endTransition);
-      el.classList.remove(...classes.exitActive);
-      el.classList.remove(...classes.exitTo);
-      onAfterExit?.(el);
-    }
+// ../../node_modules/.pnpm/@solid-primitives+transition-group@1.0.5_solid-js@1.8.19/node_modules/@solid-primitives/transition-group/dist/index.js
+function createListTransition(source, options) {
+  const initSource = untrack(source);
+  if (isServer) {
+    const copy2 = initSource.slice();
+    return () => copy2;
   }
-}
-var TransitionGroup;
-var init_dist6 = __esm({
-  "../../node_modules/.pnpm/solid-transition-group@0.2.3_solid-js@1.8.19/node_modules/solid-transition-group/dist/index.js"() {
-    init_solid();
-    init_dist4();
-    init_dist5();
-    TransitionGroup = (props) => {
-      const classnames = createClassnames(props);
-      return createListTransition(resolveElements(() => props.children).toArray, {
-        appear: props.appear,
-        exitMethod: "keep-index",
-        onChange({ added, removed, finishRemoved, list }) {
-          const classes = classnames();
-          for (const el of added) {
-            enterTransition(classes, props, el);
-          }
-          const toMove = [];
-          for (const el of list) {
-            if (el.isConnected && (el instanceof HTMLElement || el instanceof SVGElement)) {
-              toMove.push({ el, rect: el.getBoundingClientRect() });
-            }
-          }
-          queueMicrotask(() => {
-            const moved = [];
-            for (const { el, rect } of toMove) {
-              if (el.isConnected) {
-                const newRect = el.getBoundingClientRect(), dX = rect.left - newRect.left, dY = rect.top - newRect.top;
-                if (dX || dY) {
-                  el.style.transform = `translate(${dX}px, ${dY}px)`;
-                  el.style.transitionDuration = "0s";
-                  moved.push(el);
-                }
-              }
-            }
-            document.body.offsetHeight;
-            for (const el of moved) {
-              let endTransition2 = function(e2) {
-                if (e2.target === el || /transform$/.test(e2.propertyName)) {
-                  el.removeEventListener("transitionend", endTransition2);
-                  el.classList.remove(...classes.move);
-                }
-              };
-              el.classList.add(...classes.move);
-              el.style.transform = el.style.transitionDuration = "";
-              el.addEventListener("transitionend", endTransition2);
+  const { onChange } = options;
+  let prevSet = new Set(options.appear ? void 0 : initSource);
+  const exiting = /* @__PURE__ */ new WeakSet();
+  const [toRemove, setToRemove] = createSignal([], { equals: false });
+  const [isTransitionPending] = useTransition();
+  const finishRemoved = options.exitMethod === "remove" ? noop2 : (els) => {
+    setToRemove((p2) => (p2.push.apply(p2, els), p2));
+    for (const el of els)
+      exiting.delete(el);
+  };
+  const handleRemoved = options.exitMethod === "remove" ? noop2 : options.exitMethod === "keep-index" ? (els, el, i2) => els.splice(i2, 0, el) : (els, el) => els.push(el);
+  return createMemo(
+    (prev) => {
+      const elsToRemove = toRemove();
+      const sourceList = source();
+      sourceList[$TRACK];
+      if (untrack(isTransitionPending)) {
+        isTransitionPending();
+        return prev;
+      }
+      if (elsToRemove.length) {
+        const next = prev.filter((e2) => !elsToRemove.includes(e2));
+        elsToRemove.length = 0;
+        onChange({ list: next, added: [], removed: [], unchanged: next, finishRemoved });
+        return next;
+      }
+      return untrack(() => {
+        const nextSet = new Set(sourceList);
+        const next = sourceList.slice();
+        const added = [];
+        const removed = [];
+        const unchanged = [];
+        for (const el of sourceList) {
+          (prevSet.has(el) ? unchanged : added).push(el);
+        }
+        let nothingChanged = !added.length;
+        for (let i2 = 0; i2 < prev.length; i2++) {
+          const el = prev[i2];
+          if (!nextSet.has(el)) {
+            if (!exiting.has(el)) {
+              removed.push(el);
+              exiting.add(el);
             }
-          });
-          for (const el of removed) {
-            exitTransition(classes, props, el, () => finishRemoved([el]));
+            handleRemoved(next, el, i2);
           }
+          if (nothingChanged && el !== next[i2])
+            nothingChanged = false;
         }
+        if (!removed.length && nothingChanged)
+          return prev;
+        onChange({ list: next, added, removed, unchanged, finishRemoved });
+        prevSet = nextSet;
+        return next;
       });
+    },
+    options.appear ? [] : initSource.slice()
+  );
+}
+var noop2;
+var init_dist5 = __esm({
+  "../../node_modules/.pnpm/@solid-primitives+transition-group@1.0.5_solid-js@1.8.19/node_modules/@solid-primitives/transition-group/dist/index.js"() {
+    init_solid();
+    init_web();
+    noop2 = () => {
     };
   }
 });
 
-// ../../node_modules/.pnpm/@solid-primitives+keyed@1.2.2_solid-js@1.8.19/node_modules/@solid-primitives/keyed/dist/index.js
-function dispose2(list) {
-  for (const o2 of list)
-    o2.dispose();
+// ../../node_modules/.pnpm/@solid-primitives+refs@1.0.8_solid-js@1.8.19/node_modules/@solid-primitives/refs/dist/index.js
+function mergeRefs(...refs) {
+  return chain(refs);
 }
-function keyArray(items, keyFn, mapFn, options = {}) {
-  if (isServer) {
-    const itemsRef = items();
-    let s2 = [];
-    if (itemsRef && itemsRef.length) {
-      for (let i2 = 0, len = itemsRef.length; i2 < len; i2++)
-        s2.push(
-          mapFn(
-            () => itemsRef[i2],
-            () => i2
-          )
-        );
-    } else if (options.fallback)
-      s2 = [options.fallback()];
-    return () => s2;
-  }
-  const prev = /* @__PURE__ */ new Map();
-  onCleanup(() => dispose2(prev.values()));
-  return () => {
-    const list = items() || [];
-    list[$TRACK];
-    return untrack(() => {
-      if (!list.length) {
-        dispose2(prev.values());
-        prev.clear();
-        if (!options.fallback)
-          return [];
-        const fb2 = createRoot((dispose22) => {
-          prev.set(FALLBACK2, { dispose: dispose22 });
-          return options.fallback();
-        });
-        return [fb2];
-      }
-      const result = new Array(list.length);
-      const fb = prev.get(FALLBACK2);
-      if (!prev.size || fb) {
-        fb?.dispose();
-        prev.delete(FALLBACK2);
-        for (let i2 = 0; i2 < list.length; i2++) {
-          const item = list[i2];
-          const key = keyFn(item, i2);
-          addNewItem(result, item, i2, key);
-        }
-        return result;
-      }
-      const prevKeys = new Set(prev.keys());
-      for (let i2 = 0; i2 < list.length; i2++) {
-        const item = list[i2];
-        const key = keyFn(item, i2);
-        prevKeys.delete(key);
-        const lookup = prev.get(key);
-        if (lookup) {
-          result[i2] = lookup.mapped;
-          lookup.setIndex?.(i2);
-          lookup.setItem(() => item);
-        } else
-          addNewItem(result, item, i2, key);
-      }
-      for (const key of prevKeys) {
-        prev.get(key)?.dispose();
-        prev.delete(key);
-      }
-      return result;
-    });
-  };
-  function addNewItem(list, item, i2, key) {
-    createRoot((dispose22) => {
-      const [getItem, setItem] = createSignal(item);
-      const save = { setItem, dispose: dispose22 };
-      if (mapFn.length > 1) {
-        const [index, setIndex] = createSignal(i2);
-        save.setIndex = setIndex;
-        save.mapped = mapFn(getItem, index);
-      } else
-        save.mapped = mapFn(getItem);
-      prev.set(key, save);
-      list[i2] = save.mapped;
-    });
+function getResolvedElements(value, predicate) {
+  if (predicate(value))
+    return value;
+  if (typeof value === "function" && !value.length)
+    return getResolvedElements(value(), predicate);
+  if (Array.isArray(value)) {
+    const results = [];
+    for (const item of value) {
+      const result = getResolvedElements(item, predicate);
+      if (result)
+        Array.isArray(result) ? results.push.apply(results, result) : results.push(result);
+    }
+    return results.length ? results : null;
   }
+  return null;
 }
-function Key(props) {
-  const { by } = props;
-  return createMemo(
-    keyArray(
-      () => props.each,
-      typeof by === "function" ? by : (v) => v[by],
-      props.children,
-      "fallback" in props ? { fallback: () => props.fallback } : void 0
-    )
+function resolveElements(fn, predicate = defaultElementPredicate, serverPredicate = defaultElementPredicate) {
+  const children2 = createMemo(fn);
+  const memo = createMemo(
+    () => getResolvedElements(children2(), isServer ? serverPredicate : predicate)
   );
+  memo.toArray = () => {
+    const value = memo();
+    return Array.isArray(value) ? value : value ? [value] : [];
+  };
+  return memo;
 }
-var FALLBACK2;
-var init_dist7 = __esm({
-  "../../node_modules/.pnpm/@solid-primitives+keyed@1.2.2_solid-js@1.8.19/node_modules/@solid-primitives/keyed/dist/index.js"() {
+var defaultElementPredicate;
+var init_dist6 = __esm({
+  "../../node_modules/.pnpm/@solid-primitives+refs@1.0.8_solid-js@1.8.19/node_modules/@solid-primitives/refs/dist/index.js"() {
+    init_index();
     init_solid();
     init_web();
-    FALLBACK2 = Symbol("fallback");
+    defaultElementPredicate = isServer ? (item) => item != null && typeof item === "object" && "t" in item : (item) => item instanceof Element;
   }
 });
 
-// ../../node_modules/.pnpm/@solid-primitives+storage@1.3.11_solid-js@1.8.19/node_modules/@solid-primitives/storage/dist/index.js
-function createStorage(props) {
-  const [error, setError] = createSignal();
-  const handleError2 = props?.throw ? (err, fallback) => {
-    setError(err instanceof Error ? err : new Error(fallback));
-    throw err;
-  } : (err, fallback) => {
-    setError(err instanceof Error ? err : new Error(fallback));
-  };
-  const apis = props?.api ? Array.isArray(props.api) ? props.api : [props.api] : [globalThis.localStorage].filter(Boolean);
-  const prefix = props?.prefix ? `${props.prefix}.` : "";
-  const signals = /* @__PURE__ */ new Map();
-  const store = new Proxy(
-    {},
-    {
-      get(_, key) {
-        let node = signals.get(key);
-        if (!node) {
-          node = createSignal(void 0, { equals: false });
-          signals.set(key, node);
-        }
-        node[0]();
-        const value = apis.reduce(
-          (result, api) => {
-            if (result !== null || !api) {
-              return result;
-            }
-            try {
-              return api.getItem(`${prefix}${key}`);
-            } catch (err) {
-              handleError2(err, `Error reading ${prefix}${key} from ${api["name"]}`);
-              return null;
-            }
-          },
-          null
-        );
-        if (value !== null && props?.deserializer) {
-          return props.deserializer(value, key, props.options);
-        }
-        return value;
-      }
-    }
-  );
-  const setter = (key, value, options) => {
-    const filteredValue = props?.serializer ? props.serializer(value, key, options ?? props.options) : value;
-    const apiKey = `${prefix}${key}`;
-    apis.forEach((api) => {
-      try {
-        api.getItem(apiKey) !== filteredValue && api.setItem(apiKey, filteredValue);
-      } catch (err) {
-        handleError2(err, `Error setting ${prefix}${key} to ${filteredValue} in ${api.name}`);
-      }
-    });
-    const node = signals.get(key);
-    node && node[1]();
-  };
-  const remove = (key) => apis.forEach((api) => {
-    try {
-      api.removeItem(`${prefix}${key}`);
-    } catch (err) {
-      handleError2(err, `Error removing ${prefix}${key} from ${api.name}`);
-    }
+// ../../node_modules/.pnpm/solid-transition-group@0.2.3_solid-js@1.8.19/node_modules/solid-transition-group/dist/index.js
+function createClassnames(props) {
+  return createMemo(() => {
+    const name = props.name || "s";
+    return {
+      enterActive: (props.enterActiveClass || name + "-enter-active").split(" "),
+      enter: (props.enterClass || name + "-enter").split(" "),
+      enterTo: (props.enterToClass || name + "-enter-to").split(" "),
+      exitActive: (props.exitActiveClass || name + "-exit-active").split(" "),
+      exit: (props.exitClass || name + "-exit").split(" "),
+      exitTo: (props.exitToClass || name + "-exit-to").split(" "),
+      move: (props.moveClass || name + "-move").split(" ")
+    };
+  });
+}
+function nextFrame(fn) {
+  requestAnimationFrame(() => requestAnimationFrame(fn));
+}
+function enterTransition(classes, events, el, done) {
+  const { onBeforeEnter, onEnter, onAfterEnter } = events;
+  onBeforeEnter?.(el);
+  el.classList.add(...classes.enter);
+  el.classList.add(...classes.enterActive);
+  queueMicrotask(() => {
+    if (!el.parentNode)
+      return done?.();
+    onEnter?.(el, () => endTransition());
   });
-  const clear = () => apis.forEach((api) => {
-    try {
-      api.clear();
-    } catch (err) {
-      handleError2(err, `Error clearing ${api.name}`);
+  nextFrame(() => {
+    el.classList.remove(...classes.enter);
+    el.classList.add(...classes.enterTo);
+    if (!onEnter || onEnter.length < 2) {
+      el.addEventListener("transitionend", endTransition);
+      el.addEventListener("animationend", endTransition);
     }
   });
-  const toJSON = () => {
-    const result = {};
-    const addValue = (key, value) => {
-      if (!result.hasOwnProperty(key)) {
-        const filteredValue = value && props?.deserializer ? props.deserializer(value, key, props.options) : value;
-        if (filteredValue) {
-          result[key] = filteredValue;
-        }
-      }
-    };
-    apis.forEach((api) => {
-      if (typeof api.getAll === "function") {
-        let values;
-        try {
-          values = api.getAll();
-        } catch (err) {
-          handleError2(err, `Error getting all values from in ${api.name}`);
-        }
-        for (const key of values) {
-          addValue(key, values[key]);
-        }
-      } else {
-        let index = 0, key;
-        try {
-          while (key = api.key(index++)) {
-            if (!result.hasOwnProperty(key)) {
-              addValue(key, api.getItem(key));
-            }
-          }
-        } catch (err) {
-          handleError2(err, `Error getting all values from ${api.name}`);
-        }
-      }
-    });
-    return result;
-  };
-  props?.sync !== false && onMount(() => {
-    const listener = (ev) => {
-      let changed = false;
-      apis.forEach((api) => {
-        try {
-          if (api !== ev.storageArea && ev.key && ev.newValue !== api.getItem(ev.key)) {
-            ev.newValue ? api.setItem(ev.key, ev.newValue) : api.removeItem(ev.key);
-            changed = true;
-          }
-        } catch (err) {
-          handleError2(
-            err,
-            `Error synching api ${api.name} from storage event (${ev.key}=${ev.newValue})`
-          );
-        }
-      });
-      changed && ev.key && signals.get(ev.key)?.[1]();
-    };
-    if ("addEventListener" in globalThis) {
-      globalThis.addEventListener("storage", listener);
-      onCleanup(() => globalThis.removeEventListener("storage", listener));
-    } else {
-      apis.forEach((api) => api.addEventListener?.("storage", listener));
-      onCleanup(() => apis.forEach((api) => api.removeEventListener?.("storage", listener)));
+  function endTransition(e2) {
+    if (!e2 || e2.target === el) {
+      el.removeEventListener("transitionend", endTransition);
+      el.removeEventListener("animationend", endTransition);
+      el.classList.remove(...classes.enterActive);
+      el.classList.remove(...classes.enterTo);
+      onAfterEnter?.(el);
+    }
+  }
+}
+function exitTransition(classes, events, el, done) {
+  const { onBeforeExit, onExit, onAfterExit } = events;
+  if (!el.parentNode)
+    return done?.();
+  onBeforeExit?.(el);
+  el.classList.add(...classes.exit);
+  el.classList.add(...classes.exitActive);
+  onExit?.(el, () => endTransition());
+  nextFrame(() => {
+    el.classList.remove(...classes.exit);
+    el.classList.add(...classes.exitTo);
+    if (!onExit || onExit.length < 2) {
+      el.addEventListener("transitionend", endTransition);
+      el.addEventListener("animationend", endTransition);
     }
   });
-  return [
-    store,
-    setter,
-    {
-      clear,
-      error,
-      remove,
-      toJSON
+  function endTransition(e2) {
+    if (!e2 || e2.target === el) {
+      done?.();
+      el.removeEventListener("transitionend", endTransition);
+      el.removeEventListener("animationend", endTransition);
+      el.classList.remove(...classes.exitActive);
+      el.classList.remove(...classes.exitTo);
+      onAfterExit?.(el);
     }
-  ];
+  }
 }
-var createLocalStorage, addClearMethod, serializeCookieOptions, cookieStorage;
-var init_dist8 = __esm({
-  "../../node_modules/.pnpm/@solid-primitives+storage@1.3.11_solid-js@1.8.19/node_modules/@solid-primitives/storage/dist/index.js"() {
+var TransitionGroup;
+var init_dist7 = __esm({
+  "../../node_modules/.pnpm/solid-transition-group@0.2.3_solid-js@1.8.19/node_modules/solid-transition-group/dist/index.js"() {
     init_solid();
-    createLocalStorage = createStorage;
-    addClearMethod = (storage) => {
-      if (typeof storage.clear === "function") {
-        return storage;
-      }
-      storage.clear = () => {
-        let key;
-        while (key = storage.key(0)) {
-          storage.removeItem(key);
-        }
-      };
-      return storage;
-    };
-    serializeCookieOptions = (options) => {
-      if (!options) {
-        return "";
-      }
-      let memo = "";
-      for (const key in options) {
-        if (!options.hasOwnProperty(key)) {
-          continue;
-        }
-        const value = options[key];
-        memo += value instanceof Date ? `; ${key}=${value.toUTCString()}` : typeof value === "boolean" ? `; ${key}` : `; ${key}=${value}`;
-      }
-      return memo;
-    };
-    cookieStorage = addClearMethod({
-      _cookies: [globalThis.document, "cookie"],
-      getItem: (key) => cookieStorage._cookies[0][cookieStorage._cookies[1]].match("(^|;)\\s*" + key + "\\s*=\\s*([^;]+)")?.pop() ?? null,
-      setItem: (key, value, options) => {
-        const oldValue = cookieStorage.getItem(key);
-        cookieStorage._cookies[0][cookieStorage._cookies[1]] = `${key}=${value}${serializeCookieOptions(
-          options
-        )}`;
-        const storageEvent = Object.assign(new Event("storage"), {
-          key,
-          oldValue,
-          newValue: value,
-          url: globalThis.document.URL,
-          storageArea: cookieStorage
-        });
-        window.dispatchEvent(storageEvent);
-      },
-      removeItem: (key) => {
-        cookieStorage._cookies[0][cookieStorage._cookies[1]] = `${key}=deleted${serializeCookieOptions({
-          expires: /* @__PURE__ */ new Date(0)
-        })}`;
-      },
-      key: (index) => {
-        let key = null;
-        let count = 0;
-        cookieStorage._cookies[0][cookieStorage._cookies[1]].replace(
-          /(?:^|;)\s*(.+?)\s*=\s*[^;]+/g,
-          (_, found) => {
-            if (!key && found && count++ === index) {
-              key = found;
+    init_dist5();
+    init_dist6();
+    TransitionGroup = (props) => {
+      const classnames = createClassnames(props);
+      return createListTransition(resolveElements(() => props.children).toArray, {
+        appear: props.appear,
+        exitMethod: "keep-index",
+        onChange({ added, removed, finishRemoved, list }) {
+          const classes = classnames();
+          for (const el of added) {
+            enterTransition(classes, props, el);
+          }
+          const toMove = [];
+          for (const el of list) {
+            if (el.isConnected && (el instanceof HTMLElement || el instanceof SVGElement)) {
+              toMove.push({ el, rect: el.getBoundingClientRect() });
             }
-            return "";
           }
-        );
-        return key;
-      },
-      get length() {
-        let length = 0;
-        cookieStorage._cookies[0][cookieStorage._cookies[1]].replace(
-          /(?:^|;)\s*.+?\s*=\s*[^;]+/g,
-          (found) => {
-            length += found ? 1 : 0;
-            return "";
+          queueMicrotask(() => {
+            const moved = [];
+            for (const { el, rect } of toMove) {
+              if (el.isConnected) {
+                const newRect = el.getBoundingClientRect(), dX = rect.left - newRect.left, dY = rect.top - newRect.top;
+                if (dX || dY) {
+                  el.style.transform = `translate(${dX}px, ${dY}px)`;
+                  el.style.transitionDuration = "0s";
+                  moved.push(el);
+                }
+              }
+            }
+            document.body.offsetHeight;
+            for (const el of moved) {
+              let endTransition2 = function(e2) {
+                if (e2.target === el || /transform$/.test(e2.propertyName)) {
+                  el.removeEventListener("transitionend", endTransition2);
+                  el.classList.remove(...classes.move);
+                }
+              };
+              el.classList.add(...classes.move);
+              el.style.transform = el.style.transitionDuration = "";
+              el.addEventListener("transitionend", endTransition2);
+            }
+          });
+          for (const el of removed) {
+            exitTransition(classes, props, el, () => finishRemoved([el]));
           }
+        }
+      });
+    };
+  }
+});
+
+// ../../node_modules/.pnpm/@solid-primitives+keyed@1.2.2_solid-js@1.8.19/node_modules/@solid-primitives/keyed/dist/index.js
+function dispose2(list) {
+  for (const o2 of list)
+    o2.dispose();
+}
+function keyArray(items, keyFn, mapFn, options = {}) {
+  if (isServer) {
+    const itemsRef = items();
+    let s2 = [];
+    if (itemsRef && itemsRef.length) {
+      for (let i2 = 0, len = itemsRef.length; i2 < len; i2++)
+        s2.push(
+          mapFn(
+            () => itemsRef[i2],
+            () => i2
+          )
         );
-        return length;
+    } else if (options.fallback)
+      s2 = [options.fallback()];
+    return () => s2;
+  }
+  const prev = /* @__PURE__ */ new Map();
+  onCleanup(() => dispose2(prev.values()));
+  return () => {
+    const list = items() || [];
+    list[$TRACK];
+    return untrack(() => {
+      if (!list.length) {
+        dispose2(prev.values());
+        prev.clear();
+        if (!options.fallback)
+          return [];
+        const fb2 = createRoot((dispose22) => {
+          prev.set(FALLBACK2, { dispose: dispose22 });
+          return options.fallback();
+        });
+        return [fb2];
+      }
+      const result = new Array(list.length);
+      const fb = prev.get(FALLBACK2);
+      if (!prev.size || fb) {
+        fb?.dispose();
+        prev.delete(FALLBACK2);
+        for (let i2 = 0; i2 < list.length; i2++) {
+          const item = list[i2];
+          const key = keyFn(item, i2);
+          addNewItem(result, item, i2, key);
+        }
+        return result;
+      }
+      const prevKeys = new Set(prev.keys());
+      for (let i2 = 0; i2 < list.length; i2++) {
+        const item = list[i2];
+        const key = keyFn(item, i2);
+        prevKeys.delete(key);
+        const lookup = prev.get(key);
+        if (lookup) {
+          result[i2] = lookup.mapped;
+          lookup.setIndex?.(i2);
+          lookup.setItem(() => item);
+        } else
+          addNewItem(result, item, i2, key);
+      }
+      for (const key of prevKeys) {
+        prev.get(key)?.dispose();
+        prev.delete(key);
       }
+      return result;
+    });
+  };
+  function addNewItem(list, item, i2, key) {
+    createRoot((dispose22) => {
+      const [getItem, setItem] = createSignal(item);
+      const save = { setItem, dispose: dispose22 };
+      if (mapFn.length > 1) {
+        const [index, setIndex] = createSignal(i2);
+        save.setIndex = setIndex;
+        save.mapped = mapFn(getItem, index);
+      } else
+        save.mapped = mapFn(getItem);
+      prev.set(key, save);
+      list[i2] = save.mapped;
     });
   }
+}
+function Key(props) {
+  const { by } = props;
+  return createMemo(
+    keyArray(
+      () => props.each,
+      typeof by === "function" ? by : (v) => v[by],
+      props.children,
+      "fallback" in props ? { fallback: () => props.fallback } : void 0
+    )
+  );
+}
+var FALLBACK2;
+var init_dist8 = __esm({
+  "../../node_modules/.pnpm/@solid-primitives+keyed@1.2.2_solid-js@1.8.19/node_modules/@solid-primitives/keyed/dist/index.js"() {
+    init_solid();
+    init_web();
+    FALLBACK2 = Symbol("fallback");
+  }
 });
 
 // ../../node_modules/.pnpm/@solid-primitives+event-listener@2.3.3_solid-js@1.8.19/node_modules/@solid-primitives/event-listener/dist/index.js
@@ -4344,7 +4344,7 @@ var init_dist9 = __esm({
 // ../../node_modules/.pnpm/@solid-primitives+resize-observer@2.0.26_solid-js@1.8.19/node_modules/@solid-primitives/resize-observer/dist/index.js
 function makeResizeObserver(callback, options) {
   if (isServer) {
-    return { observe: noop2, unobserve: noop2 };
+    return { observe: noop, unobserve: noop };
   }
   const observer = new ResizeObserver(callback);
   onCleanup(observer.disconnect.bind(observer));
@@ -4794,7 +4794,7 @@ var init_dist12 = __esm({
   "../../node_modules/.pnpm/@kobalte+utils@0.9.0_solid-js@1.8.19/node_modules/@kobalte/utils/dist/index.js"() {
     init_solid();
     init_dist9();
-    init_dist5();
+    init_dist6();
     init_index();
     EventKey = /* @__PURE__ */ ((EventKey2) => {
       EventKey2["Escape"] = "Escape";
@@ -12058,16 +12058,34 @@ var init_icons = __esm({
   }
 });
 
-// src/Context.ts
+// src/constants.ts
+var firstBreakpoint, secondBreakpoint, thirdBreakpoint, BUTTON_POSITION, POSITION, THEME_PREFERENCE, INITIAL_IS_OPEN, DEFAULT_HEIGHT, PIP_DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_SORT_FN_NAME, DEFAULT_SORT_ORDER, DEFAULT_MUTATION_SORT_FN_NAME;
+var init_constants = __esm({
+  "src/constants.ts"() {
+    init_utils();
+    firstBreakpoint = 1024;
+    secondBreakpoint = 796;
+    thirdBreakpoint = 700;
+    BUTTON_POSITION = "bottom-right";
+    POSITION = "bottom";
+    THEME_PREFERENCE = "system";
+    INITIAL_IS_OPEN = false;
+    DEFAULT_HEIGHT = 500;
+    PIP_DEFAULT_HEIGHT = 500;
+    DEFAULT_WIDTH = 500;
+    DEFAULT_SORT_FN_NAME = Object.keys(sortFns)[0];
+    DEFAULT_SORT_ORDER = 1;
+    DEFAULT_MUTATION_SORT_FN_NAME = Object.keys(mutationSortFns)[0];
+  }
+});
+
+// src/contexts/QueryDevtoolsContext.ts
 function useQueryDevtoolsContext() {
   return useContext(QueryDevtoolsContext);
 }
-function useTheme() {
-  return useContext(ThemeContext);
-}
-var QueryDevtoolsContext, ThemeContext;
-var init_Context = __esm({
-  "src/Context.ts"() {
+var QueryDevtoolsContext;
+var init_QueryDevtoolsContext = __esm({
+  "src/contexts/QueryDevtoolsContext.ts"() {
     init_solid();
     QueryDevtoolsContext = createContext({
       client: void 0,
@@ -12076,12 +12094,153 @@ var init_Context = __esm({
       version: "",
       shadowDOMTarget: void 0
     });
+  }
+});
+
+// src/contexts/PiPContext.tsx
+var PiPContext, PiPProvider, usePiPWindow;
+var init_PiPContext = __esm({
+  "src/contexts/PiPContext.tsx"() {
+    init_web();
+    init_solid();
+    init_web();
+    init_constants();
+    init_QueryDevtoolsContext();
+    PiPContext = createContext(void 0);
+    PiPProvider = (props) => {
+      const [pipWindow, setPipWindow] = createSignal(null);
+      const closePipWindow = () => {
+        const w = pipWindow();
+        if (w != null) {
+          w.close();
+          setPipWindow(null);
+        }
+      };
+      const requestPipWindow = (width, height) => {
+        if (pipWindow() != null) {
+          return;
+        }
+        const pip = window.open("", "TSQD-Devtools-Panel", `width=${width},height=${height},popup`);
+        if (!pip) {
+          throw new Error("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.");
+        }
+        pip.document.head.innerHTML = "";
+        pip.document.body.innerHTML = "";
+        clearDelegatedEvents(pip.document);
+        pip.document.title = "TanStack Query Devtools";
+        pip.document.body.style.margin = "0";
+        pip.addEventListener("pagehide", () => {
+          props.setLocalStore("pip_open", "false");
+          setPipWindow(null);
+        });
+        [...(useQueryDevtoolsContext().shadowDOMTarget || document).styleSheets].forEach((styleSheet) => {
+          try {
+            const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
+            const style2 = document.createElement("style");
+            const style_node = styleSheet.ownerNode;
+            let style_id = "";
+            if (style_node && "id" in style_node) {
+              style_id = style_node.id;
+            }
+            if (style_id) {
+              style2.setAttribute("id", style_id);
+            }
+            style2.textContent = cssRules;
+            pip.document.head.appendChild(style2);
+          } catch (e2) {
+            const link = document.createElement("link");
+            if (styleSheet.href == null) {
+              return;
+            }
+            link.rel = "stylesheet";
+            link.type = styleSheet.type;
+            link.media = styleSheet.media.toString();
+            link.href = styleSheet.href;
+            pip.document.head.appendChild(link);
+          }
+        });
+        delegateEvents(["focusin", "focusout", "pointermove", "keydown", "pointerdown", "pointerup", "click", "mousedown", "input"], pip.document);
+        props.setLocalStore("pip_open", "true");
+        setPipWindow(pip);
+      };
+      createEffect(() => {
+        const pip_open = props.localStore.pip_open ?? "false";
+        if (pip_open === "true" && !props.disabled) {
+          requestPipWindow(Number(window.innerWidth), Number(props.localStore.height || PIP_DEFAULT_HEIGHT));
+        }
+      });
+      createEffect(() => {
+        const gooberStyles = (useQueryDevtoolsContext().shadowDOMTarget || document).querySelector("#_goober");
+        const w = pipWindow();
+        if (gooberStyles && w) {
+          const observer = new MutationObserver(() => {
+            const pip_style = (useQueryDevtoolsContext().shadowDOMTarget || w.document).querySelector("#_goober");
+            if (pip_style) {
+              pip_style.textContent = gooberStyles.textContent;
+            }
+          });
+          observer.observe(gooberStyles, {
+            childList: true,
+            // observe direct children
+            subtree: true,
+            // and lower descendants too
+            characterDataOldValue: true
+            // pass old data to callback
+          });
+          onCleanup(() => {
+            observer.disconnect();
+          });
+        }
+      });
+      const value = createMemo(() => ({
+        pipWindow: pipWindow(),
+        requestPipWindow,
+        closePipWindow,
+        disabled: props.disabled ?? false
+      }));
+      return createComponent(PiPContext.Provider, {
+        value,
+        get children() {
+          return props.children;
+        }
+      });
+    };
+    usePiPWindow = () => {
+      const context = createMemo(() => {
+        const ctx = useContext(PiPContext);
+        if (!ctx) {
+          throw new Error("usePiPWindow must be used within a PiPProvider");
+        }
+        return ctx();
+      });
+      return context;
+    };
+  }
+});
+
+// src/contexts/ThemeContext.ts
+function useTheme() {
+  return useContext(ThemeContext);
+}
+var ThemeContext;
+var init_ThemeContext = __esm({
+  "src/contexts/ThemeContext.ts"() {
+    init_solid();
     ThemeContext = createContext(
       () => "dark"
     );
   }
 });
 
+// src/contexts/index.ts
+var init_contexts = __esm({
+  "src/contexts/index.ts"() {
+    init_PiPContext();
+    init_QueryDevtoolsContext();
+    init_ThemeContext();
+  }
+});
+
 // src/Explorer.tsx
 function chunkArray(array, size3) {
   let i2 = 0;
@@ -12446,12 +12605,12 @@ var init_Explorer = __esm({
     init_dist3();
     init_clsx();
     init_solid();
-    init_dist7();
+    init_dist8();
     init_goober_modern();
     init_theme();
     init_utils();
     init_icons();
-    init_Context();
+    init_contexts();
     _tmpl$23 = /* @__PURE__ */ template(`<span><svg width=16 height=16 viewBox="0 0 16 16"fill=none xmlns=http://www.w3.org/2000/svg><path d="M6 12L10 8L6 4"stroke-width=2 stroke-linecap=round stroke-linejoin=round>`);
     _tmpl$24 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`);
     _tmpl$32 = /* @__PURE__ */ template(`<button title="Remove all items"aria-label="Remove all items">`);
@@ -12763,11 +12922,7 @@ var init_Explorer = __esm({
 });
 
 // src/Devtools.tsx
-var Devtools_exports = {};
-__export(Devtools_exports, {
-  default: () => Devtools_default
-});
-var _tmpl$25, _tmpl$26, _tmpl$33, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$93, _tmpl$103, _tmpl$113, _tmpl$122, _tmpl$132, _tmpl$142, _tmpl$152, _tmpl$162, _tmpl$172, _tmpl$182, _tmpl$192, _tmpl$202, _tmpl$212, _tmpl$223, _tmpl$232, _tmpl$242, _tmpl$252, _tmpl$262, _tmpl$27, _tmpl$28, _tmpl$29, _tmpl$30, _tmpl$31, _tmpl$322, firstBreakpoint, secondBreakpoint, thirdBreakpoint, BUTTON_POSITION, POSITION, THEME_PREFERENCE, INITIAL_IS_OPEN, DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_SORT_FN_NAME, DEFAULT_SORT_ORDER, DEFAULT_MUTATION_SORT_FN_NAME, selectedQueryHash, setSelectedQueryHash, selectedMutationId, setSelectedMutationId, panelWidth, setPanelWidth, offline, setOffline, PiPContext, PiPProvider, usePiPWindow, DevtoolsComponent, Devtools_default, Devtools, PiPPanel, DevtoolsPanel, ContentView, QueryRow, MutationRow, QueryStatusCount, MutationStatusCount, QueryStatus, QueryDetails, MutationDetails, queryCacheMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, mutationCacheMap, setupMutationCacheSubscription, createSubscribeToMutationCacheBatcher, stylesFactory2, lightStyles2, darkStyles2;
+var _tmpl$25, _tmpl$26, _tmpl$33, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$93, _tmpl$103, _tmpl$113, _tmpl$122, _tmpl$132, _tmpl$142, _tmpl$152, _tmpl$162, _tmpl$172, _tmpl$182, _tmpl$192, _tmpl$202, _tmpl$212, _tmpl$223, _tmpl$232, _tmpl$242, _tmpl$252, _tmpl$262, _tmpl$27, _tmpl$28, _tmpl$29, _tmpl$30, _tmpl$31, _tmpl$322, selectedQueryHash, setSelectedQueryHash, selectedMutationId, setSelectedMutationId, panelWidth, setPanelWidth, offline, setOffline, Devtools, PiPPanel, ParentPanel, DraggablePanel, ContentView, QueryRow, MutationRow, QueryStatusCount, MutationStatusCount, QueryStatus, QueryDetails, MutationDetails, queryCacheMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, mutationCacheMap, setupMutationCacheSubscription, createSubscribeToMutationCacheBatcher, stylesFactory2, lightStyles2, darkStyles2;
 var init_Devtools = __esm({
   "src/Devtools.tsx"() {
     init_web();
@@ -12785,7 +12940,6 @@ var init_Devtools = __esm({
     init_lib();
     init_goober_modern();
     init_clsx();
-    init_dist6();
     init_dist7();
     init_dist8();
     init_dist10();
@@ -12795,8 +12949,9 @@ var init_Devtools = __esm({
     init_utils();
     init_icons();
     init_Explorer();
-    init_Context();
-    _tmpl$25 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools"class=tsqd-open-btn>`);
+    init_contexts();
+    init_constants();
+    _tmpl$25 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button type=button aria-label="Open Tanstack query devtools"class=tsqd-open-btn>`);
     _tmpl$26 = /* @__PURE__ */ template(`<div>`);
     _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools">`);
     _tmpl$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort>`);
@@ -12817,174 +12972,21 @@ var init_Devtools = __esm({
     _tmpl$192 = /* @__PURE__ */ template(`<div><div class=tsqd-queries-container>`);
     _tmpl$202 = /* @__PURE__ */ template(`<div><div class=tsqd-mutations-container>`);
     _tmpl$212 = /* @__PURE__ */ template(`<div><div><div><button aria-label="Close Tanstack query devtools"><span>TANSTACK</span><span> v</span></button></div></div><div><div><div><input aria-label="Filter queries by query key"type=text placeholder=Filter name=tsqd-query-filter-input></div><div></div><button class=tsqd-query-filter-sort-order-btn></button></div><div><button aria-label="Clear query cache"></button><button>`);
-    _tmpl$223 = /* @__PURE__ */ template(`<option>Sort by `);
-    _tmpl$232 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
-    _tmpl$242 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
-    _tmpl$252 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
-    _tmpl$262 = /* @__PURE__ */ template(`<span>`);
-    _tmpl$27 = /* @__PURE__ */ template(`<button><span></span><span>`);
-    _tmpl$28 = /* @__PURE__ */ template(`<button><span></span> Error`);
-    _tmpl$29 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
-    _tmpl$30 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-observers-count><span>Observers:</span><span></span></div><div class=tsqd-query-details-last-updated><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"></div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
-    _tmpl$31 = /* @__PURE__ */ template(`<option>`);
-    _tmpl$322 = /* @__PURE__ */ template(`<div><div>Mutation Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-last-updated><span>Submitted At:</span><span></span></div></div><div>Variables Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Context Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Mutations Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
-    firstBreakpoint = 1024;
-    secondBreakpoint = 796;
-    thirdBreakpoint = 700;
-    BUTTON_POSITION = "bottom-right";
-    POSITION = "bottom";
-    THEME_PREFERENCE = "system";
-    INITIAL_IS_OPEN = false;
-    DEFAULT_HEIGHT = 500;
-    DEFAULT_WIDTH = 500;
-    DEFAULT_SORT_FN_NAME = Object.keys(sortFns)[0];
-    DEFAULT_SORT_ORDER = 1;
-    DEFAULT_MUTATION_SORT_FN_NAME = Object.keys(mutationSortFns)[0];
+    _tmpl$223 = /* @__PURE__ */ template(`<option>Sort by `);
+    _tmpl$232 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
+    _tmpl$242 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
+    _tmpl$252 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
+    _tmpl$262 = /* @__PURE__ */ template(`<span>`);
+    _tmpl$27 = /* @__PURE__ */ template(`<button><span></span><span>`);
+    _tmpl$28 = /* @__PURE__ */ template(`<button><span></span> Error`);
+    _tmpl$29 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
+    _tmpl$30 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-observers-count><span>Observers:</span><span></span></div><div class=tsqd-query-details-last-updated><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"></div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
+    _tmpl$31 = /* @__PURE__ */ template(`<option>`);
+    _tmpl$322 = /* @__PURE__ */ template(`<div><div>Mutation Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-last-updated><span>Submitted At:</span><span></span></div></div><div>Variables Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Context Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Mutations Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
     [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
     [selectedMutationId, setSelectedMutationId] = createSignal(null);
     [panelWidth, setPanelWidth] = createSignal(0);
     [offline, setOffline] = createSignal(false);
-    PiPContext = createContext(void 0);
-    PiPProvider = (props) => {
-      const [pipWindow, setPipWindow] = createSignal(null);
-      const closePipWindow = () => {
-        const w = pipWindow();
-        if (w != null) {
-          w.close();
-          setPipWindow(null);
-        }
-      };
-      const requestPipWindow = async (width, height) => {
-        if (pipWindow() != null) {
-          return;
-        }
-        const pip = window.open("", "TSQD-Devtools-Panel", `width=${width},height=${height},popup`);
-        if (!pip) {
-          throw new Error("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.");
-        }
-        pip.document.head.innerHTML = "";
-        pip.document.body.innerHTML = "";
-        clearDelegatedEvents(pip.document);
-        pip.document.title = "TanStack Query Devtools";
-        pip.document.body.style.margin = "0";
-        pip.addEventListener("pagehide", () => {
-          props.setLocalStore("pip_open", "false");
-          setPipWindow(null);
-        });
-        [...(useQueryDevtoolsContext().shadowDOMTarget || document).styleSheets].forEach((styleSheet) => {
-          try {
-            const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
-            const style2 = document.createElement("style");
-            const style_node = styleSheet.ownerNode;
-            let style_id = "";
-            if (style_node && "id" in style_node) {
-              style_id = style_node.id;
-            }
-            if (style_id) {
-              style2.setAttribute("id", style_id);
-            }
-            style2.textContent = cssRules;
-            pip.document.head.appendChild(style2);
-          } catch (e2) {
-            const link = document.createElement("link");
-            if (styleSheet.href == null) {
-              return;
-            }
-            link.rel = "stylesheet";
-            link.type = styleSheet.type;
-            link.media = styleSheet.media.toString();
-            link.href = styleSheet.href;
-            pip.document.head.appendChild(link);
-          }
-        });
-        delegateEvents(["focusin", "focusout", "pointermove", "keydown", "pointerdown", "pointerup", "click", "mousedown", "input"], pip.document);
-        props.setLocalStore("pip_open", "true");
-        setPipWindow(pip);
-      };
-      createEffect(() => {
-        const pip_open = props.localStore.pip_open ?? "false";
-        if (pip_open === "true") {
-          requestPipWindow(Number(window.innerWidth), Number(props.localStore.height || DEFAULT_HEIGHT));
-        }
-      });
-      createEffect(() => {
-        const gooberStyles = (useQueryDevtoolsContext().shadowDOMTarget || document).querySelector("#_goober");
-        const w = pipWindow();
-        if (gooberStyles && w) {
-          const observer = new MutationObserver(() => {
-            const pip_style = (useQueryDevtoolsContext().shadowDOMTarget || w.document).querySelector("#_goober");
-            if (pip_style) {
-              pip_style.textContent = gooberStyles.textContent;
-            }
-          });
-          observer.observe(gooberStyles, {
-            childList: true,
-            // observe direct children
-            subtree: true,
-            // and lower descendants too
-            characterDataOldValue: true
-            // pass old data to callback
-          });
-          onCleanup(() => {
-            observer.disconnect();
-          });
-        }
-      });
-      const value = createMemo(() => ({
-        pipWindow: pipWindow(),
-        requestPipWindow,
-        closePipWindow
-      }));
-      return createComponent(PiPContext.Provider, {
-        value,
-        get children() {
-          return props.children;
-        }
-      });
-    };
-    usePiPWindow = () => {
-      const context = createMemo(() => {
-        const ctx = useContext(PiPContext);
-        if (!ctx) {
-          throw new Error("usePiPWindow must be used within a PiPProvider");
-        }
-        return ctx();
-      });
-      return context;
-    };
-    DevtoolsComponent = (props) => {
-      const [localStore, setLocalStore] = createLocalStorage({
-        prefix: "TanstackQueryDevtools"
-      });
-      const colorScheme = getPreferredColorScheme();
-      const theme = createMemo(() => {
-        const preference = localStore.theme_preference || THEME_PREFERENCE;
-        if (preference !== "system")
-          return preference;
-        return colorScheme();
-      });
-      return createComponent(QueryDevtoolsContext.Provider, {
-        value: props,
-        get children() {
-          return createComponent(PiPProvider, {
-            localStore,
-            setLocalStore,
-            get children() {
-              return createComponent(ThemeContext.Provider, {
-                value: theme,
-                get children() {
-                  return createComponent(Devtools, {
-                    localStore,
-                    setLocalStore
-                  });
-                }
-              });
-            }
-          });
-        }
-      });
-    };
-    Devtools_default = DevtoolsComponent;
     Devtools = (props) => {
       const theme = useTheme();
       const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
@@ -13037,14 +13039,7 @@ var init_Devtools = __esm({
             get children() {
               return createComponent(PiPPanel, {
                 get children() {
-                  return createComponent(ContentView, {
-                    get localStore() {
-                      return props.localStore;
-                    },
-                    get setLocalStore() {
-                      return props.setLocalStore;
-                    }
-                  });
+                  return createComponent(ContentView, props);
                 }
               });
             }
@@ -13062,7 +13057,7 @@ var init_Devtools = __esm({
                 return createMemo(() => !!(isOpen() && !pip().pipWindow))() && pip_open() == "false";
               },
               get children() {
-                return createComponent(DevtoolsPanel, {
+                return createComponent(DraggablePanel, {
                   get localStore() {
                     return props.localStore;
                   },
@@ -13179,7 +13174,55 @@ var init_Devtools = __esm({
         return _el$5;
       })();
     };
-    DevtoolsPanel = (props) => {
+    ParentPanel = (props) => {
+      const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
+      const styles = createMemo(() => {
+        return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
+      });
+      let panelRef;
+      onMount(() => {
+        createResizeObserver(panelRef, ({
+          width
+        }, el) => {
+          if (el === panelRef) {
+            setPanelWidth(width);
+          }
+        });
+      });
+      const getPanelDynamicStyles = () => {
+        const {
+          colors
+        } = tokens;
+        const t2 = (light, dark) => theme() === "dark" ? dark : light;
+        if (panelWidth() < secondBreakpoint) {
+          return css`
+        flex-direction: column;
+        background-color: ${t2(colors.gray[300], colors.gray[600])};
+      `;
+        }
+        return css`
+      flex-direction: row;
+      background-color: ${t2(colors.gray[200], colors.darkGray[900])};
+    `;
+      };
+      return (() => {
+        var _el$6 = _tmpl$26();
+        var _ref$2 = panelRef;
+        typeof _ref$2 === "function" ? use(_ref$2, _el$6) : panelRef = _el$6;
+        _el$6.style.setProperty("--tsqd-font-size", "16px");
+        insert(_el$6, () => props.children);
+        createRenderEffect(() => className(_el$6, clsx(styles().parentPanel, getPanelDynamicStyles(), {
+          [css`
+            min-width: min-content;
+          `]: panelWidth() < thirdBreakpoint
+        }, "tsqd-main-panel")));
+        return _el$6;
+      })();
+    };
+    DraggablePanel = (props) => {
       const theme = useTheme();
       const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
         target: useQueryDevtoolsContext().shadowDOMTarget
@@ -13290,31 +13333,24 @@ var init_Devtools = __esm({
     `;
       };
       return (() => {
-        var _el$6 = _tmpl$33(), _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling;
-        var _ref$2 = panelRef;
-        typeof _ref$2 === "function" ? use(_ref$2, _el$6) : panelRef = _el$6;
-        _el$7.$$mousedown = handleDragStart;
-        _el$8.$$click = () => props.setLocalStore("open", "false");
-        insert(_el$8, createComponent(ChevronDown, {}));
-        insert(_el$6, createComponent(ContentView, {
-          get localStore() {
-            return props.localStore;
-          },
-          get setLocalStore() {
-            return props.setLocalStore;
-          }
-        }), null);
+        var _el$7 = _tmpl$33(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
+        var _ref$3 = panelRef;
+        typeof _ref$3 === "function" ? use(_ref$3, _el$7) : panelRef = _el$7;
+        _el$8.$$mousedown = handleDragStart;
+        _el$9.$$click = () => props.setLocalStore("open", "false");
+        insert(_el$9, createComponent(ChevronDown, {}));
+        insert(_el$7, createComponent(ContentView, props), null);
         createRenderEffect((_p$) => {
           var _v$ = clsx(styles().panel, styles()[`panel-position-${position()}`], getPanelDynamicStyles(), {
             [css`
             min-width: min-content;
           `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
           }, "tsqd-main-panel"), _v$2 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$3 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$4 = clsx(styles().dragHandle, styles()[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$5 = clsx(styles().closeBtn, styles()[`closeBtn-position-${position()}`], "tsqd-minimize-btn");
-          _v$ !== _p$.e && className(_el$6, _p$.e = _v$);
-          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$6.style.setProperty("height", _v$2) : _el$6.style.removeProperty("height"));
-          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$6.style.setProperty("width", _v$3) : _el$6.style.removeProperty("width"));
-          _v$4 !== _p$.o && className(_el$7, _p$.o = _v$4);
-          _v$5 !== _p$.i && className(_el$8, _p$.i = _v$5);
+          _v$ !== _p$.e && className(_el$7, _p$.e = _v$);
+          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$7.style.setProperty("height", _v$2) : _el$7.style.removeProperty("height"));
+          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$7.style.setProperty("width", _v$3) : _el$7.style.removeProperty("width"));
+          _v$4 !== _p$.o && className(_el$8, _p$.o = _v$4);
+          _v$5 !== _p$.i && className(_el$9, _p$.i = _v$5);
           return _p$;
         }, {
           e: void 0,
@@ -13323,7 +13359,7 @@ var init_Devtools = __esm({
           o: void 0,
           i: void 0
         });
-        return _el$6;
+        return _el$7;
       })();
     };
     ContentView = (props) => {
@@ -13382,17 +13418,21 @@ var init_Devtools = __esm({
         el.style.setProperty("--tsqd-font-size", variable);
       };
       return [(() => {
-        var _el$9 = _tmpl$212(), _el$10 = _el$9.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$10.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$23 = _el$20.nextSibling, _el$26 = _el$17.nextSibling, _el$27 = _el$26.firstChild, _el$28 = _el$27.nextSibling;
-        var _ref$3 = containerRef;
-        typeof _ref$3 === "function" ? use(_ref$3, _el$9) : containerRef = _el$9;
-        _el$12.$$click = () => {
-          if (!pip().pipWindow) {
+        var _el$10 = _tmpl$212(), _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$13.firstChild, _el$15 = _el$14.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$11.nextSibling, _el$18 = _el$17.firstChild, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$19.nextSibling, _el$24 = _el$21.nextSibling, _el$27 = _el$18.nextSibling, _el$28 = _el$27.firstChild, _el$29 = _el$28.nextSibling;
+        var _ref$4 = containerRef;
+        typeof _ref$4 === "function" ? use(_ref$4, _el$10) : containerRef = _el$10;
+        _el$13.$$click = () => {
+          if (!pip().pipWindow && !props.showPanelViewOnly) {
             props.setLocalStore("open", "false");
+            return;
+          }
+          if (props.onClose) {
+            props.onClose();
           }
         };
-        insert(_el$14, () => useQueryDevtoolsContext().queryFlavor, _el$15);
-        insert(_el$14, () => useQueryDevtoolsContext().version, null);
-        insert(_el$11, createComponent(radio_group_exports.Root, {
+        insert(_el$15, () => useQueryDevtoolsContext().queryFlavor, _el$16);
+        insert(_el$15, () => useQueryDevtoolsContext().version, null);
+        insert(_el$12, createComponent(radio_group_exports.Root, {
           get ["class"]() {
             return clsx(styles().viewToggle);
           },
@@ -13434,7 +13474,7 @@ var init_Devtools = __esm({
             })];
           }
         }), null);
-        insert(_el$10, createComponent(Show, {
+        insert(_el$11, createComponent(Show, {
           get when() {
             return selectedView() === "queries";
           },
@@ -13442,7 +13482,7 @@ var init_Devtools = __esm({
             return createComponent(QueryStatusCount, {});
           }
         }), null);
-        insert(_el$10, createComponent(Show, {
+        insert(_el$11, createComponent(Show, {
           get when() {
             return selectedView() === "mutations";
           },
@@ -13450,61 +13490,61 @@ var init_Devtools = __esm({
             return createComponent(MutationStatusCount, {});
           }
         }), null);
-        insert(_el$18, createComponent(Search, {}), _el$19);
-        _el$19.$$input = (e2) => {
+        insert(_el$19, createComponent(Search, {}), _el$20);
+        _el$20.$$input = (e2) => {
           if (selectedView() === "queries") {
             props.setLocalStore("filter", e2.currentTarget.value);
           } else {
             props.setLocalStore("mutationFilter", e2.currentTarget.value);
           }
         };
-        insert(_el$20, createComponent(Show, {
+        insert(_el$21, createComponent(Show, {
           get when() {
             return selectedView() === "queries";
           },
           get children() {
-            var _el$21 = _tmpl$43();
-            _el$21.addEventListener("change", (e2) => {
+            var _el$22 = _tmpl$43();
+            _el$22.addEventListener("change", (e2) => {
               props.setLocalStore("sort", e2.currentTarget.value);
             });
-            insert(_el$21, () => Object.keys(sortFns).map((key) => (() => {
-              var _el$44 = _tmpl$223(); _el$44.firstChild;
-              _el$44.value = key;
-              insert(_el$44, key, null);
-              return _el$44;
+            insert(_el$22, () => Object.keys(sortFns).map((key) => (() => {
+              var _el$45 = _tmpl$223(); _el$45.firstChild;
+              _el$45.value = key;
+              insert(_el$45, key, null);
+              return _el$45;
             })()));
-            createRenderEffect(() => _el$21.value = sort());
-            return _el$21;
+            createRenderEffect(() => _el$22.value = sort());
+            return _el$22;
           }
         }), null);
-        insert(_el$20, createComponent(Show, {
+        insert(_el$21, createComponent(Show, {
           get when() {
             return selectedView() === "mutations";
           },
           get children() {
-            var _el$22 = _tmpl$53();
-            _el$22.addEventListener("change", (e2) => {
+            var _el$23 = _tmpl$53();
+            _el$23.addEventListener("change", (e2) => {
               props.setLocalStore("mutationSort", e2.currentTarget.value);
             });
-            insert(_el$22, () => Object.keys(mutationSortFns).map((key) => (() => {
-              var _el$46 = _tmpl$223(); _el$46.firstChild;
-              _el$46.value = key;
-              insert(_el$46, key, null);
-              return _el$46;
+            insert(_el$23, () => Object.keys(mutationSortFns).map((key) => (() => {
+              var _el$47 = _tmpl$223(); _el$47.firstChild;
+              _el$47.value = key;
+              insert(_el$47, key, null);
+              return _el$47;
             })()));
-            createRenderEffect(() => _el$22.value = mutationSort());
-            return _el$22;
+            createRenderEffect(() => _el$23.value = mutationSort());
+            return _el$23;
           }
         }), null);
-        insert(_el$20, createComponent(ChevronDown, {}), null);
-        _el$23.$$click = () => {
+        insert(_el$21, createComponent(ChevronDown, {}), null);
+        _el$24.$$click = () => {
           if (selectedView() === "queries") {
             props.setLocalStore("sortOrder", String(sortOrder() * -1));
           } else {
             props.setLocalStore("mutationSortOrder", String(mutationSortOrder() * -1));
           }
         };
-        insert(_el$23, createComponent(Show, {
+        insert(_el$24, createComponent(Show, {
           get when() {
             return (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === 1;
           },
@@ -13512,7 +13552,7 @@ var init_Devtools = __esm({
             return [_tmpl$63(), createComponent(ArrowUp, {})];
           }
         }), null);
-        insert(_el$23, createComponent(Show, {
+        insert(_el$24, createComponent(Show, {
           get when() {
             return (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1;
           },
@@ -13520,15 +13560,15 @@ var init_Devtools = __esm({
             return [_tmpl$73(), createComponent(ArrowDown, {})];
           }
         }), null);
-        _el$27.$$click = () => {
+        _el$28.$$click = () => {
           if (selectedView() === "queries") {
             query_cache().clear();
           } else {
             mutation_cache().clear();
           }
         };
-        insert(_el$27, createComponent(Trash, {}));
-        _el$28.$$click = () => {
+        insert(_el$28, createComponent(Trash, {}));
+        _el$29.$$click = () => {
           if (offline()) {
             onlineManager().setOnline(true);
             setOffline(false);
@@ -13537,25 +13577,25 @@ var init_Devtools = __esm({
             setOffline(true);
           }
         };
-        insert(_el$28, (() => {
+        insert(_el$29, (() => {
           var _c$ = createMemo(() => !!offline());
           return () => _c$() ? createComponent(Offline, {}) : createComponent(Wifi, {});
         })());
-        insert(_el$26, createComponent(Show, {
+        insert(_el$27, createComponent(Show, {
           get when() {
-            return !pip().pipWindow;
+            return createMemo(() => !!!pip().pipWindow)() && !pip().disabled;
           },
           get children() {
-            var _el$29 = _tmpl$83();
-            _el$29.$$click = () => {
+            var _el$30 = _tmpl$83();
+            _el$30.$$click = () => {
               pip().requestPipWindow(Number(window.innerWidth), Number(props.localStore.height ?? 500));
             };
-            insert(_el$29, createComponent(PiPIcon, {}));
-            createRenderEffect(() => className(_el$29, clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-open-pip")));
-            return _el$29;
+            insert(_el$30, createComponent(PiPIcon, {}));
+            createRenderEffect(() => className(_el$30, clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-open-pip")));
+            return _el$30;
           }
         }), null);
-        insert(_el$26, createComponent(dropdown_menu_exports.Root, {
+        insert(_el$27, createComponent(dropdown_menu_exports.Root, {
           gutter: 4,
           get children() {
             return [createComponent(dropdown_menu_exports.Trigger, {
@@ -13577,81 +13617,88 @@ var init_Devtools = __esm({
                   },
                   get children() {
                     return [(() => {
-                      var _el$30 = _tmpl$93();
-                      createRenderEffect(() => className(_el$30, clsx(styles().settingsMenuHeader, "tsqd-settings-menu-header")));
-                      return _el$30;
-                    })(), createComponent(dropdown_menu_exports.Sub, {
-                      overlap: true,
-                      gutter: 8,
-                      shift: -4,
+                      var _el$31 = _tmpl$93();
+                      createRenderEffect(() => className(_el$31, clsx(styles().settingsMenuHeader, "tsqd-settings-menu-header")));
+                      return _el$31;
+                    })(), createComponent(Show, {
+                      get when() {
+                        return !props.showPanelViewOnly;
+                      },
                       get children() {
-                        return [createComponent(dropdown_menu_exports.SubTrigger, {
-                          get ["class"]() {
-                            return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
-                          },
-                          get children() {
-                            return [_tmpl$103(), createComponent(ChevronDown, {})];
-                          }
-                        }), createComponent(dropdown_menu_exports.Portal, {
-                          ref: (el) => setComputedVariables(el),
-                          get mount() {
-                            return createMemo(() => !!pip().pipWindow)() ? pip().pipWindow.document.body : document.body;
-                          },
+                        return createComponent(dropdown_menu_exports.Sub, {
+                          overlap: true,
+                          gutter: 8,
+                          shift: -4,
                           get children() {
-                            return createComponent(dropdown_menu_exports.SubContent, {
+                            return [createComponent(dropdown_menu_exports.SubTrigger, {
                               get ["class"]() {
-                                return clsx(styles().settingsMenu, "tsqd-settings-submenu");
+                                return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
                               },
-                              get children() {
-                                return [createComponent(dropdown_menu_exports.Item, {
-                                  onSelect: () => {
-                                    setDevtoolsPosition("top");
-                                  },
-                                  as: "button",
-                                  get ["class"]() {
-                                    return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
-                                  },
-                                  get children() {
-                                    return [_tmpl$113(), createComponent(ArrowUp, {})];
-                                  }
-                                }), createComponent(dropdown_menu_exports.Item, {
-                                  onSelect: () => {
-                                    setDevtoolsPosition("bottom");
-                                  },
-                                  as: "button",
-                                  get ["class"]() {
-                                    return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
-                                  },
-                                  get children() {
-                                    return [_tmpl$122(), createComponent(ArrowDown, {})];
-                                  }
-                                }), createComponent(dropdown_menu_exports.Item, {
-                                  onSelect: () => {
-                                    setDevtoolsPosition("left");
-                                  },
-                                  as: "button",
-                                  get ["class"]() {
-                                    return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
-                                  },
-                                  get children() {
-                                    return [_tmpl$132(), createComponent(ArrowLeft, {})];
-                                  }
-                                }), createComponent(dropdown_menu_exports.Item, {
-                                  onSelect: () => {
-                                    setDevtoolsPosition("right");
-                                  },
-                                  as: "button",
+                              get children() {
+                                return [_tmpl$103(), createComponent(ChevronDown, {})];
+                              }
+                            }), createComponent(dropdown_menu_exports.Portal, {
+                              ref: (el) => setComputedVariables(el),
+                              get mount() {
+                                return createMemo(() => !!pip().pipWindow)() ? pip().pipWindow.document.body : document.body;
+                              },
+                              get children() {
+                                return createComponent(dropdown_menu_exports.SubContent, {
                                   get ["class"]() {
-                                    return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
+                                    return clsx(styles().settingsMenu, "tsqd-settings-submenu");
                                   },
                                   get children() {
-                                    return [_tmpl$142(), createComponent(ArrowRight, {})];
+                                    return [createComponent(dropdown_menu_exports.Item, {
+                                      onSelect: () => {
+                                        setDevtoolsPosition("top");
+                                      },
+                                      as: "button",
+                                      get ["class"]() {
+                                        return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
+                                      },
+                                      get children() {
+                                        return [_tmpl$113(), createComponent(ArrowUp, {})];
+                                      }
+                                    }), createComponent(dropdown_menu_exports.Item, {
+                                      onSelect: () => {
+                                        setDevtoolsPosition("bottom");
+                                      },
+                                      as: "button",
+                                      get ["class"]() {
+                                        return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
+                                      },
+                                      get children() {
+                                        return [_tmpl$122(), createComponent(ArrowDown, {})];
+                                      }
+                                    }), createComponent(dropdown_menu_exports.Item, {
+                                      onSelect: () => {
+                                        setDevtoolsPosition("left");
+                                      },
+                                      as: "button",
+                                      get ["class"]() {
+                                        return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
+                                      },
+                                      get children() {
+                                        return [_tmpl$132(), createComponent(ArrowLeft, {})];
+                                      }
+                                    }), createComponent(dropdown_menu_exports.Item, {
+                                      onSelect: () => {
+                                        setDevtoolsPosition("right");
+                                      },
+                                      as: "button",
+                                      get ["class"]() {
+                                        return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
+                                      },
+                                      get children() {
+                                        return [_tmpl$142(), createComponent(ArrowRight, {})];
+                                      }
+                                    })];
                                   }
-                                })];
+                                });
                               }
-                            });
+                            })];
                           }
-                        })];
+                        });
                       }
                     }), createComponent(dropdown_menu_exports.Sub, {
                       overlap: true,
@@ -13722,13 +13769,13 @@ var init_Devtools = __esm({
             })];
           }
         }), null);
-        insert(_el$9, createComponent(Show, {
+        insert(_el$10, createComponent(Show, {
           get when() {
             return selectedView() === "queries";
           },
           get children() {
-            var _el$40 = _tmpl$192(), _el$41 = _el$40.firstChild;
-            insert(_el$41, createComponent(Key, {
+            var _el$41 = _tmpl$192(), _el$42 = _el$41.firstChild;
+            insert(_el$42, createComponent(Key, {
               by: (q) => q.queryHash,
               get each() {
                 return queries();
@@ -13739,17 +13786,17 @@ var init_Devtools = __esm({
                 }
               })
             }));
-            createRenderEffect(() => className(_el$40, clsx(styles().overflowQueryContainer, "tsqd-queries-overflow-container")));
-            return _el$40;
+            createRenderEffect(() => className(_el$41, clsx(styles().overflowQueryContainer, "tsqd-queries-overflow-container")));
+            return _el$41;
           }
         }), null);
-        insert(_el$9, createComponent(Show, {
+        insert(_el$10, createComponent(Show, {
           get when() {
             return selectedView() === "mutations";
           },
           get children() {
-            var _el$42 = _tmpl$202(), _el$43 = _el$42.firstChild;
-            insert(_el$43, createComponent(Key, {
+            var _el$43 = _tmpl$202(), _el$44 = _el$43.firstChild;
+            insert(_el$44, createComponent(Key, {
               by: (m) => m.mutationId,
               get each() {
                 return mutations();
@@ -13760,8 +13807,8 @@ var init_Devtools = __esm({
                 }
               })
             }));
-            createRenderEffect(() => className(_el$42, clsx(styles().overflowQueryContainer, "tsqd-mutations-overflow-container")));
-            return _el$42;
+            createRenderEffect(() => className(_el$43, clsx(styles().overflowQueryContainer, "tsqd-mutations-overflow-container")));
+            return _el$43;
           }
         }), null);
         createRenderEffect((_p$) => {
@@ -13772,26 +13819,26 @@ var init_Devtools = __esm({
               height: 100%;
               max-height: 100%;
             `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$10 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$11 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$12 = clsx(styles().row, "tsqd-filters-actions-container"), _v$13 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$14 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$15 = clsx("tsqd-query-filter-textfield"), _v$16 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$17 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$18 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$19 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$20 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$21 = `Clear ${selectedView()} cache`, _v$22 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$23 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$24 = offline(), _v$25 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
-          _v$6 !== _p$.e && className(_el$9, _p$.e = _v$6);
-          _v$7 !== _p$.t && className(_el$10, _p$.t = _v$7);
-          _v$8 !== _p$.a && className(_el$11, _p$.a = _v$8);
-          _v$9 !== _p$.o && className(_el$12, _p$.o = _v$9);
-          _v$10 !== _p$.i && className(_el$13, _p$.i = _v$10);
-          _v$11 !== _p$.n && className(_el$14, _p$.n = _v$11);
-          _v$12 !== _p$.s && className(_el$16, _p$.s = _v$12);
-          _v$13 !== _p$.h && className(_el$17, _p$.h = _v$13);
-          _v$14 !== _p$.r && className(_el$18, _p$.r = _v$14);
-          _v$15 !== _p$.d && className(_el$19, _p$.d = _v$15);
-          _v$16 !== _p$.l && className(_el$20, _p$.l = _v$16);
-          _v$17 !== _p$.u && setAttribute(_el$23, "aria-label", _p$.u = _v$17);
-          _v$18 !== _p$.c && setAttribute(_el$23, "aria-pressed", _p$.c = _v$18);
-          _v$19 !== _p$.w && className(_el$26, _p$.w = _v$19);
-          _v$20 !== _p$.m && className(_el$27, _p$.m = _v$20);
-          _v$21 !== _p$.f && setAttribute(_el$27, "title", _p$.f = _v$21);
-          _v$22 !== _p$.y && className(_el$28, _p$.y = _v$22);
-          _v$23 !== _p$.g && setAttribute(_el$28, "aria-label", _p$.g = _v$23);
-          _v$24 !== _p$.p && setAttribute(_el$28, "aria-pressed", _p$.p = _v$24);
-          _v$25 !== _p$.b && setAttribute(_el$28, "title", _p$.b = _v$25);
+          _v$6 !== _p$.e && className(_el$10, _p$.e = _v$6);
+          _v$7 !== _p$.t && className(_el$11, _p$.t = _v$7);
+          _v$8 !== _p$.a && className(_el$12, _p$.a = _v$8);
+          _v$9 !== _p$.o && className(_el$13, _p$.o = _v$9);
+          _v$10 !== _p$.i && className(_el$14, _p$.i = _v$10);
+          _v$11 !== _p$.n && className(_el$15, _p$.n = _v$11);
+          _v$12 !== _p$.s && className(_el$17, _p$.s = _v$12);
+          _v$13 !== _p$.h && className(_el$18, _p$.h = _v$13);
+          _v$14 !== _p$.r && className(_el$19, _p$.r = _v$14);
+          _v$15 !== _p$.d && className(_el$20, _p$.d = _v$15);
+          _v$16 !== _p$.l && className(_el$21, _p$.l = _v$16);
+          _v$17 !== _p$.u && setAttribute(_el$24, "aria-label", _p$.u = _v$17);
+          _v$18 !== _p$.c && setAttribute(_el$24, "aria-pressed", _p$.c = _v$18);
+          _v$19 !== _p$.w && className(_el$27, _p$.w = _v$19);
+          _v$20 !== _p$.m && className(_el$28, _p$.m = _v$20);
+          _v$21 !== _p$.f && setAttribute(_el$28, "title", _p$.f = _v$21);
+          _v$22 !== _p$.y && className(_el$29, _p$.y = _v$22);
+          _v$23 !== _p$.g && setAttribute(_el$29, "aria-label", _p$.g = _v$23);
+          _v$24 !== _p$.p && setAttribute(_el$29, "aria-pressed", _p$.p = _v$24);
+          _v$25 !== _p$.b && setAttribute(_el$29, "title", _p$.b = _v$25);
           return _p$;
         }, {
           e: void 0,
@@ -13815,8 +13862,8 @@ var init_Devtools = __esm({
           p: void 0,
           b: void 0
         });
-        createRenderEffect(() => _el$19.value = selectedView() === "queries" ? props.localStore.filter || "" : props.localStore.mutationFilter || "");
-        return _el$9;
+        createRenderEffect(() => _el$20.value = selectedView() === "queries" ? props.localStore.filter || "" : props.localStore.mutationFilter || "");
+        return _el$10;
       })(), createComponent(Show, {
         get when() {
           return createMemo(() => selectedView() === "queries")() && selectedQueryHash();
@@ -13880,11 +13927,11 @@ var init_Devtools = __esm({
           return queryState();
         },
         get children() {
-          var _el$48 = _tmpl$242(), _el$49 = _el$48.firstChild, _el$50 = _el$49.nextSibling;
-          _el$48.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
-          insert(_el$49, observers);
-          insert(_el$50, () => props.query.queryHash);
-          insert(_el$48, createComponent(Show, {
+          var _el$49 = _tmpl$242(), _el$50 = _el$49.firstChild, _el$51 = _el$50.nextSibling;
+          _el$49.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
+          insert(_el$50, observers);
+          insert(_el$51, () => props.query.queryHash);
+          insert(_el$49, createComponent(Show, {
             get when() {
               return isDisabled();
             },
@@ -13894,16 +13941,16 @@ var init_Devtools = __esm({
           }), null);
           createRenderEffect((_p$) => {
             var _v$26 = clsx(styles().queryRow, selectedQueryHash() === props.query.queryHash && styles().selectedQueryRow, "tsqd-query-row"), _v$27 = `Query key ${props.query.queryHash}`, _v$28 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
-            _v$26 !== _p$.e && className(_el$48, _p$.e = _v$26);
-            _v$27 !== _p$.t && setAttribute(_el$48, "aria-label", _p$.t = _v$27);
-            _v$28 !== _p$.a && className(_el$49, _p$.a = _v$28);
+            _v$26 !== _p$.e && className(_el$49, _p$.e = _v$26);
+            _v$27 !== _p$.t && setAttribute(_el$49, "aria-label", _p$.t = _v$27);
+            _v$28 !== _p$.a && className(_el$50, _p$.a = _v$28);
             return _p$;
           }, {
             e: void 0,
             t: void 0,
             a: void 0
           });
-          return _el$48;
+          return _el$49;
         }
       });
     };
@@ -13960,11 +14007,11 @@ var init_Devtools = __esm({
           return mutationState();
         },
         get children() {
-          var _el$52 = _tmpl$242(), _el$53 = _el$52.firstChild, _el$54 = _el$53.nextSibling;
-          _el$52.$$click = () => {
+          var _el$53 = _tmpl$242(), _el$54 = _el$53.firstChild, _el$55 = _el$54.nextSibling;
+          _el$53.$$click = () => {
             setSelectedMutationId(props.mutation.mutationId === selectedMutationId() ? null : props.mutation.mutationId);
           };
-          insert(_el$53, createComponent(Show, {
+          insert(_el$54, createComponent(Show, {
             get when() {
               return color() === "purple";
             },
@@ -13972,7 +14019,7 @@ var init_Devtools = __esm({
               return createComponent(PauseCircle, {});
             }
           }), null);
-          insert(_el$53, createComponent(Show, {
+          insert(_el$54, createComponent(Show, {
             get when() {
               return color() === "green";
             },
@@ -13980,7 +14027,7 @@ var init_Devtools = __esm({
               return createComponent(CheckCircle, {});
             }
           }), null);
-          insert(_el$53, createComponent(Show, {
+          insert(_el$54, createComponent(Show, {
             get when() {
               return color() === "red";
             },
@@ -13988,7 +14035,7 @@ var init_Devtools = __esm({
               return createComponent(XCircle, {});
             }
           }), null);
-          insert(_el$53, createComponent(Show, {
+          insert(_el$54, createComponent(Show, {
             get when() {
               return color() === "yellow";
             },
@@ -13996,7 +14043,7 @@ var init_Devtools = __esm({
               return createComponent(LoadingCircle, {});
             }
           }), null);
-          insert(_el$54, createComponent(Show, {
+          insert(_el$55, createComponent(Show, {
             get when() {
               return props.mutation.options.mutationKey;
             },
@@ -14004,19 +14051,19 @@ var init_Devtools = __esm({
               return [createMemo(() => JSON.stringify(props.mutation.options.mutationKey)), " -", " "];
             }
           }), null);
-          insert(_el$54, () => new Date(props.mutation.state.submittedAt).toLocaleString(), null);
+          insert(_el$55, () => new Date(props.mutation.state.submittedAt).toLocaleString(), null);
           createRenderEffect((_p$) => {
             var _v$29 = clsx(styles().queryRow, selectedMutationId() === props.mutation.mutationId && styles().selectedQueryRow, "tsqd-query-row"), _v$30 = `Mutation submitted at ${new Date(props.mutation.state.submittedAt).toLocaleString()}`, _v$31 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
-            _v$29 !== _p$.e && className(_el$52, _p$.e = _v$29);
-            _v$30 !== _p$.t && setAttribute(_el$52, "aria-label", _p$.t = _v$30);
-            _v$31 !== _p$.a && className(_el$53, _p$.a = _v$31);
+            _v$29 !== _p$.e && className(_el$53, _p$.e = _v$29);
+            _v$30 !== _p$.t && setAttribute(_el$53, "aria-label", _p$.t = _v$30);
+            _v$31 !== _p$.a && className(_el$54, _p$.a = _v$31);
             return _p$;
           }, {
             e: void 0,
             t: void 0,
             a: void 0
           });
-          return _el$52;
+          return _el$53;
         }
       });
     };
@@ -14034,44 +14081,44 @@ var init_Devtools = __esm({
         return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
       });
       return (() => {
-        var _el$55 = _tmpl$26();
-        insert(_el$55, createComponent(QueryStatus, {
+        var _el$56 = _tmpl$26();
+        insert(_el$56, createComponent(QueryStatus, {
           label: "Fresh",
           color: "green",
           get count() {
             return fresh();
           }
         }), null);
-        insert(_el$55, createComponent(QueryStatus, {
+        insert(_el$56, createComponent(QueryStatus, {
           label: "Fetching",
           color: "blue",
           get count() {
             return fetching();
           }
         }), null);
-        insert(_el$55, createComponent(QueryStatus, {
+        insert(_el$56, createComponent(QueryStatus, {
           label: "Paused",
           color: "purple",
           get count() {
             return paused();
           }
         }), null);
-        insert(_el$55, createComponent(QueryStatus, {
+        insert(_el$56, createComponent(QueryStatus, {
           label: "Stale",
           color: "yellow",
           get count() {
             return stale();
           }
         }), null);
-        insert(_el$55, createComponent(QueryStatus, {
+        insert(_el$56, createComponent(QueryStatus, {
           label: "Inactive",
           color: "gray",
           get count() {
             return inactive();
           }
         }), null);
-        createRenderEffect(() => className(_el$55, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
-        return _el$55;
+        createRenderEffect(() => className(_el$56, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
+        return _el$56;
       })();
     };
     MutationStatusCount = () => {
@@ -14099,37 +14146,37 @@ var init_Devtools = __esm({
         return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
       });
       return (() => {
-        var _el$56 = _tmpl$26();
-        insert(_el$56, createComponent(QueryStatus, {
+        var _el$57 = _tmpl$26();
+        insert(_el$57, createComponent(QueryStatus, {
           label: "Paused",
           color: "purple",
           get count() {
             return paused();
           }
         }), null);
-        insert(_el$56, createComponent(QueryStatus, {
+        insert(_el$57, createComponent(QueryStatus, {
           label: "Pending",
           color: "yellow",
           get count() {
             return pending();
           }
         }), null);
-        insert(_el$56, createComponent(QueryStatus, {
+        insert(_el$57, createComponent(QueryStatus, {
           label: "Success",
           color: "green",
           get count() {
             return success();
           }
         }), null);
-        insert(_el$56, createComponent(QueryStatus, {
+        insert(_el$57, createComponent(QueryStatus, {
           label: "Error",
           color: "red",
           get count() {
             return error();
           }
         }), null);
-        createRenderEffect(() => className(_el$56, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
-        return _el$56;
+        createRenderEffect(() => className(_el$57, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
+        return _el$57;
       })();
     };
     QueryStatus = (props) => {
@@ -14154,23 +14201,23 @@ var init_Devtools = __esm({
             return false;
           }
         }
-        if (panelWidth() < thirdBreakpoint) {
+        if (panelWidth() < secondBreakpoint) {
           return false;
         }
         return true;
       });
       return (() => {
-        var _el$57 = _tmpl$27(), _el$59 = _el$57.firstChild, _el$61 = _el$59.nextSibling;
-        var _ref$4 = tagRef;
-        typeof _ref$4 === "function" ? use(_ref$4, _el$57) : tagRef = _el$57;
-        _el$57.addEventListener("mouseleave", () => {
+        var _el$58 = _tmpl$27(), _el$60 = _el$58.firstChild, _el$62 = _el$60.nextSibling;
+        var _ref$5 = tagRef;
+        typeof _ref$5 === "function" ? use(_ref$5, _el$58) : tagRef = _el$58;
+        _el$58.addEventListener("mouseleave", () => {
           setMouseOver(false);
           setFocused(false);
         });
-        _el$57.addEventListener("mouseenter", () => setMouseOver(true));
-        _el$57.addEventListener("blur", () => setFocused(false));
-        _el$57.addEventListener("focus", () => setFocused(true));
-        spread(_el$57, mergeProps({
+        _el$58.addEventListener("mouseenter", () => setMouseOver(true));
+        _el$58.addEventListener("blur", () => setFocused(false));
+        _el$58.addEventListener("focus", () => setFocused(true));
+        spread(_el$58, mergeProps({
           get disabled() {
             return showLabel();
           },
@@ -14185,29 +14232,29 @@ var init_Devtools = __esm({
         }, () => mouseOver() || focused() ? {
           "aria-describedby": "tsqd-status-tooltip"
         } : {}), false, true);
-        insert(_el$57, createComponent(Show, {
+        insert(_el$58, createComponent(Show, {
           get when() {
             return createMemo(() => !!!showLabel())() && (mouseOver() || focused());
           },
           get children() {
-            var _el$58 = _tmpl$252();
-            insert(_el$58, () => props.label);
-            createRenderEffect(() => className(_el$58, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
-            return _el$58;
+            var _el$59 = _tmpl$252();
+            insert(_el$59, () => props.label);
+            createRenderEffect(() => className(_el$59, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
+            return _el$59;
           }
-        }), _el$59);
-        insert(_el$57, createComponent(Show, {
+        }), _el$60);
+        insert(_el$58, createComponent(Show, {
           get when() {
             return showLabel();
           },
           get children() {
-            var _el$60 = _tmpl$262();
-            insert(_el$60, () => props.label);
-            createRenderEffect(() => className(_el$60, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
-            return _el$60;
+            var _el$61 = _tmpl$262();
+            insert(_el$61, () => props.label);
+            createRenderEffect(() => className(_el$61, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
+            return _el$61;
           }
-        }), _el$61);
-        insert(_el$61, () => props.count);
+        }), _el$62);
+        insert(_el$62, () => props.count);
         createRenderEffect((_p$) => {
           var _v$32 = clsx(css`
             width: ${tokens.size[1.5]};
@@ -14218,14 +14265,14 @@ var init_Devtools = __esm({
               background-color: ${t2(colors[props.color][100], colors[props.color][900])};
               color: ${t2(colors[props.color][700], colors[props.color][300])};
             `, "tsqd-query-status-tag-count");
-          _v$32 !== _p$.e && className(_el$59, _p$.e = _v$32);
-          _v$33 !== _p$.t && className(_el$61, _p$.t = _v$33);
+          _v$32 !== _p$.e && className(_el$60, _p$.e = _v$32);
+          _v$33 !== _p$.t && className(_el$62, _p$.t = _v$33);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
-        return _el$57;
+        return _el$58;
       })();
     };
     QueryDetails = () => {
@@ -14322,19 +14369,19 @@ var init_Devtools = __esm({
           return createMemo(() => !!activeQuery())() && activeQueryState();
         },
         get children() {
-          var _el$62 = _tmpl$30(), _el$63 = _el$62.firstChild, _el$64 = _el$63.nextSibling, _el$65 = _el$64.firstChild, _el$66 = _el$65.firstChild, _el$67 = _el$66.firstChild, _el$68 = _el$66.nextSibling, _el$69 = _el$65.nextSibling, _el$70 = _el$69.firstChild, _el$71 = _el$70.nextSibling, _el$72 = _el$69.nextSibling, _el$73 = _el$72.firstChild, _el$74 = _el$73.nextSibling, _el$75 = _el$64.nextSibling, _el$76 = _el$75.nextSibling, _el$77 = _el$76.firstChild, _el$78 = _el$77.firstChild, _el$79 = _el$77.nextSibling, _el$80 = _el$79.firstChild, _el$81 = _el$79.nextSibling, _el$82 = _el$81.firstChild, _el$83 = _el$81.nextSibling, _el$84 = _el$83.firstChild, _el$85 = _el$83.nextSibling, _el$86 = _el$85.firstChild, _el$87 = _el$86.nextSibling, _el$96 = _el$76.nextSibling, _el$97 = _el$96.nextSibling, _el$98 = _el$97.nextSibling, _el$99 = _el$98.nextSibling;
-          insert(_el$67, () => displayValue(activeQuery().queryKey, true));
-          insert(_el$68, statusLabel);
-          insert(_el$71, observerCount);
-          insert(_el$74, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
-          _el$77.$$click = handleRefetch;
-          _el$79.$$click = () => queryClient.invalidateQueries(activeQuery());
-          _el$81.$$click = () => queryClient.resetQueries(activeQuery());
-          _el$83.$$click = () => {
+          var _el$63 = _tmpl$30(), _el$64 = _el$63.firstChild, _el$65 = _el$64.nextSibling, _el$66 = _el$65.firstChild, _el$67 = _el$66.firstChild, _el$68 = _el$67.firstChild, _el$69 = _el$67.nextSibling, _el$70 = _el$66.nextSibling, _el$71 = _el$70.firstChild, _el$72 = _el$71.nextSibling, _el$73 = _el$70.nextSibling, _el$74 = _el$73.firstChild, _el$75 = _el$74.nextSibling, _el$76 = _el$65.nextSibling, _el$77 = _el$76.nextSibling, _el$78 = _el$77.firstChild, _el$79 = _el$78.firstChild, _el$80 = _el$78.nextSibling, _el$81 = _el$80.firstChild, _el$82 = _el$80.nextSibling, _el$83 = _el$82.firstChild, _el$84 = _el$82.nextSibling, _el$85 = _el$84.firstChild, _el$86 = _el$84.nextSibling, _el$87 = _el$86.firstChild, _el$88 = _el$87.nextSibling, _el$97 = _el$77.nextSibling, _el$98 = _el$97.nextSibling, _el$99 = _el$98.nextSibling, _el$100 = _el$99.nextSibling;
+          insert(_el$68, () => displayValue(activeQuery().queryKey, true));
+          insert(_el$69, statusLabel);
+          insert(_el$72, observerCount);
+          insert(_el$75, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
+          _el$78.$$click = handleRefetch;
+          _el$80.$$click = () => queryClient.invalidateQueries(activeQuery());
+          _el$82.$$click = () => queryClient.resetQueries(activeQuery());
+          _el$84.$$click = () => {
             queryClient.removeQueries(activeQuery());
             setSelectedQueryHash(null);
           };
-          _el$85.$$click = () => {
+          _el$86.$$click = () => {
             if (activeQuery()?.state.data === void 0) {
               setRestoringLoading(true);
               restoreQueryAfterLoadingOrError();
@@ -14361,78 +14408,78 @@ var init_Devtools = __esm({
               });
             }
           };
-          insert(_el$85, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$87);
-          insert(_el$76, createComponent(Show, {
+          insert(_el$86, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$88);
+          insert(_el$77, createComponent(Show, {
             get when() {
               return errorTypes().length === 0 || queryStatus() === "error";
             },
             get children() {
-              var _el$88 = _tmpl$28(), _el$89 = _el$88.firstChild, _el$90 = _el$89.nextSibling;
-              _el$88.$$click = () => {
+              var _el$89 = _tmpl$28(), _el$90 = _el$89.firstChild, _el$91 = _el$90.nextSibling;
+              _el$89.$$click = () => {
                 if (!activeQuery().state.error) {
                   triggerError();
                 } else {
                   queryClient.resetQueries(activeQuery());
                 }
               };
-              insert(_el$88, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$90);
+              insert(_el$89, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$91);
               createRenderEffect((_p$) => {
                 var _v$34 = clsx(css`
                   color: ${t2(colors.red[500], colors.red[400])};
                 `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$35 = queryStatus() === "pending", _v$36 = css`
                   background-color: ${t2(colors.red[500], colors.red[400])};
                 `;
-                _v$34 !== _p$.e && className(_el$88, _p$.e = _v$34);
-                _v$35 !== _p$.t && (_el$88.disabled = _p$.t = _v$35);
-                _v$36 !== _p$.a && className(_el$89, _p$.a = _v$36);
+                _v$34 !== _p$.e && className(_el$89, _p$.e = _v$34);
+                _v$35 !== _p$.t && (_el$89.disabled = _p$.t = _v$35);
+                _v$36 !== _p$.a && className(_el$90, _p$.a = _v$36);
                 return _p$;
               }, {
                 e: void 0,
                 t: void 0,
                 a: void 0
               });
-              return _el$88;
+              return _el$89;
             }
           }), null);
-          insert(_el$76, createComponent(Show, {
+          insert(_el$77, createComponent(Show, {
             get when() {
               return !(errorTypes().length === 0 || queryStatus() === "error");
             },
             get children() {
-              var _el$91 = _tmpl$29(), _el$92 = _el$91.firstChild, _el$93 = _el$92.nextSibling, _el$94 = _el$93.nextSibling; _el$94.firstChild;
-              _el$94.addEventListener("change", (e2) => {
+              var _el$92 = _tmpl$29(), _el$93 = _el$92.firstChild, _el$94 = _el$93.nextSibling, _el$95 = _el$94.nextSibling; _el$95.firstChild;
+              _el$95.addEventListener("change", (e2) => {
                 const errorType = errorTypes().find((et) => et.name === e2.currentTarget.value);
                 triggerError(errorType);
               });
-              insert(_el$94, createComponent(For, {
+              insert(_el$95, createComponent(For, {
                 get each() {
                   return errorTypes();
                 },
                 children: (errorType) => (() => {
-                  var _el$100 = _tmpl$31();
-                  insert(_el$100, () => errorType.name);
-                  createRenderEffect(() => _el$100.value = errorType.name);
-                  return _el$100;
+                  var _el$101 = _tmpl$31();
+                  insert(_el$101, () => errorType.name);
+                  createRenderEffect(() => _el$101.value = errorType.name);
+                  return _el$101;
                 })()
               }), null);
-              insert(_el$91, createComponent(ChevronDown, {}), null);
+              insert(_el$92, createComponent(ChevronDown, {}), null);
               createRenderEffect((_p$) => {
                 var _v$37 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$38 = css`
                   background-color: ${tokens.colors.red[400]};
                 `, _v$39 = queryStatus() === "pending";
-                _v$37 !== _p$.e && className(_el$91, _p$.e = _v$37);
-                _v$38 !== _p$.t && className(_el$92, _p$.t = _v$38);
-                _v$39 !== _p$.a && (_el$94.disabled = _p$.a = _v$39);
+                _v$37 !== _p$.e && className(_el$92, _p$.e = _v$37);
+                _v$38 !== _p$.t && className(_el$93, _p$.t = _v$38);
+                _v$39 !== _p$.a && (_el$95.disabled = _p$.a = _v$39);
                 return _p$;
               }, {
                 e: void 0,
                 t: void 0,
                 a: void 0
               });
-              return _el$91;
+              return _el$92;
             }
           }), null);
-          insert(_el$97, createComponent(Explorer, {
+          insert(_el$98, createComponent(Explorer, {
             label: "Data",
             defaultExpanded: ["Data"],
             get value() {
@@ -14443,7 +14490,7 @@ var init_Devtools = __esm({
               return activeQuery();
             }
           }));
-          insert(_el$99, createComponent(Explorer, {
+          insert(_el$100, createComponent(Explorer, {
             label: "Query",
             defaultExpanded: ["Query", "queryKey"],
             get value() {
@@ -14472,31 +14519,31 @@ var init_Devtools = __esm({
               `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$59 = restoringLoading(), _v$60 = css`
                 background-color: ${t2(colors.cyan[500], colors.cyan[400])};
               `, _v$61 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$62 = tokens.size[2], _v$63 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$64 = tokens.size[2];
-            _v$40 !== _p$.e && className(_el$62, _p$.e = _v$40);
-            _v$41 !== _p$.t && className(_el$63, _p$.t = _v$41);
-            _v$42 !== _p$.a && className(_el$64, _p$.a = _v$42);
-            _v$43 !== _p$.o && className(_el$68, _p$.o = _v$43);
-            _v$44 !== _p$.i && className(_el$75, _p$.i = _v$44);
-            _v$45 !== _p$.n && className(_el$76, _p$.n = _v$45);
-            _v$46 !== _p$.s && className(_el$77, _p$.s = _v$46);
-            _v$47 !== _p$.h && (_el$77.disabled = _p$.h = _v$47);
-            _v$48 !== _p$.r && className(_el$78, _p$.r = _v$48);
-            _v$49 !== _p$.d && className(_el$79, _p$.d = _v$49);
-            _v$50 !== _p$.l && (_el$79.disabled = _p$.l = _v$50);
-            _v$51 !== _p$.u && className(_el$80, _p$.u = _v$51);
-            _v$52 !== _p$.c && className(_el$81, _p$.c = _v$52);
-            _v$53 !== _p$.w && (_el$81.disabled = _p$.w = _v$53);
-            _v$54 !== _p$.m && className(_el$82, _p$.m = _v$54);
-            _v$55 !== _p$.f && className(_el$83, _p$.f = _v$55);
-            _v$56 !== _p$.y && (_el$83.disabled = _p$.y = _v$56);
-            _v$57 !== _p$.g && className(_el$84, _p$.g = _v$57);
-            _v$58 !== _p$.p && className(_el$85, _p$.p = _v$58);
-            _v$59 !== _p$.b && (_el$85.disabled = _p$.b = _v$59);
-            _v$60 !== _p$.T && className(_el$86, _p$.T = _v$60);
-            _v$61 !== _p$.A && className(_el$96, _p$.A = _v$61);
-            _v$62 !== _p$.O && ((_p$.O = _v$62) != null ? _el$97.style.setProperty("padding", _v$62) : _el$97.style.removeProperty("padding"));
-            _v$63 !== _p$.I && className(_el$98, _p$.I = _v$63);
-            _v$64 !== _p$.S && ((_p$.S = _v$64) != null ? _el$99.style.setProperty("padding", _v$64) : _el$99.style.removeProperty("padding"));
+            _v$40 !== _p$.e && className(_el$63, _p$.e = _v$40);
+            _v$41 !== _p$.t && className(_el$64, _p$.t = _v$41);
+            _v$42 !== _p$.a && className(_el$65, _p$.a = _v$42);
+            _v$43 !== _p$.o && className(_el$69, _p$.o = _v$43);
+            _v$44 !== _p$.i && className(_el$76, _p$.i = _v$44);
+            _v$45 !== _p$.n && className(_el$77, _p$.n = _v$45);
+            _v$46 !== _p$.s && className(_el$78, _p$.s = _v$46);
+            _v$47 !== _p$.h && (_el$78.disabled = _p$.h = _v$47);
+            _v$48 !== _p$.r && className(_el$79, _p$.r = _v$48);
+            _v$49 !== _p$.d && className(_el$80, _p$.d = _v$49);
+            _v$50 !== _p$.l && (_el$80.disabled = _p$.l = _v$50);
+            _v$51 !== _p$.u && className(_el$81, _p$.u = _v$51);
+            _v$52 !== _p$.c && className(_el$82, _p$.c = _v$52);
+            _v$53 !== _p$.w && (_el$82.disabled = _p$.w = _v$53);
+            _v$54 !== _p$.m && className(_el$83, _p$.m = _v$54);
+            _v$55 !== _p$.f && className(_el$84, _p$.f = _v$55);
+            _v$56 !== _p$.y && (_el$84.disabled = _p$.y = _v$56);
+            _v$57 !== _p$.g && className(_el$85, _p$.g = _v$57);
+            _v$58 !== _p$.p && className(_el$86, _p$.p = _v$58);
+            _v$59 !== _p$.b && (_el$86.disabled = _p$.b = _v$59);
+            _v$60 !== _p$.T && className(_el$87, _p$.T = _v$60);
+            _v$61 !== _p$.A && className(_el$97, _p$.A = _v$61);
+            _v$62 !== _p$.O && ((_p$.O = _v$62) != null ? _el$98.style.setProperty("padding", _v$62) : _el$98.style.removeProperty("padding"));
+            _v$63 !== _p$.I && className(_el$99, _p$.I = _v$63);
+            _v$64 !== _p$.S && ((_p$.S = _v$64) != null ? _el$100.style.setProperty("padding", _v$64) : _el$100.style.removeProperty("padding"));
             return _p$;
           }, {
             e: void 0,
@@ -14525,7 +14572,7 @@ var init_Devtools = __esm({
             I: void 0,
             S: void 0
           });
-          return _el$62;
+          return _el$63;
         }
       });
     };
@@ -14579,8 +14626,8 @@ var init_Devtools = __esm({
           return activeMutation();
         },
         get children() {
-          var _el$101 = _tmpl$322(), _el$102 = _el$101.firstChild, _el$103 = _el$102.nextSibling, _el$104 = _el$103.firstChild, _el$105 = _el$104.firstChild, _el$106 = _el$105.firstChild, _el$107 = _el$105.nextSibling, _el$108 = _el$104.nextSibling, _el$109 = _el$108.firstChild, _el$110 = _el$109.nextSibling, _el$111 = _el$103.nextSibling, _el$112 = _el$111.nextSibling, _el$113 = _el$112.nextSibling, _el$114 = _el$113.nextSibling, _el$115 = _el$114.nextSibling, _el$116 = _el$115.nextSibling, _el$117 = _el$116.nextSibling, _el$118 = _el$117.nextSibling;
-          insert(_el$106, createComponent(Show, {
+          var _el$102 = _tmpl$322(), _el$103 = _el$102.firstChild, _el$104 = _el$103.nextSibling, _el$105 = _el$104.firstChild, _el$106 = _el$105.firstChild, _el$107 = _el$106.firstChild, _el$108 = _el$106.nextSibling, _el$109 = _el$105.nextSibling, _el$110 = _el$109.firstChild, _el$111 = _el$110.nextSibling, _el$112 = _el$104.nextSibling, _el$113 = _el$112.nextSibling, _el$114 = _el$113.nextSibling, _el$115 = _el$114.nextSibling, _el$116 = _el$115.nextSibling, _el$117 = _el$116.nextSibling, _el$118 = _el$117.nextSibling, _el$119 = _el$118.nextSibling;
+          insert(_el$107, createComponent(Show, {
             get when() {
               return activeMutation().options.mutationKey;
             },
@@ -14589,13 +14636,13 @@ var init_Devtools = __esm({
               return displayValue(activeMutation().options.mutationKey, true);
             }
           }));
-          insert(_el$107, createComponent(Show, {
+          insert(_el$108, createComponent(Show, {
             get when() {
               return color() === "purple";
             },
             children: "pending"
           }), null);
-          insert(_el$107, createComponent(Show, {
+          insert(_el$108, createComponent(Show, {
             get when() {
               return color() !== "purple";
             },
@@ -14603,29 +14650,29 @@ var init_Devtools = __esm({
               return status();
             }
           }), null);
-          insert(_el$110, () => new Date(activeMutation().state.submittedAt).toLocaleTimeString());
-          insert(_el$112, createComponent(Explorer, {
+          insert(_el$111, () => new Date(activeMutation().state.submittedAt).toLocaleTimeString());
+          insert(_el$113, createComponent(Explorer, {
             label: "Variables",
             defaultExpanded: ["Variables"],
             get value() {
               return activeMutation().state.variables;
             }
           }));
-          insert(_el$114, createComponent(Explorer, {
+          insert(_el$115, createComponent(Explorer, {
             label: "Context",
             defaultExpanded: ["Context"],
             get value() {
               return activeMutation().state.context;
             }
           }));
-          insert(_el$116, createComponent(Explorer, {
+          insert(_el$117, createComponent(Explorer, {
             label: "Data",
             defaultExpanded: ["Data"],
             get value() {
               return activeMutation().state.data;
             }
           }));
-          insert(_el$118, createComponent(Explorer, {
+          insert(_el$119, createComponent(Explorer, {
             label: "Mutation",
             defaultExpanded: ["Mutation"],
             get value() {
@@ -14634,18 +14681,18 @@ var init_Devtools = __esm({
           }));
           createRenderEffect((_p$) => {
             var _v$65 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$66 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$67 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$68 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$69 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$70 = tokens.size[2], _v$71 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$72 = tokens.size[2], _v$73 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$74 = tokens.size[2], _v$75 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$76 = tokens.size[2];
-            _v$65 !== _p$.e && className(_el$101, _p$.e = _v$65);
-            _v$66 !== _p$.t && className(_el$102, _p$.t = _v$66);
-            _v$67 !== _p$.a && className(_el$103, _p$.a = _v$67);
-            _v$68 !== _p$.o && className(_el$107, _p$.o = _v$68);
-            _v$69 !== _p$.i && className(_el$111, _p$.i = _v$69);
-            _v$70 !== _p$.n && ((_p$.n = _v$70) != null ? _el$112.style.setProperty("padding", _v$70) : _el$112.style.removeProperty("padding"));
-            _v$71 !== _p$.s && className(_el$113, _p$.s = _v$71);
-            _v$72 !== _p$.h && ((_p$.h = _v$72) != null ? _el$114.style.setProperty("padding", _v$72) : _el$114.style.removeProperty("padding"));
-            _v$73 !== _p$.r && className(_el$115, _p$.r = _v$73);
-            _v$74 !== _p$.d && ((_p$.d = _v$74) != null ? _el$116.style.setProperty("padding", _v$74) : _el$116.style.removeProperty("padding"));
-            _v$75 !== _p$.l && className(_el$117, _p$.l = _v$75);
-            _v$76 !== _p$.u && ((_p$.u = _v$76) != null ? _el$118.style.setProperty("padding", _v$76) : _el$118.style.removeProperty("padding"));
+            _v$65 !== _p$.e && className(_el$102, _p$.e = _v$65);
+            _v$66 !== _p$.t && className(_el$103, _p$.t = _v$66);
+            _v$67 !== _p$.a && className(_el$104, _p$.a = _v$67);
+            _v$68 !== _p$.o && className(_el$108, _p$.o = _v$68);
+            _v$69 !== _p$.i && className(_el$112, _p$.i = _v$69);
+            _v$70 !== _p$.n && ((_p$.n = _v$70) != null ? _el$113.style.setProperty("padding", _v$70) : _el$113.style.removeProperty("padding"));
+            _v$71 !== _p$.s && className(_el$114, _p$.s = _v$71);
+            _v$72 !== _p$.h && ((_p$.h = _v$72) != null ? _el$115.style.setProperty("padding", _v$72) : _el$115.style.removeProperty("padding"));
+            _v$73 !== _p$.r && className(_el$116, _p$.r = _v$73);
+            _v$74 !== _p$.d && ((_p$.d = _v$74) != null ? _el$117.style.setProperty("padding", _v$74) : _el$117.style.removeProperty("padding"));
+            _v$75 !== _p$.l && className(_el$118, _p$.l = _v$75);
+            _v$76 !== _p$.u && ((_p$.u = _v$76) != null ? _el$119.style.setProperty("padding", _v$76) : _el$119.style.removeProperty("padding"));
             return _p$;
           }, {
             e: void 0,
@@ -14661,7 +14708,7 @@ var init_Devtools = __esm({
             l: void 0,
             u: void 0
           });
-          return _el$101;
+          return _el$102;
         }
       });
     };
@@ -14829,6 +14876,32 @@ var init_Devtools = __esm({
         background: ${t2(colors.gray[300], colors.darkGray[200])};
       }
 
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
+    `,
+        parentPanel: css`
+      z-index: 9999;
+      display: flex;
+      height: 100%;
+      gap: ${tokens.size[0.5]};
+      & * {
+        box-sizing: border-box;
+        text-transform: none;
+      }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
       & *::-webkit-scrollbar-thumb:hover {
         background: ${t2(colors.gray[400], colors.darkGray[300])};
       }
@@ -15679,7 +15752,118 @@ var init_Devtools = __esm({
   }
 });
 
-// src/index.tsx
+// src/DevtoolsComponent.tsx
+var DevtoolsComponent_exports = {};
+__export(DevtoolsComponent_exports, {
+  default: () => DevtoolsComponent_default
+});
+var DevtoolsComponent, DevtoolsComponent_default;
+var init_DevtoolsComponent = __esm({
+  "src/DevtoolsComponent.tsx"() {
+    init_web();
+    init_dist4();
+    init_solid();
+    init_Devtools();
+    init_utils();
+    init_constants();
+    init_contexts();
+    DevtoolsComponent = (props) => {
+      const [localStore, setLocalStore] = createLocalStorage({
+        prefix: "TanstackQueryDevtools"
+      });
+      const colorScheme = getPreferredColorScheme();
+      const theme = createMemo(() => {
+        const preference = localStore.theme_preference || THEME_PREFERENCE;
+        if (preference !== "system")
+          return preference;
+        return colorScheme();
+      });
+      return createComponent(QueryDevtoolsContext.Provider, {
+        value: props,
+        get children() {
+          return createComponent(PiPProvider, {
+            localStore,
+            setLocalStore,
+            get children() {
+              return createComponent(ThemeContext.Provider, {
+                value: theme,
+                get children() {
+                  return createComponent(Devtools, {
+                    localStore,
+                    setLocalStore
+                  });
+                }
+              });
+            }
+          });
+        }
+      });
+    };
+    DevtoolsComponent_default = DevtoolsComponent;
+  }
+});
+
+// src/DevtoolsPanelComponent.tsx
+var DevtoolsPanelComponent_exports = {};
+__export(DevtoolsPanelComponent_exports, {
+  default: () => DevtoolsPanelComponent_default
+});
+var DevtoolsPanelComponent, DevtoolsPanelComponent_default;
+var init_DevtoolsPanelComponent = __esm({
+  "src/DevtoolsPanelComponent.tsx"() {
+    init_web();
+    init_dist4();
+    init_solid();
+    init_Devtools();
+    init_utils();
+    init_constants();
+    init_contexts();
+    DevtoolsPanelComponent = (props) => {
+      const [localStore, setLocalStore] = createLocalStorage({
+        prefix: "TanstackQueryDevtools"
+      });
+      const colorScheme = getPreferredColorScheme();
+      const theme = createMemo(() => {
+        const preference = localStore.theme_preference || THEME_PREFERENCE;
+        if (preference !== "system")
+          return preference;
+        return colorScheme();
+      });
+      return createComponent(QueryDevtoolsContext.Provider, {
+        value: props,
+        get children() {
+          return createComponent(PiPProvider, {
+            disabled: true,
+            localStore,
+            setLocalStore,
+            get children() {
+              return createComponent(ThemeContext.Provider, {
+                value: theme,
+                get children() {
+                  return createComponent(ParentPanel, {
+                    get children() {
+                      return createComponent(ContentView, {
+                        localStore,
+                        setLocalStore,
+                        get onClose() {
+                          return props.onClose;
+                        },
+                        showPanelViewOnly: true
+                      });
+                    }
+                  });
+                }
+              });
+            }
+          });
+        }
+      });
+    };
+    DevtoolsPanelComponent_default = DevtoolsPanelComponent;
+  }
+});
+
+// src/TanstackQueryDevtools.tsx
 init_web();
 init_web();
 init_web();
@@ -15753,7 +15937,135 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
       if (this.#Component) {
         Devtools2 = this.#Component;
       } else {
-        Devtools2 = lazy(() => Promise.resolve().then(() => (init_Devtools(), Devtools_exports)));
+        Devtools2 = lazy(() => Promise.resolve().then(() => (init_DevtoolsComponent(), DevtoolsComponent_exports)));
+        this.#Component = Devtools2;
+      }
+      setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
+      return createComponent(Devtools2, mergeProps({
+        get queryFlavor() {
+          return _self$.#queryFlavor;
+        },
+        get version() {
+          return _self$.#version;
+        },
+        get onlineManager() {
+          return _self$.#onlineManager;
+        },
+        get shadowDOMTarget() {
+          return _self$.#shadowDOMTarget;
+        }
+      }, {
+        get client() {
+          return queryClient();
+        },
+        get buttonPosition() {
+          return btnPosition();
+        },
+        get position() {
+          return pos();
+        },
+        get initialIsOpen() {
+          return isOpen();
+        },
+        get errorTypes() {
+          return errors();
+        }
+      }));
+    }, el);
+    this.#isMounted = true;
+    this.#dispose = dispose3;
+  }
+  unmount() {
+    if (!this.#isMounted) {
+      throw new Error("Devtools is not mounted");
+    }
+    this.#dispose?.();
+    this.#isMounted = false;
+  }
+};
+
+// src/TanstackQueryDevtoolsPanel.tsx
+init_web();
+init_web();
+init_web();
+init_solid();
+init_utils();
+exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
+  #client;
+  #onlineManager;
+  #queryFlavor;
+  #version;
+  #isMounted = false;
+  #styleNonce;
+  #shadowDOMTarget;
+  #buttonPosition;
+  #position;
+  #initialIsOpen;
+  #errorTypes;
+  #onClose;
+  #Component;
+  #dispose;
+  constructor(config) {
+    const {
+      client,
+      queryFlavor,
+      version,
+      onlineManager,
+      buttonPosition,
+      position,
+      initialIsOpen,
+      errorTypes,
+      styleNonce,
+      shadowDOMTarget,
+      onClose
+    } = config;
+    this.#client = createSignal(client);
+    this.#queryFlavor = queryFlavor;
+    this.#version = version;
+    this.#onlineManager = onlineManager;
+    this.#styleNonce = styleNonce;
+    this.#shadowDOMTarget = shadowDOMTarget;
+    this.#buttonPosition = createSignal(buttonPosition);
+    this.#position = createSignal(position);
+    this.#initialIsOpen = createSignal(initialIsOpen);
+    this.#errorTypes = createSignal(errorTypes);
+    this.#onClose = createSignal(onClose);
+  }
+  setButtonPosition(position) {
+    this.#buttonPosition[1](position);
+  }
+  setPosition(position) {
+    this.#position[1](position);
+  }
+  setInitialIsOpen(isOpen) {
+    this.#initialIsOpen[1](isOpen);
+  }
+  setErrorTypes(errorTypes) {
+    this.#errorTypes[1](errorTypes);
+  }
+  setClient(client) {
+    this.#client[1](client);
+  }
+  setOnClose(onClose) {
+    this.#onClose[1](() => onClose);
+  }
+  mount(el) {
+    if (this.#isMounted) {
+      throw new Error("Devtools is already mounted");
+    }
+    const dispose3 = render(() => {
+      const _self$ = this;
+      const [btnPosition] = this.#buttonPosition;
+      const [pos] = this.#position;
+      const [isOpen] = this.#initialIsOpen;
+      const [errors] = this.#errorTypes;
+      const [queryClient] = this.#client;
+      const [onClose] = this.#onClose;
+      let Devtools2;
+      if (this.#Component) {
+        Devtools2 = this.#Component;
+      } else {
+        Devtools2 = lazy(() => Promise.resolve().then(() => (init_DevtoolsPanelComponent(), DevtoolsPanelComponent_exports)));
         this.#Component = Devtools2;
       }
       setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
@@ -15785,6 +16097,9 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
         },
         get errorTypes() {
           return errors();
+        },
+        get onClose() {
+          return onClose();
         }
       }));
     }, el);