@tanstack/query-devtools 5.51.16 → 5.54.0

package/build/{Devtools/2FJCTAHO.js → chunk/WK5KHUSK.js}

@@ -1,4 +1,419 @@
-import { createContext, splitProps, createMemo, createComponent, mergeProps, createUniqueId, createSignal, createEffect, onCleanup, Show, on, delegateEvents, sortFns, mutationSortFns, Dynamic, useContext, createRenderEffect, setAttribute, Portal, untrack, template, getPreferredColorScheme, onMount, use, insert, className, getQueryStatusColor, getMutationStatusColor, getQueryStatusLabel, spread, getQueryStatusColorByLabel, displayValue, For, batch, isServer, createComputed, Index, updateNestedDataByPath, convertRemToPixels, getSidedProp, useTransition, $TRACK, createRoot, addEventListener, stringify, Switch, Match, deleteNestedDataByPath, clearDelegatedEvents, getOwner, DEV } from '../chunk/TU4XCPXB.js';
+import { sortFns, mutationSortFns, createContext, splitProps, createMemo, createComponent, mergeProps, createUniqueId, createSignal, createEffect, onCleanup, Show, on, delegateEvents, Dynamic, useContext, createRenderEffect, setAttribute, Portal, onMount, use, insert, className, getQueryStatusColor, getMutationStatusColor, getQueryStatusLabel, spread, getQueryStatusColorByLabel, displayValue, For, batch, clearDelegatedEvents, isServer, untrack, template, Index, updateNestedDataByPath, convertRemToPixels, getSidedProp, useTransition, $TRACK, createRoot, createComputed, addEventListener, stringify, Switch, Match, deleteNestedDataByPath, getOwner, DEV } from './TU4XCPXB.js';
+
+// ../../node_modules/.pnpm/@solid-primitives+utils@6.2.3_solid-js@1.8.19/node_modules/@solid-primitives/utils/dist/chunk/R5675YMU.js
+var isClient = !isServer;
+var isDev = isClient && !!DEV;
+var noop = () => void 0;
+var isNonNullable = (i2) => i2 != null;
+var filterNonNullable = (arr) => arr.filter(isNonNullable);
+function chain(callbacks) {
+  return (...args) => {
+    for (const callback of callbacks)
+      callback && callback(...args);
+  };
+}
+var access = (v) => typeof v === "function" && !v.length ? v() : v;
+var asArray = (value) => Array.isArray(value) ? value : value ? [value] : [];
+function accessWith(valueOrFn, ...args) {
+  return typeof valueOrFn === "function" ? valueOrFn(...args) : valueOrFn;
+}
+var tryOnCleanup = isDev ? (fn) => getOwner() ? onCleanup(fn) : fn : onCleanup;
+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);
+  }
+}
+
+// ../../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 handleError = 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) {
+              handleError(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) {
+        handleError(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) {
+      handleError(err, `Error removing ${prefix}${key} from ${api.name}`);
+    }
+  });
+  const clear = () => apis.forEach((api) => {
+    try {
+      api.clear();
+    } catch (err) {
+      handleError(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) {
+          handleError(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) {
+          handleError(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) {
+          handleError(
+            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 = createStorage;
+var addClearMethod = (storage) => {
+  if (typeof storage.clear === "function") {
+    return storage;
+  }
+  storage.clear = () => {
+    let key;
+    while (key = storage.key(0)) {
+      storage.removeItem(key);
+    }
+  };
+  return storage;
+};
+var 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;
+};
+var 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;
+  }
+});
+
+// src/constants.ts
+var firstBreakpoint = 1024;
+var secondBreakpoint = 796;
+var thirdBreakpoint = 700;
+var BUTTON_POSITION = "bottom-right";
+var POSITION = "bottom";
+var THEME_PREFERENCE = "system";
+var INITIAL_IS_OPEN = false;
+var DEFAULT_HEIGHT = 500;
+var PIP_DEFAULT_HEIGHT = 500;
+var DEFAULT_WIDTH = 500;
+var DEFAULT_SORT_FN_NAME = Object.keys(sortFns)[0];
+var DEFAULT_SORT_ORDER = 1;
+var DEFAULT_MUTATION_SORT_FN_NAME = Object.keys(mutationSortFns)[0];
+
+// src/contexts/QueryDevtoolsContext.ts
+var QueryDevtoolsContext = createContext({
+  client: void 0,
+  onlineManager: void 0,
+  queryFlavor: "",
+  version: "",
+  shadowDOMTarget: void 0
+});
+function useQueryDevtoolsContext() {
+  return useContext(QueryDevtoolsContext);
+}
+
+// src/contexts/PiPContext.tsx
+var PiPContext = createContext(void 0);
+var 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 style = 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) {
+          style.setAttribute("id", style_id);
+        }
+        style.textContent = cssRules;
+        pip.document.head.appendChild(style);
+      } 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;
+    }
+  });
+};
+var 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
+var ThemeContext = createContext(
+  () => "dark"
+);
+function useTheme() {
+  return useContext(ThemeContext);
+}
 
 // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.15.1/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
 var characterMap = {
@@ -677,7 +1092,7 @@ function clsx() {
 }
 
 // ../../node_modules/.pnpm/@solid-primitives+transition-group@1.0.5_solid-js@1.8.19/node_modules/@solid-primitives/transition-group/dist/index.js
-var noop = () => {
+var noop2 = () => {
 };
 function createListTransition(source, options) {
   const initSource = untrack(source);
@@ -690,12 +1105,12 @@ function createListTransition(source, options) {
   const exiting = /* @__PURE__ */ new WeakSet();
   const [toRemove, setToRemove] = createSignal([], { equals: false });
   const [isTransitionPending] = useTransition();
-  const finishRemoved = options.exitMethod === "remove" ? noop : (els) => {
+  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" ? noop : options.exitMethod === "keep-index" ? (els, el, i2) => els.splice(i2, 0, el) : (els, el) => els.push(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();
@@ -727,71 +1142,21 @@ function createListTransition(source, options) {
             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()
-  );
-}
-
-// ../../node_modules/.pnpm/@solid-primitives+utils@6.2.3_solid-js@1.8.19/node_modules/@solid-primitives/utils/dist/chunk/R5675YMU.js
-var isClient = !isServer;
-var isDev = isClient && !!DEV;
-var noop2 = () => void 0;
-var isNonNullable = (i2) => i2 != null;
-var filterNonNullable = (arr) => arr.filter(isNonNullable);
-function chain(callbacks) {
-  return (...args) => {
-    for (const callback of callbacks)
-      callback && callback(...args);
-  };
-}
-var access = (v) => typeof v === "function" && !v.length ? v() : v;
-var asArray = (value) => Array.isArray(value) ? value : value ? [value] : [];
-function accessWith(valueOrFn, ...args) {
-  return typeof valueOrFn === "function" ? valueOrFn(...args) : valueOrFn;
-}
-var tryOnCleanup = isDev ? (fn) => getOwner() ? onCleanup(fn) : fn : onCleanup;
-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);
-  }
+            }
+            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()
+  );
 }
 
 // ../../node_modules/.pnpm/@solid-primitives+refs@1.0.8_solid-js@1.8.19/node_modules/@solid-primitives/refs/dist/index.js
@@ -1021,249 +1386,30 @@ function keyArray(items, keyFn, mapFn, options = {}) {
   };
   function addNewItem(list, item, i2, key) {
     createRoot((dispose2) => {
-      const [getItem, setItem] = createSignal(item);
-      const save = { setItem, dispose: dispose2 };
-      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
-    )
-  );
-}
-
-// ../../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 handleError = 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) {
-              handleError(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) {
-        handleError(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) {
-      handleError(err, `Error removing ${prefix}${key} from ${api.name}`);
-    }
-  });
-  const clear = () => apis.forEach((api) => {
-    try {
-      api.clear();
-    } catch (err) {
-      handleError(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) {
-          handleError(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) {
-          handleError(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) {
-          handleError(
-            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 = createStorage;
-var addClearMethod = (storage) => {
-  if (typeof storage.clear === "function") {
-    return storage;
-  }
-  storage.clear = () => {
-    let key;
-    while (key = storage.key(0)) {
-      storage.removeItem(key);
-    }
-  };
-  return storage;
-};
-var 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;
-};
-var 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;
+      const [getItem, setItem] = createSignal(item);
+      const save = { setItem, dispose: dispose2 };
+      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
+    )
+  );
+}
 
 // ../../node_modules/.pnpm/@solid-primitives+event-listener@2.3.3_solid-js@1.8.19/node_modules/@solid-primitives/event-listener/dist/index.js
 function makeEventListener(target, type, handler, options) {
@@ -1288,7 +1434,7 @@ function createEventListener(targets, type, handler, options) {
 // ../../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));
@@ -8648,24 +8794,6 @@ function TanstackLogo() {
   })();
 }
 
-// src/Context.ts
-var QueryDevtoolsContext = createContext({
-  client: void 0,
-  onlineManager: void 0,
-  queryFlavor: "",
-  version: "",
-  shadowDOMTarget: void 0
-});
-function useQueryDevtoolsContext() {
-  return useContext(QueryDevtoolsContext);
-}
-var ThemeContext = createContext(
-  () => "dark"
-);
-function useTheme() {
-  return useContext(ThemeContext);
-}
-
 // src/Explorer.tsx
 var _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>`);
 var _tmpl$24 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`);
@@ -9271,248 +9399,95 @@ var stylesFactory = (theme, css) => {
     `,
     actions: css`
       display: inline-flex;
-      gap: ${size3[2]};
-      align-items: center;
-    `,
-    row: css`
-      display: inline-flex;
-      gap: ${size3[2]};
-      width: 100%;
-      margin: ${size3[0.25]} 0px;
-      line-height: ${size3[4.5]};
-      align-items: center;
-    `,
-    editableInput: css`
-      border: none;
-      padding: ${size3[0.5]} ${size3[1]} ${size3[0.5]} ${size3[1.5]};
-      flex-grow: 1;
-      border-radius: ${border.radius.xs};
-      background-color: ${t2(colors.gray[200], colors.darkGray[500])};
-
-      &:hover {
-        background-color: ${t2(colors.gray[300], colors.darkGray[600])};
-      }
-    `,
-    actionButton: css`
-      background-color: transparent;
-      color: ${t2(colors.gray[500], colors.gray[500])};
-      border: none;
-      display: inline-flex;
-      padding: 0px;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      width: ${size3[3]};
-      height: ${size3[3]};
-      position: relative;
-      z-index: 1;
-
-      &:hover svg {
-        color: ${t2(colors.gray[600], colors.gray[400])};
-      }
-
-      &:focus-visible {
-        border-radius: ${border.radius.xs};
-        outline: 2px solid ${colors.blue[800]};
-        outline-offset: 2px;
-      }
-    `
-  };
-};
-var lightStyles = (css) => stylesFactory("light", css);
-var darkStyles = (css) => stylesFactory("dark", css);
-delegateEvents(["click"]);
-
-// src/Devtools.tsx
-var _tmpl$25 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools"class=tsqd-open-btn>`);
-var _tmpl$26 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools">`);
-var _tmpl$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort>`);
-var _tmpl$53 = /* @__PURE__ */ template(`<select name=tsqd-mutations-filter-sort>`);
-var _tmpl$63 = /* @__PURE__ */ template(`<span>Asc`);
-var _tmpl$73 = /* @__PURE__ */ template(`<span>Desc`);
-var _tmpl$83 = /* @__PURE__ */ template(`<button aria-label="Open in picture-in-picture mode"title="Open in picture-in-picture mode">`);
-var _tmpl$93 = /* @__PURE__ */ template(`<div>Settings`);
-var _tmpl$103 = /* @__PURE__ */ template(`<span>Position`);
-var _tmpl$113 = /* @__PURE__ */ template(`<span>Top`);
-var _tmpl$122 = /* @__PURE__ */ template(`<span>Bottom`);
-var _tmpl$132 = /* @__PURE__ */ template(`<span>Left`);
-var _tmpl$142 = /* @__PURE__ */ template(`<span>Right`);
-var _tmpl$152 = /* @__PURE__ */ template(`<span>Theme`);
-var _tmpl$162 = /* @__PURE__ */ template(`<span>Light`);
-var _tmpl$172 = /* @__PURE__ */ template(`<span>Dark`);
-var _tmpl$182 = /* @__PURE__ */ template(`<span>System`);
-var _tmpl$192 = /* @__PURE__ */ template(`<div><div class=tsqd-queries-container>`);
-var _tmpl$202 = /* @__PURE__ */ template(`<div><div class=tsqd-mutations-container>`);
-var _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>`);
-var _tmpl$223 = /* @__PURE__ */ template(`<option>Sort by `);
-var _tmpl$232 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
-var _tmpl$242 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
-var _tmpl$252 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
-var _tmpl$262 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$27 = /* @__PURE__ */ template(`<button><span></span><span>`);
-var _tmpl$28 = /* @__PURE__ */ template(`<button><span></span> Error`);
-var _tmpl$29 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
-var _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">`);
-var _tmpl$31 = /* @__PURE__ */ template(`<option>`);
-var _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">`);
-var firstBreakpoint = 1024;
-var secondBreakpoint = 796;
-var thirdBreakpoint = 700;
-var BUTTON_POSITION = "bottom-right";
-var POSITION = "bottom";
-var THEME_PREFERENCE = "system";
-var INITIAL_IS_OPEN = false;
-var DEFAULT_HEIGHT = 500;
-var DEFAULT_WIDTH = 500;
-var DEFAULT_SORT_FN_NAME = Object.keys(sortFns)[0];
-var DEFAULT_SORT_ORDER = 1;
-var DEFAULT_MUTATION_SORT_FN_NAME = Object.keys(mutationSortFns)[0];
-var [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
-var [selectedMutationId, setSelectedMutationId] = createSignal(null);
-var [panelWidth, setPanelWidth] = createSignal(0);
-var [offline, setOffline] = createSignal(false);
-var PiPContext = createContext(void 0);
-var 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 style = 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) {
-          style.setAttribute("id", style_id);
-        }
-        style.textContent = cssRules;
-        pip.document.head.appendChild(style);
-      } 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;
-    }
-  });
-};
-var usePiPWindow = () => {
-  const context = createMemo(() => {
-    const ctx = useContext(PiPContext);
-    if (!ctx) {
-      throw new Error("usePiPWindow must be used within a PiPProvider");
-    }
-    return ctx();
-  });
-  return context;
-};
-var 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
-              });
-            }
-          });
-        }
-      });
-    }
-  });
+      gap: ${size3[2]};
+      align-items: center;
+    `,
+    row: css`
+      display: inline-flex;
+      gap: ${size3[2]};
+      width: 100%;
+      margin: ${size3[0.25]} 0px;
+      line-height: ${size3[4.5]};
+      align-items: center;
+    `,
+    editableInput: css`
+      border: none;
+      padding: ${size3[0.5]} ${size3[1]} ${size3[0.5]} ${size3[1.5]};
+      flex-grow: 1;
+      border-radius: ${border.radius.xs};
+      background-color: ${t2(colors.gray[200], colors.darkGray[500])};
+
+      &:hover {
+        background-color: ${t2(colors.gray[300], colors.darkGray[600])};
+      }
+    `,
+    actionButton: css`
+      background-color: transparent;
+      color: ${t2(colors.gray[500], colors.gray[500])};
+      border: none;
+      display: inline-flex;
+      padding: 0px;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      width: ${size3[3]};
+      height: ${size3[3]};
+      position: relative;
+      z-index: 1;
+
+      &:hover svg {
+        color: ${t2(colors.gray[600], colors.gray[400])};
+      }
+
+      &:focus-visible {
+        border-radius: ${border.radius.xs};
+        outline: 2px solid ${colors.blue[800]};
+        outline-offset: 2px;
+      }
+    `
+  };
 };
-var Devtools_default = DevtoolsComponent;
+var lightStyles = (css) => stylesFactory("light", css);
+var darkStyles = (css) => stylesFactory("dark", css);
+delegateEvents(["click"]);
+
+// src/Devtools.tsx
+var _tmpl$25 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools"class=tsqd-open-btn>`);
+var _tmpl$26 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools">`);
+var _tmpl$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort>`);
+var _tmpl$53 = /* @__PURE__ */ template(`<select name=tsqd-mutations-filter-sort>`);
+var _tmpl$63 = /* @__PURE__ */ template(`<span>Asc`);
+var _tmpl$73 = /* @__PURE__ */ template(`<span>Desc`);
+var _tmpl$83 = /* @__PURE__ */ template(`<button aria-label="Open in picture-in-picture mode"title="Open in picture-in-picture mode">`);
+var _tmpl$93 = /* @__PURE__ */ template(`<div>Settings`);
+var _tmpl$103 = /* @__PURE__ */ template(`<span>Position`);
+var _tmpl$113 = /* @__PURE__ */ template(`<span>Top`);
+var _tmpl$122 = /* @__PURE__ */ template(`<span>Bottom`);
+var _tmpl$132 = /* @__PURE__ */ template(`<span>Left`);
+var _tmpl$142 = /* @__PURE__ */ template(`<span>Right`);
+var _tmpl$152 = /* @__PURE__ */ template(`<span>Theme`);
+var _tmpl$162 = /* @__PURE__ */ template(`<span>Light`);
+var _tmpl$172 = /* @__PURE__ */ template(`<span>Dark`);
+var _tmpl$182 = /* @__PURE__ */ template(`<span>System`);
+var _tmpl$192 = /* @__PURE__ */ template(`<div><div class=tsqd-queries-container>`);
+var _tmpl$202 = /* @__PURE__ */ template(`<div><div class=tsqd-mutations-container>`);
+var _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>`);
+var _tmpl$223 = /* @__PURE__ */ template(`<option>Sort by `);
+var _tmpl$232 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
+var _tmpl$242 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
+var _tmpl$252 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
+var _tmpl$262 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$27 = /* @__PURE__ */ template(`<button><span></span><span>`);
+var _tmpl$28 = /* @__PURE__ */ template(`<button><span></span> Error`);
+var _tmpl$29 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
+var _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">`);
+var _tmpl$31 = /* @__PURE__ */ template(`<option>`);
+var _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">`);
+var [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
+var [selectedMutationId, setSelectedMutationId] = createSignal(null);
+var [panelWidth, setPanelWidth] = createSignal(0);
+var [offline, setOffline] = createSignal(false);
 var Devtools = (props) => {
   const theme = useTheme();
   const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
@@ -9565,14 +9540,7 @@ var Devtools = (props) => {
         get children() {
           return createComponent(PiPPanel, {
             get children() {
-              return createComponent(ContentView, {
-                get localStore() {
-                  return props.localStore;
-                },
-                get setLocalStore() {
-                  return props.setLocalStore;
-                }
-              });
+              return createComponent(ContentView, props);
             }
           });
         }
@@ -9590,7 +9558,7 @@ var Devtools = (props) => {
             return createMemo(() => !!(isOpen() && !pip().pipWindow))() && pip_open() == "false";
           },
           get children() {
-            return createComponent(DevtoolsPanel, {
+            return createComponent(DraggablePanel, {
               get localStore() {
                 return props.localStore;
               },
@@ -9707,7 +9675,55 @@ var PiPPanel = (props) => {
     return _el$5;
   })();
 };
-var DevtoolsPanel = (props) => {
+var 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;
+  })();
+};
+var DraggablePanel = (props) => {
   const theme = useTheme();
   const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
     target: useQueryDevtoolsContext().shadowDOMTarget
@@ -9818,31 +9834,24 @@ var DevtoolsPanel = (props) => {
     `;
   };
   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,
@@ -9851,7 +9860,7 @@ var DevtoolsPanel = (props) => {
       o: void 0,
       i: void 0
     });
-    return _el$6;
+    return _el$7;
   })();
 };
 var ContentView = (props) => {
@@ -9910,17 +9919,21 @@ var ContentView = (props) => {
     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);
       },
@@ -9962,7 +9975,7 @@ var ContentView = (props) => {
         })];
       }
     }), null);
-    insert(_el$10, createComponent(Show, {
+    insert(_el$11, createComponent(Show, {
       get when() {
         return selectedView() === "queries";
       },
@@ -9970,7 +9983,7 @@ var ContentView = (props) => {
         return createComponent(QueryStatusCount, {});
       }
     }), null);
-    insert(_el$10, createComponent(Show, {
+    insert(_el$11, createComponent(Show, {
       get when() {
         return selectedView() === "mutations";
       },
@@ -9978,61 +9991,61 @@ var ContentView = (props) => {
         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;
       },
@@ -10040,7 +10053,7 @@ var ContentView = (props) => {
         return [_tmpl$63(), createComponent(ArrowUp, {})];
       }
     }), null);
-    insert(_el$23, createComponent(Show, {
+    insert(_el$24, createComponent(Show, {
       get when() {
         return (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1;
       },
@@ -10048,15 +10061,15 @@ var ContentView = (props) => {
         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);
@@ -10065,25 +10078,25 @@ var ContentView = (props) => {
         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, {
@@ -10105,81 +10118,88 @@ var ContentView = (props) => {
               },
               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",
+                            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,
@@ -10250,13 +10270,13 @@ var ContentView = (props) => {
         })];
       }
     }), 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();
@@ -10267,17 +10287,17 @@ var ContentView = (props) => {
             }
           })
         }));
-        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();
@@ -10288,8 +10308,8 @@ var ContentView = (props) => {
             }
           })
         }));
-        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$) => {
@@ -10300,26 +10320,26 @@ var ContentView = (props) => {
               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,
@@ -10343,8 +10363,8 @@ var ContentView = (props) => {
       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();
@@ -10408,11 +10428,11 @@ var QueryRow = (props) => {
       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();
         },
@@ -10422,16 +10442,16 @@ var QueryRow = (props) => {
       }), 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;
     }
   });
 };
@@ -10488,11 +10508,11 @@ var MutationRow = (props) => {
       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";
         },
@@ -10500,7 +10520,7 @@ var MutationRow = (props) => {
           return createComponent(PauseCircle, {});
         }
       }), null);
-      insert(_el$53, createComponent(Show, {
+      insert(_el$54, createComponent(Show, {
         get when() {
           return color() === "green";
         },
@@ -10508,7 +10528,7 @@ var MutationRow = (props) => {
           return createComponent(CheckCircle, {});
         }
       }), null);
-      insert(_el$53, createComponent(Show, {
+      insert(_el$54, createComponent(Show, {
         get when() {
           return color() === "red";
         },
@@ -10516,7 +10536,7 @@ var MutationRow = (props) => {
           return createComponent(XCircle, {});
         }
       }), null);
-      insert(_el$53, createComponent(Show, {
+      insert(_el$54, createComponent(Show, {
         get when() {
           return color() === "yellow";
         },
@@ -10524,7 +10544,7 @@ var MutationRow = (props) => {
           return createComponent(LoadingCircle, {});
         }
       }), null);
-      insert(_el$54, createComponent(Show, {
+      insert(_el$55, createComponent(Show, {
         get when() {
           return props.mutation.options.mutationKey;
         },
@@ -10532,19 +10552,19 @@ var MutationRow = (props) => {
           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;
     }
   });
 };
@@ -10562,44 +10582,44 @@ var QueryStatusCount = () => {
     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;
   })();
 };
 var MutationStatusCount = () => {
@@ -10627,37 +10647,37 @@ var MutationStatusCount = () => {
     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;
   })();
 };
 var QueryStatus = (props) => {
@@ -10682,23 +10702,23 @@ var QueryStatus = (props) => {
         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();
       },
@@ -10713,29 +10733,29 @@ var QueryStatus = (props) => {
     }, () => 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]};
@@ -10746,14 +10766,14 @@ var QueryStatus = (props) => {
               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;
   })();
 };
 var QueryDetails = () => {
@@ -10850,19 +10870,19 @@ var QueryDetails = () => {
       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();
@@ -10889,78 +10909,78 @@ var QueryDetails = () => {
           });
         }
       };
-      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() {
@@ -10971,7 +10991,7 @@ var QueryDetails = () => {
           return activeQuery();
         }
       }));
-      insert(_el$99, createComponent(Explorer, {
+      insert(_el$100, createComponent(Explorer, {
         label: "Query",
         defaultExpanded: ["Query", "queryKey"],
         get value() {
@@ -11000,31 +11020,31 @@ var QueryDetails = () => {
               `, "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,
@@ -11053,7 +11073,7 @@ var QueryDetails = () => {
         I: void 0,
         S: void 0
       });
-      return _el$62;
+      return _el$63;
     }
   });
 };
@@ -11107,8 +11127,8 @@ var MutationDetails = () => {
       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;
         },
@@ -11117,13 +11137,13 @@ var MutationDetails = () => {
           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";
         },
@@ -11131,29 +11151,29 @@ var MutationDetails = () => {
           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() {
@@ -11162,18 +11182,18 @@ var MutationDetails = () => {
       }));
       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,
@@ -11189,7 +11209,7 @@ var MutationDetails = () => {
         l: void 0,
         u: void 0
       });
-      return _el$101;
+      return _el$102;
     }
   });
 };
@@ -11361,6 +11381,32 @@ var stylesFactory2 = (theme, css) => {
         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])};
+      }
+    `,
     "devtoolsBtn-position-bottom-right": css`
       bottom: 12px;
       right: 12px;
@@ -12333,4 +12379,4 @@ delegateEvents(["click", "mousedown", "input"]);
    *)
 */
 
-export { Devtools_default as default };
+export { ContentView, Devtools, ParentPanel, PiPProvider, QueryDevtoolsContext, THEME_PREFERENCE, ThemeContext, createLocalStorage };