@upstash/react-redis-browser 0.2.5 → 0.2.7-canary

package/dist/index.mjs

@@ -1,8 +1,26 @@
 // src/components/databrowser/index.tsx
-import { useEffect as useEffect14, useMemo as useMemo8 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo9, useRef as useRef6 } from "react";
+
+// src/dark-mode-context.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var DarkModeContext = createContext(void 0);
+var DarkModeProvider = ({
+  children,
+  darkMode
+}) => {
+  return /* @__PURE__ */ jsx(DarkModeContext.Provider, { value: { darkMode }, children });
+};
+var useDarkMode = () => {
+  const context = useContext(DarkModeContext);
+  if (!context) {
+    throw new Error("useDarkMode must be used within a DarkModeProvider");
+  }
+  return context.darkMode;
+};
 
 // src/redis-context.tsx
-import { createContext, useContext, useMemo } from "react";
+import { createContext as createContext2, useContext as useContext2, useMemo } from "react";
 
 // src/lib/clients.ts
 import { MutationCache, QueryCache, QueryClient } from "@tanstack/react-query";
@@ -181,8 +199,8 @@ var queryClient = new QueryClient({
 });
 
 // src/redis-context.tsx
-import { jsx } from "react/jsx-runtime";
-var RedisContext = createContext(void 0);
+import { jsx as jsx2 } from "react/jsx-runtime";
+var RedisContext = createContext2(void 0);
 var RedisProvider = ({
   children,
   redisCredentials
@@ -195,7 +213,7 @@ var RedisProvider = ({
     () => redisClient({ credentials: redisCredentials, pipelining: false }),
     [redisCredentials]
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     RedisContext.Provider,
     {
       value: { redis: redisInstance, redisNoPipeline: redisInstanceNoPipeline },
@@ -204,7 +222,7 @@ var RedisProvider = ({
   );
 };
 var useRedis = () => {
-  const context = useContext(RedisContext);
+  const context = useContext2(RedisContext);
   if (!context) {
     throw new Error("useRedis must be used within a RedisProvider");
   }
@@ -212,14 +230,15 @@ var useRedis = () => {
 };
 
 // src/store.tsx
-import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2 } from "react";
+import { createContext as createContext3, useContext as useContext3, useMemo as useMemo2 } from "react";
 import { create, useStore } from "zustand";
 import { persist } from "zustand/middleware";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var DatabrowserContext = createContext2(void 0);
+import { jsx as jsx3 } from "react/jsx-runtime";
+var DatabrowserContext = createContext3(void 0);
 var DatabrowserProvider = ({
   children,
-  storage
+  storage,
+  rootRef
 }) => {
   const store = useMemo2(() => {
     if (!storage) return create(storeCreator);
@@ -241,21 +260,32 @@ var DatabrowserProvider = ({
           removeItem: () => {
           }
         },
-        version: 1,
+        version: 2,
         // @ts-expect-error Reset the store for < v1
-        migrate: (state, version) => {
+        migrate: (originalState, version) => {
+          const state = originalState;
           if (version === 0) {
             return;
           }
+          if (version === 1) {
+            return {
+              ...state,
+              tabs: state.tabs.map(([id, data]) => [id, { ...data, id }])
+            };
+          }
           return state;
         }
       })
     );
   }, []);
-  return /* @__PURE__ */ jsx2(DatabrowserContext.Provider, { value: { store }, children });
+  return /* @__PURE__ */ jsx3(DatabrowserContext.Provider, { value: { store, rootRef }, children });
+};
+var useDatabrowserRootRef = () => {
+  const { rootRef } = useDatabrowser();
+  return rootRef;
 };
 var useDatabrowser = () => {
-  const context = useContext2(DatabrowserContext);
+  const context = useContext3(DatabrowserContext);
   if (!context) {
     throw new Error("useDatabrowser must be used within a DatabrowserProvider");
   }
@@ -271,8 +301,10 @@ var storeCreator = (set, get) => ({
   addTab: () => {
     const id = crypto.randomUUID();
     const newTabData = {
+      id,
       selectedKey: void 0,
-      search: { key: "", type: void 0 }
+      search: { key: "", type: void 0 },
+      pinned: false
     };
     set((old) => ({
       tabs: [...old.tabs, [id, newTabData]],
@@ -282,6 +314,9 @@ var storeCreator = (set, get) => ({
   },
   reorderTabs: (oldIndex, newIndex) => {
     set((old) => {
+      const [, oldTabData] = old.tabs[oldIndex];
+      const [, newTabData] = old.tabs[newIndex];
+      if (oldTabData.pinned || newTabData.pinned) return old;
       const newTabs = [...old.tabs];
       const [movedTab] = newTabs.splice(oldIndex, 1);
       newTabs.splice(newIndex, 0, movedTab);
@@ -289,6 +324,22 @@ var storeCreator = (set, get) => ({
     });
   },
   removeTab: (id) => {
+    set((old) => {
+      const tabIndex = old.tabs.findIndex(([tabId]) => tabId === id);
+      if (tabIndex === -1) return old;
+      const [, tabData] = old.tabs[tabIndex];
+      if (tabData.pinned) return old;
+      const newTabs = [...old.tabs];
+      newTabs.splice(tabIndex, 1);
+      let selectedTab = old.selectedTab;
+      if (selectedTab === id) {
+        const [newId] = newTabs[tabIndex - 1] ?? newTabs[tabIndex];
+        selectedTab = newTabs.length > 0 ? newId : void 0;
+      }
+      return { tabs: newTabs, selectedTab };
+    });
+  },
+  forceRemoveTab: (id) => {
     set((old) => {
       const tabIndex = old.tabs.findIndex(([tabId]) => tabId === id);
       if (tabIndex === -1) return old;
@@ -302,6 +353,45 @@ var storeCreator = (set, get) => ({
       return { tabs: newTabs, selectedTab };
     });
   },
+  togglePinTab: (id) => {
+    set((old) => {
+      const tabIndex = old.tabs.findIndex(([tabId2]) => tabId2 === id);
+      if (tabIndex === -1) return old;
+      const newTabs = [...old.tabs];
+      const [tabId, tabData] = newTabs[tabIndex];
+      newTabs[tabIndex] = [tabId, { ...tabData, pinned: !tabData.pinned }];
+      return { ...old, tabs: newTabs };
+    });
+  },
+  duplicateTab: (id) => {
+    let newId;
+    set((old) => {
+      const tabIndex = old.tabs.findIndex(([tabId]) => tabId === id);
+      if (tabIndex === -1) return old;
+      const newTabs = [...old.tabs];
+      const [, tabData] = newTabs[tabIndex];
+      newId = crypto.randomUUID();
+      const duplicated = [newId, { ...tabData, id: newId }];
+      newTabs.splice(tabIndex + 1, 0, duplicated);
+      return { ...old, tabs: newTabs, selectedTab: newId };
+    });
+    return newId;
+  },
+  closeOtherTabs: (id) => {
+    set((old) => {
+      const exists = old.tabs.some(([tabId]) => tabId === id);
+      if (!exists) return old;
+      const newTabs = old.tabs.filter(([tabId]) => tabId === id);
+      return { ...old, tabs: newTabs, selectedTab: id };
+    });
+  },
+  closeAllButPinned: () => {
+    set((old) => {
+      const newTabs = old.tabs.filter(([, data]) => data.pinned);
+      const newSelected = newTabs.length > 0 ? newTabs[0][0] : void 0;
+      return { ...old, tabs: newTabs, selectedTab: newSelected };
+    });
+  },
   selectTab: (id) => {
     set({ selectedTab: id });
   },
@@ -377,14 +467,14 @@ var storeCreator = (set, get) => ({
 });
 
 // src/tab-provider.tsx
-import { createContext as createContext3, useContext as useContext3, useMemo as useMemo3 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var TabIdContext = createContext3(void 0);
+import { createContext as createContext4, useContext as useContext4, useMemo as useMemo3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var TabIdContext = createContext4(void 0);
 var TabIdProvider = ({ children, value }) => {
-  return /* @__PURE__ */ jsx3(TabIdContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx4(TabIdContext.Provider, { value, children });
 };
 var useTabId = () => {
-  const tabId = useContext3(TabIdContext);
+  const tabId = useContext4(TabIdContext);
   if (!tabId) {
     throw new Error("useTabId must be used within a TabProvider");
   }
@@ -410,6 +500,7 @@ var useTab = () => {
       selectedKey: tabData.selectedKey,
       selectedListItem: tabData.selectedListItem,
       search: tabData.search,
+      pinned: tabData.pinned,
       setSelectedKey: (key) => setSelectedKey(tabId, key),
       setSelectedListItem: (item) => setSelectedListItem(tabId, item),
       setSearch: (search) => setSearch(tabId, search),
@@ -3014,9 +3105,9 @@ var cva = (base, config) => {
 };
 
 // src/components/ui/toast.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var ToastProvider = ToastPrimitives.Provider;
-var ToastViewport = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+var ToastViewport = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
   ToastPrimitives.Viewport,
   {
     ref,
@@ -3029,12 +3120,12 @@ var ToastViewport = React2.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 var toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border border-zinc-200 p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full dark:border-zinc-800",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border border-zinc-200 p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
-        default: "border bg-white text-zinc-950 dark:bg-zinc-950 dark:text-zinc-50",
-        destructive: "destructive group border-red-500 bg-red-500 text-zinc-50 dark:border-red-900 dark:bg-red-900 dark:text-zinc-50"
+        default: "border bg-white text-zinc-950",
+        destructive: "destructive group border-red-500 bg-red-500 text-zinc-50"
       }
     },
     defaultVariants: {
@@ -3043,7 +3134,7 @@ var toastVariants = cva(
   }
 );
 var Toast = React2.forwardRef(({ className, variant, ...props }, ref) => {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     ToastPrimitives.Root,
     {
       ref,
@@ -3053,33 +3144,33 @@ var Toast = React2.forwardRef(({ className, variant, ...props }, ref) => {
   );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
-var ToastAction = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+var ToastAction = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
   ToastPrimitives.Action,
   {
     ref,
     className: cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-zinc-100 focus:outline-none focus:ring-1 focus:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-zinc-100/40 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-zinc-50 group-[.destructive]:focus:ring-red-500 dark:border-neutral-800 dark:hover:bg-neutral-800 dark:focus:ring-neutral-300 dark:group-[.destructive]:border-neutral-800/40 dark:group-[.destructive]:hover:border-red-900/30 dark:group-[.destructive]:hover:bg-red-900 dark:group-[.destructive]:hover:text-neutral-50 dark:group-[.destructive]:focus:ring-red-900",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-zinc-100 focus:outline-none focus:ring-1 focus:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-zinc-100/40 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-zinc-50 group-[.destructive]:focus:ring-red-500",
       className
     ),
     ...props
   }
 ));
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-var ToastClose = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+var ToastClose = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
   ToastPrimitives.Close,
   {
     ref,
     className: cn(
-      "absolute right-1 top-1 rounded-md p-1 text-neutral-950/50 opacity-0 transition-opacity hover:text-neutral-950 focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:text-neutral-50/50 dark:hover:text-neutral-50",
+      "absolute right-1 top-1 rounded-md p-1 text-zinc-950/50 opacity-0 transition-opacity hover:text-zinc-950 focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className
     ),
     "toast-close": "",
     ...props,
-    children: /* @__PURE__ */ jsx4(Cross2Icon, { className: "size-4" })
+    children: /* @__PURE__ */ jsx5(Cross2Icon, { className: "size-4" })
   }
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-var ToastTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+var ToastTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
   ToastPrimitives.Title,
   {
     ref,
@@ -3088,7 +3179,7 @@ var ToastTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
-var ToastDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+var ToastDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
   ToastPrimitives.Description,
   {
     ref,
@@ -3099,24 +3190,24 @@ var ToastDescription = React2.forwardRef(({ className, ...props }, ref) => /* @_
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 // src/components/ui/toaster.tsx
-import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
 function Toaster() {
   const { toasts } = useToast();
-  return /* @__PURE__ */ jsx5(Portal, { container: portalRoot, children: /* @__PURE__ */ jsxs(ToastProvider, { children: [
+  return /* @__PURE__ */ jsx6(Portal, { container: portalRoot, children: /* @__PURE__ */ jsxs(ToastProvider, { children: [
     toasts.map(({ id, title, description, action, ...props }) => /* @__PURE__ */ jsxs(Toast, { ...props, children: [
       /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
-        title && /* @__PURE__ */ jsx5(ToastTitle, { children: title }),
-        description && /* @__PURE__ */ jsx5(ToastDescription, { children: description })
+        title && /* @__PURE__ */ jsx6(ToastTitle, { children: title }),
+        description && /* @__PURE__ */ jsx6(ToastDescription, { children: description })
       ] }),
       action,
-      /* @__PURE__ */ jsx5(ToastClose, {})
+      /* @__PURE__ */ jsx6(ToastClose, {})
     ] }, id)),
-    /* @__PURE__ */ jsx5(ToastViewport, {})
+    /* @__PURE__ */ jsx6(ToastViewport, {})
   ] }) });
 }
 
 // src/components/databrowser/hooks/use-keys.tsx
-import { createContext as createContext4, useContext as useContext4, useMemo as useMemo4 } from "react";
+import { createContext as createContext5, useContext as useContext5, useMemo as useMemo4 } from "react";
 import { useInfiniteQuery } from "@tanstack/react-query";
 
 // src/components/databrowser/hooks/use-fetch-key-type.ts
@@ -3134,8 +3225,8 @@ var useFetchKeyType = (key) => {
 };
 
 // src/components/databrowser/hooks/use-keys.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var KeysContext = createContext4(void 0);
+import { jsx as jsx7 } from "react/jsx-runtime";
+var KeysContext = createContext5(void 0);
 var FETCH_KEYS_QUERY_KEY = "use-fetch-keys";
 var SCAN_COUNTS = [100, 300, 500];
 var KeysProvider = ({ children }) => {
@@ -3208,7 +3299,7 @@ var KeysProvider = ({ children }) => {
     }
     return dedupedKeys;
   }, [query.data]);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     KeysContext.Provider,
     {
       value: {
@@ -3220,7 +3311,7 @@ var KeysProvider = ({ children }) => {
   );
 };
 var useKeys = () => {
-  const context = useContext4(KeysContext);
+  const context = useContext5(KeysContext);
   if (!context) {
     throw new Error("useKeys must be used within a KeysProvider");
   }
@@ -3234,24 +3325,24 @@ var useKeyType = (key) => {
 
 // src/components/databrowser/components/display/display-list.tsx
 import { useMemo as useMemo7 } from "react";
-import { IconTrash } from "@tabler/icons-react";
+import { IconTrash as IconTrash2 } from "@tabler/icons-react";
 
 // src/components/ui/button.tsx
 import * as React3 from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300",
+  "inline-flex items-center justify-center rounded-md text-sm ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "bg-white text-black border shadow-sm border-zinc-300 hover:bg-[#FFFFFF]/70 dark:bg-black dark:text-[#FFFFFF] dark:hover:bg-black/10",
-        destructive: "bg-red-500 text-zinc-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
-        outline: "border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-neutral-50",
-        primary: "bg-emerald-500 text-white shadow-sm hover:bg-emerald-600 dark:bg-emerald-500 dark:text-white dark:hover:bg-emerald-600",
-        secondary: "bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
-        ghost: "hover:bg-[#0000000A] dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
-        link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50"
+        default: "bg-white text-black border shadow-sm border-zinc-300 hover:bg-white/70",
+        destructive: "bg-red-500 text-zinc-50 hover:bg-red-500/90",
+        outline: "border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900",
+        primary: "bg-emerald-500 text-white shadow-sm hover:bg-emerald-600",
+        secondary: "bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80",
+        ghost: "hover:bg-black/10",
+        link: "text-zinc-900 underline-offset-4 hover:underline"
       },
       size: {
         default: "h-8 px-4 py-2",
@@ -3271,7 +3362,7 @@ var buttonVariants = cva(
 var Button = React3.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx7(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+    return /* @__PURE__ */ jsx8(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
   }
 );
 Button.displayName = "Button";
@@ -3283,19 +3374,13 @@ import { useMutation } from "@tanstack/react-query";
 import { useQuery as useQuery2 } from "@tanstack/react-query";
 
 // src/components/ui/skeleton.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx8(
-    "div",
-    {
-      className: cn("animate-pulse rounded-md bg-zinc-900/10 dark:bg-zinc-50/10", className),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx9("div", { className: cn("animate-pulse rounded-md bg-zinc-900/10", className), ...props });
 }
 
 // src/components/databrowser/components/sidebar/db-size.tsx
-import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 var FETCH_DB_SIZE_QUERY_KEY = "fetch-db-size";
 var DisplayDbSize = () => {
   const { redis } = useRedis();
@@ -3306,7 +3391,7 @@ var DisplayDbSize = () => {
     }
   });
   if (keyCount === void 0) {
-    return /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-center gap-1", children: /* @__PURE__ */ jsx9(Skeleton, { className: "h-5 w-10 rounded" }) });
+    return /* @__PURE__ */ jsx10("div", { className: "flex items-center justify-center gap-1", children: /* @__PURE__ */ jsx10(Skeleton, { className: "h-5 w-10 rounded" }) });
   }
   return /* @__PURE__ */ jsxs2("div", { className: "", children: [
     formatNumber(keyCount),
@@ -3334,8 +3419,7 @@ var useAddKey = () => {
         }
         case "hash": {
           await redis.hset(key, {
-            field: "field",
-            value: "value"
+            field: "value"
           });
           break;
         }
@@ -3719,7 +3803,7 @@ var useFetchKeySize = (dataKey) => {
 };
 
 // src/components/databrowser/components/display/header-badges.tsx
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var LengthBadge = ({
   dataKey,
   type,
@@ -3727,18 +3811,18 @@ var LengthBadge = ({
 }) => {
   const { data, isLoading } = useFetchKeyLength({ dataKey, type });
   const length = content?.length ?? data;
-  return /* @__PURE__ */ jsx10(Badge, { label: "Length:", children: isLoading ? /* @__PURE__ */ jsx10(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : length });
+  return /* @__PURE__ */ jsx11(Badge, { label: "Length:", children: isLoading ? /* @__PURE__ */ jsx11(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : length });
 };
 var SizeBadge = ({ dataKey }) => {
   const { data: size } = useFetchKeySize(dataKey);
-  return /* @__PURE__ */ jsx10(Badge, { label: "Size:", children: size === void 0 || size === null ? /* @__PURE__ */ jsx10(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : bytes(size, {
+  return /* @__PURE__ */ jsx11(Badge, { label: "Size:", children: size === void 0 || size === null ? /* @__PURE__ */ jsx11(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : bytes(size, {
     unitSeparator: " "
   }) });
 };
 var HeaderTTLBadge = ({ dataKey }) => {
   const { data: expireAt } = useFetchTTL(dataKey);
   const { mutate: setTTL, isPending } = useSetTTL();
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     TTLBadge,
     {
       expireAt,
@@ -3748,8 +3832,8 @@ var HeaderTTLBadge = ({ dataKey }) => {
   );
 };
 var Badge = ({ children, label }) => /* @__PURE__ */ jsxs3("div", { className: "flex h-6 items-center gap-0.5 rounded-md bg-white px-2 text-xs text-zinc-700", children: [
-  /* @__PURE__ */ jsx10("span", { className: "text-zinc-500", children: label }),
-  /* @__PURE__ */ jsx10("span", { className: "font-medium", children })
+  /* @__PURE__ */ jsx11("span", { className: "text-zinc-500", children: label }),
+  /* @__PURE__ */ jsx11("span", { className: "font-medium", children })
 ] });
 
 // src/components/databrowser/components/display/ttl-popover.tsx
@@ -3758,15 +3842,15 @@ import { Controller, useForm } from "react-hook-form";
 
 // src/components/ui/input.tsx
 import * as React4 from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var Input = React4.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "input",
       {
         type,
         className: cn(
-          "flex h-8 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-8 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white  file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
         ref,
@@ -3780,17 +3864,17 @@ Input.displayName = "Input";
 // src/components/ui/popover.tsx
 import * as React5 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx12(PopoverPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx12(
+var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx13(PopoverPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx13(
   PopoverPrimitive.Content,
   {
     ref,
     align,
     sideOffset,
     className: cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none dark:border-zinc-800 mt-0.5 dark:bg-zinc-950 dark:text-zinc-50",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none mt-0.5",
       className
     ),
     ...props
@@ -3801,7 +3885,7 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 // src/components/ui/select.tsx
 import * as React6 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
@@ -3810,13 +3894,13 @@ var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) =
   {
     ref,
     className: cn(
-      "relative flex h-8 w-full items-center justify-between rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-zinc-500 focus:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-400 dark:focus:ring-zinc-300",
+      "relative flex h-8 w-full items-center justify-between rounded-md border border-zinc-200 bg-white px-3 py-2  text-sm ring-offset-white placeholder:text-zinc-500 focus:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx13(SelectPrimitive.Icon, { asChild: true, className: "absolute right-2", children: /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(SelectPrimitive.Icon, { asChild: true, className: "absolute right-2", children: /* @__PURE__ */ jsx14(
         "svg",
         {
           width: "16",
@@ -3824,13 +3908,13 @@ var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) =
           viewBox: "0 0 16 16",
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ jsx13(
+          children: /* @__PURE__ */ jsx14(
             "path",
             {
               d: "M4 6L8 10L12 6",
-              stroke: "black",
+              stroke: "currentColor",
               strokeOpacity: "0.4",
-              strokeWidth: "1.4",
+              strokeWidth: "1.2",
               strokeLinecap: "round",
               strokeLinejoin: "round"
             }
@@ -3841,18 +3925,18 @@ var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) =
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = React6.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx13(SelectPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx13(
+var SelectContent = React6.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx14(SelectPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx14(
   SelectPrimitive.Content,
   {
     ref,
     className: cn(
-      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-neutral-50",
+      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
     position,
     ...props,
-    children: /* @__PURE__ */ jsx13(
+    children: /* @__PURE__ */ jsx14(
       SelectPrimitive.Viewport,
       {
         className: cn(
@@ -3865,7 +3949,7 @@ var SelectContent = React6.forwardRef(({ className, children, position = "popper
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+var SelectLabel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
   SelectPrimitive.Label,
   {
     ref,
@@ -3879,12 +3963,12 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx13("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx13(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx13(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx14(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx14(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx14(
         "svg",
         {
           width: "15",
@@ -3893,7 +3977,7 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           className: "h-4 w-4",
-          children: /* @__PURE__ */ jsx13(
+          children: /* @__PURE__ */ jsx14(
             "path",
             {
               d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
@@ -3904,32 +3988,32 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
           )
         }
       ) }) }) }),
-      /* @__PURE__ */ jsx13(SelectPrimitive.ItemText, { children })
+      /* @__PURE__ */ jsx14(SelectPrimitive.ItemText, { children })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+var SelectSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800", className),
+    className: cn("-mx-1 my-1 h-px bg-zinc-100", className),
     ...props
   }
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/ui/spinner.tsx
-import { Fragment, jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
 var Spinner = ({
   isLoading,
   className,
   isLoadingText,
   children
 }) => {
-  return /* @__PURE__ */ jsx14("div", { className: className ?? "flex items-center", children: isLoading ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+  return /* @__PURE__ */ jsx15("div", { className: className ?? "flex items-center", children: isLoading ? /* @__PURE__ */ jsxs5(Fragment, { children: [
     isLoadingText,
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -3938,18 +4022,18 @@ var Spinner = ({
         viewBox: "0 0 24 24",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: "2",
+        strokeWidth: "1.2",
         strokeLinecap: "round",
         strokeLinejoin: "round",
         className: cn("h-4 w-4 animate-spin", isLoadingText ? "ml-2" : ""),
-        children: /* @__PURE__ */ jsx14("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+        children: /* @__PURE__ */ jsx15("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
       }
     )
   ] }) : children });
 };
 
 // src/components/databrowser/components/display/ttl-popover.tsx
-import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
 var timeUnits = [
   { label: "Seconds", value: 1 },
   { label: "Minutes", value: 60 },
@@ -3991,8 +4075,8 @@ function TTLPopover({
         setOpen(isOpen);
       },
       children: [
-        /* @__PURE__ */ jsx15(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx15("button", { children }) }),
-        /* @__PURE__ */ jsx15(PopoverContent, { className: "w-[300px]", align: "end", children: /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsx16(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx16("button", { children }) }),
+        /* @__PURE__ */ jsx16(PopoverContent, { className: "w-[300px]", align: "end", children: /* @__PURE__ */ jsxs6(
           "form",
           {
             className: "space-y-4",
@@ -4001,10 +4085,10 @@ function TTLPopover({
               e.stopPropagation();
             },
             children: [
-              /* @__PURE__ */ jsx15("h4", { className: "font-medium leading-none", children: "Expiration" }),
+              /* @__PURE__ */ jsx16("h4", { className: "font-medium leading-none", children: "Expiration" }),
               /* @__PURE__ */ jsxs6("div", { children: [
                 /* @__PURE__ */ jsxs6("div", { className: "flex items-center", children: [
-                  /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsx16(
                     Controller,
                     {
                       rules: {
@@ -4013,26 +4097,26 @@ function TTLPopover({
                       },
                       control,
                       name: "value",
-                      render: ({ field }) => /* @__PURE__ */ jsx15(Input, { min: "-1", ...field, className: "grow rounded-r-none" })
+                      render: ({ field }) => /* @__PURE__ */ jsx16(Input, { min: "-1", ...field, className: "grow rounded-r-none" })
                     }
                   ),
-                  /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsx16(
                     Controller,
                     {
                       control,
                       name: "type",
                       render: ({ field }) => /* @__PURE__ */ jsxs6(Select, { value: field.value, onValueChange: field.onChange, children: [
-                        /* @__PURE__ */ jsx15(SelectTrigger, { className: "w-auto rounded-l-none border-l-0 pr-8", children: /* @__PURE__ */ jsx15(SelectValue, {}) }),
-                        /* @__PURE__ */ jsx15(SelectContent, { children: timeUnits.map((unit) => /* @__PURE__ */ jsx15(SelectItem, { value: unit.label, children: unit.label }, unit.label)) })
+                        /* @__PURE__ */ jsx16(SelectTrigger, { className: "w-auto rounded-l-none border-l-0 pr-8", children: /* @__PURE__ */ jsx16(SelectValue, {}) }),
+                        /* @__PURE__ */ jsx16(SelectContent, { children: timeUnits.map((unit) => /* @__PURE__ */ jsx16(SelectItem, { value: unit.label, children: unit.label }, unit.label)) })
                       ] })
                     }
                   )
                 ] }),
-                formState.errors.value && /* @__PURE__ */ jsx15("p", { className: "mt-2 text-xs text-red-500", children: formState.errors.value.message }),
-                /* @__PURE__ */ jsx15("p", { className: "mt-2 text-xs text-zinc-500", children: "TTL sets a timer to automatically delete keys after a defined period." })
+                formState.errors.value && /* @__PURE__ */ jsx16("p", { className: "mt-2 text-xs text-red-500", children: formState.errors.value.message }),
+                /* @__PURE__ */ jsx16("p", { className: "mt-2 text-xs text-zinc-500", children: "TTL sets a timer to automatically delete keys after a defined period." })
               ] }),
               /* @__PURE__ */ jsxs6("div", { className: "flex justify-between", children: [
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx16(
                   Button,
                   {
                     type: "button",
@@ -4043,8 +4127,8 @@ function TTLPopover({
                   }
                 ),
                 /* @__PURE__ */ jsxs6("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ jsx15(Button, { variant: "outline", onClick: () => setOpen(false), type: "button", children: "Cancel" }),
-                  /* @__PURE__ */ jsx15(Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ jsx15(Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" }) })
+                  /* @__PURE__ */ jsx16(Button, { variant: "outline", onClick: () => setOpen(false), type: "button", children: "Cancel" }),
+                  /* @__PURE__ */ jsx16(Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ jsx16(Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" }) })
                 ] })
               ] })
             ]
@@ -4056,7 +4140,7 @@ function TTLPopover({
 }
 
 // src/components/databrowser/components/display/ttl-badge.tsx
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 var TTL_INFINITE = -1;
 var TTL_NOT_FOUND = -2;
 var calculateTTL = (expireAt) => {
@@ -4078,9 +4162,9 @@ var TTLBadge = ({
     }, 1e3);
     return () => clearInterval(interval);
   }, [expireAt]);
-  return /* @__PURE__ */ jsx16(Badge, { label, children: ttl === void 0 ? /* @__PURE__ */ jsx16(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : /* @__PURE__ */ jsx16(TTLPopover, { ttl, setTTL, isPending, children: /* @__PURE__ */ jsxs7("div", { className: "flex gap-[2px]", children: [
+  return /* @__PURE__ */ jsx17(Badge, { label, children: ttl === void 0 ? /* @__PURE__ */ jsx17(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : /* @__PURE__ */ jsx17(TTLPopover, { ttl, setTTL, isPending, children: /* @__PURE__ */ jsxs7("div", { className: "flex gap-[2px]", children: [
     ttl === TTL_INFINITE ? "Forever" : formatTime(ttl),
-    /* @__PURE__ */ jsx16(IconChevronDown, { className: "mt-[1px] text-zinc-400", size: 12 })
+    /* @__PURE__ */ jsx17(IconChevronDown, { className: "mt-[1px] text-zinc-400", size: 12 })
   ] }) }) });
 };
 
@@ -4150,13 +4234,14 @@ var useSetTTL = () => {
 
 // src/components/databrowser/components/item-context-menu.tsx
 import { useState as useState5 } from "react";
+import { IconCopy, IconExternalLink, IconTrash } from "@tabler/icons-react";
 import { ContextMenuSeparator as ContextMenuSeparator2 } from "@radix-ui/react-context-menu";
 
 // src/components/ui/context-menu.tsx
 import * as React7 from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var ContextMenu = ContextMenuPrimitive.Root;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuSubTrigger = React7.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs8(
@@ -4164,48 +4249,48 @@ var ContextMenuSubTrigger = React7.forwardRef(({ className, inset, children, ...
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-900 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-50",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-900",
       inset && "pl-8",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx17(ChevronRightIcon, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx18(ChevronRightIcon, { className: "ml-auto h-4 w-4" })
     ]
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+var ContextMenuSubContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
   ContextMenuPrimitive.SubContent,
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
   }
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(ContextMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx17(
+var ContextMenuContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(ContextMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx18(
   ContextMenuPrimitive.Content,
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
   }
 ) }));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx17(
+var ContextMenuItem = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx18(
   ContextMenuPrimitive.Item,
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     ),
@@ -4218,13 +4303,13 @@ var ContextMenuCheckboxItem = React7.forwardRef(({ className, children, checked,
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx17("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx17(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx18("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx18(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx18(CheckIcon, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
@@ -4235,66 +4320,53 @@ var ContextMenuRadioItem = React7.forwardRef(({ className, children, ...props },
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx17("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx17(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      /* @__PURE__ */ jsx18("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx18(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx18(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
       children
     ]
   }
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx17(
+var ContextMenuLabel = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx18(
   ContextMenuPrimitive.Label,
   {
     ref,
-    className: cn(
-      "px-2 py-1.5 text-sm font-semibold text-neutral-950 dark:text-neutral-50",
-      inset && "pl-8",
-      className
-    ),
+    className: cn("px-2 py-1.5 text-sm font-semibold text-zinc-950", inset && "pl-8", className),
     ...props
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+var ContextMenuSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
   ContextMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-neutral-200 dark:bg-neutral-800", className),
+    className: cn("-mx-1 my-1 h-px bg-zinc-200", className),
     ...props
   }
 ));
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 var ContextMenuShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx17(
-    "span",
-    {
-      className: cn(
-        "ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400",
-        className
-      ),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx18("span", { className: cn("ml-auto text-xs tracking-widest text-zinc-500", className), ...props });
 };
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 // src/components/ui/alert-dialog.tsx
 import * as React8 from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-var AlertDialogPortal = ({ ...props }) => /* @__PURE__ */ jsx18(AlertDialogPrimitive.Portal, { container: portalRoot, ...props });
+var AlertDialogPortal = ({ ...props }) => /* @__PURE__ */ jsx19(AlertDialogPrimitive.Portal, { container: portalRoot, ...props });
 AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
-var AlertDialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var AlertDialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   AlertDialogPrimitive.Overlay,
   {
     className: cn(
-      "fixed inset-0 z-50 bg-white/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-zinc-950/80",
+      "fixed inset-0 z-50 bg-white/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props,
@@ -4303,13 +4375,13 @@ var AlertDialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /*
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 var AlertDialogContent = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs9(AlertDialogPortal, { children: [
-  /* @__PURE__ */ jsx18(AlertDialogOverlay, {}),
-  /* @__PURE__ */ jsx18(
+  /* @__PURE__ */ jsx19(AlertDialogOverlay, {}),
+  /* @__PURE__ */ jsx19(
     AlertDialogPrimitive.Content,
     {
       ref,
       className: cn(
-        "antialiased data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-zinc-800 dark:bg-zinc-950 sm:rounded-lg md:w-full",
+        "antialiased data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0  data-[state=open]:slide-in-from-top-[48%]sm:rounded-lg fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 md:w-full",
         className
       ),
       ...props
@@ -4317,9 +4389,9 @@ var AlertDialogContent = React8.forwardRef(({ className, ...props }, ref) => /*
   )
 ] }));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx18("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx19("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
 AlertDialogHeader.displayName = "AlertDialogHeader";
-var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx18(
+var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx19(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -4327,7 +4399,7 @@ var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx18(
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var AlertDialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -4336,18 +4408,18 @@ var AlertDialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var AlertDialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   AlertDialogPrimitive.Description,
   {
     ref,
-    className: cn("text-sm text-zinc-500 dark:text-zinc-400", className),
+    className: cn("text-sm text-zinc-500", className),
     ...props
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+var AlertDialogAction = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var AlertDialogCancel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -4358,7 +4430,7 @@ var AlertDialogCancel = React8.forwardRef(({ className, ...props }, ref) => /* @
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 // src/components/databrowser/components/display/delete-alert-dialog.tsx
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function DeleteAlertDialog({
   children,
   onDeleteConfirm,
@@ -4367,24 +4439,24 @@ function DeleteAlertDialog({
   deletionType
 }) {
   return /* @__PURE__ */ jsxs10(AlertDialog, { open, onOpenChange, children: [
-    children && /* @__PURE__ */ jsx19(AlertDialogTrigger, { asChild: true, children }),
+    children && /* @__PURE__ */ jsx20(AlertDialogTrigger, { asChild: true, children }),
     /* @__PURE__ */ jsxs10(AlertDialogContent, { children: [
       /* @__PURE__ */ jsxs10(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx19(AlertDialogTitle, { children: deletionType === "item" ? "Delete Item" : "Delete Key" }),
+        /* @__PURE__ */ jsx20(AlertDialogTitle, { children: deletionType === "item" ? "Delete Item" : "Delete Key" }),
         /* @__PURE__ */ jsxs10(AlertDialogDescription, { className: "mt-5", children: [
           "Are you sure you want to delete this ",
           deletionType,
           "?",
-          /* @__PURE__ */ jsx19("br", {}),
+          /* @__PURE__ */ jsx20("br", {}),
           "This action cannot be undone."
         ] })
       ] }),
       /* @__PURE__ */ jsxs10(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx19(AlertDialogCancel, { type: "button", children: "Cancel" }),
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(AlertDialogCancel, { type: "button", children: "Cancel" }),
+        /* @__PURE__ */ jsx20(
           AlertDialogAction,
           {
-            className: "bg-red-500 text-gray-50 hover:bg-red-600",
+            className: "bg-red-500 text-zinc-50 hover:bg-red-600",
             onClick: onDeleteConfirm,
             children: "Yes, Delete"
           }
@@ -4395,7 +4467,7 @@ function DeleteAlertDialog({
 }
 
 // src/components/databrowser/components/item-context-menu.tsx
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 var ItemContextMenu = ({
   children,
   dataKey,
@@ -4406,7 +4478,7 @@ var ItemContextMenu = ({
   const [data, setData] = useState5();
   const { addTab, setSelectedKey, selectTab, setSelectedListItem } = useDatabrowserStore();
   return /* @__PURE__ */ jsxs11(Fragment2, { children: [
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21(
       DeleteAlertDialog,
       {
         deletionType: "item",
@@ -4428,7 +4500,7 @@ var ItemContextMenu = ({
       }
     ),
     /* @__PURE__ */ jsxs11(ContextMenu, { modal: false, children: [
-      /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsx21(
         ContextMenuTrigger,
         {
           asChild: true,
@@ -4448,7 +4520,7 @@ var ItemContextMenu = ({
         }
       ),
       /* @__PURE__ */ jsxs11(ContextMenuContent, { children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsxs11(
           ContextMenuItem,
           {
             onClick: () => {
@@ -4458,10 +4530,14 @@ var ItemContextMenu = ({
                 description: "Key copied to clipboard"
               });
             },
-            children: "Copy key"
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx21(IconCopy, { size: 16 }),
+              "Copy key"
+            ]
           }
         ),
-        data?.value && /* @__PURE__ */ jsx20(
+        data?.value && /* @__PURE__ */ jsxs11(
           ContextMenuItem,
           {
             onClick: () => {
@@ -4470,10 +4546,14 @@ var ItemContextMenu = ({
                 description: "Value copied to clipboard"
               });
             },
-            children: "Copy value"
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx21(IconCopy, { size: 16 }),
+              "Copy value"
+            ]
           }
         ),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsxs11(
           ContextMenuItem,
           {
             onClick: () => {
@@ -4485,11 +4565,26 @@ var ItemContextMenu = ({
                 key: data.key
               });
             },
-            children: "Open in new tab"
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx21(IconExternalLink, { size: 16 }),
+              "Open in new tab"
+            ]
           }
         ),
-        /* @__PURE__ */ jsx20(ContextMenuSeparator2, {}),
-        /* @__PURE__ */ jsx20(ContextMenuItem, { disabled: type === "stream", onClick: () => setAlertOpen(true), children: "Delete item" })
+        /* @__PURE__ */ jsx21(ContextMenuSeparator2, {}),
+        /* @__PURE__ */ jsxs11(
+          ContextMenuItem,
+          {
+            disabled: type === "stream",
+            onClick: () => setAlertOpen(true),
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx21(IconTrash, { size: 16 }),
+              "Delete item"
+            ]
+          }
+        )
       ] })
     ] })
   ] });
@@ -4502,7 +4597,7 @@ import { useEffect as useEffect6, useRef } from "react";
 // src/components/ui/scroll-area.tsx
 import * as React9 from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 var ScrollArea = React9.forwardRef(({ className, children, onScroll, disableRoundedInherit = false, ...props }, ref) => /* @__PURE__ */ jsxs12(
   ScrollAreaPrimitive.Root,
   {
@@ -4510,7 +4605,7 @@ var ScrollArea = React9.forwardRef(({ className, children, onScroll, disableRoun
     className: cn("relative overflow-hidden", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         ScrollAreaPrimitive.Viewport,
         {
           onScroll,
@@ -4518,23 +4613,23 @@ var ScrollArea = React9.forwardRef(({ className, children, onScroll, disableRoun
           children
         }
       ),
-      /* @__PURE__ */ jsx21(ScrollBar, {}),
-      /* @__PURE__ */ jsx21(ScrollAreaPrimitive.Corner, {})
+      /* @__PURE__ */ jsx22(ScrollBar, {}),
+      /* @__PURE__ */ jsx22(ScrollAreaPrimitive.Corner, {})
     ]
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
+var ScrollBar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
     orientation: "vertical",
     className: cn("flex h-full w-2 touch-none select-none transition-colors", className),
     ...props,
-    children: /* @__PURE__ */ jsx21(
+    children: /* @__PURE__ */ jsx22(
       ScrollAreaPrimitive.ScrollAreaThumb,
       {
-        className: cn("relative flex-1 rounded-full bg-neutral-200/70 dark:bg-neutral-800")
+        className: cn("relative flex-1 rounded-full bg-zinc-200/70")
       }
     )
   }
@@ -4542,7 +4637,7 @@ var ScrollBar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/components/databrowser/components/sidebar/infinite-scroll.tsx
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 var InfiniteScroll = ({
   query,
   children,
@@ -4574,7 +4669,7 @@ var InfiniteScroll = ({
     const timer = setTimeout(checkAndFetchMore, 100);
     return () => clearTimeout(timer);
   }, [active, query.data]);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     ScrollArea,
     {
       type: "always",
@@ -4587,7 +4682,7 @@ var InfiniteScroll = ({
       ref: scrollRef,
       children: /* @__PURE__ */ jsxs13("div", { ref: contentRef, children: [
         children,
-        /* @__PURE__ */ jsx22("div", { className: "flex h-[100px] justify-center py-2 text-zinc-300", children: query.isFetching && /* @__PURE__ */ jsx22(IconLoader2, { className: "animate-spin", size: 16 }) })
+        /* @__PURE__ */ jsx23("div", { className: "flex h-[100px] justify-center py-2 text-zinc-300", children: query.isFetching && /* @__PURE__ */ jsx23(IconLoader2, { className: "animate-spin", size: 16 }) })
       ] })
     }
   );
@@ -4617,15 +4712,15 @@ import {
   IconList,
   IconQuote
 } from "@tabler/icons-react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var iconsMap = {
-  string: /* @__PURE__ */ jsx23(IconQuote, { size: 15, stroke: 1.3 }),
-  set: /* @__PURE__ */ jsx23(IconLayersIntersect, { size: 15, stroke: 1.3 }),
-  hash: /* @__PURE__ */ jsx23(IconHash, { size: 15, stroke: 1.3 }),
-  json: /* @__PURE__ */ jsx23(IconCodeDots, { size: 15, stroke: 1.3 }),
-  zset: /* @__PURE__ */ jsx23(IconArrowsSort, { size: 15, stroke: 1.3 }),
-  list: /* @__PURE__ */ jsx23(IconList, { size: 15, stroke: 1.3 }),
-  stream: /* @__PURE__ */ jsx23(IconList, { size: 15, stroke: 1.3 })
+  string: /* @__PURE__ */ jsx24(IconQuote, { size: 15, stroke: 1.2 }),
+  set: /* @__PURE__ */ jsx24(IconLayersIntersect, { size: 15, stroke: 1.2 }),
+  hash: /* @__PURE__ */ jsx24(IconHash, { size: 15, stroke: 1.2 }),
+  json: /* @__PURE__ */ jsx24(IconCodeDots, { size: 15, stroke: 1.2 }),
+  zset: /* @__PURE__ */ jsx24(IconArrowsSort, { size: 15, stroke: 1.2 }),
+  list: /* @__PURE__ */ jsx24(IconList, { size: 15, stroke: 1.2 }),
+  stream: /* @__PURE__ */ jsx24(IconList, { size: 15, stroke: 1.2 })
 };
 var tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {
   variants: {
@@ -4649,7 +4744,7 @@ var tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-cent
   }
 });
 function TypeTag({ className, variant, type }) {
-  return /* @__PURE__ */ jsx23("span", { className: cn(tagVariants({ variant, type, className })), children: type === "icon" ? iconsMap[variant] : DATA_TYPE_NAMES[variant] });
+  return /* @__PURE__ */ jsx24("span", { className: cn(tagVariants({ variant, type, className })), children: type === "icon" ? iconsMap[variant] : DATA_TYPE_NAMES[variant] });
 }
 
 // src/components/databrowser/components/display/key-actions.tsx
@@ -4659,7 +4754,7 @@ import { IconDotsVertical } from "@tabler/icons-react";
 import * as React10 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon as CheckIcon2, ChevronRightIcon as ChevronRightIcon2, DotFilledIcon as DotFilledIcon2 } from "@radix-ui/react-icons";
-import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs14(
@@ -4667,37 +4762,37 @@ var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, .
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 data-[state=open]:bg-neutral-100 dark:focus:bg-neutral-800 dark:data-[state=open]:bg-neutral-800 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "data-[state=open]:bg-zinc-100[&_svg]:pointer-events-none flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx24(ChevronRightIcon2, { className: "ml-auto" })
+      /* @__PURE__ */ jsx25(ChevronRightIcon2, { className: "ml-auto" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
+var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      "z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx24(DropdownMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx24(
+var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx25(DropdownMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx25(
   DropdownMenuPrimitive.Content,
   {
     ref,
     sideOffset,
     className: cn(
-      "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-md",
       "origin-[--radix-dropdown-menu-content-transform-origin] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
@@ -4705,12 +4800,12 @@ var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx24(
+var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx25(
   DropdownMenuPrimitive.Item,
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      "data-[disabled]:opacity-50[&>svg]:size-4 relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none [&>svg]:shrink-0",
       inset && "pl-8",
       className
     ),
@@ -4723,13 +4818,13 @@ var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checke
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx24("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx24(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx24(CheckIcon2, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx25("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx25(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx25(CheckIcon2, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
@@ -4740,18 +4835,18 @@ var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx24("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx24(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx24(DotFilledIcon2, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ jsx25("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx25(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx25(DotFilledIcon2, { className: "h-2 w-2 fill-current" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx24(
+var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx25(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -4760,28 +4855,28 @@ var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
+var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800", className),
+    className: cn("-mx-1 my-1 h-px bg-zinc-100", className),
     ...props
   }
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx24("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
+  return /* @__PURE__ */ jsx25("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/components/databrowser/components/display/key-actions.tsx
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 function KeyActions({ dataKey, content }) {
   const { mutateAsync: deleteKey } = useDeleteKey();
   return /* @__PURE__ */ jsxs15(DropdownMenu, { modal: false, children: [
-    /* @__PURE__ */ jsx25(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(Button, { size: "icon-sm", "aria-label": "Key actions", children: /* @__PURE__ */ jsx25(IconDotsVertical, { className: "size-4 text-zinc-500" }) }) }),
+    /* @__PURE__ */ jsx26(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx26(Button, { size: "icon-sm", "aria-label": "Key actions", children: /* @__PURE__ */ jsx26(IconDotsVertical, { className: "size-4 text-zinc-500" }) }) }),
     /* @__PURE__ */ jsxs15(DropdownMenuContent, { className: "", align: "end", children: [
-      content && /* @__PURE__ */ jsx25(
+      content && /* @__PURE__ */ jsx26(
         DropdownMenuItem,
         {
           onClick: () => {
@@ -4793,7 +4888,7 @@ function KeyActions({ dataKey, content }) {
           children: "Copy content"
         }
       ),
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx26(
         DropdownMenuItem,
         {
           onClick: () => {
@@ -4802,12 +4897,12 @@ function KeyActions({ dataKey, content }) {
           children: "Copy key"
         }
       ),
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx26(
         DeleteAlertDialog,
         {
           deletionType: "key",
           onDeleteConfirm: async () => await deleteKey(dataKey),
-          children: /* @__PURE__ */ jsx25(
+          children: /* @__PURE__ */ jsx26(
             DropdownMenuItem,
             {
               className: "text-red-500 focus:bg-red-500 focus:text-white",
@@ -4822,7 +4917,7 @@ function KeyActions({ dataKey, content }) {
 }
 
 // src/components/databrowser/components/display/display-header.tsx
-import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var DisplayHeader = ({
   dataKey,
   type,
@@ -4834,17 +4929,17 @@ var DisplayHeader = ({
   };
   return /* @__PURE__ */ jsxs16("div", { className: "rounded-lg bg-zinc-100", children: [
     /* @__PURE__ */ jsxs16("div", { className: "flex min-h-10 items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsx26("h2", { className: "grow truncate text-base", children: dataKey.trim() === "" ? /* @__PURE__ */ jsx26("span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ jsx26("span", { className: "font-semibold", children: dataKey }) }),
+      /* @__PURE__ */ jsx27("h2", { className: "grow truncate text-base", children: dataKey.trim() === "" ? /* @__PURE__ */ jsx27("span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ jsx27("span", { className: "font-semibold", children: dataKey }) }),
       /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1", children: [
-        type !== "string" && type !== "json" && /* @__PURE__ */ jsx26(Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ jsx26(IconPlus, { className: "size-4 text-zinc-500" }) }),
-        /* @__PURE__ */ jsx26(KeyActions, { dataKey, content })
+        type !== "string" && type !== "json" && /* @__PURE__ */ jsx27(Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ jsx27(IconPlus, { className: "size-4 text-zinc-500" }) }),
+        /* @__PURE__ */ jsx27(KeyActions, { dataKey, content })
       ] })
     ] }),
     /* @__PURE__ */ jsxs16("div", { className: "flex h-10 flex-wrap items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx26(TypeTag, { variant: type, type: "badge" }),
-      /* @__PURE__ */ jsx26(SizeBadge, { dataKey }),
-      /* @__PURE__ */ jsx26(LengthBadge, { dataKey, type, content }),
-      /* @__PURE__ */ jsx26(HeaderTTLBadge, { dataKey })
+      /* @__PURE__ */ jsx27(TypeTag, { variant: type, type: "badge" }),
+      /* @__PURE__ */ jsx27(SizeBadge, { dataKey }),
+      /* @__PURE__ */ jsx27(LengthBadge, { dataKey, type, content }),
+      /* @__PURE__ */ jsx27(HeaderTTLBadge, { dataKey })
     ] })
   ] });
 };
@@ -4855,16 +4950,16 @@ import { Controller as Controller2, FormProvider, useForm as useForm2, useFormCo
 // src/components/ui/tooltip.tsx
 import * as React11 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx27(TooltipPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx27(
+var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx28(TooltipPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx28(
   TooltipPrimitive.Content,
   {
     ref,
     sideOffset,
     className: cn(
-      "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-zinc-50 dark:text-zinc-900",
+      "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -4875,10 +4970,10 @@ var SimpleTooltip = ({
   content,
   children
 }) => {
-  if (!content) return /* @__PURE__ */ jsx27(Fragment3, { children });
+  if (!content) return /* @__PURE__ */ jsx28(Fragment3, { children });
   return /* @__PURE__ */ jsxs17(Tooltip, { delayDuration: 400, children: [
-    /* @__PURE__ */ jsx27(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx27("div", { children }) }),
-    /* @__PURE__ */ jsx27(TooltipContent, { side: "top", children: content })
+    /* @__PURE__ */ jsx28(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx28("div", { children }) }),
+    /* @__PURE__ */ jsx28(TooltipContent, { side: "top", children: content })
   ] });
 };
 
@@ -4938,12 +5033,12 @@ var useSetHashTTL = () => {
 };
 
 // src/components/databrowser/components/display/hash/hash-field-ttl-badge.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var HashFieldTTLBadge = ({ dataKey, field }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields: [field] });
   const { mutate: setTTL, isPending } = useSetHashTTL();
   const expireAt = data?.[field];
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     TTLBadge,
     {
       label: "Field TTL:",
@@ -4960,7 +5055,7 @@ import { useController } from "react-hook-form";
 
 // src/components/databrowser/components/display/input/content-type-select.tsx
 import { useMemo as useMemo6 } from "react";
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 var ContentTypeSelect = ({
   value,
   onChange,
@@ -4968,10 +5063,10 @@ var ContentTypeSelect = ({
 }) => {
   const isValidJSON = useMemo6(() => checkIsValidJSON(data), [data]);
   return /* @__PURE__ */ jsxs18(Select, { value, onValueChange: onChange, children: [
-    /* @__PURE__ */ jsx29(SelectTrigger, { className: "h-6 w-auto border-none bg-transparent pl-0 pr-6 text-xs text-zinc-500", children: /* @__PURE__ */ jsx29(SelectValue, { placeholder: "Text" }) }),
-    /* @__PURE__ */ jsx29(SelectContent, { children: /* @__PURE__ */ jsxs18(SelectGroup, { children: [
-      /* @__PURE__ */ jsx29(SelectItem, { value: "Text", children: "Text" }),
-      /* @__PURE__ */ jsx29(SelectItem, { disabled: !isValidJSON, value: "JSON", children: "JSON" })
+    /* @__PURE__ */ jsx30(SelectTrigger, { className: "h-6 w-auto border-none bg-transparent pl-0 pr-6 text-xs text-zinc-500", children: /* @__PURE__ */ jsx30(SelectValue, { placeholder: "Text" }) }),
+    /* @__PURE__ */ jsx30(SelectContent, { children: /* @__PURE__ */ jsxs18(SelectGroup, { children: [
+      /* @__PURE__ */ jsx30(SelectItem, { value: "Text", children: "Text" }),
+      /* @__PURE__ */ jsx30(SelectItem, { disabled: !isValidJSON, value: "JSON", children: "JSON" })
     ] }) })
   ] });
 };
@@ -4982,11 +5077,11 @@ import { Editor, useMonaco } from "@monaco-editor/react";
 
 // src/components/databrowser/copy-button.tsx
 import { useState as useState6 } from "react";
-import { IconCheck, IconCopy } from "@tabler/icons-react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { IconCheck, IconCopy as IconCopy2 } from "@tabler/icons-react";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function CopyButton({ value, ...props }) {
   const [copied, setCopied] = useState6(false);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     Button,
     {
       onClick: (e) => {
@@ -5003,7 +5098,7 @@ function CopyButton({ value, ...props }) {
       variant: "secondary",
       size: "icon-sm",
       ...props,
-      children: copied ? /* @__PURE__ */ jsx30(IconCheck, { className: "size-4 text-green-500" }) : /* @__PURE__ */ jsx30(IconCopy, { className: "size-4 text-zinc-500" })
+      children: copied ? /* @__PURE__ */ jsx31(IconCheck, { className: "size-4 text-green-500" }) : /* @__PURE__ */ jsx31(IconCopy2, { className: "size-4 text-zinc-500" })
     }
   );
 }
@@ -5016,7 +5111,7 @@ var handleCopyClick = async (textToCopy) => {
 };
 
 // src/components/databrowser/components/display/input/custom-editor.tsx
-import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 var CustomEditor = ({
   language,
   value,
@@ -5028,15 +5123,17 @@ var CustomEditor = ({
   const { active } = useTab();
   const monaco = useMonaco();
   const editorRef = useRef2();
+  const theme = useDarkMode();
   useEffect7(() => {
     if (!active || !monaco || !editorRef.current) {
       return;
     }
     monaco?.editor.setModelLanguage(editorRef.current.getModel(), language);
   }, [monaco, language, active]);
-  const editor = /* @__PURE__ */ jsx31(
+  const editor = /* @__PURE__ */ jsx32(
     Editor,
     {
+      theme: theme === "dark" ? "vs-dark" : "light",
       loading: void 0,
       onMount: (editor2) => {
         editorRef.current = editor2;
@@ -5068,8 +5165,10 @@ var CustomEditor = ({
         automaticLayout: true,
         scrollBeyondLastLine: false,
         renderLineHighlight: "none",
-        unusualLineTerminators: "auto"
-      }
+        unusualLineTerminators: "auto",
+        padding: { top: 0, bottom: 0 }
+      },
+      className: "[&_.monaco-editor-background]:!bg-transparent [&_.monaco-editor]:!bg-transparent"
     }
   );
   return /* @__PURE__ */ jsxs19(
@@ -5078,8 +5177,8 @@ var CustomEditor = ({
       className: cn("group/editor relative", height === void 0 && "h-full p-2"),
       style: { height },
       children: [
-        isTest ? /* @__PURE__ */ jsx31("input", { "aria-label": "editor", value, onChange: (e) => onChange(e.target.value) }) : editor,
-        showCopyButton && /* @__PURE__ */ jsx31(
+        isTest ? /* @__PURE__ */ jsx32("input", { "aria-label": "editor", value, onChange: (e) => onChange(e.target.value) }) : editor,
+        showCopyButton && /* @__PURE__ */ jsx32(
           CopyButton,
           {
             value,
@@ -5092,7 +5191,7 @@ var CustomEditor = ({
 };
 
 // src/components/databrowser/components/display/input/use-field.tsx
-import { Fragment as Fragment4, jsx as jsx32 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx33 } from "react/jsx-runtime";
 var useField = ({
   name,
   form,
@@ -5132,8 +5231,8 @@ var useField = ({
     }
   };
   return {
-    selector: /* @__PURE__ */ jsx32(ContentTypeSelect, { value: contentType, onChange: handleTypeChange, data: field.value }),
-    editor: /* @__PURE__ */ jsx32(Fragment4, { children: /* @__PURE__ */ jsx32(
+    selector: /* @__PURE__ */ jsx33(ContentTypeSelect, { value: contentType, onChange: handleTypeChange, data: field.value }),
+    editor: /* @__PURE__ */ jsx33(Fragment4, { children: /* @__PURE__ */ jsx33(
       CustomEditor,
       {
         language: contentType === "JSON" ? "json" : "plaintext",
@@ -5157,13 +5256,13 @@ var checkIsValidJSON = (value) => {
 };
 
 // src/components/databrowser/components/display/display-list-edit.tsx
-import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 var ListEditDisplay = ({
   dataKey,
   type,
   item
 }) => {
-  return /* @__PURE__ */ jsx33("div", { className: "grow rounded-md bg-zinc-100", children: /* @__PURE__ */ jsx33(ListEditForm, { item, type, dataKey }, item.key) });
+  return /* @__PURE__ */ jsx34("div", { className: "grow rounded-md bg-zinc-100", children: /* @__PURE__ */ jsx34(ListEditForm, { item, type, dataKey }, item.key) });
 };
 var ListEditForm = ({
   type,
@@ -5202,9 +5301,9 @@ var ListEditForm = ({
     });
     setSelectedListItem(void 0);
   });
-  return /* @__PURE__ */ jsx33(FormProvider, { ...form, children: /* @__PURE__ */ jsxs20("form", { onSubmit, className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ jsx34(FormProvider, { ...form, children: /* @__PURE__ */ jsxs20("form", { onSubmit, className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsxs20("div", { className: "flex grow flex-col gap-2", children: [
-      type !== "list" && /* @__PURE__ */ jsx33(
+      type !== "list" && /* @__PURE__ */ jsx34(
         FormItem,
         {
           readOnly: type === "stream",
@@ -5214,7 +5313,7 @@ var ListEditForm = ({
           data: itemKey
         }
       ),
-      type === "zset" ? /* @__PURE__ */ jsx33(NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ jsx33(
+      type === "zset" ? /* @__PURE__ */ jsx34(NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ jsx34(
         FormItem,
         {
           readOnly: type === "stream",
@@ -5233,9 +5332,9 @@ var ListEditForm = ({
           type === "hash" && itemKey !== "" ? "justify-between" : "justify-end"
         ),
         children: [
-          type === "hash" && itemKey !== "" && /* @__PURE__ */ jsx33(HashFieldTTLBadge, { dataKey, field: itemKey }),
+          type === "hash" && itemKey !== "" && /* @__PURE__ */ jsx34(HashFieldTTLBadge, { dataKey, field: itemKey }),
           /* @__PURE__ */ jsxs20("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx34(
               Button,
               {
                 type: "button",
@@ -5245,17 +5344,17 @@ var ListEditForm = ({
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx34(
               SimpleTooltip,
               {
                 content: type === "stream" && !isNew ? "Streams are not mutable" : void 0,
-                children: /* @__PURE__ */ jsx33(
+                children: /* @__PURE__ */ jsx34(
                   Button,
                   {
                     variant: "primary",
                     type: "submit",
                     disabled: !form.formState.isValid || !form.formState.isDirty || type === "stream" && !isNew,
-                    children: /* @__PURE__ */ jsx33(Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" })
+                    children: /* @__PURE__ */ jsx34(Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" })
                   }
                 )
               }
@@ -5268,12 +5367,12 @@ var ListEditForm = ({
 };
 var NumberFormItem = ({ name, label }) => {
   return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsx33("div", { className: "flex", children: /* @__PURE__ */ jsx33("span", { className: "text-xs font-medium text-zinc-700", children: label }) }),
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx34("div", { className: "flex", children: /* @__PURE__ */ jsx34("span", { className: "text-xs font-medium text-zinc-700", children: label }) }),
+    /* @__PURE__ */ jsx34(
       Controller2,
       {
         name,
-        render: ({ field }) => /* @__PURE__ */ jsx33(
+        render: ({ field }) => /* @__PURE__ */ jsx34(
           "input",
           {
             className: "plain-input rounded-md border border-zinc-300 px-3 py-1 shadow-sm",
@@ -5303,18 +5402,18 @@ var FormItem = ({
   });
   return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1 text-xs", children: [
-      /* @__PURE__ */ jsx33("span", { className: "font-medium text-zinc-700", children: label }),
+      /* @__PURE__ */ jsx34("span", { className: "font-medium text-zinc-700", children: label }),
       " ",
-      /* @__PURE__ */ jsx33("span", { className: "text-zinc-300", children: "/" }),
+      /* @__PURE__ */ jsx34("span", { className: "text-zinc-300", children: "/" }),
       selector
     ] }),
-    /* @__PURE__ */ jsx33("div", { className: "overflow-hidden rounded-md border border-zinc-300 bg-white p-2 shadow-sm", children: editor })
+    /* @__PURE__ */ jsx34("div", { className: "overflow-hidden rounded-md border border-zinc-300 bg-white p-2 shadow-sm", children: editor })
   ] });
 };
 
 // src/components/databrowser/components/display/hash/hash-field-ttl-info.tsx
 import { useEffect as useEffect9, useState as useState8 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var HashFieldTTLInfo = ({
   dataKey,
   field,
@@ -5331,11 +5430,11 @@ var HashFieldTTLInfo = ({
     return () => clearInterval(interval);
   }, [expireAt]);
   if (!expireAt || expireAt === TTL_NOT_FOUND || expireAt === TTL_INFINITE) return;
-  return /* @__PURE__ */ jsx34("span", { className: "block min-w-[30px] whitespace-nowrap text-right text-red-600", children: formatTime(ttl ?? 0) });
+  return /* @__PURE__ */ jsx35("span", { className: "block min-w-[30px] whitespace-nowrap text-right text-red-600", children: formatTime(ttl ?? 0) });
 };
 
 // src/components/databrowser/components/display/display-list.tsx
-import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 var headerLabels = {
   list: ["Index", "Content"],
   hash: ["Field", "Value"],
@@ -5347,9 +5446,9 @@ var ListDisplay = ({ dataKey, type }) => {
   const { selectedListItem } = useTab();
   const query = useFetchListItems({ dataKey, type });
   return /* @__PURE__ */ jsxs21("div", { className: "flex h-full flex-col gap-2", children: [
-    /* @__PURE__ */ jsx35(DisplayHeader, { dataKey, type }),
-    selectedListItem && /* @__PURE__ */ jsx35(ListEditDisplay, { dataKey, type, item: selectedListItem }),
-    /* @__PURE__ */ jsx35("div", { className: cn("min-h-0 grow", selectedListItem && "hidden"), children: /* @__PURE__ */ jsx35(InfiniteScroll, { query, children: /* @__PURE__ */ jsx35("table", { className: "w-full", children: /* @__PURE__ */ jsx35(ItemContextMenu, { dataKey, type, children: /* @__PURE__ */ jsx35("tbody", { children: /* @__PURE__ */ jsx35(ListItems, { dataKey, type, query }) }) }) }) }) })
+    /* @__PURE__ */ jsx36(DisplayHeader, { dataKey, type }),
+    selectedListItem && /* @__PURE__ */ jsx36(ListEditDisplay, { dataKey, type, item: selectedListItem }),
+    /* @__PURE__ */ jsx36("div", { className: cn("min-h-0 grow", selectedListItem && "hidden"), children: /* @__PURE__ */ jsx36(InfiniteScroll, { query, children: /* @__PURE__ */ jsx36("table", { className: "w-full", children: /* @__PURE__ */ jsx36(ItemContextMenu, { dataKey, type, children: /* @__PURE__ */ jsx36("tbody", { children: /* @__PURE__ */ jsx36(ListItems, { dataKey, type, query }) }) }) }) }) })
   ] });
 };
 var ListItems = ({
@@ -5361,7 +5460,7 @@ var ListItems = ({
   const keys = useMemo7(() => query.data?.pages.flatMap((page) => page.keys) ?? [], [query.data]);
   const fields = useMemo7(() => keys.map((key) => key.key), [keys]);
   const { mutate: editItem } = useEditListItem();
-  return /* @__PURE__ */ jsx35(Fragment5, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsx36(Fragment5, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ jsxs21(
     "tr",
     {
       "data-item-key": key,
@@ -5371,7 +5470,7 @@ var ListItems = ({
       },
       className: cn("h-10 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100"),
       children: [
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           "td",
           {
             className: cn(
@@ -5381,14 +5480,14 @@ var ListItems = ({
             children: key
           }
         ),
-        value !== void 0 && /* @__PURE__ */ jsx35(
+        value !== void 0 && /* @__PURE__ */ jsx36(
           "td",
           {
             className: cn("cursor-pointer truncate px-3", type === "zset" ? "w-24" : "max-w-0"),
             children: value
           }
         ),
-        type !== "stream" && /* @__PURE__ */ jsx35(
+        type !== "stream" && /* @__PURE__ */ jsx36(
           "td",
           {
             className: "w-0 min-w-0 p-0",
@@ -5396,8 +5495,8 @@ var ListItems = ({
               e.stopPropagation();
             },
             children: /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-end gap-2", children: [
-              type === "hash" && /* @__PURE__ */ jsx35(HashFieldTTLInfo, { dataKey, field: key, fields }),
-              /* @__PURE__ */ jsx35(
+              type === "hash" && /* @__PURE__ */ jsx36(HashFieldTTLInfo, { dataKey, field: key, fields }),
+              /* @__PURE__ */ jsx36(
                 DeleteAlertDialog,
                 {
                   deletionType: "item",
@@ -5411,14 +5510,14 @@ var ListItems = ({
                       newKey: void 0
                     });
                   },
-                  children: /* @__PURE__ */ jsx35(
+                  children: /* @__PURE__ */ jsx36(
                     Button,
                     {
                       className: "",
                       size: "icon-sm",
                       variant: "secondary",
                       onClick: (e) => e.stopPropagation(),
-                      children: /* @__PURE__ */ jsx35(IconTrash, { className: "size-4 text-zinc-500" })
+                      children: /* @__PURE__ */ jsx36(IconTrash2, { className: "size-4 text-zinc-500" })
                     }
                   )
                 }
@@ -5435,12 +5534,12 @@ var ListItems = ({
 // src/components/databrowser/components/display/display-simple.tsx
 import { useEffect as useEffect10 } from "react";
 import { useForm as useForm3 } from "react-hook-form";
-import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
 var EditorDisplay = ({ dataKey, type }) => {
   const { data } = useFetchSimpleKey(dataKey, type);
   return /* @__PURE__ */ jsxs22("div", { className: "flex h-full w-full flex-col gap-2", children: [
-    /* @__PURE__ */ jsx36(DisplayHeader, { dataKey, type, content: data ?? void 0 }),
-    /* @__PURE__ */ jsx36("div", { className: "flex h-full grow flex-col gap-2 rounded-md bg-zinc-100", children: data === void 0 ? /* @__PURE__ */ jsx36(Spinner, { isLoadingText: "", isLoading: true }) : data === null ? /* @__PURE__ */ jsx36(Fragment6, {}) : /* @__PURE__ */ jsx36(EditorDisplayForm, { dataKey, type, data }, dataKey) })
+    /* @__PURE__ */ jsx37(DisplayHeader, { dataKey, type, content: data ?? void 0 }),
+    /* @__PURE__ */ jsx37("div", { className: "flex h-full grow flex-col gap-2 rounded-md bg-zinc-100", children: data === void 0 ? /* @__PURE__ */ jsx37(Spinner, { isLoadingText: "", isLoading: true }) : data === null ? /* @__PURE__ */ jsx37(Fragment6, {}) : /* @__PURE__ */ jsx37(EditorDisplayForm, { dataKey, type, data }, dataKey) })
   ] });
 };
 var EditorDisplayForm = ({
@@ -5461,12 +5560,12 @@ var EditorDisplayForm = ({
   };
   return /* @__PURE__ */ jsxs22(Fragment6, { children: [
     /* @__PURE__ */ jsxs22("div", { className: "flex grow flex-col gap-1", children: [
-      /* @__PURE__ */ jsx36("div", { className: "flex shrink-0 items-center gap-2", children: type === "json" ? /* @__PURE__ */ jsx36("div", {}) : selector }),
-      /* @__PURE__ */ jsx36("div", { className: "grow rounded-md border border-zinc-300 bg-white p-1", children: editor })
+      /* @__PURE__ */ jsx37("div", { className: "flex shrink-0 items-center gap-2", children: type === "json" ? /* @__PURE__ */ jsx37("div", {}) : selector }),
+      /* @__PURE__ */ jsx37("div", { className: "grow rounded-md border border-zinc-300 bg-white p-1 dark:!bg-[#192321]", children: editor })
     ] }),
-    /* @__PURE__ */ jsx36("div", { className: "flex shrink-0 items-center gap-2", children: /* @__PURE__ */ jsxs22("div", { className: "ml-auto flex gap-2", children: [
-      form.formState.isDirty && /* @__PURE__ */ jsx36(Button, { onClick: handleCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37("div", { className: "flex shrink-0 items-center gap-2", children: /* @__PURE__ */ jsxs22("div", { className: "ml-auto flex gap-2", children: [
+      form.formState.isDirty && /* @__PURE__ */ jsx37(Button, { onClick: handleCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx37(
         Button,
         {
           variant: "primary",
@@ -5474,7 +5573,7 @@ var EditorDisplayForm = ({
             await setKey(value);
           }),
           disabled: !form.formState.isValid || !form.formState.isDirty,
-          children: /* @__PURE__ */ jsx36(Spinner, { isLoading: isSettingKey, isLoadingText: "Saving", children: "Save" })
+          children: /* @__PURE__ */ jsx37(Spinner, { isLoading: isSettingKey, isLoadingText: "Saving", children: "Save" })
         }
       )
     ] }) })
@@ -5482,12 +5581,12 @@ var EditorDisplayForm = ({
 };
 
 // src/components/databrowser/components/display/index.tsx
-import { Fragment as Fragment7, jsx as jsx37 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx38 } from "react/jsx-runtime";
 var DataDisplay = () => {
   const { selectedKey } = useTab();
   const { query } = useKeys();
   const type = useKeyType(selectedKey);
-  return /* @__PURE__ */ jsx37("div", { className: "h-full p-4", children: !selectedKey ? /* @__PURE__ */ jsx37("div", {}) : !type ? query.isLoading ? /* @__PURE__ */ jsx37("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx37("span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx37("div", {}) : /* @__PURE__ */ jsx37(Fragment7, { children: type === "string" || type === "json" ? /* @__PURE__ */ jsx37(EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx37(ListDisplay, { dataKey: selectedKey, type }) }) });
+  return /* @__PURE__ */ jsx38("div", { className: "h-full p-4", children: !selectedKey ? /* @__PURE__ */ jsx38("div", {}) : !type ? query.isLoading ? /* @__PURE__ */ jsx38("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx38("span", { className: "text-zinc-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx38("div", {}) : /* @__PURE__ */ jsx38(Fragment7, { children: type === "string" || type === "json" ? /* @__PURE__ */ jsx38(EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx38(ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
 // src/components/databrowser/components/sidebar/index.tsx
@@ -5502,12 +5601,12 @@ import { Controller as Controller3, useForm as useForm4 } from "react-hook-form"
 // src/components/ui/dialog.tsx
 import * as React12 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
-var DialogPortal = (props) => /* @__PURE__ */ jsx38(DialogPrimitive.Portal, { container: portalRoot, ...props });
+var DialogPortal = (props) => /* @__PURE__ */ jsx39(DialogPrimitive.Portal, { container: portalRoot, ...props });
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
-var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -5522,7 +5621,7 @@ var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 var DialogContent = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs23(DialogPortal, { children: [
-  /* @__PURE__ */ jsx38(DialogOverlay, {}),
+  /* @__PURE__ */ jsx39(DialogOverlay, {}),
   /* @__PURE__ */ jsxs23(
     DialogPrimitive.Content,
     {
@@ -5543,8 +5642,8 @@ var DialogContent = React12.forwardRef(({ className, children, ...props }, ref)
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs23(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500 dark:ring-offset-zinc-950 dark:focus:ring-zinc-300 dark:data-[state=open]:bg-zinc-800 dark:data-[state=open]:text-zinc-400", children: [
-          /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsxs23(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500", children: [
+          /* @__PURE__ */ jsx39(
             "svg",
             {
               width: "15",
@@ -5553,7 +5652,7 @@ var DialogContent = React12.forwardRef(({ className, children, ...props }, ref)
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
               className: "h-4 w-4",
-              children: /* @__PURE__ */ jsx38(
+              children: /* @__PURE__ */ jsx39(
                 "path",
                 {
                   d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
@@ -5564,16 +5663,16 @@ var DialogContent = React12.forwardRef(({ className, children, ...props }, ref)
               )
             }
           ),
-          /* @__PURE__ */ jsx38("span", { className: "sr-only", children: "Close" })
+          /* @__PURE__ */ jsx39("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx38("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx39("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
-var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx38(
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx39(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -5581,7 +5680,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx38(
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   DialogPrimitive.Title,
   {
     ref,
@@ -5590,18 +5689,18 @@ var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   DialogPrimitive.Description,
   {
     ref,
-    className: cn("text-sm text-zinc-500 dark:text-zinc-400", className),
+    className: cn("text-sm text-zinc-500", className),
     ...props
   }
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/databrowser/components/add-key-modal.tsx
-import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
 function AddKeyModal() {
   const { setSelectedKey } = useTab();
   const [open, setOpen] = useState9(false);
@@ -5633,24 +5732,24 @@ function AddKeyModal() {
         setOpen(open2);
       },
       children: [
-        /* @__PURE__ */ jsx39(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx39(Button, { variant: "primary", size: "icon-sm", "aria-label": "Add key", children: /* @__PURE__ */ jsx39(PlusIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx40(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx40(Button, { variant: "primary", size: "icon-sm", "aria-label": "Add key", children: /* @__PURE__ */ jsx40(PlusIcon, { className: "size-4" }) }) }),
         /* @__PURE__ */ jsxs24(DialogContent, { className: "max-w-[400px]", children: [
-          /* @__PURE__ */ jsx39(DialogHeader, { children: /* @__PURE__ */ jsx39(DialogTitle, { children: "Create new key" }) }),
-          /* @__PURE__ */ jsx39("div", { className: "sr-only", children: /* @__PURE__ */ jsx39(DialogDescription2, { children: "Create new key" }) }),
+          /* @__PURE__ */ jsx40(DialogHeader, { children: /* @__PURE__ */ jsx40(DialogTitle, { children: "Create new key" }) }),
+          /* @__PURE__ */ jsx40("div", { className: "sr-only", children: /* @__PURE__ */ jsx40(DialogDescription2, { children: "Create new key" }) }),
           /* @__PURE__ */ jsxs24("form", { className: "mt-4", onSubmit, children: [
             /* @__PURE__ */ jsxs24("div", { className: "flex gap-1", children: [
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx40(
                 Controller3,
                 {
                   control,
                   name: "type",
                   render: ({ field }) => /* @__PURE__ */ jsxs24(Select, { value: field.value, onValueChange: field.onChange, children: [
-                    /* @__PURE__ */ jsx39(SelectTrigger, { className: "h-8 w-auto pl-[3px] pr-8", children: /* @__PURE__ */ jsx39(SelectValue, {}) }),
-                    /* @__PURE__ */ jsx39(SelectContent, { children: /* @__PURE__ */ jsx39(SelectGroup, { children: DATA_TYPES.map((type) => /* @__PURE__ */ jsx39(SelectItem, { value: type, children: /* @__PURE__ */ jsx39(TypeTag, { variant: type, type: "badge" }) }, type)) }) })
+                    /* @__PURE__ */ jsx40(SelectTrigger, { className: "h-8 w-auto pl-[3px] pr-8", children: /* @__PURE__ */ jsx40(SelectValue, {}) }),
+                    /* @__PURE__ */ jsx40(SelectContent, { children: /* @__PURE__ */ jsx40(SelectGroup, { children: DATA_TYPES.map((type) => /* @__PURE__ */ jsx40(SelectItem, { value: type, children: /* @__PURE__ */ jsx40(TypeTag, { variant: type, type: "badge" }) }, type)) }) })
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx40(
                 Controller3,
                 {
                   rules: {
@@ -5658,14 +5757,14 @@ function AddKeyModal() {
                   },
                   control,
                   name: "key",
-                  render: ({ field }) => /* @__PURE__ */ jsx39(Input, { placeholder: "mykey", ...field, className: "h-8 grow" })
+                  render: ({ field }) => /* @__PURE__ */ jsx40(Input, { placeholder: "mykey", ...field, className: "h-8 grow" })
                 }
               )
             ] }),
-            formState.errors.key && /* @__PURE__ */ jsx39("p", { className: "mb-3 mt-2 text-xs text-red-500", children: formState.errors.key?.message }),
-            /* @__PURE__ */ jsx39("p", { className: "mt-2 text-xs text-zinc-500", children: "After creating the key, you can edit the value" }),
+            formState.errors.key && /* @__PURE__ */ jsx40("p", { className: "mb-3 mt-2 text-xs text-red-500", children: formState.errors.key?.message }),
+            /* @__PURE__ */ jsx40("p", { className: "mt-2 text-xs text-zinc-500", children: "After creating the key, you can edit the value" }),
             /* @__PURE__ */ jsxs24("div", { className: "mt-6 flex justify-end gap-2", children: [
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx40(
                 Button,
                 {
                   type: "button",
@@ -5676,7 +5775,7 @@ function AddKeyModal() {
                   children: "Cancel"
                 }
               ),
-              /* @__PURE__ */ jsx39(Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ jsx39(Spinner, { isLoading: isPending, isLoadingText: "Creating", children: "Create" }) })
+              /* @__PURE__ */ jsx40(Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ jsx40(Spinner, { isLoading: isPending, isLoadingText: "Creating", children: "Create" }) })
             ] })
           ] })
         ] })
@@ -5686,18 +5785,19 @@ function AddKeyModal() {
 }
 
 // src/components/databrowser/components/sidebar/empty.tsx
-import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
 var Empty = () => {
-  return /* @__PURE__ */ jsx40("div", { className: "flex h-full w-full items-center justify-center rounded-md border bg-white px-4 py-6 text-center", children: /* @__PURE__ */ jsxs25("div", { className: "space-y-5", children: [
-    /* @__PURE__ */ jsx40("p", { className: "text-md font-medium", children: "Data on a break" }),
-    /* @__PURE__ */ jsx40("p", { className: "text-balance text-center", children: '"Quick, lure it back with some CLI magic!"' })
+  return /* @__PURE__ */ jsx41("div", { className: "flex h-full w-full items-center justify-center rounded-md border bg-white px-4 py-6 text-center", children: /* @__PURE__ */ jsxs25("div", { className: "space-y-5", children: [
+    /* @__PURE__ */ jsx41("p", { className: "text-md font-medium", children: "Data on a break" }),
+    /* @__PURE__ */ jsx41("p", { className: "text-balance text-center", children: '"Quick, lure it back with some CLI magic!"' })
   ] }) });
 };
 
 // src/components/databrowser/components/sidebar-context-menu.tsx
 import { useState as useState10 } from "react";
+import { IconCopy as IconCopy3, IconExternalLink as IconExternalLink2, IconTrash as IconTrash3 } from "@tabler/icons-react";
 import { ContextMenuSeparator as ContextMenuSeparator3 } from "@radix-ui/react-context-menu";
-import { Fragment as Fragment8, jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
 var SidebarContextMenu = ({ children }) => {
   const { mutate: deleteKey } = useDeleteKey();
   const [isAlertOpen, setAlertOpen] = useState10(false);
@@ -5705,7 +5805,7 @@ var SidebarContextMenu = ({ children }) => {
   const { addTab, setSelectedKey, selectTab, setSearch } = useDatabrowserStore();
   const { search: currentSearch } = useTab();
   return /* @__PURE__ */ jsxs26(Fragment8, { children: [
-    /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx42(
       DeleteAlertDialog,
       {
         deletionType: "key",
@@ -5719,7 +5819,7 @@ var SidebarContextMenu = ({ children }) => {
       }
     ),
     /* @__PURE__ */ jsxs26(ContextMenu, { modal: false, children: [
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx42(
         ContextMenuTrigger,
         {
           onContextMenu: (e) => {
@@ -5735,7 +5835,7 @@ var SidebarContextMenu = ({ children }) => {
         }
       ),
       /* @__PURE__ */ jsxs26(ContextMenuContent, { children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsxs26(
           ContextMenuItem,
           {
             onClick: () => {
@@ -5744,10 +5844,14 @@ var SidebarContextMenu = ({ children }) => {
                 description: "Key copied to clipboard"
               });
             },
-            children: "Copy key"
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx42(IconCopy3, { size: 16 }),
+              "Copy key"
+            ]
           }
         ),
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsxs26(
           ContextMenuItem,
           {
             onClick: () => {
@@ -5756,21 +5860,28 @@ var SidebarContextMenu = ({ children }) => {
               setSearch(newTabId, currentSearch);
               selectTab(newTabId);
             },
-            children: "Open in new tab"
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx42(IconExternalLink2, { size: 16 }),
+              "Open in new tab"
+            ]
           }
         ),
-        /* @__PURE__ */ jsx41(ContextMenuSeparator3, {}),
-        /* @__PURE__ */ jsx41(ContextMenuItem, { onClick: () => setAlertOpen(true), children: "Delete key" })
+        /* @__PURE__ */ jsx42(ContextMenuSeparator3, {}),
+        /* @__PURE__ */ jsxs26(ContextMenuItem, { onClick: () => setAlertOpen(true), className: "gap-2", children: [
+          /* @__PURE__ */ jsx42(IconTrash3, { size: 16 }),
+          "Delete key"
+        ] })
       ] })
     ] })
   ] });
 };
 
 // src/components/databrowser/components/sidebar/keys-list.tsx
-import { Fragment as Fragment9, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
 var KeysList = () => {
   const { keys } = useKeys();
-  return /* @__PURE__ */ jsx42(SidebarContextMenu, { children: /* @__PURE__ */ jsx42(Fragment9, { children: keys.map((data, i) => /* @__PURE__ */ jsx42(KeyItem, { nextKey: keys.at(i + 1)?.[0] ?? "", data }, data[0])) }) });
+  return /* @__PURE__ */ jsx43(SidebarContextMenu, { children: /* @__PURE__ */ jsx43(Fragment9, { children: keys.map((data, i) => /* @__PURE__ */ jsx43(KeyItem, { nextKey: keys.at(i + 1)?.[0] ?? "", data }, data[0])) }) });
 };
 var keyStyles = {
   string: "border-sky-400 !bg-sky-50 text-sky-900",
@@ -5799,9 +5910,9 @@ var KeyItem = ({ data, nextKey }) => {
       ),
       onClick: () => setSelectedKey(dataKey),
       children: [
-        /* @__PURE__ */ jsx42(TypeTag, { variant: dataType, type: "icon" }),
-        /* @__PURE__ */ jsx42("p", { className: "truncate whitespace-nowrap", children: dataKey }),
-        !isKeySelected && !isNextKeySelected && /* @__PURE__ */ jsx42("span", { className: "absolute -bottom-px left-3 right-3 h-px bg-zinc-100" })
+        /* @__PURE__ */ jsx43(TypeTag, { variant: dataType, type: "icon" }),
+        /* @__PURE__ */ jsx43("p", { className: "truncate whitespace-nowrap", children: dataKey }),
+        !isKeySelected && !isNextKeySelected && /* @__PURE__ */ jsx43("span", { className: "absolute -bottom-px left-3 right-3 h-px bg-zinc-100" })
       ]
     }
   );
@@ -5810,7 +5921,7 @@ var KeyItem = ({ data, nextKey }) => {
 // src/components/databrowser/components/sidebar/search-input.tsx
 import { useEffect as useEffect11, useRef as useRef3, useState as useState11 } from "react";
 import { IconX } from "@tabler/icons-react";
-import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
 var dedupeSearchHistory = (history) => {
   const seen = /* @__PURE__ */ new Set();
   return history.filter((item) => {
@@ -5868,7 +5979,7 @@ var SearchInput = () => {
   };
   return /* @__PURE__ */ jsxs28("div", { className: "relative grow", children: [
     /* @__PURE__ */ jsxs28(Popover, { open: isFocus && filteredHistory.length > 0, children: [
-      /* @__PURE__ */ jsx43(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx43("div", { children: /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx44(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx44("div", { children: /* @__PURE__ */ jsx44(
         Input,
         {
           ref: inputRef,
@@ -5887,7 +5998,7 @@ var SearchInput = () => {
           onBlur: () => setIsFocus(false)
         }
       ) }) }),
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx44(
         PopoverContent,
         {
           className: "w-[--radix-popover-trigger-width] divide-y px-3 py-2 text-[13px] text-zinc-900",
@@ -5896,7 +6007,7 @@ var SearchInput = () => {
             e.preventDefault();
             e.stopPropagation();
           },
-          children: filteredHistory.map((item, index) => /* @__PURE__ */ jsx43("div", { className: "w-full py-[3px]", children: /* @__PURE__ */ jsx43(
+          children: filteredHistory.map((item, index) => /* @__PURE__ */ jsx44("div", { className: "w-full py-[3px]", children: /* @__PURE__ */ jsx44(
             "button",
             {
               ref: (el) => {
@@ -5917,14 +6028,14 @@ var SearchInput = () => {
         type: "button",
         variant: "link",
         size: "icon",
-        className: "absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100",
+        className: "absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-zinc-500 hover:text-zinc-900",
         onClick: () => {
           setSearchKey("");
           setState("");
         },
         children: [
-          /* @__PURE__ */ jsx43(IconX, { size: 16 }),
-          /* @__PURE__ */ jsx43("span", { className: "sr-only", children: "Clear" })
+          /* @__PURE__ */ jsx44(IconX, { size: 16 }),
+          /* @__PURE__ */ jsx44("span", { className: "sr-only", children: "Clear" })
         ]
       }
     ),
@@ -5933,15 +6044,15 @@ var SearchInput = () => {
 };
 
 // src/components/databrowser/components/sidebar/skeleton-buttons.tsx
-import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
 var DEFAULT_SKELETON_COUNT = 6;
-var LoadingSkeleton = () => /* @__PURE__ */ jsx44("div", { className: "block h-full w-full rounded-lg border border-zinc-200 bg-white p-1 pr-3 transition-all", children: Array.from({ length: DEFAULT_SKELETON_COUNT }).fill(0).map((_, idx) => /* @__PURE__ */ jsxs29("div", { className: "flex h-10 items-center gap-2 px-3", children: [
-  /* @__PURE__ */ jsx44(Skeleton, { className: "size-5 shrink-0 rounded" }),
-  /* @__PURE__ */ jsx44(Skeleton, { className: "h-4 grow rounded" })
+var LoadingSkeleton = () => /* @__PURE__ */ jsx45("div", { className: "block h-full w-full rounded-lg border border-zinc-200 bg-white p-1 pr-3 transition-all", children: Array.from({ length: DEFAULT_SKELETON_COUNT }).fill(0).map((_, idx) => /* @__PURE__ */ jsxs29("div", { className: "flex h-10 items-center gap-2 px-3", children: [
+  /* @__PURE__ */ jsx45(Skeleton, { className: "size-5 shrink-0 rounded" }),
+  /* @__PURE__ */ jsx45(Skeleton, { className: "h-4 grow rounded" })
 ] }, idx)) });
 
 // src/components/databrowser/components/sidebar/type-selector.tsx
-import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
 var ALL_TYPES_KEY = "all";
 function DataTypeSelector() {
   const { search, setSearchType } = useTab();
@@ -5957,9 +6068,9 @@ function DataTypeSelector() {
       },
       value: search.type === void 0 ? ALL_TYPES_KEY : search.type,
       children: [
-        /* @__PURE__ */ jsx45(SelectTrigger, { className: "!w-auto select-none whitespace-nowrap rounded-r-none border-r-0 border-zinc-300 pr-8", children: /* @__PURE__ */ jsx45(SelectValue, {}) }),
-        /* @__PURE__ */ jsx45(SelectContent, { children: /* @__PURE__ */ jsx45(SelectGroup, { children: [[ALL_TYPES_KEY, "All Types"], ...Object.entries(DATA_TYPE_NAMES)].map(
-          ([key, value]) => /* @__PURE__ */ jsx45(SelectItem, { value: key, children: value }, key)
+        /* @__PURE__ */ jsx46(SelectTrigger, { className: "!w-auto select-none whitespace-nowrap rounded-r-none border-r-0 border-zinc-300 pr-8", children: /* @__PURE__ */ jsx46(SelectValue, {}) }),
+        /* @__PURE__ */ jsx46(SelectContent, { children: /* @__PURE__ */ jsx46(SelectGroup, { children: [[ALL_TYPES_KEY, "All Types"], ...Object.entries(DATA_TYPE_NAMES)].map(
+          ([key, value]) => /* @__PURE__ */ jsx46(SelectItem, { value: key, children: value }, key)
         ) }) })
       ]
     }
@@ -5967,19 +6078,19 @@ function DataTypeSelector() {
 }
 
 // src/components/databrowser/components/sidebar/index.tsx
-import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
 function Sidebar() {
   const { keys, query } = useKeys();
   return /* @__PURE__ */ jsxs31("div", { className: "flex h-full flex-col gap-2 p-4", children: [
     /* @__PURE__ */ jsxs31("div", { className: "rounded-lg bg-zinc-100", children: [
       /* @__PURE__ */ jsxs31("div", { className: "flex h-10 items-center justify-between pl-1", children: [
-        /* @__PURE__ */ jsx46(DisplayDbSize, {}),
+        /* @__PURE__ */ jsx47(DisplayDbSize, {}),
         /* @__PURE__ */ jsxs31("div", { className: "flex gap-1", children: [
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx47(
             Button,
             {
               "aria-label": "Refresh",
-              className: "h-7 w-7 px-0",
+              className: "h-7 w-7 px-0 text-zinc-500",
               onClick: () => {
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_KEYS_QUERY_KEY]
@@ -5997,28 +6108,28 @@ function Sidebar() {
                   queryKey: [FETCH_KEY_TYPE_QUERY_KEY]
                 });
               },
-              children: /* @__PURE__ */ jsx46(Spinner, { isLoading: query.isFetching, children: /* @__PURE__ */ jsx46(IconRefresh, { size: 16 }) })
+              children: /* @__PURE__ */ jsx47(Spinner, { isLoading: query.isFetching, children: /* @__PURE__ */ jsx47(IconRefresh, { size: 16 }) })
             }
           ),
-          /* @__PURE__ */ jsx46(AddKeyModal, {})
+          /* @__PURE__ */ jsx47(AddKeyModal, {})
         ] })
       ] }),
       /* @__PURE__ */ jsxs31("div", { className: "flex h-10 items-center", children: [
-        /* @__PURE__ */ jsx46(DataTypeSelector, {}),
-        /* @__PURE__ */ jsx46(SearchInput, {})
+        /* @__PURE__ */ jsx47(DataTypeSelector, {}),
+        /* @__PURE__ */ jsx47(SearchInput, {})
       ] })
     ] }),
-    query.isLoading && keys.length === 0 ? /* @__PURE__ */ jsx46(LoadingSkeleton, {}) : keys.length > 0 ? (
+    query.isLoading && keys.length === 0 ? /* @__PURE__ */ jsx47(LoadingSkeleton, {}) : keys.length > 0 ? (
       // Infinite scroll already has a loader at the bottom
-      /* @__PURE__ */ jsx46(InfiniteScroll, { query, disableRoundedInherit: true, className: "min-h-0", children: /* @__PURE__ */ jsx46(KeysList, {}) })
-    ) : /* @__PURE__ */ jsx46(Empty, {})
+      /* @__PURE__ */ jsx47(InfiniteScroll, { query, disableRoundedInherit: true, className: "min-h-0", children: /* @__PURE__ */ jsx47(KeysList, {}) })
+    ) : /* @__PURE__ */ jsx47(Empty, {})
   ] });
 }
 
 // src/components/databrowser/components/databrowser-instance.tsx
-import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
 var DatabrowserInstance = ({ hidden }) => {
-  return /* @__PURE__ */ jsx47(KeysProvider, { children: /* @__PURE__ */ jsxs32("div", { className: cn("min-h-0 grow rounded-md bg-zinc-100", hidden && "hidden"), children: [
+  return /* @__PURE__ */ jsx48(KeysProvider, { children: /* @__PURE__ */ jsxs32("div", { className: cn("min-h-0 grow rounded-md bg-zinc-100", hidden && "hidden"), children: [
     /* @__PURE__ */ jsxs32(
       PanelGroup,
       {
@@ -6026,18 +6137,18 @@ var DatabrowserInstance = ({ hidden }) => {
         direction: "horizontal",
         className: "h-full w-full gap-0.5 text-sm antialiased",
         children: [
-          /* @__PURE__ */ jsx47(Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ jsx47(Sidebar, {}) }),
-          /* @__PURE__ */ jsx47(PanelResizeHandle, { className: "group flex h-full w-3 justify-center", children: /* @__PURE__ */ jsx47("div", { className: "h-full border-r border-dashed border-zinc-200 transition-colors group-hover:border-zinc-500" }) }),
-          /* @__PURE__ */ jsx47(Panel, { minSize: 40, children: /* @__PURE__ */ jsx47(DataDisplay, {}) })
+          /* @__PURE__ */ jsx48(Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ jsx48(Sidebar, {}) }),
+          /* @__PURE__ */ jsx48(PanelResizeHandle, { className: "group flex h-full w-3 justify-center", children: /* @__PURE__ */ jsx48("div", { className: "h-full border-r border-dashed border-zinc-200 transition-colors group-hover:border-zinc-500" }) }),
+          /* @__PURE__ */ jsx48(Panel, { minSize: 40, children: /* @__PURE__ */ jsx48(DataDisplay, {}) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx47(Toaster, {})
+    /* @__PURE__ */ jsx48(Toaster, {})
   ] }) });
 };
 
 // src/components/databrowser/components/databrowser-tabs.tsx
-import { useCallback as useCallback3, useEffect as useEffect13, useRef as useRef5, useState as useState13 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect13, useMemo as useMemo8, useRef as useRef5, useState as useState13 } from "react";
 import {
   closestCenter,
   DndContext,
@@ -6049,19 +6160,19 @@ import {
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { IconPlus as IconPlus2, IconSearch as IconSearch2 } from "@tabler/icons-react";
+import { IconChevronDown as IconChevronDown2, IconPlus as IconPlus2 } from "@tabler/icons-react";
 
 // src/components/ui/command.tsx
 import * as React13 from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
-var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
   CommandPrimitive,
   {
     ref,
     className: cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50",
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-zinc-950",
       className
     ),
     ...props
@@ -6069,13 +6180,13 @@ var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 Command.displayName = CommandPrimitive.displayName;
 var CommandInput = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs33("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsx48(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ jsx48(
+  /* @__PURE__ */ jsx49(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx49(
     CommandPrimitive.Input,
     {
       ref,
       className: cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-neutral-400",
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-zinc-500 disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props
@@ -6083,7 +6194,7 @@ var CommandInput = React13.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ] }));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
-var CommandList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+var CommandList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
   CommandPrimitive.List,
   {
     ref,
@@ -6092,75 +6203,63 @@ var CommandList = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = CommandPrimitive.List.displayName;
-var CommandEmpty = React13.forwardRef((props, ref) => /* @__PURE__ */ jsx48(
-  CommandPrimitive.Empty,
-  {
-    ref,
-    className: "py-6 text-center text-sm",
-    ...props
-  }
-));
+var CommandEmpty = React13.forwardRef((props, ref) => /* @__PURE__ */ jsx49(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-var CommandGroup = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+var CommandGroup = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
   CommandPrimitive.Group,
   {
     ref,
     className: cn(
-      "overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 dark:text-neutral-50 dark:[&_[cmdk-group-heading]]:text-neutral-400",
+      "text-zinc-950[&_[cmdk-group-heading]]:px-2 overflow-hidden p-1 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-zinc-500",
       className
     ),
     ...props
   }
 ));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-var CommandSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+var CommandSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
   CommandPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 h-px bg-neutral-200 dark:bg-neutral-800", className),
+    className: cn("-mx-1 h-px bg-zinc-200", className),
     ...props
   }
 ));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-var CommandItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+var CommandItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
   CommandPrimitive.Item,
   {
     ref,
     className: cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:data-[selected=true]:bg-neutral-800 dark:data-[selected=true]:text-neutral-50",
+      "data-[disabled=true]:opacity-50[&_svg]:pointer-events-none relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-zinc-100 data-[selected=true]:text-zinc-900 [&_svg]:size-4 [&_svg]:shrink-0",
       className
     ),
     ...props
   }
 ));
 CommandItem.displayName = CommandPrimitive.Item.displayName;
-var CommandShortcut = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx48(
-    "span",
-    {
-      className: cn(
-        "ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400",
-        className
-      ),
-      ...props
-    }
-  );
+var CommandShortcut = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx49("span", { className: cn("ml-auto text-xs tracking-widest text-zinc-500", className), ...props });
 };
 CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/databrowser/components/tab.tsx
-import { IconSearch, IconX as IconX2 } from "@tabler/icons-react";
+import {
+  IconArrowsMinimize,
+  IconCopyPlus,
+  IconPin,
+  IconSearch,
+  IconSquareX,
+  IconX as IconX2
+} from "@tabler/icons-react";
 
 // src/components/databrowser/components/tab-type-icon.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function TabTypeIcon({ selectedKey }) {
   const { data: keyType, isLoading } = useFetchKeyType(selectedKey);
-  if (isLoading) return /* @__PURE__ */ jsx49(Skeleton, { className: "h-5 w-5 rounded" });
+  if (isLoading) return /* @__PURE__ */ jsx50(Skeleton, { className: "h-5 w-5 rounded" });
   if (!keyType || keyType === "none") return;
-  return /* @__PURE__ */ jsx49(TypeTag, { variant: keyType, type: "icon" });
+  return /* @__PURE__ */ jsx50(TypeTag, { variant: keyType, type: "icon" });
 }
 
 // src/hooks/use-overflow.ts
@@ -6190,25 +6289,46 @@ var useOverflow = () => {
 };
 
 // src/components/databrowser/components/tab.tsx
-import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
-var Tab = ({ id }) => {
-  const { active, search, selectedKey } = useTab();
-  const { selectTab, removeTab, tabs } = useDatabrowserStore();
+import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
+var Tab = ({ id, isList }) => {
+  const { active, search, selectedKey, pinned } = useTab();
+  const {
+    selectTab,
+    removeTab,
+    forceRemoveTab,
+    tabs,
+    togglePinTab,
+    duplicateTab,
+    closeOtherTabs,
+    closeAllButPinned
+  } = useDatabrowserStore();
+  const hasPinnedTabs = tabs.some(([, data]) => data.pinned);
   const { ref, isOverflow } = useOverflow();
   const label = search.key || selectedKey;
-  const iconNode = search.key ? /* @__PURE__ */ jsx50(IconSearch, { size: 15 }) : selectedKey ? /* @__PURE__ */ jsx50(TabTypeIcon, { selectedKey }) : void 0;
+  const iconNode = search.key ? /* @__PURE__ */ jsx51(IconSearch, { size: 15 }) : selectedKey ? /* @__PURE__ */ jsx51(TabTypeIcon, { selectedKey }) : void 0;
   const tabNode = /* @__PURE__ */ jsxs34(
     "div",
     {
+      id: isList ? `list-tab-${id}` : `tab-${id}`,
       onClick: () => selectTab(id),
       className: cn(
-        "flex h-9 cursor-pointer items-center gap-2 rounded-t-lg border border-zinc-200 px-3 text-[13px] transition-colors",
-        active ? "border-b-white bg-white text-zinc-900" : "bg-zinc-100 hover:bg-zinc-50"
+        "flex h-9 w-full cursor-pointer items-center gap-2 px-3 text-[13px] transition-colors",
+        isList && "max-w-[370px]",
+        !isList && "rounded-t-lg border border-zinc-200",
+        !isList && (active ? "border-b-white bg-white text-zinc-900" : "bg-zinc-100 hover:bg-zinc-50")
       ),
       children: [
         iconNode,
-        /* @__PURE__ */ jsx50("span", { ref, className: "max-w-32 truncate whitespace-nowrap", children: label || "New Tab" }),
-        tabs.length > 1 && /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx51(
+          "span",
+          {
+            ref,
+            className: cn("min-w-0 grow truncate whitespace-nowrap", !isList && "max-w-32"),
+            children: label || "New Tab"
+          }
+        ),
+        pinned && /* @__PURE__ */ jsx51(IconPin, { size: 14, className: "text-zinc-500" }),
+        tabs.length > 1 && !pinned && /* @__PURE__ */ jsx51(
           "button",
           {
             onClick: (e) => {
@@ -6216,22 +6336,67 @@ var Tab = ({ id }) => {
               removeTab(id);
             },
             className: "p-1 text-zinc-300 transition-colors hover:text-zinc-500",
-            children: /* @__PURE__ */ jsx50(IconX2, { size: 16 })
+            children: /* @__PURE__ */ jsx51(IconX2, { size: 16 })
           }
         )
       ]
     }
   );
-  return /* @__PURE__ */ jsx50(SimpleTooltip, { content: isOverflow ? label : void 0, children: tabNode });
+  return /* @__PURE__ */ jsxs34(ContextMenu, { children: [
+    /* @__PURE__ */ jsx51(SimpleTooltip, { content: isOverflow ? label : void 0, children: /* @__PURE__ */ jsx51(ContextMenuTrigger, { asChild: true, children: tabNode }) }),
+    /* @__PURE__ */ jsxs34(
+      ContextMenuContent,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+        },
+        children: [
+          /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => togglePinTab(id), className: "gap-2", children: [
+            /* @__PURE__ */ jsx51(IconPin, { size: 16 }),
+            pinned ? "Unpin Tab" : "Pin Tab"
+          ] }),
+          /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => duplicateTab(id), className: "gap-2", children: [
+            /* @__PURE__ */ jsx51(IconCopyPlus, { size: 16 }),
+            "Duplicate Tab"
+          ] }),
+          /* @__PURE__ */ jsx51(ContextMenuSeparator, {}),
+          /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => forceRemoveTab(id), className: "gap-2", children: [
+            /* @__PURE__ */ jsx51(IconX2, { size: 16 }),
+            "Close Tab"
+          ] }),
+          /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => closeOtherTabs(id), className: "gap-2", children: [
+            /* @__PURE__ */ jsx51(IconSquareX, { size: 16 }),
+            "Close Other Tabs"
+          ] }),
+          /* @__PURE__ */ jsxs34(
+            ContextMenuItem,
+            {
+              onSelect: () => closeAllButPinned(),
+              className: "gap-2",
+              disabled: !hasPinnedTabs,
+              children: [
+                /* @__PURE__ */ jsx51(IconArrowsMinimize, { size: 16 }),
+                "Close All But Pinned"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
 };
 
 // src/components/databrowser/components/databrowser-tabs.tsx
-import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 var SortableTab = ({ id }) => {
   const [originalWidth, setOriginalWidth] = useState13(null);
   const textRef = useRef5(null);
+  const { tabs } = useDatabrowserStore();
+  const tabData = tabs.find(([tabId]) => tabId === id)?.[1];
+  const isPinned = tabData?.pinned;
   const { attributes, listeners: listeners2, setNodeRef, transform, transition, isDragging } = useSortable({
     id,
+    disabled: isPinned,
     resizeObserverConfig: {
       disabled: true
     }
@@ -6290,20 +6455,27 @@ var SortableTab = ({ id }) => {
       minWidth: originalWidth ? `${originalWidth}px` : void 0
     } : {}
   };
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     "div",
     {
       ref: measureRef,
       style,
-      className: isDragging ? "cursor-grabbing" : "cursor-grab",
+      className: isDragging ? "cursor-grabbing" : isPinned ? "cursor-default" : "cursor-grab",
       ...attributes,
-      ...listeners2,
-      children: /* @__PURE__ */ jsx51(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx51(Tab, { id }) })
+      ...isPinned ? {} : listeners2,
+      children: /* @__PURE__ */ jsx52(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx52(Tab, { id }) })
     }
   );
 };
 var DatabrowserTabs = () => {
-  const { tabs, addTab, reorderTabs, selectedTab, selectTab } = useDatabrowserStore();
+  const { tabs, reorderTabs, selectedTab, selectTab } = useDatabrowserStore();
+  const sortedTabs = useMemo8(() => {
+    return [...tabs].sort(([, a], [, b]) => {
+      if (a.pinned && !b.pinned) return -1;
+      if (!a.pinned && b.pinned) return 1;
+      return 0;
+    });
+  }, [tabs]);
   const scrollRef = useRef5(null);
   const [hasLeftShadow, setHasLeftShadow] = useState13(false);
   const [hasRightShadow, setHasRightShadow] = useState13(false);
@@ -6367,16 +6539,16 @@ var DatabrowserTabs = () => {
     }
   };
   return /* @__PURE__ */ jsxs35("div", { className: "relative mb-2 shrink-0", children: [
-    /* @__PURE__ */ jsx51("div", { className: "absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" }),
+    /* @__PURE__ */ jsx52("div", { className: "absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" }),
     /* @__PURE__ */ jsxs35("div", { className: "flex translate-y-[1px] items-center gap-1", children: [
       /* @__PURE__ */ jsxs35("div", { className: "relative min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx52(
           "div",
           {
             className: `tabs-shadow-left pointer-events-none absolute left-0 top-0 z-10 h-full w-6 transition-opacity duration-200 ${hasLeftShadow ? "opacity-100" : "opacity-0"}`
           }
         ),
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx52(
           "div",
           {
             className: `tabs-shadow-right pointer-events-none absolute right-0 top-0 z-10 h-full w-6 transition-opacity duration-200 ${hasRightShadow ? "opacity-100" : "opacity-0"}`
@@ -6389,7 +6561,7 @@ var DatabrowserTabs = () => {
             onScroll: recomputeShadows,
             className: "scrollbar-hide flex min-w-0 flex-1 items-center gap-1 overflow-x-auto pb-[1px] [&::-webkit-scrollbar]:hidden",
             children: [
-              /* @__PURE__ */ jsx51(
+              /* @__PURE__ */ jsx52(
                 DndContext,
                 {
                   sensors,
@@ -6401,143 +6573,144 @@ var DatabrowserTabs = () => {
                       strategy: MeasuringStrategy.Always
                     }
                   },
-                  children: /* @__PURE__ */ jsx51(
+                  children: /* @__PURE__ */ jsx52(
                     SortableContext,
                     {
-                      items: tabs.map(([id]) => id),
+                      items: sortedTabs.map(([id]) => id),
                       strategy: horizontalListSortingStrategy,
-                      children: selectedTab && tabs.map(([id]) => /* @__PURE__ */ jsx51(SortableTab, { id }, id))
+                      children: selectedTab && sortedTabs.map(([id]) => /* @__PURE__ */ jsx52(SortableTab, { id }, id))
                     }
                   )
                 }
               ),
-              !isOverflow && /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-1 pl-1 pr-1", children: [
-                tabs.length > 4 && /* @__PURE__ */ jsx51(TabSearch, { tabs, onSelectTab: selectTab }),
-                /* @__PURE__ */ jsx51(
-                  Button,
-                  {
-                    variant: "secondary",
-                    size: "icon-sm",
-                    onClick: addTab,
-                    className: "flex-shrink-0",
-                    title: "Add new tab",
-                    children: /* @__PURE__ */ jsx51(IconPlus2, { className: "text-zinc-500", size: 16 })
-                  }
-                )
-              ] })
+              !isOverflow && /* @__PURE__ */ jsx52("div", { className: "flex items-center gap-1 pl-1 pr-1", children: /* @__PURE__ */ jsx52(AddTabButton, {}) })
             ]
           }
         )
       ] }),
-      isOverflow && /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-1 pl-1", children: [
-        tabs.length > 4 && /* @__PURE__ */ jsx51(TabSearch, { tabs, onSelectTab: selectTab }),
-        /* @__PURE__ */ jsx51(
-          Button,
-          {
-            variant: "secondary",
-            size: "icon-sm",
-            onClick: addTab,
-            className: "mr-1 flex-shrink-0",
-            title: "Add new tab",
-            children: /* @__PURE__ */ jsx51(IconPlus2, { className: "text-zinc-500", size: 16 })
-          }
-        )
+      /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-1 pl-1", children: [
+        isOverflow && /* @__PURE__ */ jsx52(AddTabButton, {}),
+        tabs.length > 1 && /* @__PURE__ */ jsx52(TabsListButton, { tabs, onSelectTab: selectTab })
       ] })
     ] })
   ] });
 };
-function TabSearch({
+function AddTabButton() {
+  const { addTab, selectTab } = useDatabrowserStore();
+  const rootRef = useDatabrowserRootRef();
+  const handleAddTab = () => {
+    const tabsId = addTab();
+    selectTab(tabsId);
+    setTimeout(() => {
+      const tab = rootRef?.current?.querySelector(`#tab-${tabsId}`);
+      if (!tab) return;
+      tab.scrollIntoView({ behavior: "smooth" });
+    }, 20);
+  };
+  return /* @__PURE__ */ jsx52(
+    Button,
+    {
+      "aria-label": "Add new tab",
+      variant: "secondary",
+      size: "icon-sm",
+      onClick: handleAddTab,
+      className: "flex-shrink-0",
+      children: /* @__PURE__ */ jsx52(IconPlus2, { className: "text-zinc-500", size: 16 })
+    }
+  );
+}
+function TabsListButton({
   tabs,
   onSelectTab
 }) {
   const [open, setOpen] = useState13(false);
-  const [query, setQuery] = useState13("");
-  const items = tabs.map(([id, data]) => ({
-    id,
-    label: data.search.key || data.selectedKey || "New Tab",
-    searchKey: data.search.key,
-    selectedKey: data.selectedKey,
-    selectedItemKey: data.selectedListItem?.key
-  }));
-  const buildDisplayLabel = (it) => it.selectedItemKey ? `${it.label} > ${it.selectedItemKey}` : it.label;
-  const dedupedMap = /* @__PURE__ */ new Map();
-  for (const it of items) {
-    const display = buildDisplayLabel(it);
-    const key = display.toLowerCase();
-    if (!dedupedMap.has(key)) dedupedMap.set(key, it);
-  }
-  const deduped = [...dedupedMap.values()];
-  const filtered = (query ? deduped.filter((i) => buildDisplayLabel(i).toLowerCase().includes(query.toLowerCase())) : deduped).sort((a, b) => buildDisplayLabel(a).localeCompare(buildDisplayLabel(b)));
-  return /* @__PURE__ */ jsxs35(
-    Popover,
-    {
-      open,
-      onOpenChange: (v) => {
-        setOpen(v);
-        if (!v) setQuery("");
-      },
-      children: [
-        /* @__PURE__ */ jsxs35(Tooltip, { delayDuration: 400, children: [
-          /* @__PURE__ */ jsx51(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(Button, { variant: "secondary", size: "icon-sm", "aria-label": "Search in tabs", children: /* @__PURE__ */ jsx51(IconSearch2, { className: "text-zinc-500", size: 16 }) }) }) }),
-          /* @__PURE__ */ jsx51(TooltipContent, { side: "top", children: "Search in tabs" })
-        ] }),
-        /* @__PURE__ */ jsx51(PopoverContent, { className: "w-72 p-0", align: "end", children: /* @__PURE__ */ jsxs35(Command, { children: [
-          /* @__PURE__ */ jsx51(
-            CommandInput,
-            {
-              placeholder: "Search tabs...",
-              value: query,
-              onValueChange: (v) => setQuery(v),
-              className: "h-9"
-            }
-          ),
-          /* @__PURE__ */ jsxs35(CommandList, { children: [
-            /* @__PURE__ */ jsx51(CommandEmpty, { children: "No tabs" }),
-            /* @__PURE__ */ jsx51(CommandGroup, { children: filtered.map((item) => /* @__PURE__ */ jsxs35(
-              CommandItem,
-              {
-                value: buildDisplayLabel(item),
-                onSelect: () => {
-                  onSelectTab(item.id);
-                  setOpen(false);
-                },
-                children: [
-                  item.searchKey ? /* @__PURE__ */ jsx51(IconSearch2, { size: 15 }) : /* @__PURE__ */ jsx51(TabTypeIcon, { selectedKey: item.selectedKey }),
-                  /* @__PURE__ */ jsx51("span", { className: "truncate", children: buildDisplayLabel(item) })
-                ]
-              },
-              item.id
-            )) })
-          ] })
-        ] }) })
-      ]
-    }
-  );
+  const sorted = useMemo8(() => {
+    return [...tabs].sort(([, a], [, b]) => {
+      if (a.pinned && !b.pinned) return -1;
+      if (!a.pinned && b.pinned) return 1;
+      return 0;
+    });
+  }, [tabs]);
+  const rootRef = useDatabrowserRootRef();
+  const handleSelectTab = (id) => {
+    onSelectTab(id);
+    setOpen(false);
+    setTimeout(() => {
+      const tab = rootRef?.current?.querySelector(`#tab-${id}`);
+      if (!tab) return;
+      tab.scrollIntoView({ behavior: "smooth" });
+    }, 20);
+  };
+  return /* @__PURE__ */ jsxs35(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx52(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs35(
+      Button,
+      {
+        variant: "secondary",
+        size: "sm",
+        className: "h-7 gap-1 px-2",
+        "aria-label": "Search in tabs",
+        children: [
+          /* @__PURE__ */ jsx52("span", { className: "text-xs text-zinc-600", children: tabs.length }),
+          /* @__PURE__ */ jsx52(IconChevronDown2, { className: "text-zinc-500", size: 16 })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx52(PopoverContent, { className: "w-96 p-0", align: "end", children: /* @__PURE__ */ jsx52(Command, { children: /* @__PURE__ */ jsxs35(CommandList, { children: [
+      /* @__PURE__ */ jsx52(CommandEmpty, { children: "No tabs" }),
+      /* @__PURE__ */ jsx52(CommandGroup, { children: sorted.map(([_id, item]) => /* @__PURE__ */ jsx52(
+        CommandItem,
+        {
+          style: {
+            padding: 0
+          },
+          value: item.id,
+          onSelect: () => {
+            handleSelectTab(item.id);
+          },
+          children: /* @__PURE__ */ jsx52(TabIdProvider, { value: _id, children: /* @__PURE__ */ jsx52(Tab, { id: _id, isList: true }) })
+        },
+        item.id
+      )) })
+    ] }) }) })
+  ] });
 }
 
 // src/components/databrowser/index.tsx
-import { jsx as jsx52, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
 var RedisBrowser = ({
   token,
   url,
   hideTabs,
-  storage
+  storage,
+  darkMode = "light"
 }) => {
-  const credentials = useMemo8(() => ({ token, url }), [token, url]);
+  const credentials = useMemo9(() => ({ token, url }), [token, url]);
+  const rootRef = useRef6(null);
   useEffect14(() => {
     queryClient.resetQueries();
   }, [credentials.url]);
-  return /* @__PURE__ */ jsx52(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx52(RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx52(DatabrowserProvider, { storage, children: /* @__PURE__ */ jsx52(TooltipProvider, { children: /* @__PURE__ */ jsxs36(
-    "div",
-    {
-      className: "ups-db",
-      style: { height: "100%", display: "flex", flexDirection: "column" },
-      children: [
-        !hideTabs && /* @__PURE__ */ jsx52(DatabrowserTabs, {}),
-        /* @__PURE__ */ jsx52(DatabrowserInstances, {})
-      ]
-    }
-  ) }) }) }) });
+  return /* @__PURE__ */ jsx53(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx53(RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx53(DarkModeProvider, { darkMode, children: /* @__PURE__ */ jsx53(DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ jsx53(TooltipProvider, { children: /* @__PURE__ */ jsx53(RedisBrowserRoot, { hideTabs, rootRef }) }) }) }) }) });
+};
+var RedisBrowserRoot = ({
+  hideTabs,
+  rootRef
+}) => {
+  const theme = useDarkMode();
+  return (
+    /* ups-db is the custom class used to prefix every style in the css bundle */
+    /* @__PURE__ */ jsxs36(
+      "div",
+      {
+        className: `ups-db ${theme === "dark" ? "dark" : ""}`,
+        style: { height: "100%", display: "flex", flexDirection: "column" },
+        ref: rootRef,
+        children: [
+          !hideTabs && /* @__PURE__ */ jsx53(DatabrowserTabs, {}),
+          /* @__PURE__ */ jsx53(DatabrowserInstances, {})
+        ]
+      }
+    )
+  );
 };
 var DatabrowserInstances = () => {
   const { tabs, selectedTab, selectTab, addTab } = useDatabrowserStore();
@@ -6546,7 +6719,7 @@ var DatabrowserInstances = () => {
     else if (!selectedTab) selectTab(tabs[0][0]);
   }, [tabs, selectedTab, addTab, selectTab]);
   if (!selectedTab) return;
-  return tabs.map(([id]) => /* @__PURE__ */ jsx52(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx52(DatabrowserInstance, { hidden: id !== selectedTab }) }, id));
+  return tabs.map(([id]) => /* @__PURE__ */ jsx53(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx53(DatabrowserInstance, { hidden: id !== selectedTab }) }, id));
 };
 export {
   RedisBrowser