@braine/quantum-query 1.2.3 → 1.2.4

package/dist/index.cjs

@@ -1474,9 +1474,32 @@ function useQueryCache() {
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function QuantumDevTools() {
   const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
+  const [isMinimized, setIsMinimized] = (0, import_react8.useState)(false);
+  const [height, setHeight] = (0, import_react8.useState)(450);
   const [filter, setFilter] = (0, import_react8.useState)("");
   const cache = useQueryCache();
   const client = useQueryClient();
+  const isResizingRef = (0, import_react8.useRef)(false);
+  const containerRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    const handleMouseMove = (e) => {
+      if (!isResizingRef.current) return;
+      const newHeight = window.innerHeight - e.clientY;
+      if (newHeight > 200 && newHeight < window.innerHeight - 50) {
+        setHeight(newHeight);
+      }
+    };
+    const handleMouseUp = () => {
+      isResizingRef.current = false;
+      document.body.style.cursor = "default";
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, []);
   const entries = (0, import_react8.useMemo)(() => Array.from(cache.entries()), [cache]);
   const filteredEntries = (0, import_react8.useMemo)(() => {
     if (!filter) return entries;
@@ -1518,129 +1541,212 @@ function QuantumDevTools() {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
-    position: "fixed",
-    bottom: 0,
-    right: 0,
-    width: "100%",
-    maxWidth: "650px",
-    height: "450px",
-    background: "#0a0a0a",
-    color: "#e0e0e0",
-    borderTopLeftRadius: "12px",
-    boxShadow: "0 -10px 40px rgba(0,0,0,0.5)",
-    zIndex: 9999,
-    display: "flex",
-    flexDirection: "column",
-    fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
-    fontSize: "13px",
-    border: "1px solid #333"
-  }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
-      padding: "12px 16px",
-      borderBottom: "1px solid #222",
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
+  if (isMinimized) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
+      position: "fixed",
+      bottom: "20px",
+      right: "20px",
       background: "#111",
-      borderTopLeftRadius: "12px"
-    }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#b0fb5d", fontSize: "16px" }, children: "\u26A1\uFE0F" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontWeight: 600, letterSpacing: "-0.5px" }, children: "Quantum DevTools" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: {
-          background: "#222",
-          padding: "2px 6px",
-          borderRadius: "4px",
-          fontSize: "10px",
-          color: "#666"
-        }, children: "v1.2.2" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "button",
-        {
-          onClick: () => setIsOpen(false),
-          style: {
-            background: "transparent",
-            border: "none",
-            color: "#666",
-            cursor: "pointer",
-            fontSize: "20px",
-            padding: "4px",
-            lineHeight: 1
-          },
-          children: "\xD7"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
-      padding: "8px 16px",
-      borderBottom: "1px solid #222",
-      background: "#0f0f0f",
+      border: "1px solid #333",
+      borderRadius: "8px",
+      padding: "8px 12px",
+      zIndex: 9999,
       display: "flex",
-      gap: "12px"
-    }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "input",
-        {
-          type: "text",
-          placeholder: "Filter queries...",
-          value: filter,
-          onChange: (e) => setFilter(e.target.value),
-          style: {
-            background: "#1a1a1a",
-            border: "1px solid #333",
-            color: "#fff",
-            padding: "6px 10px",
-            borderRadius: "4px",
-            flex: 1,
-            fontSize: "12px",
-            outline: "none"
+      alignItems: "center",
+      gap: "10px",
+      boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
+      fontFamily: "monospace",
+      color: "#e0e0e0",
+      cursor: "pointer"
+    }, onClick: () => setIsMinimized(false), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#b0fb5d" }, children: "\u26A1\uFE0F" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "12px" }, children: "DevTools" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: {
+        background: "#333",
+        padding: "2px 6px",
+        borderRadius: "4px",
+        fontSize: "10px"
+      }, children: [
+        entries.length,
+        " queries"
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        position: "fixed",
+        bottom: 0,
+        right: 0,
+        width: "100%",
+        height: `${height}px`,
+        background: "#0a0a0a",
+        color: "#e0e0e0",
+        borderTopLeftRadius: "12px",
+        borderTopRightRadius: "12px",
+        boxShadow: "0 -10px 40px rgba(0,0,0,0.5)",
+        zIndex: 9999,
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+        fontSize: "13px",
+        borderTop: "1px solid #333"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            onMouseDown: () => {
+              isResizingRef.current = true;
+              document.body.style.cursor = "ns-resize";
+            },
+            style: {
+              height: "6px",
+              width: "100%",
+              cursor: "ns-resize",
+              position: "absolute",
+              top: "-3px",
+              left: 0,
+              zIndex: 10
+              // debugging color: background: 'red', opacity: 0.2
+            }
           }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "button",
-        {
-          onClick: () => client.invalidateAll(),
-          title: "Invalidate All Queries",
-          style: {
-            background: "#222",
-            border: "1px solid #333",
-            color: "#d69e2e",
-            borderRadius: "4px",
-            padding: "0 12px",
-            cursor: "pointer",
-            fontSize: "12px",
-            fontWeight: 500
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
+          padding: "12px 16px",
+          borderBottom: "1px solid #222",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          background: "#111",
+          borderTopLeftRadius: "12px",
+          borderTopRightRadius: "12px",
+          userSelect: "none"
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#b0fb5d", fontSize: "16px" }, children: "\u26A1\uFE0F" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontWeight: 600, letterSpacing: "-0.5px" }, children: "Quantum DevTools" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: {
+              background: "#222",
+              padding: "2px 6px",
+              borderRadius: "4px",
+              fontSize: "10px",
+              color: "#666"
+            }, children: "v1.2.3" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                onClick: () => setIsMinimized(true),
+                title: "Minimize",
+                style: {
+                  background: "transparent",
+                  border: "none",
+                  color: "#666",
+                  cursor: "pointer",
+                  fontSize: "16px",
+                  padding: "4px",
+                  lineHeight: 1
+                },
+                children: "_"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                onClick: () => setIsOpen(false),
+                title: "Close",
+                style: {
+                  background: "transparent",
+                  border: "none",
+                  color: "#666",
+                  cursor: "pointer",
+                  fontSize: "18px",
+                  padding: "4px",
+                  lineHeight: 1
+                },
+                children: "\xD7"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
+          padding: "8px 16px",
+          borderBottom: "1px solid #222",
+          background: "#0f0f0f",
+          display: "flex",
+          gap: "12px"
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              type: "text",
+              placeholder: "Filter queries...",
+              value: filter,
+              onChange: (e) => setFilter(e.target.value),
+              style: {
+                background: "#1a1a1a",
+                border: "1px solid #333",
+                color: "#fff",
+                padding: "6px 10px",
+                borderRadius: "4px",
+                flex: 1,
+                fontSize: "12px",
+                outline: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              onClick: () => client.invalidateAll(),
+              title: "Invalidate All Queries",
+              style: {
+                background: "#222",
+                border: "1px solid #333",
+                color: "#d69e2e",
+                borderRadius: "4px",
+                padding: "0 12px",
+                cursor: "pointer",
+                fontSize: "12px",
+                fontWeight: 500
+              },
+              children: "\u21BB Invalidate All"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
+          flex: 1,
+          overflowY: "auto",
+          padding: "8px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+          background: "#050505"
+        }, children: entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
+          padding: "40px",
+          textAlign: "center",
+          color: "#444",
+          fontStyle: "italic"
+        }, children: [
+          "No active queries in cache.",
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("br", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "11px", opacity: 0.7 }, children: "(Note: Only `useQuery` calls appear here. Raw `api.get` calls are not cached globally.)" })
+        ] }) : filteredEntries.map(([keyHash, entry]) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          QueryItem,
+          {
+            entry,
+            client,
+            isStale: client.isStale(entry.key)
           },
-          children: "\u21BB Invalidate All"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
-      flex: 1,
-      overflowY: "auto",
-      padding: "8px",
-      display: "flex",
-      flexDirection: "column",
-      gap: "8px",
-      background: "#050505"
-    }, children: entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
-      padding: "40px",
-      textAlign: "center",
-      color: "#444",
-      fontStyle: "italic"
-    }, children: "No active queries in cache." }) : filteredEntries.map(([keyHash, entry]) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      QueryItem,
-      {
-        entry,
-        client,
-        isStale: client.isStale(entry.key)
-      },
-      keyHash
-    )) })
-  ] });
+          keyHash
+        )) })
+      ]
+    }
+  );
 }
 function QueryItem({ entry, client, isStale }) {
   const [expanded, setExpanded] = (0, import_react8.useState)(false);

package/dist/index.js

@@ -1406,7 +1406,7 @@ function useInfiniteQuery({
 }
 
 // src/addon/query/devtools.tsx
-import { useState as useState5, useMemo } from "react";
+import { useState as useState5, useMemo, useRef as useRef5, useEffect as useEffect6 } from "react";
 
 // src/addon/query/useQueryCache.ts
 import { useState as useState4, useEffect as useEffect5 } from "react";
@@ -1426,9 +1426,32 @@ function useQueryCache() {
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function QuantumDevTools() {
   const [isOpen, setIsOpen] = useState5(false);
+  const [isMinimized, setIsMinimized] = useState5(false);
+  const [height, setHeight] = useState5(450);
   const [filter, setFilter] = useState5("");
   const cache = useQueryCache();
   const client = useQueryClient();
+  const isResizingRef = useRef5(false);
+  const containerRef = useRef5(null);
+  useEffect6(() => {
+    const handleMouseMove = (e) => {
+      if (!isResizingRef.current) return;
+      const newHeight = window.innerHeight - e.clientY;
+      if (newHeight > 200 && newHeight < window.innerHeight - 50) {
+        setHeight(newHeight);
+      }
+    };
+    const handleMouseUp = () => {
+      isResizingRef.current = false;
+      document.body.style.cursor = "default";
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, []);
   const entries = useMemo(() => Array.from(cache.entries()), [cache]);
   const filteredEntries = useMemo(() => {
     if (!filter) return entries;
@@ -1470,129 +1493,212 @@ function QuantumDevTools() {
       }
     );
   }
-  return /* @__PURE__ */ jsxs("div", { style: {
-    position: "fixed",
-    bottom: 0,
-    right: 0,
-    width: "100%",
-    maxWidth: "650px",
-    height: "450px",
-    background: "#0a0a0a",
-    color: "#e0e0e0",
-    borderTopLeftRadius: "12px",
-    boxShadow: "0 -10px 40px rgba(0,0,0,0.5)",
-    zIndex: 9999,
-    display: "flex",
-    flexDirection: "column",
-    fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
-    fontSize: "13px",
-    border: "1px solid #333"
-  }, children: [
-    /* @__PURE__ */ jsxs("div", { style: {
-      padding: "12px 16px",
-      borderBottom: "1px solid #222",
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
+  if (isMinimized) {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      position: "fixed",
+      bottom: "20px",
+      right: "20px",
       background: "#111",
-      borderTopLeftRadius: "12px"
-    }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-        /* @__PURE__ */ jsx2("span", { style: { color: "#b0fb5d", fontSize: "16px" }, children: "\u26A1\uFE0F" }),
-        /* @__PURE__ */ jsx2("span", { style: { fontWeight: 600, letterSpacing: "-0.5px" }, children: "Quantum DevTools" }),
-        /* @__PURE__ */ jsx2("span", { style: {
-          background: "#222",
-          padding: "2px 6px",
-          borderRadius: "4px",
-          fontSize: "10px",
-          color: "#666"
-        }, children: "v1.2.2" })
-      ] }),
-      /* @__PURE__ */ jsx2(
-        "button",
-        {
-          onClick: () => setIsOpen(false),
-          style: {
-            background: "transparent",
-            border: "none",
-            color: "#666",
-            cursor: "pointer",
-            fontSize: "20px",
-            padding: "4px",
-            lineHeight: 1
-          },
-          children: "\xD7"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: {
-      padding: "8px 16px",
-      borderBottom: "1px solid #222",
-      background: "#0f0f0f",
+      border: "1px solid #333",
+      borderRadius: "8px",
+      padding: "8px 12px",
+      zIndex: 9999,
       display: "flex",
-      gap: "12px"
-    }, children: [
-      /* @__PURE__ */ jsx2(
-        "input",
-        {
-          type: "text",
-          placeholder: "Filter queries...",
-          value: filter,
-          onChange: (e) => setFilter(e.target.value),
-          style: {
-            background: "#1a1a1a",
-            border: "1px solid #333",
-            color: "#fff",
-            padding: "6px 10px",
-            borderRadius: "4px",
-            flex: 1,
-            fontSize: "12px",
-            outline: "none"
+      alignItems: "center",
+      gap: "10px",
+      boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
+      fontFamily: "monospace",
+      color: "#e0e0e0",
+      cursor: "pointer"
+    }, onClick: () => setIsMinimized(false), children: [
+      /* @__PURE__ */ jsx2("span", { style: { color: "#b0fb5d" }, children: "\u26A1\uFE0F" }),
+      /* @__PURE__ */ jsx2("span", { style: { fontSize: "12px" }, children: "DevTools" }),
+      /* @__PURE__ */ jsxs("span", { style: {
+        background: "#333",
+        padding: "2px 6px",
+        borderRadius: "4px",
+        fontSize: "10px"
+      }, children: [
+        entries.length,
+        " queries"
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        position: "fixed",
+        bottom: 0,
+        right: 0,
+        width: "100%",
+        height: `${height}px`,
+        background: "#0a0a0a",
+        color: "#e0e0e0",
+        borderTopLeftRadius: "12px",
+        borderTopRightRadius: "12px",
+        boxShadow: "0 -10px 40px rgba(0,0,0,0.5)",
+        zIndex: 9999,
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+        fontSize: "13px",
+        borderTop: "1px solid #333"
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            onMouseDown: () => {
+              isResizingRef.current = true;
+              document.body.style.cursor = "ns-resize";
+            },
+            style: {
+              height: "6px",
+              width: "100%",
+              cursor: "ns-resize",
+              position: "absolute",
+              top: "-3px",
+              left: 0,
+              zIndex: 10
+              // debugging color: background: 'red', opacity: 0.2
+            }
           }
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "button",
-        {
-          onClick: () => client.invalidateAll(),
-          title: "Invalidate All Queries",
-          style: {
-            background: "#222",
-            border: "1px solid #333",
-            color: "#d69e2e",
-            borderRadius: "4px",
-            padding: "0 12px",
-            cursor: "pointer",
-            fontSize: "12px",
-            fontWeight: 500
+        ),
+        /* @__PURE__ */ jsxs("div", { style: {
+          padding: "12px 16px",
+          borderBottom: "1px solid #222",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          background: "#111",
+          borderTopLeftRadius: "12px",
+          borderTopRightRadius: "12px",
+          userSelect: "none"
+        }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx2("span", { style: { color: "#b0fb5d", fontSize: "16px" }, children: "\u26A1\uFE0F" }),
+            /* @__PURE__ */ jsx2("span", { style: { fontWeight: 600, letterSpacing: "-0.5px" }, children: "Quantum DevTools" }),
+            /* @__PURE__ */ jsx2("span", { style: {
+              background: "#222",
+              padding: "2px 6px",
+              borderRadius: "4px",
+              fontSize: "10px",
+              color: "#666"
+            }, children: "v1.2.3" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                onClick: () => setIsMinimized(true),
+                title: "Minimize",
+                style: {
+                  background: "transparent",
+                  border: "none",
+                  color: "#666",
+                  cursor: "pointer",
+                  fontSize: "16px",
+                  padding: "4px",
+                  lineHeight: 1
+                },
+                children: "_"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                onClick: () => setIsOpen(false),
+                title: "Close",
+                style: {
+                  background: "transparent",
+                  border: "none",
+                  color: "#666",
+                  cursor: "pointer",
+                  fontSize: "18px",
+                  padding: "4px",
+                  lineHeight: 1
+                },
+                children: "\xD7"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: {
+          padding: "8px 16px",
+          borderBottom: "1px solid #222",
+          background: "#0f0f0f",
+          display: "flex",
+          gap: "12px"
+        }, children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: "text",
+              placeholder: "Filter queries...",
+              value: filter,
+              onChange: (e) => setFilter(e.target.value),
+              style: {
+                background: "#1a1a1a",
+                border: "1px solid #333",
+                color: "#fff",
+                padding: "6px 10px",
+                borderRadius: "4px",
+                flex: 1,
+                fontSize: "12px",
+                outline: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: () => client.invalidateAll(),
+              title: "Invalidate All Queries",
+              style: {
+                background: "#222",
+                border: "1px solid #333",
+                color: "#d69e2e",
+                borderRadius: "4px",
+                padding: "0 12px",
+                cursor: "pointer",
+                fontSize: "12px",
+                fontWeight: 500
+              },
+              children: "\u21BB Invalidate All"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2("div", { style: {
+          flex: 1,
+          overflowY: "auto",
+          padding: "8px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+          background: "#050505"
+        }, children: entries.length === 0 ? /* @__PURE__ */ jsxs("div", { style: {
+          padding: "40px",
+          textAlign: "center",
+          color: "#444",
+          fontStyle: "italic"
+        }, children: [
+          "No active queries in cache.",
+          /* @__PURE__ */ jsx2("br", {}),
+          /* @__PURE__ */ jsx2("span", { style: { fontSize: "11px", opacity: 0.7 }, children: "(Note: Only `useQuery` calls appear here. Raw `api.get` calls are not cached globally.)" })
+        ] }) : filteredEntries.map(([keyHash, entry]) => /* @__PURE__ */ jsx2(
+          QueryItem,
+          {
+            entry,
+            client,
+            isStale: client.isStale(entry.key)
           },
-          children: "\u21BB Invalidate All"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx2("div", { style: {
-      flex: 1,
-      overflowY: "auto",
-      padding: "8px",
-      display: "flex",
-      flexDirection: "column",
-      gap: "8px",
-      background: "#050505"
-    }, children: entries.length === 0 ? /* @__PURE__ */ jsx2("div", { style: {
-      padding: "40px",
-      textAlign: "center",
-      color: "#444",
-      fontStyle: "italic"
-    }, children: "No active queries in cache." }) : filteredEntries.map(([keyHash, entry]) => /* @__PURE__ */ jsx2(
-      QueryItem,
-      {
-        entry,
-        client,
-        isStale: client.isStale(entry.key)
-      },
-      keyHash
-    )) })
-  ] });
+          keyHash
+        )) })
+      ]
+    }
+  );
 }
 function QueryItem({ entry, client, isStale }) {
   const [expanded, setExpanded] = useState5(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braine/quantum-query",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "type": "module",
   "main": "index.js",
   "scripts": {