@upstash/react-redis-browser 0.2.13 → 0.2.14-rc.1

package/dist/index.js

@@ -193,7 +193,10 @@ var queryClient = new (0, _reactquery.QueryClient)({
     }
   },
   queryCache: new (0, _reactquery.QueryCache)({
-    onError: handleError
+    onError: (error, query) => {
+      if (_optionalChain([query, 'access', _4 => _4.meta, 'optionalAccess', _5 => _5.hideToast])) return;
+      handleError(error);
+    }
   }),
   mutationCache: new (0, _reactquery.MutationCache)({
     onError: handleError
@@ -263,7 +266,7 @@ var DatabrowserProvider = ({
           removeItem: () => {
           }
         },
-        version: 5,
+        version: 6,
         migrate: (originalState, version) => {
           const state = originalState;
           if (version <= 1) {
@@ -279,6 +282,19 @@ var DatabrowserProvider = ({
               ];
             });
           }
+          if (version <= 5) {
+            state.tabs = state.tabs.map(([id, data]) => {
+              const oldData = data;
+              return [
+                id,
+                {
+                  ...data,
+                  valuesSearch: _nullishCoalesce(oldData.valuesSearch, () => ( { index: "", query: "" })),
+                  isValuesSearchSelected: _nullishCoalesce(oldData.isValuesSearchSelected, () => ( false))
+                }
+              ];
+            });
+          }
           return state;
         }
       })
@@ -310,6 +326,8 @@ var storeCreator = (set, get) => ({
       id,
       selectedKeys: [],
       search: { key: "", type: void 0 },
+      valuesSearch: { index: "", query: "" },
+      isValuesSearchSelected: false,
       pinned: false
     };
     set((old) => ({
@@ -402,7 +420,7 @@ var storeCreator = (set, get) => ({
     set({ selectedTab: id });
   },
   getSelectedKeys: (tabId) => {
-    return _nullishCoalesce(_optionalChain([get, 'call', _4 => _4(), 'access', _5 => _5.tabs, 'access', _6 => _6.find, 'call', _7 => _7(([id]) => id === tabId), 'optionalAccess', _8 => _8[1], 'optionalAccess', _9 => _9.selectedKeys]), () => ( []));
+    return _nullishCoalesce(_optionalChain([get, 'call', _6 => _6(), 'access', _7 => _7.tabs, 'access', _8 => _8.find, 'call', _9 => _9(([id]) => id === tabId), 'optionalAccess', _10 => _10[1], 'optionalAccess', _11 => _11.selectedKeys]), () => ( []));
   },
   setSelectedKey: (tabId, key) => {
     get().setSelectedKeys(tabId, key ? [key] : []);
@@ -469,6 +487,58 @@ var storeCreator = (set, get) => ({
       return { ...old, tabs: newTabs };
     });
   },
+  setValuesSearch: (tabId, valuesSearch) => {
+    set((old) => {
+      const tabIndex = old.tabs.findIndex(([id]) => id === tabId);
+      if (tabIndex === -1) return old;
+      const newTabs = [...old.tabs];
+      const [, tabData] = newTabs[tabIndex];
+      newTabs[tabIndex] = [tabId, { ...tabData, valuesSearch }];
+      return { ...old, tabs: newTabs };
+    });
+  },
+  setValuesSearchIndex: (tabId, index) => {
+    set((old) => {
+      const tabIndex = old.tabs.findIndex(([id]) => id === tabId);
+      if (tabIndex === -1) return old;
+      const newTabs = [...old.tabs];
+      const [, tabData] = newTabs[tabIndex];
+      newTabs[tabIndex] = [
+        tabId,
+        {
+          ...tabData,
+          valuesSearch: { ...tabData.valuesSearch, index }
+        }
+      ];
+      return { ...old, tabs: newTabs };
+    });
+  },
+  setValuesSearchQuery: (tabId, query) => {
+    set((old) => {
+      const tabIndex = old.tabs.findIndex(([id]) => id === tabId);
+      if (tabIndex === -1) return old;
+      const newTabs = [...old.tabs];
+      const [, tabData] = newTabs[tabIndex];
+      newTabs[tabIndex] = [
+        tabId,
+        {
+          ...tabData,
+          valuesSearch: { ...tabData.valuesSearch, query }
+        }
+      ];
+      return { ...old, tabs: newTabs };
+    });
+  },
+  setIsValuesSearchSelected: (tabId, isSelected) => {
+    set((old) => {
+      const tabIndex = old.tabs.findIndex(([id]) => id === tabId);
+      if (tabIndex === -1) return old;
+      const newTabs = [...old.tabs];
+      const [, tabData] = newTabs[tabIndex];
+      newTabs[tabIndex] = [tabId, { ...tabData, isValuesSearchSelected: isSelected }];
+      return { ...old, tabs: newTabs };
+    });
+  },
   searchHistory: [],
   addSearchHistory: (key) => {
     set((old) => ({ ...old, searchHistory: [key, ...old.searchHistory] }));
@@ -498,27 +568,37 @@ var useTab = () => {
     setSelectedListItem,
     setSearch,
     setSearchKey,
-    setSearchType
+    setSearchType,
+    setValuesSearch,
+    setValuesSearchIndex,
+    setValuesSearchQuery,
+    setIsValuesSearchSelected
   } = useDatabrowserStore();
   const tabId = useTabId();
-  const tabData = _react.useMemo.call(void 0, () => _optionalChain([tabs, 'access', _10 => _10.find, 'call', _11 => _11(([id]) => id === tabId), 'optionalAccess', _12 => _12[1]]), [tabs, tabId]);
+  const tabData = _react.useMemo.call(void 0, () => _optionalChain([tabs, 'access', _12 => _12.find, 'call', _13 => _13(([id]) => id === tabId), 'optionalAccess', _14 => _14[1]]), [tabs, tabId]);
   if (!selectedTab) throw new Error("selectedTab is undefined when using useTab()");
   if (!tabData) throw new Error("tabData is undefined when using useTab()");
   return _react.useMemo.call(void 0, 
     () => ({
       active: selectedTab === tabId,
-      selectedKey: _optionalChain([tabData, 'access', _13 => _13.selectedKeys, 'optionalAccess', _14 => _14[0]]),
+      selectedKey: _optionalChain([tabData, 'access', _15 => _15.selectedKeys, 'optionalAccess', _16 => _16[0]]),
       // Backwards compatibility - first selected key
       selectedKeys: _nullishCoalesce(tabData.selectedKeys, () => ( [])),
       selectedListItem: tabData.selectedListItem,
       search: tabData.search,
+      valuesSearch: tabData.valuesSearch,
+      isValuesSearchSelected: tabData.isValuesSearchSelected,
       pinned: tabData.pinned,
       setSelectedKey: (key) => setSelectedKey(tabId, key),
       setSelectedKeys: (keys) => setSelectedKeys(tabId, keys),
       setSelectedListItem: (item) => setSelectedListItem(tabId, item),
       setSearch: (search) => setSearch(tabId, search),
       setSearchKey: (key) => setSearchKey(tabId, key),
-      setSearchType: (type) => setSearchType(tabId, type)
+      setSearchType: (type) => setSearchType(tabId, type),
+      setValuesSearch: (search) => setValuesSearch(tabId, search),
+      setValuesSearchIndex: (index) => setValuesSearchIndex(tabId, index),
+      setValuesSearchQuery: (query) => setValuesSearchQuery(tabId, query),
+      setIsValuesSearchSelected: (isSelected) => setIsValuesSearchSelected(tabId, isSelected)
     }),
     [selectedTab, tabs, tabId]
   );
@@ -545,6 +625,7 @@ var portalRoot = root;
 var portalWrapper = wrapper;
 
 // src/components/databrowser/components/databrowser-instance.tsx
+
 var _reactresizablepanels = require('react-resizable-panels');
 
 // node_modules/clsx/dist/clsx.mjs
@@ -603,15 +684,15 @@ var getGroupRecursive = (classParts, classPartObject) => {
     return void 0;
   }
   const classRest = classParts.join(CLASS_PART_SEPARATOR);
-  return _optionalChain([classPartObject, 'access', _15 => _15.validators, 'access', _16 => _16.find, 'call', _17 => _17(({
+  return _optionalChain([classPartObject, 'access', _17 => _17.validators, 'access', _18 => _18.find, 'call', _19 => _19(({
     validator
-  }) => validator(classRest)), 'optionalAccess', _18 => _18.classGroupId]);
+  }) => validator(classRest)), 'optionalAccess', _20 => _20.classGroupId]);
 };
 var arbitraryPropertyRegex = /^\[(.+)\]$/;
 var getGroupIdForArbitraryProperty = (className) => {
   if (arbitraryPropertyRegex.test(className)) {
     const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
-    const property = _optionalChain([arbitraryPropertyClassName, 'optionalAccess', _19 => _19.substring, 'call', _20 => _20(0, arbitraryPropertyClassName.indexOf(":"))]);
+    const property = _optionalChain([arbitraryPropertyClassName, 'optionalAccess', _21 => _21.substring, 'call', _22 => _22(0, arbitraryPropertyClassName.indexOf(":"))]);
     if (property) {
       return "arbitrary.." + property;
     }
@@ -1717,7 +1798,7 @@ var getDefaultConfig = () => {
        * Font Variant Numeric
        * @see https://tailwindcss.com/docs/font-variant-numeric
        */
-      "fvn-fraction": ["diagonal-fractions", "stacked-fractions"],
+      "fvn-fraction": ["diagonal-fractions", "stacked-fractons"],
       /**
        * Letter Spacing
        * @see https://tailwindcss.com/docs/letter-spacing
@@ -3026,9 +3107,14 @@ var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function formatNumber(value) {
-  const intl = new Intl.NumberFormat("en-US");
-  return intl.format(value);
+function parseJSObjectLiteral(value) {
+  try {
+    let jsonified = value.replaceAll(/([,{]\s*)(\$?[A-Z_a-z]\w*)\s*:/g, '$1"$2":');
+    jsonified = jsonified.replaceAll(/,\s*([\]}])/g, "$1");
+    return JSON.parse(jsonified);
+  } catch (e3) {
+    return;
+  }
 }
 var units = {
   year: 24 * 60 * 60 * 1e3 * 365,
@@ -3057,54 +3143,104 @@ function formatTime(seconds) {
 }
 var isTest = typeof window !== "undefined" && window.__PLAYWRIGHT__ === true;
 
+// src/components/ui/segmented.tsx
+
+var Segmented = ({
+  options,
+  value,
+  onChange,
+  className,
+  buttonClassName
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: cn(
+        "flex w-fit gap-[2px] rounded-lg bg-zinc-200 p-[2px] text-sm dark:bg-zinc-700",
+        className
+      ),
+      children: options.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          className: cn(
+            "h-7 rounded-md px-3 transition-all",
+            value === option.key ? "bg-white text-zinc-950 dark:bg-zinc-800 dark:text-zinc-100" : "text-zinc-700 dark:text-zinc-400",
+            buttonClassName
+          ),
+          onClick: () => {
+            _optionalChain([onChange, 'optionalCall', _23 => _23(option.key)]);
+          },
+          children: option.label
+        },
+        option.key
+      ))
+    }
+  );
+};
+
 // src/components/ui/toaster.tsx
 var _reactportal = require('@radix-ui/react-portal');
 
 // src/components/ui/toast.tsx
 
-var _iconsreact = require('@tabler/icons-react');
 var _reacttoast = require('@radix-ui/react-toast'); var ToastPrimitives = _interopRequireWildcard(_reacttoast);
+var _iconsreact = require('@tabler/icons-react');
+
+// node_modules/class-variance-authority/node_modules/clsx/dist/clsx.mjs
+function r2(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) for (t = 0; t < e.length; t++) e[t] && (f = r2(e[t])) && (n && (n += " "), n += f);
+  else for (t in e) e[t] && (n && (n += " "), n += t);
+  return n;
+}
+function clsx2() {
+  for (var e, t, f = 0, n = ""; f < arguments.length; ) (e = arguments[f++]) && (t = r2(e)) && (n && (n += " "), n += t);
+  return n;
+}
 
 // node_modules/class-variance-authority/dist/index.mjs
-var falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
-var cx = clsx;
-var cva = (base, config) => (props) => {
-  var _config_compoundVariants;
-  if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-  const { variants, defaultVariants } = config;
-  const getVariantClassNames = Object.keys(variants).map((variant) => {
-    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-    if (variantProp === null) return null;
-    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-    return variants[variant][variantKey];
-  });
-  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
-    let [key, value] = param;
-    if (value === void 0) {
+var falsyToString = (value) => typeof value === "boolean" ? "".concat(value) : value === 0 ? "0" : value;
+var cx = clsx2;
+var cva = (base, config) => {
+  return (props) => {
+    var ref;
+    if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+    const { variants, defaultVariants } = config;
+    const getVariantClassNames = Object.keys(variants).map((variant) => {
+      const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+      const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+      if (variantProp === null) return null;
+      const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+      return variants[variant][variantKey];
+    });
+    const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
+      let [key, value] = param;
+      if (value === void 0) {
+        return acc;
+      }
+      acc[key] = value;
       return acc;
-    }
-    acc[key] = value;
-    return acc;
-  }, {});
-  const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
-    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
-    return Object.entries(compoundVariantOptions).every((param2) => {
-      let [key, value] = param2;
-      return Array.isArray(value) ? value.includes({
-        ...defaultVariants,
-        ...propsWithoutUndefined
-      }[key]) : {
-        ...defaultVariants,
-        ...propsWithoutUndefined
-      }[key] === value;
-    }) ? [
-      ...acc,
-      cvClass,
-      cvClassName
-    ] : acc;
-  }, []);
-  return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+    }, {});
+    const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (ref = config.compoundVariants) === null || ref === void 0 ? void 0 : ref.reduce((acc, param1) => {
+      let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param1;
+      return Object.entries(compoundVariantOptions).every((param) => {
+        let [key, value] = param;
+        return Array.isArray(value) ? value.includes({
+          ...defaultVariants,
+          ...propsWithoutUndefined
+        }[key]) : {
+          ...defaultVariants,
+          ...propsWithoutUndefined
+        }[key] === value;
+      }) ? [
+        ...acc,
+        cvClass,
+        cvClassName
+      ] : acc;
+    }, []);
+    return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+  };
 };
 
 // src/components/ui/toast.tsx
@@ -3209,18 +3345,30 @@ function Toaster() {
   ] }) });
 }
 
-// src/types/index.ts
-var DATA_TYPES = ["string", "list", "hash", "set", "zset", "json", "stream"];
-var DATA_TYPE_NAMES = {
-  string: "String",
-  list: "List",
-  hash: "Hash",
-  set: "Set",
-  zset: "Sorted Set",
-  json: "JSON",
-  stream: "Stream"
+// src/components/databrowser/hooks/use-fetch-search-indexes.tsx
+
+var FETCH_SEARCH_INDEXES_QUERY_KEY = "fetch-search-indexes";
+var useFetchSearchIndexes = (match) => {
+  const { redisNoPipeline: redis } = useRedis();
+  return _reactquery.useQuery.call(void 0, {
+    queryKey: [FETCH_SEARCH_INDEXES_QUERY_KEY],
+    queryFn: async () => {
+      let cursor = "0";
+      const finalResult = [];
+      while (true) {
+        const [newCursor, results] = await redis.scan(cursor, {
+          count: 100,
+          type: "search",
+          match
+        });
+        finalResult.push(...results);
+        if (newCursor === "0") break;
+        cursor = newCursor;
+      }
+      return finalResult;
+    }
+  });
 };
-var SIMPLE_DATA_TYPES = ["string", "json"];
 
 // src/components/databrowser/hooks/use-keys.tsx
 
@@ -3240,15 +3388,41 @@ var useFetchKeyType = (key) => {
   });
 };
 
+// src/components/databrowser/hooks/use-fetch-search-index.tsx
+
+var FETCH_SEARCH_INDEX_QUERY_KEY = "fetch-search-index";
+var useFetchSearchIndex = (indexName) => {
+  const { redisNoPipeline: redis } = useRedis();
+  return _reactquery.useQuery.call(void 0, {
+    queryKey: [FETCH_SEARCH_INDEX_QUERY_KEY, indexName],
+    queryFn: async () => {
+      if (!indexName) return;
+      const result = await redis.search.index({
+        name: indexName
+      }).describe();
+      return result;
+    },
+    enabled: Boolean(indexName)
+  });
+};
+
 // src/components/databrowser/hooks/use-keys.tsx
 
 var KeysContext = _react.createContext.call(void 0, void 0);
 var FETCH_KEYS_QUERY_KEY = "use-fetch-keys";
 var SCAN_COUNTS = [100, 300, 500];
 var KeysProvider = ({ children }) => {
-  const { active, search } = useTab();
+  const { active, search, valuesSearch, isValuesSearchSelected } = useTab();
+  const { data: searchIndexDetails, isLoading: isIndexDetailsLoading } = useFetchSearchIndex(
+    valuesSearch.index
+  );
   const { redisNoPipeline: redis } = useRedis();
-  const performScan = async (count2, cursor) => {
+  const parsedValueQuery = parseJSObjectLiteral(valuesSearch.query);
+  const isQueryEnabled = active && (isValuesSearchSelected ? Boolean(valuesSearch.index) && Boolean(searchIndexDetails) : true);
+  const redisKeyScan = async ({
+    count: count2,
+    cursor
+  }) => {
     const args = [cursor];
     if (search.key) {
       args.push("MATCH", search.key);
@@ -3258,7 +3432,48 @@ var KeysProvider = ({ children }) => {
     }
     args.push("COUNT", count2.toString());
     if (!search.type) args.push("WITHTYPE");
-    return await redis.exec(["SCAN", ...args]);
+    const [newCursor, values] = await redis.exec(["SCAN", ...args]);
+    const keys2 = [];
+    let index = 0;
+    while (true) {
+      if (search.type) {
+        if (index >= values.length) break;
+        keys2.push({ key: values[index], type: search.type });
+        index += 1;
+      } else {
+        if (index + 1 >= values.length) break;
+        keys2.push({ key: values[index], type: values[index + 1] });
+        index += 2;
+      }
+    }
+    return { cursor: newCursor, keys: keys2 };
+  };
+  const redisValueScan = async ({
+    count: count2,
+    cursor
+  }) => {
+    if (!searchIndexDetails) throw new Error("Attempted search while loading the search index");
+    const offset = Number.parseInt(cursor, 10) || 0;
+    const result = await redis.search.index({
+      name: valuesSearch.index
+    }).query({
+      filter: _nullishCoalesce(parsedValueQuery, () => ( {})),
+      limit: count2,
+      offset,
+      select: {}
+    });
+    const keys2 = result.map((doc) => ({
+      key: doc.key,
+      type: searchIndexDetails.dataType
+    }));
+    const hasMore = keys2.length >= count2;
+    const nextCursor = hasMore ? String(offset + keys2.length) : "0";
+    return { cursor: nextCursor, keys: keys2 };
+  };
+  const performScan = async (count2, cursor) => {
+    const scanFunction = isValuesSearchSelected ? redisValueScan : redisKeyScan;
+    const result = await scanFunction({ count: count2, cursor });
+    return [result.cursor, result.keys];
   };
   const scanUntilAvailable = async (cursor) => {
     let i = 0;
@@ -3272,25 +3487,12 @@ var KeysProvider = ({ children }) => {
     }
   };
   const query = _reactquery.useInfiniteQuery.call(void 0, {
-    queryKey: [FETCH_KEYS_QUERY_KEY, search],
-    // Only fetch when tab is active
-    enabled: active,
+    queryKey: [FETCH_KEYS_QUERY_KEY, search, valuesSearch, isValuesSearchSelected],
+    enabled: isQueryEnabled,
     initialPageParam: "0",
     queryFn: async ({ pageParam: lastCursor }) => {
       const [cursor, values] = await scanUntilAvailable(lastCursor);
-      const keys2 = [];
-      let index = 0;
-      while (true) {
-        if (search.type) {
-          if (index >= values.length) break;
-          keys2.push([values[index], search.type]);
-          index += 1;
-        } else {
-          if (index + 1 >= values.length) break;
-          keys2.push([values[index], values[index + 1]]);
-          index += 2;
-        }
-      }
+      const keys2 = values.map((value) => [value.key, value.type]);
       for (const [key, type] of keys2) {
         queryClient.setQueryData([FETCH_KEY_TYPE_QUERY_KEY, key], type);
       }
@@ -3300,12 +3502,15 @@ var KeysProvider = ({ children }) => {
         hasNextPage: cursor !== "0"
       };
     },
+    meta: {
+      hideToast: true
+    },
     select: (data) => data,
     getNextPageParam: ({ cursor }) => cursor,
     refetchOnMount: false
   });
   const keys = _react.useMemo.call(void 0, () => {
-    const keys2 = _nullishCoalesce(_optionalChain([query, 'access', _21 => _21.data, 'optionalAccess', _22 => _22.pages, 'access', _23 => _23.flatMap, 'call', _24 => _24((page) => page.keys)]), () => ( []));
+    const keys2 = _nullishCoalesce(_optionalChain([query, 'access', _24 => _24.data, 'optionalAccess', _25 => _25.pages, 'access', _26 => _26.flatMap, 'call', _27 => _27((page) => page.keys)]), () => ( []));
     const keysSet = /* @__PURE__ */ new Set();
     const dedupedKeys = [];
     for (const key of keys2) {
@@ -3320,7 +3525,10 @@ var KeysProvider = ({ children }) => {
     {
       value: {
         keys,
-        query
+        query: {
+          ...query,
+          isLoading: query.isLoading || isIndexDetailsLoading
+        }
       },
       children
     }
@@ -3336,8 +3544,31 @@ var useKeys = () => {
 var useKeyType = (key) => {
   const { keys } = useKeys();
   const keyTuple = _react.useMemo.call(void 0, () => keys.find(([k, _]) => k === key), [keys, key]);
-  return _optionalChain([keyTuple, 'optionalAccess', _25 => _25[1]]);
+  return _optionalChain([keyTuple, 'optionalAccess', _28 => _28[1]]);
+};
+
+// src/types/index.ts
+var DATA_TYPES = [
+  "string",
+  "list",
+  "hash",
+  "set",
+  "zset",
+  "json",
+  "stream",
+  "search"
+];
+var DATA_TYPE_NAMES = {
+  string: "String",
+  list: "List",
+  hash: "Hash",
+  set: "Set",
+  zset: "Sorted Set",
+  json: "JSON",
+  stream: "Stream",
+  search: "Search Index"
 };
+var SIMPLE_DATA_TYPES = ["string", "json"];
 
 // src/components/databrowser/components/display/display-list.tsx
 
@@ -3348,24 +3579,24 @@ var useKeyType = (key) => {
 var _reactslot = require('@radix-ui/react-slot');
 
 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",
+  "inline-flex items-center justify-center rounded-lg text-sm shadow-[0_1px_1px_0_rgba(0,0,0,0.10)]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-white/70",
+        default: "bg-white text-black border  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",
+        outline: "border border-zinc-300 bg-white hover:bg-zinc-100 hover:text-zinc-900",
+        primary: "bg-emerald-500 text-white  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",
-        sm: "px-2 h-7 rounded-md",
+        sm: "px-2 h-[26px] rounded-md",
         lg: "h-10 px-8 rounded-md",
         icon: "h-8 w-8",
-        "icon-sm": "h-7 w-7",
+        "icon-sm": "h-[26px] w-[26px] rounded-md",
         "icon-xs": "h-5 w-5"
       }
     },
@@ -3385,37 +3616,6 @@ Button.displayName = "Button";
 
 // src/components/databrowser/hooks/use-add-key.ts
 
-
-// src/components/databrowser/components/sidebar/db-size.tsx
-
-
-// src/components/ui/skeleton.tsx
-
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse rounded-md bg-zinc-900/10", className), ...props });
-}
-
-// src/components/databrowser/components/sidebar/db-size.tsx
-
-var FETCH_DB_SIZE_QUERY_KEY = "fetch-db-size";
-var DisplayDbSize = () => {
-  const { redis } = useRedis();
-  const { data: keyCount } = _reactquery.useQuery.call(void 0, {
-    queryKey: [FETCH_DB_SIZE_QUERY_KEY],
-    queryFn: async () => {
-      return await redis.dbsize();
-    }
-  });
-  if (keyCount === void 0) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-center gap-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "h-5 w-10 rounded" }) });
-  }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "", children: [
-    formatNumber(keyCount),
-    " Keys"
-  ] });
-};
-
-// src/components/databrowser/hooks/use-add-key.ts
 var useAddKey = () => {
   const { redis } = useRedis();
   const mutation = _reactquery.useMutation.call(void 0, {
@@ -3465,9 +3665,6 @@ var useAddKey = () => {
       }
     },
     onSuccess: (_, { key, type }) => {
-      queryClient.invalidateQueries({
-        queryKey: [FETCH_DB_SIZE_QUERY_KEY]
-      });
       queryClient.setQueriesData(
         {
           queryKey: [FETCH_KEYS_QUERY_KEY]
@@ -3580,7 +3777,7 @@ var useFetchListItems = ({ dataKey, type }) => {
         // +1 since first message is the last one
         LIST_DISPLAY_PAGE_SIZE + 1
       );
-      const lastMessageId = messages.length > 0 ? _optionalChain([messages, 'access', _26 => _26.at, 'call', _27 => _27(-1), 'optionalAccess', _28 => _28[0]]) : void 0;
+      const lastMessageId = messages.length > 0 ? _optionalChain([messages, 'access', _29 => _29.at, 'call', _30 => _30(-1), 'optionalAccess', _31 => _31[0]]) : void 0;
       return {
         cursor: messages.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastMessageId,
         keys: messages.map(([id, fields]) => ({
@@ -3675,9 +3872,6 @@ var useDeleteKey = () => {
     },
     onSuccess: (_, key) => {
       deleteKeyCache(key);
-      queryClient.invalidateQueries({
-        queryKey: [FETCH_DB_SIZE_QUERY_KEY]
-      });
     }
   });
   return deleteKey;
@@ -3744,7 +3938,7 @@ var useEditListItem = () => {
         }
         case "stream": {
           if (!isNew || !newKey) throw new Error("Stream data type is not mutable");
-          const opts = transformArray(_nullishCoalesce(_optionalChain([newValue, 'optionalAccess', _29 => _29.split, 'call', _30 => _30("\n")]), () => ( []))).map(
+          const opts = transformArray(_nullishCoalesce(_optionalChain([newValue, 'optionalAccess', _32 => _32.split, 'call', _33 => _33("\n")]), () => ( []))).map(
             ({ key, value }) => [key, value]
           );
           pipe.xadd(dataKey, newKey, Object.fromEntries(opts));
@@ -3772,6 +3966,12 @@ var useEditListItem = () => {
 
 
 
+// src/components/ui/skeleton.tsx
+
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse rounded-md bg-zinc-900/10", className), ...props });
+}
+
 // src/components/databrowser/components/display/header-badges.tsx
 var _bytes = require('bytes'); var _bytes2 = _interopRequireDefault(_bytes);
 
@@ -3799,6 +3999,9 @@ var useFetchKeyLength = ({ dataKey, type }) => {
         case "stream": {
           return await redis.xlen(dataKey);
         }
+        case "search": {
+          return null;
+        }
       }
       return null;
     }
@@ -3826,7 +4029,7 @@ var LengthBadge = ({
   content
 }) => {
   const { data, isLoading } = useFetchKeyLength({ dataKey, type });
-  const length = _nullishCoalesce(_optionalChain([content, 'optionalAccess', _31 => _31.length]), () => ( data));
+  const length = _nullishCoalesce(_optionalChain([content, 'optionalAccess', _34 => _34.length]), () => ( data));
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Badge, { label: "Length:", children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : length });
 };
 var SizeBadge = ({ dataKey }) => {
@@ -3847,8 +4050,8 @@ var HeaderTTLBadge = ({ dataKey }) => {
     }
   );
 };
-var Badge = ({ children, label }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-6 items-center gap-0.5 rounded-md bg-white px-2 text-xs text-zinc-700 dark:bg-zinc-200", children: [
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500 dark:text-zinc-600", children: label }),
+var Badge = ({ children, label }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-[26px] items-center gap-0.5 whitespace-nowrap rounded-md bg-zinc-200 px-2 text-xs text-zinc-700 dark:bg-zinc-200", children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500 dark:text-zinc-500", children: label }),
   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium", children })
 ] });
 
@@ -3910,7 +4113,7 @@ 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",
+      "relative flex h-8 w-full items-center justify-between rounded-lg border border-zinc-200 bg-white px-3 py-2 font-medium text-zinc-950 text-sm ring-offset-white placeholder:text-zinc-500 focus:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
       className
     ),
     ...props,
@@ -3984,7 +4187,7 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
     ),
     ...props,
     children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "svg",
         {
           width: "15",
@@ -4003,7 +4206,7 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
             }
           )
         }
-      ) }) }) }),
+      ) }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemText, { children })
     ]
   }
@@ -4178,9 +4381,9 @@ var TTLBadge = ({
     }, 1e3);
     return () => clearInterval(interval);
   }, [expireAt]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Badge, { label, children: ttl === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TTLPopover, { ttl, setTTL, isPending, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-[2px]", children: [
-    ttl === TTL_INFINITE ? "Forever" : formatTime(ttl),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconChevronDown, { className: "mt-[1px] text-zinc-400", size: 12 })
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Badge, { label, children: ttl === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TTLPopover, { ttl, setTTL, isPending, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-[2px]", children: [
+    ttl === TTL_INFINITE ? "No" : formatTime(ttl),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconChevronDown, { className: "shrink-0 text-zinc-400", size: 16 })
   ] }) }) });
 };
 
@@ -4250,9 +4453,9 @@ var useSetTTL = () => {
 
 // src/components/databrowser/components/item-context-menu.tsx
 
-
 var _reactcontextmenu = require('@radix-ui/react-context-menu'); var ContextMenuPrimitive = _interopRequireWildcard(_reactcontextmenu);
 
+
 // src/components/ui/context-menu.tsx
 
 
@@ -4464,7 +4667,8 @@ function DeleteAlertDialog({
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogHeader, { children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogTitle, { children: isPlural ? `Delete ${count2} ${itemsLabel}` : `Delete ${itemLabel}` }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogDescription, { className: "mt-5", children: [
-          "Are you sure you want to delete ",
+          "Are you sure you want to delete",
+          " ",
           isPlural ? `these ${count2} ${deletionType}s` : `this ${deletionType}`,
           "?",
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
@@ -4510,7 +4714,7 @@ var ItemContextMenu = ({
             editItem({
               type,
               dataKey,
-              itemKey: _optionalChain([data, 'optionalAccess', _32 => _32.key]),
+              itemKey: _optionalChain([data, 'optionalAccess', _35 => _35.key]),
               // For deletion
               newKey: void 0
             });
@@ -4545,7 +4749,7 @@ var ItemContextMenu = ({
           {
             onClick: () => {
               if (!data) return;
-              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _33 => _33.key]));
+              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _36 => _36.key]));
               toast({
                 description: "Key copied to clipboard"
               });
@@ -4557,11 +4761,11 @@ var ItemContextMenu = ({
             ]
           }
         ),
-        _optionalChain([data, 'optionalAccess', _34 => _34.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _optionalChain([data, 'optionalAccess', _37 => _37.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           ContextMenuItem,
           {
             onClick: () => {
-              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _35 => _35.value]), () => ( "")));
+              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _38 => _38.value]), () => ( "")));
               toast({
                 description: "Value copied to clipboard"
               });
@@ -4618,33 +4822,38 @@ var ItemContextMenu = ({
 
 var _reactscrollarea = require('@radix-ui/react-scroll-area'); var ScrollAreaPrimitive = _interopRequireWildcard(_reactscrollarea);
 
-var ScrollArea = React9.forwardRef(({ className, children, onScroll, disableRoundedInherit = false, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-  ScrollAreaPrimitive.Root,
-  {
-    ref,
-    className: cn("relative overflow-hidden", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        ScrollAreaPrimitive.Viewport,
-        {
-          onScroll,
-          className: cn("h-full w-full [&>div]:!block", !disableRoundedInherit && "rounded-[inherit]"),
-          children
-        }
-      ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollBar, {}),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollAreaPrimitive.Corner, {})
-    ]
-  }
-));
+var ScrollArea = React9.forwardRef(
+  ({ className, scrollBarClassName, children, onScroll, disableRoundedInherit = false, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    ScrollAreaPrimitive.Root,
+    {
+      ref,
+      className: cn("relative overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          ScrollAreaPrimitive.Viewport,
+          {
+            onScroll,
+            className: cn(
+              "h-full w-full [&>div]:!block",
+              !disableRoundedInherit && "rounded-[inherit]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollBar, { className: scrollBarClassName }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  )
+);
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 var ScrollBar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
     orientation: "vertical",
-    className: cn("flex h-full w-2 touch-none select-none transition-colors", className),
+    className: cn("mr-1 flex h-full w-2 touch-none select-none transition-colors", className),
     ...props,
     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       ScrollAreaPrimitive.ScrollAreaThumb,
@@ -4695,10 +4904,7 @@ var InfiniteScroll = ({
       type: "always",
       onScroll: handleScroll,
       ...props,
-      className: cn(
-        "block h-full w-full overflow-visible rounded-lg border border-zinc-200 bg-white p-1 pr-3 transition-all",
-        props.className
-      ),
+      className: cn("block h-full w-full overflow-visible transition-all", props.className),
       ref: scrollRef,
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: contentRef, children: [
         children,
@@ -4752,6 +4958,7 @@ var SimpleTooltip = ({
 
 
 
+
 var iconsMap = {
   string: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconQuote, { size: 15, stroke: 1.2 }),
   set: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLayersIntersect, { size: 15, stroke: 1.2 }),
@@ -4759,7 +4966,8 @@ var iconsMap = {
   json: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCodeDots, { size: 15, stroke: 1.2 }),
   zset: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconArrowsSort, { size: 15, stroke: 1.2 }),
   list: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.2 }),
-  stream: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.2 })
+  stream: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.2 }),
+  search: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 15, stroke: 1.2 })
 };
 var tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {
   variants: {
@@ -4771,11 +4979,12 @@ var tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-cent
       json: "bg-purple-200 text-purple-800",
       list: "bg-orange-200 text-orange-800",
       stream: "bg-green-200 text-green-800",
+      search: "bg-rose-200 text-rose-800",
       default: "bg-gray-200 text-gray-800"
     },
     type: {
       icon: "size-5",
-      badge: "h-6 px-2 uppercase whitespace-nowrap text-xs font-medium leading-none tracking-wide"
+      badge: "h-[26px] px-2 uppercase whitespace-nowrap text-xs font-medium leading-none tracking-wide"
     }
   },
   defaultVariants: {
@@ -4916,7 +5125,13 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 function KeyActions({ dataKey, content }) {
   const { mutateAsync: deleteKey } = useDeleteKey();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DropdownMenu, { modal: false, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "icon-sm", "aria-label": "Key actions", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconDotsVertical, { className: "size-4 text-zinc-500 dark:text-zinc-600" }) }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "icon-sm", "aria-label": "Key actions", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _iconsreact.IconDotsVertical,
+      {
+        className: "size-4 text-zinc-500 dark:text-zinc-600",
+        fill: "rgb(var(--color-zinc-500))"
+      }
+    ) }) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DropdownMenuContent, { className: "", align: "end", children: [
       content && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         DropdownMenuItem,
@@ -4969,15 +5184,15 @@ var DisplayHeader = ({
   const handleAddItem = () => {
     setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true });
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg bg-zinc-100", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-10 items-center justify-between gap-4", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "grow truncate text-base", children: dataKey.trim() === "" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-semibold", children: dataKey }) }),
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-[26px] items-center justify-between gap-4", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "grow truncate text-sm", children: dataKey.trim() === "" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium text-zinc-950", children: dataKey }) }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1", children: [
-        type !== "string" && type !== "json" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Add item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-4 text-zinc-500 dark:text-zinc-600" }) }) }),
+        type !== "string" && type !== "json" && type !== "search" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Add item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-4 text-zinc-500 dark:text-zinc-600" }) }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyActions, { dataKey, content })
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 flex-wrap items-center gap-1.5", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center gap-1.5 overflow-scroll", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: type, type: "badge" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SizeBadge, { dataKey }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LengthBadge, { dataKey, type, content }),
@@ -5049,7 +5264,7 @@ var useSetHashTTL = () => {
 var HashFieldTTLBadge = ({ dataKey, field }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields: [field] });
   const { mutate: setTTL, isPending } = useSetHashTTL();
-  const expireAt = _optionalChain([data, 'optionalAccess', _36 => _36[field]]);
+  const expireAt = _optionalChain([data, 'optionalAccess', _39 => _39[field]]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     TTLBadge,
     {
@@ -5146,7 +5361,7 @@ var MonacoEditor = ({
     if (!active || !monaco || !editorRef.current) {
       return;
     }
-    _optionalChain([monaco, 'optionalAccess', _37 => _37.editor, 'access', _38 => _38.setModelLanguage, 'call', _39 => _39(editorRef.current.getModel(), language)]);
+    _optionalChain([monaco, 'optionalAccess', _40 => _40.editor, 'access', _41 => _41.setModelLanguage, 'call', _42 => _42(editorRef.current.getModel(), language)]);
   }, [monaco, language, active]);
   const editor = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _react2.Editor,
@@ -5287,7 +5502,7 @@ var checkIsValidJSON = (value) => {
   try {
     JSON.parse(value);
     return true;
-  } catch (e3) {
+  } catch (e4) {
     return false;
   }
 };
@@ -5311,7 +5526,7 @@ var ListEditForm = ({
     dataKey
   });
   const findValue = () => {
-    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _40 => _40.data, 'optionalAccess', _41 => _41.pages]), () => ( []))) {
+    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _43 => _43.data, 'optionalAccess', _44 => _44.pages]), () => ( []))) {
       const item = page.keys.find((item2) => item2.key === itemKey);
       if (item && "value" in item) return item.value;
     }
@@ -5457,7 +5672,7 @@ var HashFieldTTLInfo = ({
   fields
 }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields });
-  const expireAt = _optionalChain([data, 'optionalAccess', _42 => _42[field]]);
+  const expireAt = _optionalChain([data, 'optionalAccess', _45 => _45[field]]);
   const [ttl, setTTL] = _react.useState.call(void 0, () => calculateTTL(expireAt));
   _react.useEffect.call(void 0, () => {
     setTTL(calculateTTL(expireAt));
@@ -5485,7 +5700,7 @@ var ListDisplay = ({ dataKey, type }) => {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayHeader, { dataKey, type }),
     selectedListItem && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListEditDisplay, { dataKey, type, item: selectedListItem }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("min-h-0 grow", selectedListItem && "hidden"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfiniteScroll, { query, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "table", { className: "w-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ItemContextMenu, { dataKey, type, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListItems, { dataKey, type, query }) }) }) }) }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("min-h-0 grow", selectedListItem && "hidden"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfiniteScroll, { query, className: "rounded-lg border border-zinc-200 bg-white", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "table", { className: "w-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ItemContextMenu, { dataKey, type, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListItems, { dataKey, type, query }) }) }) }) }) })
   ] });
 };
 var ListItems = ({
@@ -5494,7 +5709,7 @@ var ListItems = ({
   dataKey
 }) => {
   const { setSelectedListItem } = useTab();
-  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _43 => _43.data, 'optionalAccess', _44 => _44.pages, 'access', _45 => _45.flatMap, 'call', _46 => _46((page) => page.keys)]), () => ( [])), [query.data]);
+  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _46 => _46.data, 'optionalAccess', _47 => _47.pages, 'access', _48 => _48.flatMap, 'call', _49 => _49((page) => page.keys)]), () => ( [])), [query.data]);
   const fields = _react.useMemo.call(void 0, () => keys.map((key) => key.key), [keys]);
   const { mutate: editItem } = useEditListItem();
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -5506,7 +5721,7 @@ var ListItems = ({
         setSelectedListItem({ key });
       },
       className: cn(
-        "h-10 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100 dark:border-b-zinc-200 dark:hover:bg-zinc-200"
+        "h-9 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100 dark:border-b-zinc-200 dark:hover:bg-zinc-200"
       ),
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5570,6 +5785,17 @@ var ListItems = ({
   )) });
 };
 
+// src/components/databrowser/components/display/display-search.tsx
+
+var SearchDisplay = ({ dataKey, type }) => {
+  const { data, isLoading } = useFetchSearchIndex(dataKey);
+  const content = data ? JSON.stringify(data, null, 2) : void 0;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full w-full flex-col gap-2", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayHeader, { dataKey, type, content }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full grow flex-col gap-2 rounded-md bg-zinc-100", children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoadingText: "", isLoading: true }) : data === null || data === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500", children: "No data found" }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grow overflow-auto rounded-md border border-zinc-300 bg-white p-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "pre", { className: "whitespace-pre-wrap break-words font-mono text-sm", children: JSON.stringify(data, null, 2) }) }) })
+  ] });
+};
+
 // src/components/databrowser/components/display/display-simple.tsx
 
 
@@ -5625,10 +5851,10 @@ var DataDisplay = () => {
   const { selectedKey } = useTab();
   const { query } = useKeys();
   const type = useKeyType(selectedKey);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full p-4", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? query.isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !DATA_TYPES.includes(type) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-zinc-500", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full rounded-xl bg-zinc-100 p-5", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? query.isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !DATA_TYPES.includes(type) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-zinc-500", children: [
     "Unrecognized key type: ",
     type
-  ] }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: SIMPLE_DATA_TYPES.includes(type) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
+  ] }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: SIMPLE_DATA_TYPES.includes(type) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : type === "search" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
 // src/components/databrowser/components/add-key-modal.tsx
@@ -5636,6 +5862,7 @@ var DataDisplay = () => {
 var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _interopRequireWildcard(_reactdialog);
 
 
+
 // src/components/ui/dialog.tsx
 
 
@@ -5739,7 +5966,6 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/databrowser/components/add-key-modal.tsx
 
-
 function AddKeyModal() {
   const { setSelectedKey } = useTab();
   const [open, setOpen] = _react.useState.call(void 0, false);
@@ -5755,7 +5981,7 @@ function AddKeyModal() {
     setSelectedKey(key);
     setOpen(false);
     setTimeout(() => {
-      _optionalChain([window, 'access', _47 => _47.document, 'access', _48 => _48.querySelector, 'call', _49 => _49(`[data-key="${key}"]`), 'optionalAccess', _50 => _50.scrollIntoView, 'call', _51 => _51({
+      _optionalChain([window, 'access', _50 => _50.document, 'access', _51 => _51.querySelector, 'call', _52 => _52(`[data-key="${key}"]`), 'optionalAccess', _53 => _53.scrollIntoView, 'call', _54 => _54({
         behavior: "smooth",
         block: "start",
         inline: "nearest"
@@ -5771,7 +5997,18 @@ function AddKeyModal() {
         setOpen(open2);
       },
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Add key", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "primary", size: "icon-sm", "data-testid": "add-key-button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-4" }) }) }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Add key", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          Button,
+          {
+            variant: "primary",
+            "data-testid": "add-key-button",
+            className: "flex h-8 items-center gap-1 rounded-lg pl-2 pr-3 text-sm font-medium",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-5" }),
+              "Key"
+            ]
+          }
+        ) }) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogContent, { className: "max-w-[400px]", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTitle, { children: "Create new key" }) }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "sr-only", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactdialog.DialogDescription, { children: "Create new key" }) }),
@@ -5784,7 +6021,7 @@ function AddKeyModal() {
                   name: "type",
                   render: ({ field }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select, { value: field.value, onValueChange: field.onChange, children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "h-8 w-auto pl-[3px] pr-8", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, {}) }),
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectGroup, { children: DATA_TYPES.map((type) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: type, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: type, type: "badge" }) }, type)) }) })
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectGroup, { children: DATA_TYPES.filter((t) => t !== "search").map((type) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: type, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: type, type: "badge" }) }, type)) }) })
                   ] })
                 }
               ),
@@ -5800,7 +6037,7 @@ function AddKeyModal() {
                 }
               )
             ] }),
-            formState.errors.key && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-3 mt-2 text-xs text-red-500", children: _optionalChain([formState, 'access', _52 => _52.errors, 'access', _53 => _53.key, 'optionalAccess', _54 => _54.message]) }),
+            formState.errors.key && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-3 mt-2 text-xs text-red-500", children: _optionalChain([formState, 'access', _55 => _55.errors, 'access', _56 => _56.key, 'optionalAccess', _57 => _57.message]) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-2 text-xs text-zinc-500", children: "After creating the key, you can edit the value" }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-6 flex justify-end gap-2", children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5823,191 +6060,7 @@ function AddKeyModal() {
   );
 }
 
-// src/components/databrowser/components/sidebar/empty.tsx
-
-var Empty = () => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full w-full items-center justify-center rounded-md border bg-white px-4 py-6 text-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-5", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-md font-medium", children: "Data on a break" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-balance text-center", children: '"Quick, lure it back with some CLI magic!"' })
-  ] }) });
-};
-
-// src/components/databrowser/components/sidebar/keys-list.tsx
-
-
-// src/components/databrowser/components/sidebar-context-menu.tsx
-
-
-
-
-var SidebarContextMenu = ({ children }) => {
-  const { mutate: deleteKey } = useDeleteKey();
-  const [isAlertOpen, setAlertOpen] = _react.useState.call(void 0, false);
-  const [contextKeys, setContextKeys] = _react.useState.call(void 0, []);
-  const { addTab, setSelectedKey: setSelectedKeyGlobal, selectTab, setSearch } = useDatabrowserStore();
-  const { search: currentSearch, selectedKeys } = useTab();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      DeleteAlertDialog,
-      {
-        deletionType: "key",
-        count: contextKeys.length,
-        open: isAlertOpen,
-        onOpenChange: setAlertOpen,
-        onDeleteConfirm: (e) => {
-          e.stopPropagation();
-          for (const key of contextKeys) {
-            deleteKey(key);
-          }
-          setAlertOpen(false);
-        }
-      }
-    ),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenu, { modal: false, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        ContextMenuTrigger,
-        {
-          onContextMenu: (e) => {
-            const el = e.target;
-            const key = el.closest("[data-key]");
-            if (key && key instanceof HTMLElement && key.dataset.key !== void 0) {
-              const clickedKey = key.dataset.key;
-              if (selectedKeys.includes(clickedKey)) {
-                setContextKeys(selectedKeys);
-              } else {
-                setContextKeys([clickedKey]);
-              }
-            } else {
-              throw new Error("Key not found");
-            }
-          },
-          children
-        }
-      ),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuContent, { children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          ContextMenuItem,
-          {
-            onClick: () => {
-              navigator.clipboard.writeText(contextKeys[0]);
-              toast({
-                description: "Key copied to clipboard"
-              });
-            },
-            className: "gap-2",
-            disabled: contextKeys.length !== 1,
-            children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCopy, { size: 16 }),
-              "Copy key"
-            ]
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          ContextMenuItem,
-          {
-            onClick: () => {
-              const newTabId = addTab();
-              setSelectedKeyGlobal(newTabId, contextKeys[0]);
-              setSearch(newTabId, currentSearch);
-              selectTab(newTabId);
-            },
-            className: "gap-2",
-            disabled: contextKeys.length !== 1,
-            children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconExternalLink, { size: 16 }),
-              "Open in new tab"
-            ]
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactcontextmenu.ContextMenuSeparator, {}),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuItem, { onClick: () => setAlertOpen(true), className: "gap-2", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconTrash, { size: 16 }),
-          contextKeys.length > 1 ? `Delete ${contextKeys.length} keys` : "Delete key"
-        ] })
-      ] })
-    ] })
-  ] });
-};
-
-// src/components/databrowser/components/sidebar/keys-list.tsx
-
-var KeysList = () => {
-  const { keys } = useKeys();
-  const lastClickedIndexRef = _react.useRef.call(void 0, null);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarContextMenu, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-px" }),
-    keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        KeyItem,
-        {
-          index: i,
-          data,
-          allKeys: keys,
-          lastClickedIndexRef
-        }
-      ),
-      i !== keys.length - 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "-z-10 mx-2 h-px bg-zinc-100 dark:bg-zinc-200" })
-    ] }, data[0]))
-  ] }) });
-};
-var keyStyles = {
-  string: "border-sky-400 !bg-sky-50 text-sky-900",
-  hash: "border-amber-400 !bg-amber-50 text-amber-900",
-  set: "border-indigo-400 !bg-indigo-50 text-indigo-900",
-  zset: "border-pink-400  !bg-pink-50 text-pink-900",
-  json: "border-purple-400 !bg-purple-50 text-purple-900",
-  list: "border-orange-400 !bg-orange-50 text-orange-900",
-  stream: "border-green-400 !bg-green-50 text-green-900"
-};
-var defaultKeyStyle = "border-gray-400 !bg-gray-50 text-gray-900";
-var KeyItem = ({
-  data,
-  index,
-  allKeys,
-  lastClickedIndexRef
-}) => {
-  const { selectedKeys, setSelectedKeys, setSelectedKey } = useTab();
-  const [dataKey, dataType] = data;
-  const isKeySelected = selectedKeys.includes(dataKey);
-  const handleClick = (e) => {
-    if (e.shiftKey && lastClickedIndexRef.current !== null) {
-      const start = Math.min(lastClickedIndexRef.current, index);
-      const end = Math.max(lastClickedIndexRef.current, index);
-      const rangeKeys = allKeys.slice(start, end + 1).map(([key]) => key);
-      setSelectedKeys(rangeKeys);
-    } else if (e.metaKey || e.ctrlKey) {
-      if (isKeySelected) {
-        setSelectedKeys(selectedKeys.filter((k) => k !== dataKey));
-      } else {
-        setSelectedKeys([...selectedKeys, dataKey]);
-      }
-      lastClickedIndexRef.current = index;
-    } else {
-      setSelectedKey(dataKey);
-      lastClickedIndexRef.current = index;
-    }
-  };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    Button,
-    {
-      "data-key": dataKey,
-      variant: isKeySelected ? "default" : "ghost",
-      className: cn(
-        "relative flex h-10 w-full items-center justify-start gap-2 px-3 py-0 !ring-0 focus-visible:bg-zinc-50",
-        "-my-px select-none border border-transparent text-left",
-        isKeySelected && "shadow-sm",
-        isKeySelected && (_nullishCoalesce(keyStyles[dataType], () => ( defaultKeyStyle)))
-      ),
-      onClick: handleClick,
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: dataType, type: "icon" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "truncate whitespace-nowrap", children: dataKey })
-      ]
-    }
-  );
-};
-
-// src/components/databrowser/components/sidebar/reload-button.tsx
+// src/components/databrowser/components/sidebar/reload-button.tsx
 
 
 
@@ -6027,10 +6080,10 @@ var ReloadButton = ({
     Button,
     {
       variant: "outline",
-      size: "icon-sm",
+      size: "icon",
       onClick: handleClick,
       disabled: isLoading || isLoadingProp,
-      children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLoader2, { className: "animate-spin text-zinc-500", size: 16 }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconRefresh, { className: "text-zinc-500 dark:text-zinc-600", size: 16 })
+      children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLoader2, { className: "size-5 animate-spin text-zinc-500" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconRefresh, { className: "size-5 text-zinc-500 dark:text-zinc-600" })
     }
   ) }) });
 };
@@ -6074,7 +6127,7 @@ var SearchInput = () => {
     } else if (e.key === "Escape") {
       setState("");
       setFocusedIndex(-1);
-      _optionalChain([inputRef, 'access', _55 => _55.current, 'optionalAccess', _56 => _56.blur, 'call', _57 => _57()]);
+      _optionalChain([inputRef, 'access', _58 => _58.current, 'optionalAccess', _59 => _59.blur, 'call', _60 => _60()]);
     } else if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey) {
       e.preventDefault();
       if (focusedIndex < filteredHistory.length - 1) {
@@ -6088,7 +6141,7 @@ var SearchInput = () => {
         setFocusedIndex(focusedIndex - 1);
       } else if (filteredHistory.length > 0 && focusedIndex === 0) {
         setFocusedIndex(-1);
-        _optionalChain([inputRef, 'access', _58 => _58.current, 'optionalAccess', _59 => _59.focus, 'call', _60 => _60()]);
+        _optionalChain([inputRef, 'access', _61 => _61.current, 'optionalAccess', _62 => _62.focus, 'call', _63 => _63()]);
       } else if (filteredHistory.length > 0) {
         setFocusedIndex(filteredHistory.length - 1);
       }
@@ -6096,170 +6149,2336 @@ var SearchInput = () => {
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative grow", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Popover, { open: isFocus && filteredHistory.length > 0, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-8 rounded-md rounded-l-none border border-zinc-300 font-normal", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-8 rounded-md border border-zinc-300 font-normal", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         Input,
         {
-          ref: inputRef,
-          placeholder: "Search",
-          className: "h-full rounded-l-none border-none pr-6",
-          onKeyDown: handleKeyDown,
-          onChange: (e) => {
-            setState(e.currentTarget.value);
-            if (e.currentTarget.value.trim() === "") handleSubmit("");
-          },
-          value: state,
-          onFocus: () => {
-            setIsFocus(true);
-            setFocusedIndex(-1);
-          },
-          onBlur: () => setIsFocus(false)
+          ref: inputRef,
+          placeholder: "Search",
+          className: "h-full border-none pr-6",
+          onKeyDown: handleKeyDown,
+          onChange: (e) => {
+            setState(e.currentTarget.value);
+            if (e.currentTarget.value.trim() === "") handleSubmit("");
+          },
+          value: state,
+          onFocus: () => {
+            setIsFocus(true);
+            setFocusedIndex(-1);
+          },
+          onBlur: () => setIsFocus(false)
+        }
+      ) }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        PopoverContent,
+        {
+          className: "w-[--radix-popover-trigger-width] divide-y px-3 py-2 text-[13px] text-zinc-900",
+          autoFocus: false,
+          onOpenAutoFocus: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          children: filteredHistory.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full py-[3px]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              ref: (el) => {
+                historyItemRefs.current[index] = el;
+              },
+              onClick: () => handleSubmit(item),
+              onMouseEnter: () => setFocusedIndex(index),
+              className: `block w-full truncate rounded-sm p-1 text-left transition-colors ${focusedIndex === index ? "bg-zinc-100" : "hover:bg-zinc-100"}`,
+              children: item
+            }
+          ) }, item))
+        }
+      )
+    ] }),
+    state && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      Button,
+      {
+        type: "button",
+        variant: "link",
+        size: "icon",
+        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__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconX, { size: 16 }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Clear" })
+        ]
+      }
+    ),
+    " "
+  ] });
+};
+
+// src/components/databrowser/components/sidebar/type-selector.tsx
+
+var ALL_TYPES_KEY = "all";
+function DataTypeSelector() {
+  const { search, setSearchType } = useTab();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    Select,
+    {
+      onValueChange: (type) => {
+        if (type === ALL_TYPES_KEY) {
+          setSearchType(void 0);
+        } else {
+          setSearchType(type);
+        }
+      },
+      value: search.type === void 0 ? ALL_TYPES_KEY : search.type,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "!w-auto select-none whitespace-nowrap border-zinc-300 pr-8", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, {}) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectGroup, { children: [[ALL_TYPES_KEY, "All Types"], ...Object.entries(DATA_TYPE_NAMES)].map(
+          ([key, value]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: key, children: value }, key)
+        ) }) })
+      ]
+    }
+  );
+}
+
+// src/components/databrowser/components/header/index.tsx
+
+var Header = () => {
+  const { isValuesSearchSelected, setIsValuesSearchSelected } = useTab();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between gap-1.5", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex grow items-center gap-1.5", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        Segmented,
+        {
+          options: [
+            {
+              key: "keys",
+              label: "Keys"
+            },
+            {
+              key: "values",
+              label: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1", children: [
+                "Search",
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-[18px] items-center rounded-md bg-emerald-100 px-[5px] text-[11px] text-emerald-700", children: "NEW" })
+              ] })
+            }
+          ],
+          value: isValuesSearchSelected ? "values" : "keys",
+          onChange: (value) => {
+            setIsValuesSearchSelected(value === "values");
+          }
+        }
+      ),
+      isValuesSearchSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IndexSelector, {}) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataTypeSelector, {}),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchInput, {})
+      ] })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RefreshButton, {}),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddKeyModal, {})
+    ] })
+  ] });
+};
+var IndexSelector = () => {
+  const {
+    valuesSearch: { index },
+    setValuesSearchIndex
+  } = useTab();
+  const { data } = useFetchSearchIndexes();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center rounded-l-lg border border-r-0 border-zinc-300 bg-white px-3 text-sm text-zinc-700", children: "Index" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      Select,
+      {
+        value: index,
+        onValueChange: (value) => {
+          setValuesSearchIndex(value);
+        },
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "w-auto select-none whitespace-nowrap rounded-l-none border-zinc-300 bg-emerald-50 pr-8 text-sm font-medium text-emerald-800", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, { placeholder: "Select an index" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectGroup, { children: _optionalChain([data, 'optionalAccess', _64 => _64.map, 'call', _65 => _65((index2) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: index2, children: index2 }, index2))]) }) })
+        ]
+      }
+    )
+  ] });
+};
+var RefreshButton = () => {
+  const { query } = useKeys();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    ReloadButton,
+    {
+      onClick: () => {
+        queryClient.invalidateQueries({
+          queryKey: [FETCH_KEYS_QUERY_KEY]
+        });
+        queryClient.invalidateQueries({
+          queryKey: [FETCH_LIST_ITEMS_QUERY_KEY]
+        });
+        queryClient.invalidateQueries({
+          queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY]
+        });
+        queryClient.invalidateQueries({
+          queryKey: [FETCH_KEY_TYPE_QUERY_KEY]
+        });
+      },
+      isLoading: query.isFetching
+    }
+  );
+};
+
+// src/components/databrowser/components/header-error.tsx
+
+var formatUpstashErrorMessage = (error) => {
+  if (error.name !== "UpstashError") return error.message;
+  const commandIndex = error.message.indexOf(", command was:");
+  if (commandIndex !== -1) {
+    return error.message.slice(0, commandIndex);
+  }
+  return error.message;
+};
+var HeaderError = () => {
+  const { query } = useKeys();
+  if (!query.error) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-red-600 dark:text-red-400", children: formatUpstashErrorMessage(query.error) });
+};
+
+// src/components/databrowser/components/search/query-editor.tsx
+
+
+
+// src/components/databrowser/components/search/generate-type-definitions.tsx
+var generateTypeDefinitions = (schema) => {
+  let schemaFieldsInterface = "";
+  const schemaFields = _optionalChain([schema, 'optionalAccess', _66 => _66.schema]);
+  if (schemaFields && Object.keys(schemaFields).length > 0) {
+    const fieldLines = Object.entries(schemaFields).map(([fieldName, fieldDef]) => {
+      const fieldType = fieldDef.type;
+      let operationType;
+      switch (fieldType) {
+        case "TEXT": {
+          operationType = "StringOperations";
+          break;
+        }
+        case "U64":
+        case "I64":
+        case "F64": {
+          operationType = "NumberOperations";
+          break;
+        }
+        case "BOOL": {
+          operationType = "BooleanOperations";
+          break;
+        }
+        case "DATE": {
+          operationType = "DateOperations";
+          break;
+        }
+        default: {
+          operationType = "StringOperations";
+        }
+      }
+      const escapedFieldName = fieldName.includes(".") ? `"${fieldName}"` : fieldName;
+      return `  ${escapedFieldName}?: ${operationType};`;
+    }).join("\n");
+    schemaFieldsInterface = `
+/** Schema fields for the current index */
+interface SchemaFields {
+${fieldLines}
+}`;
+  } else {
+    schemaFieldsInterface = `
+/** Schema fields - no schema available, using dynamic fields */
+interface SchemaFields {
+  [fieldName: string]: StringOperations | NumberOperations | BooleanOperations | DateOperations;
+}`;
+  }
+  return `
+// String operations for TEXT fields
+type StringOperationMap = {
+  /** Exact match */
+  $eq: string;
+  /** Not equal */
+  $ne: string;
+  /** Match any value in array */
+  $in: string[];
+  /** Fuzzy match with optional distance */
+  $fuzzy: string | { value: string; distance?: number; transpositionCostOne?: boolean };
+  /** Phrase match with optional slop or prefix */
+  $phrase: string | { value: string } | { value: string; slop: number; prefix?: never } | { value: string; prefix: boolean; slop?: never };
+  /** Regular expression match */
+  $regex: string;
+};
+
+// Number operations for U64, I64, F64 fields
+type NumberOperationMap = {
+  /** Exact match */
+  $eq: number;
+  /** Not equal */
+  $ne: number;
+  /** Match any value in array */
+  $in: number[];
+  /** Greater than */
+  $gt: number;
+  /** Greater than or equal */
+  $gte: number;
+  /** Less than */
+  $lt: number;
+  /** Less than or equal */
+  $lte: number;
+};
+
+// Boolean operations for BOOL fields
+type BooleanOperationMap = {
+  /** Exact match */
+  $eq: boolean;
+  /** Not equal */
+  $ne: boolean;
+  /** Match any value in array */
+  $in: boolean[];
+};
+
+// Date operations for DATE fields
+type DateOperationMap = {
+  /** Exact match */
+  $eq: string | Date;
+  /** Not equal */
+  $ne: string | Date;
+  /** Match any value in array */
+  $in: (string | Date)[];
+  /** Greater than */
+  $gt: string | Date;
+  /** Greater than or equal */
+  $gte: string | Date;
+  /** Less than */
+  $lt: string | Date;
+  /** Less than or equal */
+  $lte: string | Date;
+};
+
+// String field operations with optional boost
+type StringOperations = 
+  | { $eq: string; $boost?: number }
+  | { $ne: string; $boost?: number }
+  | { $in: string[]; $boost?: number }
+  | { $fuzzy: string | { value: string; distance?: number; transpositionCostOne?: boolean }; $boost?: number }
+  | { $phrase: string | { value: string } | { value: string; slop: number; prefix?: never } | { value: string; prefix: boolean; slop?: never }; $boost?: number }
+  | { $regex: string; $boost?: number }
+  | string;
+
+// Number field operations with optional boost  
+type NumberOperations =
+  | { $eq: number; $boost?: number }
+  | { $ne: number; $boost?: number }
+  | { $in: number[]; $boost?: number }
+  | { $gt: number; $boost?: number }
+  | { $gte: number; $boost?: number }
+  | { $lt: number; $boost?: number }
+  | { $lte: number; $boost?: number }
+  | number;
+
+// Boolean field operations with optional boost
+type BooleanOperations =
+  | { $eq: boolean; $boost?: number }
+  | { $ne: boolean; $boost?: number }
+  | { $in: boolean[]; $boost?: number }
+  | boolean;
+
+// Date field operations with optional boost
+type DateOperations =
+  | { $eq: string | Date; $boost?: number }
+  | { $ne: string | Date; $boost?: number }
+  | { $in: (string | Date)[]; $boost?: number }
+  | { $gt: string | Date; $boost?: number }
+  | { $gte: string | Date; $boost?: number }
+  | { $lt: string | Date; $boost?: number }
+  | { $lte: string | Date; $boost?: number }
+  | string
+  | Date;
+
+${schemaFieldsInterface}
+
+// Query leaf - field conditions without logical operators
+type QueryLeaf = SchemaFields & {
+  $and?: never;
+  $or?: never;
+  $must?: never;
+  $should?: never;
+  $mustNot?: never;
+  $boost?: never;
+};
+
+// Base type for boolean nodes - allows field conditions
+type BoolBase = SchemaFields;
+
+// $and: all conditions must match
+type AndNode = BoolBase & {
+  /** All conditions in this array must match */
+  $and: QueryFilter | QueryFilter[];
+  /** Boost score for this node */
+  $boost?: number;
+  $or?: never;
+  $must?: never;
+  $should?: never;
+  $mustNot?: never;
+};
+
+// $or: at least one condition must match
+type OrNode = BoolBase & {
+  /** At least one condition must match */
+  $or: QueryFilter | QueryFilter[];
+  /** Boost score for this node */
+  $boost?: number;
+  $and?: never;
+  $must?: never;
+  $should?: never;
+  $mustNot?: never;
+};
+
+// $must only (Elasticsearch-style)
+type MustNode = BoolBase & {
+  /** All conditions must match (similar to $and) */
+  $must: QueryFilter | QueryFilter[];
+  /** Boost score for this node */
+  $boost?: number;
+  $and?: never;
+  $or?: never;
+  $should?: never;
+  $mustNot?: never;
+};
+
+// $should only (Elasticsearch-style)
+type ShouldNode = BoolBase & {
+  /** At least one should match (affects scoring) */
+  $should: QueryFilter | QueryFilter[];
+  /** Boost score for this node */
+  $boost?: number;
+  $and?: never;
+  $or?: never;
+  $must?: never;
+  $mustNot?: never;
+};
+
+// $must + $should combined
+type MustShouldNode = BoolBase & {
+  /** All these must match */
+  $must: QueryFilter | QueryFilter[];
+  /** At least one should match for higher score */
+  $should: QueryFilter | QueryFilter[];
+  $and?: never;
+  $or?: never;
+  $mustNot?: never;
+};
+
+// $mustNot only
+type NotNode = BoolBase & {
+  /** None of these conditions should match */
+  $mustNot: QueryFilter | QueryFilter[];
+  /** Boost score for this node */
+  $boost?: number;
+  $and?: never;
+  $or?: never;
+  $must?: never;
+  $should?: never;
+};
+
+// $and + $mustNot combined
+type AndNotNode = BoolBase & {
+  $and: QueryFilter | QueryFilter[];
+  $mustNot: QueryFilter | QueryFilter[];
+  $boost?: number;
+  $or?: never;
+  $must?: never;
+  $should?: never;
+};
+
+// $or + $mustNot combined
+type OrNotNode = BoolBase & {
+  $or: QueryFilter | QueryFilter[];
+  $mustNot: QueryFilter | QueryFilter[];
+  $boost?: number;
+  $and?: never;
+  $must?: never;
+  $should?: never;
+};
+
+// $should + $mustNot combined
+type ShouldNotNode = BoolBase & {
+  $should: QueryFilter | QueryFilter[];
+  $mustNot: QueryFilter | QueryFilter[];
+  $boost?: number;
+  $and?: never;
+  $or?: never;
+  $must?: never;
+};
+
+// $must + $mustNot combined
+type MustNotNode = BoolBase & {
+  $must: QueryFilter | QueryFilter[];
+  $mustNot: QueryFilter | QueryFilter[];
+  $boost?: number;
+  $and?: never;
+  $or?: never;
+  $should?: never;
+};
+
+// Full boolean node: $must + $should + $mustNot
+type BoolNode = BoolBase & {
+  $must: QueryFilter | QueryFilter[];
+  $should: QueryFilter | QueryFilter[];
+  $mustNot: QueryFilter | QueryFilter[];
+  $boost?: number;
+  $and?: never;
+  $or?: never;
+};
+
+// Query filter - union of all node types
+type QueryFilter =
+  | QueryLeaf
+  | AndNode
+  | OrNode
+  | MustNode
+  | ShouldNode
+  | MustShouldNode
+  | NotNode
+  | AndNotNode
+  | OrNotNode
+  | ShouldNotNode
+  | MustNotNode
+  | BoolNode;
+
+// Root-level $or restriction (no field conditions at root with $or)
+type RootOrNode = {
+  $or: QueryFilter | QueryFilter[];
+  $boost?: number;
+  $and?: never;
+  $must?: never;
+  $should?: never;
+  $mustNot?: never;
+};
+
+// Root query filter - restricts $or from mixing with fields at root level
+type Query =
+  | QueryLeaf
+  | AndNode
+  | RootOrNode
+  | MustNode
+  | ShouldNode
+  | MustShouldNode
+  | NotNode
+  | AndNotNode
+  | ShouldNotNode
+  | MustNotNode
+  | BoolNode;
+`;
+};
+
+// src/components/databrowser/components/search/query-editor.tsx
+
+var QueryEditor = (props) => {
+  return isTest ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TestQueryEditor, { ...props }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MonacoQueryEditor, { ...props });
+};
+var MonacoQueryEditor = ({ value, onChange, height, schema }) => {
+  const monaco = _react2.useMonaco.call(void 0, );
+  const editorRef = _react.useRef.call(void 0, null);
+  const theme = useTheme();
+  const typeDefinitions = _react.useMemo.call(void 0, () => generateTypeDefinitions(schema), [schema]);
+  const extraLibRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (!monaco) return;
+    if (extraLibRef.current) extraLibRef.current.dispose();
+    extraLibRef.current = monaco.languages.typescript.typescriptDefaults.addExtraLib(
+      typeDefinitions,
+      "file:///query-types.d.ts"
+    );
+  }, [monaco, typeDefinitions]);
+  const handleChange = (newValue = "") => {
+    const match = isQueryStringValid(newValue);
+    if (match) {
+      onChange(newValue);
+    } else {
+      _optionalChain([editorRef, 'access', _67 => _67.current, 'optionalAccess', _68 => _68.setValue, 'optionalCall', _69 => _69(value)]);
+    }
+  };
+  _react.useEffect.call(void 0, () => {
+    if (!isQueryStringValid(value)) onChange("const query: Query = {}");
+  }, [value, editorRef.current, onChange]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("group/editor relative"), style: { height }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _react2.Editor,
+    {
+      theme: theme === "dark" ? "vs-dark" : "light",
+      loading: void 0,
+      beforeMount: handleBeforeMount,
+      onMount: (editor) => {
+        editorRef.current = editor;
+      },
+      value,
+      onChange: handleChange,
+      defaultLanguage: "typescript",
+      path: "query.ts",
+      options: {
+        wordWrap: "on",
+        overviewRulerBorder: false,
+        overviewRulerLanes: 0,
+        formatOnPaste: true,
+        formatOnType: true,
+        renderWhitespace: "none",
+        smoothScrolling: true,
+        scrollbar: {
+          verticalScrollbarSize: 6
+        },
+        autoIndent: "full",
+        guides: { indentation: false },
+        fontSize: 13,
+        cursorBlinking: "smooth",
+        minimap: { enabled: false },
+        folding: true,
+        glyphMargin: false,
+        lineNumbers: "on",
+        parameterHints: { enabled: true },
+        lineDecorationsWidth: 0,
+        automaticLayout: true,
+        scrollBeyondLastLine: false,
+        renderLineHighlight: "line",
+        unusualLineTerminators: "auto",
+        padding: { top: 8, bottom: 8 },
+        quickSuggestions: true,
+        suggest: {
+          showVariables: false,
+          showConstants: false,
+          showFunctions: false,
+          showClasses: false,
+          showInterfaces: false,
+          showModules: false,
+          showKeywords: false
+        },
+        suggestOnTriggerCharacters: true,
+        acceptSuggestionOnEnter: "on",
+        tabCompletion: "on",
+        wordBasedSuggestions: "off",
+        // Disable navigation features
+        gotoLocation: {
+          multiple: "goto",
+          multipleDefinitions: "goto",
+          multipleTypeDefinitions: "goto",
+          multipleDeclarations: "goto",
+          multipleImplementations: "goto",
+          multipleReferences: "goto"
+        },
+        definitionLinkOpensInPeek: false,
+        contextmenu: false
+      },
+      className: "[&_.current-line]:!border-none [&_.current-line]:!bg-emerald-50 [&_.monaco-editor-background]:!bg-transparent [&_.monaco-editor]:!bg-transparent [&_[role='presentation']]:!bg-transparent"
+    }
+  ) });
+};
+var isQueryStringValid = (value) => {
+  return value.startsWith("const query: Query = {") && value.endsWith("}");
+};
+var handleBeforeMount = (monaco) => {
+  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.ES2020,
+    allowNonTsExtensions: true,
+    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+    module: monaco.languages.typescript.ModuleKind.CommonJS,
+    noEmit: true,
+    esModuleInterop: true,
+    strict: true,
+    allowJs: true
+  });
+  monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    noSemanticValidation: false,
+    noSyntaxValidation: false
+  });
+  monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
+};
+var TestQueryEditor = ({ value, onChange, height }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("group/editor relative"), style: { height }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "textarea",
+    {
+      "aria-label": "query-editor",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      className: "h-full w-full resize-none bg-transparent p-2 font-mono text-sm"
+    }
+  ) });
+};
+
+// src/components/databrowser/components/query-builder.tsx
+
+var QueryBuilder = () => {
+  const { valuesSearch, setValuesSearchQuery } = useTab();
+  const { data: indexDetails } = useFetchSearchIndex(valuesSearch.index);
+  const editorValue = PREFIX + (valuesSearch.query || "{}");
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rounded-lg border border-zinc-300 bg-white px-[6px] dark:border-zinc-700", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    QueryEditor,
+    {
+      height: 300,
+      value: editorValue,
+      onChange: (value) => {
+        const queryPart = value.slice(PREFIX.length);
+        setValuesSearchQuery(queryPart);
+      },
+      schema: indexDetails
+    }
+  ) });
+};
+
+// src/components/databrowser/components/search-empty-state.tsx
+
+
+var SearchEmptyState = () => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-8 rounded-xl border border-zinc-200 bg-gradient-to-b from-zinc-50 to-white p-8", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "mb-2 text-lg font-semibold text-zinc-900", children: "Redis Search" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-6 max-w-md text-sm leading-relaxed text-zinc-600", children: "Redis Search allows you to create indexes on your existing keys and perform fast, full-text searches across your data." }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-3", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-xs font-medium uppercase tracking-wider text-zinc-400", children: "How it works" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-2.5", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconDatabase, { size: 16 }) }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "text-sm font-medium text-zinc-900", children: "Store your data" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-zinc-500", children: "Add documents as JSON, Hash, or String keys (string content must be valid JSON)." })
+            ] })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCode, { size: 16 }) }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "text-sm font-medium text-zinc-900", children: "Create an index" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-zinc-500", children: "Define a search index specifying which fields to search on." })
+            ] })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 16 }) }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "text-sm font-medium text-zinc-900", children: "Search your data" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-zinc-500", children: "Query with filters, full-text search, and sorted results." })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "a",
+        {
+          href: "https://upstash.com/docs/redis/sdks/ts/commands/search",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "mt-5 inline-block text-sm text-emerald-600 underline-offset-2 hover:underline",
+          children: "Learn more about Redis Search \u2192"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-72 flex-col items-center justify-center rounded-lg border border-dashed border-zinc-300 bg-white p-6", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-zinc-100 text-zinc-500", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconDownload, { size: 24 }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "mb-1 text-sm font-medium text-zinc-900", children: "Get started quickly" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-4 text-center text-xs text-zinc-500", children: "Import a sample dataset to try out Redis Search" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          onClick: () => {
+          },
+          className: "rounded-lg bg-zinc-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-zinc-800",
+          children: "Import a sample dataset"
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/databrowser/components/sidebar/empty.tsx
+
+var Empty = () => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full w-full items-center justify-center rounded-md border bg-white px-4 py-6 text-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-5", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-md font-medium", children: "Data on a break" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-balance text-center", children: '"Quick, lure it back with some CLI magic!"' })
+  ] }) });
+};
+
+// src/components/databrowser/components/sidebar/keys-list.tsx
+
+
+
+// src/components/databrowser/components/sidebar-context-menu.tsx
+
+
+
+
+var SidebarContextMenu = ({ children }) => {
+  const { mutate: deleteKey } = useDeleteKey();
+  const [isAlertOpen, setAlertOpen] = _react.useState.call(void 0, false);
+  const [contextKeys, setContextKeys] = _react.useState.call(void 0, []);
+  const {
+    addTab,
+    setSelectedKey: setSelectedKeyGlobal,
+    selectTab,
+    setSearch
+  } = useDatabrowserStore();
+  const { search: currentSearch, selectedKeys } = useTab();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      DeleteAlertDialog,
+      {
+        deletionType: "key",
+        count: contextKeys.length,
+        open: isAlertOpen,
+        onOpenChange: setAlertOpen,
+        onDeleteConfirm: (e) => {
+          e.stopPropagation();
+          for (const key of contextKeys) {
+            deleteKey(key);
+          }
+          setAlertOpen(false);
+        }
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenu, { modal: false, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        ContextMenuTrigger,
+        {
+          onContextMenu: (e) => {
+            const el = e.target;
+            const key = el.closest("[data-key]");
+            if (key && key instanceof HTMLElement && key.dataset.key !== void 0) {
+              const clickedKey = key.dataset.key;
+              if (selectedKeys.includes(clickedKey)) {
+                setContextKeys(selectedKeys);
+              } else {
+                setContextKeys([clickedKey]);
+              }
+            } else {
+              throw new Error("Key not found");
+            }
+          },
+          children
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuContent, { children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          ContextMenuItem,
+          {
+            onClick: () => {
+              navigator.clipboard.writeText(contextKeys[0]);
+              toast({
+                description: "Key copied to clipboard"
+              });
+            },
+            className: "gap-2",
+            disabled: contextKeys.length !== 1,
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCopy, { size: 16 }),
+              "Copy key"
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          ContextMenuItem,
+          {
+            onClick: () => {
+              const newTabId = addTab();
+              setSelectedKeyGlobal(newTabId, contextKeys[0]);
+              setSearch(newTabId, currentSearch);
+              selectTab(newTabId);
+            },
+            className: "gap-2",
+            disabled: contextKeys.length !== 1,
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconExternalLink, { size: 16 }),
+              "Open in new tab"
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactcontextmenu.ContextMenuSeparator, {}),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuItem, { onClick: () => setAlertOpen(true), className: "gap-2", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconTrash, { size: 16 }),
+          contextKeys.length > 1 ? `Delete ${contextKeys.length} keys` : "Delete key"
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/databrowser/components/sidebar/keys-list.tsx
+
+var KeysList = () => {
+  const { keys } = useKeys();
+  const lastClickedIndexRef = _react.useRef.call(void 0, null);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarContextMenu, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-px" }),
+    keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        KeyItem,
+        {
+          index: i,
+          data,
+          allKeys: keys,
+          lastClickedIndexRef
+        }
+      ),
+      i !== keys.length - 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "-z-10 mx-[13px] h-px bg-zinc-200 dark:bg-zinc-200" })
+    ] }, data[0]))
+  ] }) });
+};
+var keyStyles = {
+  string: "border-sky-400 !bg-sky-50 text-sky-900",
+  hash: "border-amber-400 !bg-amber-50 text-amber-900",
+  set: "border-indigo-400 !bg-indigo-50 text-indigo-900",
+  zset: "border-pink-400  !bg-pink-50 text-pink-900",
+  json: "border-purple-400 !bg-purple-50 text-purple-900",
+  list: "border-orange-400 !bg-orange-50 text-orange-900",
+  stream: "border-green-400 !bg-green-50 text-green-900",
+  search: "border-rose-400 !bg-rose-50 text-rose-900"
+};
+var defaultKeyStyle = "border-gray-400 !bg-gray-50 text-gray-900";
+var KeyItem = ({
+  data,
+  index,
+  allKeys,
+  lastClickedIndexRef
+}) => {
+  const { selectedKeys, setSelectedKeys, setSelectedKey } = useTab();
+  const [dataKey, dataType] = data;
+  const isKeySelected = selectedKeys.includes(dataKey);
+  const handleClick = (e) => {
+    if (e.shiftKey && lastClickedIndexRef.current !== null) {
+      const start = Math.min(lastClickedIndexRef.current, index);
+      const end = Math.max(lastClickedIndexRef.current, index);
+      const rangeKeys = allKeys.slice(start, end + 1).map(([key]) => key);
+      setSelectedKeys(rangeKeys);
+    } else if (e.metaKey || e.ctrlKey) {
+      if (isKeySelected) {
+        setSelectedKeys(selectedKeys.filter((k) => k !== dataKey));
+      } else {
+        setSelectedKeys([...selectedKeys, dataKey]);
+      }
+      lastClickedIndexRef.current = index;
+    } else {
+      setSelectedKey(dataKey);
+      lastClickedIndexRef.current = index;
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "button",
+    {
+      "data-key": dataKey,
+      className: cn(
+        "relative flex h-10 w-full items-center justify-start gap-2 rounded-lg px-3 py-0 !ring-0 transition-colors focus-visible:bg-zinc-50",
+        "-my-px select-none border border-transparent text-left",
+        isKeySelected && "shadow-sm",
+        isKeySelected && (_nullishCoalesce(keyStyles[dataType], () => ( defaultKeyStyle)))
+      ),
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: dataType, type: "icon" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "grow truncate whitespace-nowrap", children: dataKey }),
+        isKeySelected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconChevronRight, { className: "shrink-0 text-zinc-500", size: 20 })
+      ]
+    }
+  );
+};
+
+// src/components/databrowser/components/sidebar/skeleton-buttons.tsx
+
+var DEFAULT_SKELETON_COUNT = 6;
+var LoadingSkeleton = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "block h-full w-full rounded-lg bg-zinc-100 p-1 pr-3 transition-all", children: Array.from({ length: DEFAULT_SKELETON_COUNT }).fill(0).map((_, idx) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center gap-2 px-3", children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "size-5 shrink-0 rounded" }),
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "h-4 grow rounded" })
+] }, idx)) });
+
+// src/components/databrowser/components/sidebar/index.tsx
+
+function Sidebar() {
+  const { keys, query } = useKeys();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full flex-col gap-2", children: query.isLoading && keys.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingSkeleton, {}) : keys.length > 0 ? (
+    // Infinite scroll already has a loader at the bottom
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      InfiniteScroll,
+      {
+        query,
+        disableRoundedInherit: true,
+        className: "min-h-0 rounded-xl bg-zinc-100 px-2 py-5 pr-4",
+        scrollBarClassName: "py-5",
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysList, {})
+      }
+    )
+  ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Empty, {}) });
+}
+
+// src/components/databrowser/components/ui-query-builder/query-builder-context.tsx
+
+
+// src/components/databrowser/components/ui-query-builder/types.ts
+var STRING_OPERATORS = ["eq", "ne", "in", "contains", "fuzzy"];
+var NUMBER_OPERATORS = ["eq", "ne", "gt", "gte", "lt", "lte", "in"];
+var BOOLEAN_OPERATORS = ["eq", "ne"];
+var DATE_OPERATORS = ["eq", "ne", "gt", "gte", "lt", "lte", "in"];
+var ALL_OPERATORS = [
+  "eq",
+  "ne",
+  "gt",
+  "gte",
+  "lt",
+  "lte",
+  "in",
+  "contains",
+  "fuzzy"
+];
+var OPERATOR_OPTIONS = [
+  { value: "eq", label: "eq" },
+  { value: "ne", label: "ne" },
+  { value: "gt", label: "gt" },
+  { value: "gte", label: "gte" },
+  { value: "lt", label: "lt" },
+  { value: "lte", label: "lte" },
+  { value: "in", label: "in" },
+  { value: "contains", label: "contains" },
+  { value: "fuzzy", label: "fuzzy" }
+];
+var getOperatorsForFieldType = (fieldType) => {
+  switch (fieldType) {
+    case "string": {
+      return STRING_OPERATORS;
+    }
+    case "number": {
+      return NUMBER_OPERATORS;
+    }
+    case "boolean": {
+      return BOOLEAN_OPERATORS;
+    }
+    case "date": {
+      return DATE_OPERATORS;
+    }
+    default: {
+      return ALL_OPERATORS;
+    }
+  }
+};
+var generateId = () => {
+  return Math.random().toString(36).slice(2, 11);
+};
+
+// src/components/databrowser/components/ui-query-builder/query-stringify.ts
+var jsonToJsLiteral = (json) => {
+  return json.replaceAll(/"([$A-Z_a-z][\w$]*)"\s*:/g, "$1:");
+};
+var toJsLiteral = (obj) => {
+  return jsonToJsLiteral(JSON.stringify(obj, null, 2));
+};
+var buildOperatorValue = (operator, value, fuzzyDistance) => {
+  if (operator === "fuzzy" && fuzzyDistance) {
+    return { value, distance: fuzzyDistance };
+  }
+  return value;
+};
+var conditionToObject = (node) => {
+  const { field, operator, value, boost: conditionBoost, fuzzyDistance } = node.condition;
+  const effectiveBoost = _nullishCoalesce(node.boost, () => ( conditionBoost));
+  if (operator === "eq" && !effectiveBoost && !node.not) {
+    return { [field]: value };
+  }
+  const fieldCondition = {
+    [`$${operator}`]: buildOperatorValue(operator, value, fuzzyDistance)
+  };
+  if (conditionBoost && conditionBoost !== 1 && !node.boost) {
+    fieldCondition.$boost = conditionBoost;
+  }
+  const condition = { [field]: fieldCondition };
+  if (node.boost && node.boost !== 1) {
+    condition.$boost = node.boost;
+  }
+  if (node.not) {
+    return { $mustNot: [condition] };
+  }
+  return condition;
+};
+var canMergeChildren = (children) => {
+  return children.every(
+    (child) => child.type === "condition" && !child.not && !child.boost && child.condition.operator === "eq" && !child.condition.boost
+  );
+};
+var mergeConditions = (children, boost) => {
+  const merged = {};
+  for (const child of children) {
+    if (child.type === "condition") {
+      merged[child.condition.field] = child.condition.value;
+    }
+  }
+  if (boost && boost !== 1) {
+    merged.$boost = boost;
+  }
+  return merged;
+};
+var groupToObject = (node, isRoot) => {
+  const { groupOperator, children, boost, not } = node;
+  if (isRoot && groupOperator === "and" && children.length === 1 && !not && !boost) {
+    return queryNodeToObject(children[0], false);
+  }
+  if (children.length > 0 && !not && canMergeChildren(children)) {
+    const merged = mergeConditions(children, boost);
+    if (isRoot && groupOperator === "and") {
+      return merged;
+    }
+    const result = { [`$${groupOperator}`]: merged };
+    if (boost && boost !== 1) {
+      result.$boost = boost;
+    }
+    return result;
+  }
+  const childObjects = children.map((child) => queryNodeToObject(child, false));
+  const group = { [`$${groupOperator}`]: childObjects };
+  if (boost && boost !== 1) {
+    group.$boost = boost;
+  }
+  if (not) {
+    if (groupOperator === "or" && !boost) {
+      return { $mustNot: childObjects };
+    }
+    return { $mustNot: [group] };
+  }
+  return group;
+};
+var queryNodeToObject = (node, isRoot = false) => {
+  if (node.type === "condition") {
+    return conditionToObject(node);
+  }
+  if (node.type === "group") {
+    return groupToObject(node, isRoot);
+  }
+  return {};
+};
+var stringifyQueryState = (state) => {
+  const obj = queryNodeToObject(state.root, true);
+  return toJsLiteral(obj);
+};
+
+// src/components/databrowser/components/ui-query-builder/query-parser.ts
+var isOperatorKey = (key) => key.startsWith("$");
+var isFieldConditionObject = (obj) => {
+  if (!obj || typeof obj !== "object" || Array.isArray(obj)) return false;
+  const keys = Object.keys(obj);
+  return keys.some((key) => ALL_OPERATORS.some((op) => key === `$${op}`));
+};
+var parseFieldCondition = (field, fieldValue) => {
+  if (!isFieldConditionObject(fieldValue)) {
+    return {
+      id: generateId(),
+      type: "condition",
+      condition: {
+        field,
+        operator: "eq",
+        value: fieldValue
+      }
+    };
+  }
+  const fieldObj = fieldValue;
+  let operator = "eq";
+  let value = "";
+  let fuzzyDistance;
+  let boost;
+  for (const op of ALL_OPERATORS) {
+    const key = `$${op}`;
+    if (key in fieldObj) {
+      operator = op;
+      value = fieldObj[key];
+      if (op === "fuzzy" && typeof value === "object" && value !== null) {
+        const fuzzyObj = value;
+        value = _nullishCoalesce(fuzzyObj.value, () => ( ""));
+        fuzzyDistance = _nullishCoalesce(fuzzyObj.distance, () => ( 1));
+      }
+      break;
+    }
+  }
+  if ("$boost" in fieldObj) {
+    boost = fieldObj.$boost;
+  }
+  return {
+    id: generateId(),
+    type: "condition",
+    condition: {
+      field,
+      operator,
+      value,
+      fuzzyDistance,
+      boost
+    }
+  };
+};
+var parseMultiFieldObject = (obj, operator) => {
+  const children = [];
+  let boost;
+  for (const [key, value] of Object.entries(obj)) {
+    if (key === "$boost") {
+      boost = value;
+    } else if (!isOperatorKey(key)) {
+      children.push(parseFieldCondition(key, value));
+    }
+  }
+  return { id: generateId(), type: "group", groupOperator: operator, children, boost };
+};
+var parseMustNot = (notValue) => {
+  if (Array.isArray(notValue)) {
+    if (notValue.length === 0) return null;
+    if (notValue.length === 1) {
+      const innerNode = objectToQueryNode(notValue[0]);
+      if (innerNode) innerNode.not = true;
+      return innerNode;
+    }
+    const children = notValue.map((child) => objectToQueryNode(child)).filter((n) => n !== null);
+    if (children.length === 0) return null;
+    return { id: generateId(), type: "group", groupOperator: "or", children, not: true };
+  }
+  if (typeof notValue === "object" && notValue !== null) {
+    const innerNode = objectToQueryNode(notValue);
+    if (innerNode) innerNode.not = true;
+    return innerNode;
+  }
+  return null;
+};
+var parseGroup = (groupValue, operator, boost) => {
+  if (Array.isArray(groupValue)) {
+    return {
+      id: generateId(),
+      type: "group",
+      groupOperator: operator,
+      children: groupValue.map((child) => objectToQueryNode(child)).filter((n) => n !== null),
+      boost
+    };
+  }
+  if (typeof groupValue === "object" && groupValue !== null) {
+    const group = parseMultiFieldObject(groupValue, operator);
+    if (boost !== void 0) group.boost = boost;
+    return group;
+  }
+  return null;
+};
+var objectToQueryNode = (obj) => {
+  if (!obj || typeof obj !== "object") return null;
+  const keys = Object.keys(obj);
+  if (keys.length === 0) return null;
+  if ("$mustNot" in obj) {
+    return parseMustNot(obj.$mustNot);
+  }
+  if ("$and" in obj || "$or" in obj) {
+    const operator = "$and" in obj ? "and" : "or";
+    const groupValue = _nullishCoalesce(obj["$and"], () => ( obj["$or"]));
+    const boost = "$boost" in obj ? obj.$boost : void 0;
+    return parseGroup(groupValue, operator, boost);
+  }
+  const nonOperatorKeys = keys.filter((key) => !isOperatorKey(key));
+  if (nonOperatorKeys.length === 0) return null;
+  const nodeBoost = "$boost" in obj ? obj.$boost : void 0;
+  if (nonOperatorKeys.length === 1) {
+    const field = nonOperatorKeys[0];
+    const condition = parseFieldCondition(field, obj[field]);
+    if (nodeBoost !== void 0) condition.boost = nodeBoost;
+    return condition;
+  }
+  return parseMultiFieldObject(obj, "and");
+};
+var parseQueryString = (queryString) => {
+  if (!queryString || queryString.trim() === "" || queryString.trim() === "{}") {
+    return createInitialQueryState();
+  }
+  try {
+    const obj = parseJSObjectLiteral(queryString);
+    if (!obj) return null;
+    const root2 = objectToQueryNode(obj);
+    if (root2) {
+      if (root2.type === "condition") {
+        return {
+          root: {
+            id: generateId(),
+            type: "group",
+            groupOperator: "and",
+            children: [root2]
+          }
+        };
+      }
+      return { root: root2 };
+    }
+  } catch (e5) {
+  }
+  return null;
+};
+var createEmptyCondition = (field) => ({
+  id: generateId(),
+  type: "condition",
+  condition: { field: field || "", operator: "eq", value: "" }
+});
+var createEmptyGroup = (operator = "and") => ({
+  id: generateId(),
+  type: "group",
+  groupOperator: operator,
+  children: []
+});
+var createInitialQueryState = () => ({
+  root: {
+    id: generateId(),
+    type: "group",
+    groupOperator: "and",
+    children: [createEmptyCondition()]
+  }
+});
+
+// src/components/databrowser/components/ui-query-builder/query-builder-context.tsx
+
+var QueryBuilderUIContext = _react.createContext.call(void 0, null);
+var QueryBuilderUIProvider = ({
+  children,
+  fieldInfos,
+  setQueryState
+}) => {
+  const updateNode = _react.useCallback.call(void 0, 
+    (nodeId, updates) => {
+      setQueryState((state) => ({
+        ...state,
+        root: updateNodeInTree(state.root, nodeId, updates)
+      }));
+    },
+    [setQueryState]
+  );
+  const deleteNode = _react.useCallback.call(void 0, 
+    (nodeId) => {
+      setQueryState((state) => {
+        const newRoot = deleteNodeFromTree(state.root, nodeId);
+        return {
+          ...state,
+          root: newRoot || createInitialQueryState().root
+        };
+      });
+    },
+    [setQueryState]
+  );
+  const addChildToGroup = _react.useCallback.call(void 0, 
+    (groupId, child) => {
+      setQueryState((state) => ({
+        ...state,
+        root: addChildToGroupInTree(state.root, groupId, child)
+      }));
+    },
+    [setQueryState]
+  );
+  const moveNode = _react.useCallback.call(void 0, 
+    (nodeId, newParentId, newIndex) => {
+      setQueryState((state) => ({
+        ...state,
+        root: moveNodeInTree(state.root, nodeId, newParentId, newIndex)
+      }));
+    },
+    [setQueryState]
+  );
+  const value = _react.useMemo.call(void 0, 
+    () => ({
+      fieldInfos,
+      updateNode,
+      deleteNode,
+      addChildToGroup,
+      moveNode
+    }),
+    [fieldInfos, updateNode, deleteNode, addChildToGroup, moveNode]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QueryBuilderUIContext.Provider, { value, children });
+};
+var useQueryBuilderUI = () => {
+  const context = _react.useContext.call(void 0, QueryBuilderUIContext);
+  if (!context) {
+    throw new Error("useQueryBuilderUI must be used within a QueryBuilderUIProvider");
+  }
+  return context;
+};
+var updateNodeInTree = (node, nodeId, updates) => {
+  if (node.id === nodeId) {
+    return { ...node, ...updates };
+  }
+  if (node.type === "group") {
+    return {
+      ...node,
+      children: node.children.map((child) => updateNodeInTree(child, nodeId, updates))
+    };
+  }
+  return node;
+};
+var deleteNodeFromTree = (node, nodeId) => {
+  if (node.id === nodeId) {
+    return null;
+  }
+  if (node.type === "group") {
+    const newChildren = node.children.map((child) => deleteNodeFromTree(child, nodeId)).filter((n) => n !== null);
+    return { ...node, children: newChildren };
+  }
+  return node;
+};
+var addChildToGroupInTree = (node, groupId, child) => {
+  if (node.id === groupId && node.type === "group") {
+    return { ...node, children: [...node.children, child] };
+  }
+  if (node.type === "group") {
+    return {
+      ...node,
+      children: node.children.map((c) => addChildToGroupInTree(c, groupId, child))
+    };
+  }
+  return node;
+};
+var moveNodeInTree = (root2, nodeId, newParentId, newIndex) => {
+  let movedNode = null;
+  const removeNode = (node) => {
+    if (node.type === "group") {
+      const newChildren = [];
+      for (const child of node.children) {
+        if (child.id === nodeId) {
+          movedNode = child;
+        } else {
+          newChildren.push(removeNode(child));
+        }
+      }
+      return { ...node, children: newChildren };
+    }
+    return node;
+  };
+  const addNodeToParent = (node) => {
+    if (node.id === newParentId && node.type === "group" && movedNode) {
+      const newChildren = [...node.children];
+      newChildren.splice(newIndex, 0, movedNode);
+      return { ...node, children: newChildren };
+    }
+    if (node.type === "group") {
+      return {
+        ...node,
+        children: node.children.map((element) => addNodeToParent(element))
+      };
+    }
+    return node;
+  };
+  const afterRemove = removeNode(root2);
+  return addNodeToParent(afterRemove);
+};
+
+// src/components/databrowser/components/ui-query-builder/query-group.tsx
+
+
+
+// src/components/databrowser/components/ui-query-builder/condition-common.tsx
+
+
+
+// src/components/databrowser/components/ui-query-builder/dynamic-width-input.tsx
+
+
+var measureContext = null;
+var getTextWidth = (text, font) => {
+  if (!measureContext) {
+    const canvas = document.createElement("canvas");
+    measureContext = canvas.getContext("2d");
+  }
+  if (measureContext) {
+    measureContext.font = font;
+    return measureContext.measureText(text).width;
+  }
+  return 0;
+};
+var DynamicWidthInput = ({
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  className = "",
+  minWidth = 20,
+  placeholder
+}) => {
+  const inputRef = _react.useRef.call(void 0, null);
+  const [width, setWidth] = _react.useState.call(void 0, minWidth);
+  _react.useLayoutEffect.call(void 0, () => {
+    if (inputRef.current) {
+      const computedStyle = window.getComputedStyle(inputRef.current);
+      const font = `${computedStyle.fontWeight} ${computedStyle.fontSize} ${computedStyle.fontFamily}`;
+      const textWidth = getTextWidth(value || placeholder || "", font);
+      setWidth(Math.max(Math.ceil(textWidth), minWidth));
+    }
+  }, [value, minWidth, placeholder]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "input",
+    {
+      ref: inputRef,
+      type: "text",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      onFocus,
+      onBlur,
+      placeholder,
+      style: { width },
+      className: `border-none bg-transparent text-center focus:outline-none ${className}`
+    }
+  );
+};
+
+// src/components/databrowser/components/ui-query-builder/condition-common.tsx
+
+var BoostBadge = ({
+  node,
+  static: isStatic
+}) => {
+  const { updateNode } = useQueryBuilderUI();
+  const [localValue, setLocalValue] = _react.useState.call(void 0, String(_nullishCoalesce(node.boost, () => ( 0))));
+  const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
+  const boostStr = String(_nullishCoalesce(node.boost, () => ( 0)));
+  if (!isFocused && localValue !== boostStr) {
+    setLocalValue(boostStr);
+  }
+  const handleChange = (value) => {
+    setLocalValue(value);
+    const numValue = Number(value);
+    if (!Number.isNaN(numValue) && value !== "" && value !== "-") {
+      updateNode(node.id, { boost: numValue });
+    }
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    const numValue = Number(localValue);
+    if (Number.isNaN(numValue) || localValue === "" || localValue === "-") {
+      setLocalValue(String(_nullishCoalesce(node.boost, () => ( 0))));
+    }
+  };
+  const isNegative = (_nullishCoalesce(node.boost, () => ( 0))) < 0;
+  const labelBg = isNegative ? "bg-red-50" : "bg-purple-50";
+  const textColor = isNegative ? "text-red-800" : "text-purple-800";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "relative flex h-[26px] items-center overflow-hidden rounded-md border border-zinc-300 text-sm font-medium", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `flex h-full items-center px-2 ${labelBg} ${textColor}`, children: isNegative ? "Demote" : "Boost" }),
+    isStatic ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `px-2 ${textColor}`, children: node.boost }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex h-full items-center bg-white px-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      DynamicWidthInput,
+      {
+        value: localValue,
+        onChange: handleChange,
+        onFocus: () => setIsFocused(true),
+        onBlur: handleBlur,
+        className: `text-sm ${textColor}`,
+        minWidth: 8
+      }
+    ) })
+  ] });
+};
+var NotBadge = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex h-[26px] items-center rounded-md border border-zinc-300 bg-amber-50 px-2 text-sm font-medium text-amber-800", children: "Not" });
+var NodeActionsMenu = ({ node }) => {
+  const { updateNode } = useQueryBuilderUI();
+  const [open, setOpen] = _react.useState.call(void 0, false);
+  const handleToggleBoost = () => {
+    updateNode(node.id, { boost: node.boost ? void 0 : 2 });
+  };
+  const handleToggleNot = () => {
+    updateNode(node.id, { not: !node.not });
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DropdownMenu, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        type: "button",
+        className: "flex h-[26px] w-[26px] items-center justify-center rounded-md border border-zinc-300 text-zinc-500 transition-colors hover:text-zinc-700",
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconDots, { size: 16 })
+      }
+    ) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DropdownMenuContent, { align: "end", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuItem, { onClick: handleToggleBoost, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: `h-4 w-8 rounded-full transition-colors ${node.boost === void 0 ? "bg-zinc-200" : "bg-emerald-500"}`,
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                className: `h-4 w-4 transform rounded-full bg-white shadow transition-transform ${node.boost === void 0 ? "translate-x-0" : "translate-x-4"}`
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Boost" })
+      ] }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuItem, { onClick: handleToggleNot, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: `h-4 w-8 rounded-full transition-colors ${node.not ? "bg-emerald-500" : "bg-zinc-200"}`,
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                className: `h-4 w-4 transform rounded-full bg-white shadow transition-transform ${node.not ? "translate-x-4" : "translate-x-0"}`
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Not" })
+      ] }) })
+    ] })
+  ] });
+};
+
+// src/components/databrowser/components/ui-query-builder/dnd-context.tsx
+
+
+
+
+
+
+
+var _core = require('@dnd-kit/core');
+
+// src/components/databrowser/components/ui-query-builder/drag-overlay.tsx
+
+
+
+// src/components/databrowser/components/ui-query-builder/query-condition.tsx
+
+
+
+var formatValueForDisplay = (value) => {
+  if (Array.isArray(value)) {
+    return value.join(", ");
+  }
+  if (typeof value === "boolean") {
+    return value ? "true" : "false";
+  }
+  return String(value);
+};
+var QueryCondition = ({
+  node,
+  isDragging = false,
+  dragHandleProps
+}) => {
+  const { fieldInfos, updateNode, deleteNode } = useQueryBuilderUI();
+  const { condition } = node;
+  const fieldNames = fieldInfos.map((f) => f.name);
+  const [localValue, setLocalValue] = _react.useState.call(void 0, () => formatValueForDisplay(condition.value));
+  const [isValueFocused, setIsValueFocused] = _react.useState.call(void 0, false);
+  const formattedConditionValue = formatValueForDisplay(condition.value);
+  if (!isValueFocused && localValue !== formattedConditionValue) {
+    setLocalValue(formattedConditionValue);
+  }
+  const currentFieldInfo = fieldInfos.find((f) => f.name === condition.field);
+  const currentFieldType = _nullishCoalesce(_optionalChain([currentFieldInfo, 'optionalAccess', _70 => _70.type]), () => ( "unknown"));
+  _react.useEffect.call(void 0, () => {
+    if (currentFieldType === "boolean") {
+      if (condition.value === "true") {
+        updateNode(node.id, {
+          ...node,
+          condition: { ...condition, value: true }
+        });
+        return;
+      }
+      if (condition.value === "false") {
+        updateNode(node.id, {
+          ...node,
+          condition: { ...condition, value: false }
+        });
+        return;
+      }
+      if (condition.value !== true && condition.value !== false) {
+        updateNode(node.id, {
+          ...node,
+          condition: { ...condition, value: true }
+        });
+      }
+    } else {
+      if (typeof condition.value === "boolean") {
+        updateNode(node.id, {
+          ...node,
+          condition: { ...condition, value: condition.value ? "true" : "false" }
+        });
+      }
+    }
+  }, [currentFieldType, condition.value]);
+  const handleFieldChange = (value) => {
+    const newFieldInfo = _optionalChain([fieldInfos, 'optionalAccess', _71 => _71.find, 'call', _72 => _72((f) => f.name === value)]);
+    const newFieldType = _nullishCoalesce(_optionalChain([newFieldInfo, 'optionalAccess', _73 => _73.type]), () => ( "unknown"));
+    const validOperators = getOperatorsForFieldType(newFieldType);
+    const isOperatorValid = validOperators.includes(condition.operator);
+    let newValue = condition.value;
+    if (newFieldType === "boolean") {
+      if (condition.value === "true") {
+        newValue = true;
+      } else if (condition.value === "false") {
+        newValue = false;
+      } else if (typeof condition.value !== "boolean") {
+        newValue = true;
+      }
+    } else if (typeof condition.value === "boolean") {
+      newValue = condition.value ? "true" : "false";
+    }
+    updateNode(node.id, {
+      ...node,
+      condition: {
+        ...condition,
+        field: value,
+        value: newValue,
+        // Reset to 'eq' if current operator is not valid for the new field type
+        ...isOperatorValid ? {} : { operator: "eq" }
+      }
+    });
+  };
+  const handleOperatorChange = (value) => {
+    const updates = { operator: value };
+    if (value === "fuzzy" && !condition.fuzzyDistance) {
+      updates.fuzzyDistance = 1;
+    } else if (value !== "fuzzy") {
+      updates.fuzzyDistance = void 0;
+    }
+    if (value === "in" && !Array.isArray(condition.value)) {
+      updates.value = condition.value ? [String(condition.value)] : [];
+    } else if (value !== "in" && Array.isArray(condition.value)) {
+      updates.value = condition.value[0] || "";
+    }
+    updateNode(node.id, {
+      ...node,
+      condition: { ...condition, ...updates }
+    });
+  };
+  const commitValue = (value) => {
+    let parsedValue = value;
+    if (currentFieldType === "number") {
+      const numValue = Number(value);
+      if (!Number.isNaN(numValue) && value !== "") {
+        parsedValue = numValue;
+      }
+    }
+    if (condition.operator === "in") {
+      parsedValue = value.split(",").map((v) => v.trim()).filter((v) => v !== "");
+    }
+    updateNode(node.id, {
+      ...node,
+      condition: { ...condition, value: parsedValue }
+    });
+  };
+  const handleValueChange = (value) => {
+    setLocalValue(value);
+    commitValue(value);
+  };
+  const handleValueBlur = () => {
+    setIsValueFocused(false);
+  };
+  const handleValueFocus = () => {
+    setIsValueFocused(true);
+  };
+  const handleFuzzyDistanceChange = (value) => {
+    const distance = Number(value);
+    updateNode(node.id, {
+      ...node,
+      condition: { ...condition, fuzzyDistance: distance }
+    });
+  };
+  const handleDelete = () => {
+    deleteNode(node.id);
+  };
+  const allowedOperators = getOperatorsForFieldType(currentFieldType);
+  const filteredOperators = OPERATOR_OPTIONS.filter((op) => allowedOperators.includes(op.value));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "group/condition flex items-center gap-1 px-1 py-1", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref: _optionalChain([dragHandleProps, 'optionalAccess', _74 => _74.ref]),
+        className: "flex cursor-grab items-center px-1 text-zinc-400 hover:text-zinc-600",
+        ..._optionalChain([dragHandleProps, 'optionalAccess', _75 => _75.attributes]),
+        ..._optionalChain([dragHandleProps, 'optionalAccess', _76 => _76.listeners]),
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconGripVertical, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select, { value: condition.field, onValueChange: handleFieldChange, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "h-[26px] w-32 gap-3 rounded-none rounded-l-md border-r-0 border-zinc-200 bg-white px-2 text-sm font-normal", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, { placeholder: "Select field" }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: fieldNames.length > 0 ? fieldNames.map((field) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: field, children: field }, field)) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-2 py-1.5 text-sm text-zinc-500", children: "No fields available" }) })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select, { value: condition.operator, onValueChange: handleOperatorChange, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "h-[26px] w-24 gap-3 rounded-none border-r-0 border-zinc-200 px-2 text-sm font-normal", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, {}) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: filteredOperators.map((op) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: op.value, children: op.label }, op.value)) })
+      ] }),
+      currentFieldType === "boolean" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        Select,
+        {
+          value: condition.value === true || condition.value === "true" ? "true" : condition.value === false || condition.value === "false" ? "false" : "true",
+          onValueChange: (value) => {
+            const boolValue = value === "true";
+            updateNode(node.id, {
+              ...node,
+              condition: { ...condition, value: boolValue }
+            });
+          },
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "h-[26px] w-20 gap-3 rounded-none rounded-r-md border border-zinc-200 bg-white px-2 text-sm font-normal", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, {}) }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SelectContent, { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: "true", children: "true" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: "false", children: "false" })
+            ] })
+          ]
+        }
+      ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "input",
+        {
+          type: "text",
+          value: localValue,
+          onChange: (e) => handleValueChange(e.target.value),
+          onBlur: handleValueBlur,
+          onFocus: handleValueFocus,
+          placeholder: condition.operator === "in" ? "value1, value2, ..." : "value",
+          className: "h-[26px] min-w-0 flex-1 rounded-none rounded-r-md border border-zinc-200 bg-white px-2 text-sm transition-colors focus:border-zinc-400 focus:outline-none"
+        }
+      )
+    ] }),
+    condition.operator === "fuzzy" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      Select,
+      {
+        value: String(condition.fuzzyDistance || 1),
+        onValueChange: handleFuzzyDistanceChange,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "h-[26px] w-16 gap-3 border-zinc-200 bg-white px-2 text-sm", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, {}) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SelectContent, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: "1", children: "1" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: "2", children: "2" })
+          ] })
+        ]
+      }
+    ),
+    node.boost !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BoostBadge, { node }),
+    node.not && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NotBadge, {}),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: `flex items-center gap-1 transition-all duration-100 ${isDragging ? "opacity-0" : "-translate-x-[2px] opacity-0 group-hover/condition:translate-x-0 group-hover/condition:opacity-100 has-[[data-state=open]]:translate-x-0 has-[[data-state=open]]:opacity-100"}`,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NodeActionsMenu, { node }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              type: "button",
+              onClick: handleDelete,
+              className: "flex h-[26px] w-[26px] items-center justify-center rounded-md border border-zinc-300 text-zinc-500 transition-colors hover:text-red-500",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconX, { size: 16 })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/databrowser/components/ui-query-builder/drag-overlay.tsx
+
+var QueryDragOverlay = ({
+  activeNode,
+  onDropAnimationComplete
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _core.DragOverlay,
+    {
+      dropAnimation: {
+        duration: 200,
+        easing: "ease-out",
+        sideEffects: ({ dragOverlay }) => {
+          dragOverlay.node.classList.add("dropping");
+          return () => {
+            onDropAnimationComplete();
+          };
+        }
+      },
+      children: activeNode && activeNode.type === "condition" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative -mt-1", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "drag-overlay-bg absolute -bottom-1 -top-1 left-0 right-0 rounded-md border border-zinc-300 bg-zinc-100/90 shadow-md" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "relative", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QueryCondition, { node: activeNode, isDragging: true }) })
+      ] }) : activeNode && activeNode.type === "group" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "drag-overlay-bg absolute -bottom-1 -top-1 left-0 right-0 rounded-md border border-zinc-300 bg-zinc-100/90 shadow-md" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex items-center gap-1", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex cursor-grab items-center text-zinc-400", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconGripVertical, { size: 16 }) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-[26px] w-16 items-center justify-between rounded-md border border-zinc-300 bg-blue-50 px-2 text-sm font-medium capitalize text-zinc-700", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: activeNode.groupOperator === "and" ? "And" : "Or" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "svg",
+              {
+                className: "text-zinc-400",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "path",
+                  {
+                    d: "M4 6L8 10L12 6",
+                    stroke: "currentColor",
+                    strokeOpacity: "0.4",
+                    strokeWidth: "1.2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          ] }),
+          activeNode.boost !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BoostBadge, { node: activeNode, static: true }),
+          activeNode.not && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NotBadge, {})
+        ] })
+      ] }) : null
+    }
+  );
+};
+
+// src/components/databrowser/components/ui-query-builder/dnd-context.tsx
+
+var QueryDndProvider = ({
+  children,
+  rootNode,
+  setActiveOverId,
+  setDroppingId
+}) => {
+  const { moveNode } = useQueryBuilderUI();
+  const [activeId, setActiveId] = _react.useState.call(void 0, null);
+  const sensors = _core.useSensors.call(void 0, 
+    _core.useSensor.call(void 0, _core.PointerSensor, {
+      activationConstraint: {
+        distance: 8
+      }
+    })
+  );
+  const handleDragStart = (event) => {
+    setDroppingId(null);
+    setActiveId(event.active.id);
+  };
+  const handleDragOver = (event) => {
+    const { over } = event;
+    setActiveOverId(over ? String(over.id) : null);
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over) {
+      setDroppingId(String(active.id));
+    }
+    setActiveId(null);
+    setActiveOverId(null);
+    if (!over) return;
+    const activeIdStr = String(active.id);
+    const overIdStr = String(over.id);
+    const draggedNode = findNodeById(rootNode, activeIdStr);
+    if (!draggedNode) return;
+    const currentParent = findParentGroup(rootNode, activeIdStr);
+    if (!currentParent) return;
+    if (!overIdStr.startsWith("drop-")) return;
+    const parts = overIdStr.split("-");
+    if (parts.length < 3) return;
+    const targetGroupId = parts[1];
+    const targetIndex = Number.parseInt(parts[2], 10);
+    if (Number.isNaN(targetIndex)) return;
+    const currentIndex = currentParent.children.findIndex((c) => c.id === activeIdStr);
+    if (currentParent.id === targetGroupId && // Same group: if dropping at current or current+1 position, it's a no-op
+    (targetIndex === currentIndex || targetIndex === currentIndex + 1)) {
+      return;
+    }
+    let adjustedIndex = targetIndex;
+    if (currentParent.id === targetGroupId && currentIndex < targetIndex) {
+      adjustedIndex = targetIndex - 1;
+    }
+    if (draggedNode.type === "group") {
+      const isDescendant = (parent, childId) => {
+        if (parent.id === childId) return true;
+        if (parent.type === "group") {
+          return parent.children.some((c) => isDescendant(c, childId));
+        }
+        return false;
+      };
+      if (isDescendant(draggedNode, targetGroupId)) {
+        return;
+      }
+    }
+    moveNode(activeIdStr, targetGroupId, adjustedIndex);
+  };
+  const activeNode = activeId ? findNodeById(rootNode, String(activeId)) : null;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _core.DndContext,
+    {
+      sensors,
+      collisionDetection: _core.rectIntersection,
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEnd,
+      children: [
+        children,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          QueryDragOverlay,
+          {
+            activeNode,
+            onDropAnimationComplete: () => setDroppingId(null)
+          }
+        )
+      ]
+    }
+  );
+};
+var findNodeById = (root2, id) => {
+  if (root2.id === id) return root2;
+  if (root2.type === "group") {
+    for (const child of root2.children) {
+      const found = findNodeById(child, id);
+      if (found) return found;
+    }
+  }
+  return null;
+};
+var findParentGroup = (root2, targetId) => {
+  if (root2.type !== "group") return null;
+  for (const child of root2.children) {
+    if (child.id === targetId) {
+      return root2;
+    }
+    if (child.type === "group") {
+      const found = findParentGroup(child, targetId);
+      if (found) return found;
+    }
+  }
+  return null;
+};
+
+// src/components/databrowser/components/ui-query-builder/draggable-item.tsx
+
+
+var DraggableItem = ({
+  id,
+  children,
+  droppingId
+}) => {
+  const { attributes, listeners: listeners2, setNodeRef, isDragging, setActivatorNodeRef } = _core.useDraggable.call(void 0, {
+    id
+  });
+  const isDropAnimating = droppingId === id;
+  const childElement = children;
+  const childWithDragHandle = typeof children === "object" && children !== null && "type" in childElement ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    childElement.type,
+    {
+      ...childElement.props,
+      dragHandleProps: {
+        ref: setActivatorNodeRef,
+        listeners: listeners2,
+        attributes
+      }
+    }
+  ) : children;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref: setNodeRef,
+      className: `${isDropAnimating ? "opacity-0" : isDragging ? "opacity-30" : ""}`,
+      children: childWithDragHandle
+    }
+  );
+};
+
+// src/components/databrowser/components/ui-query-builder/drop-zone.tsx
+
+
+var DropIndicator = ({ id, isOver }) => {
+  const { setNodeRef } = _core.useDroppable.call(void 0, { id });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setNodeRef, className: `relative flex h-2 items-center`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: cn(
+        "h-1 w-full rounded-full bg-blue-500 transition-opacity duration-100",
+        isOver ? "opacity-100" : "opacity-0"
+      )
+    }
+  ) });
+};
+var EmptyGroupDropZone = ({ groupId, isOver }) => {
+  const { setNodeRef } = _core.useDroppable.call(void 0, { id: `drop-${groupId}-0` });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref: setNodeRef,
+      className: `mt-2 flex h-8 items-center justify-center rounded-md border border-dashed text-sm transition-all ${isOver ? "border-blue-500 bg-blue-50 text-blue-600" : "border-zinc-300 text-zinc-400"}`,
+      children: "Drop items here or add a condition"
+    }
+  );
+};
+
+// src/components/databrowser/components/ui-query-builder/query-group.tsx
+
+var InnerGroup = ({
+  node,
+  isRoot = false,
+  depth,
+  activeOverId,
+  droppingId,
+  dragHandleProps
+}) => {
+  const { fieldInfos, updateNode, deleteNode, addChildToGroup } = useQueryBuilderUI();
+  const fieldNames = fieldInfos.map((f) => f.name);
+  const handleOperatorChange = (value) => {
+    updateNode(node.id, { groupOperator: value });
+  };
+  const handleAddCondition = () => {
+    addChildToGroup(node.id, createEmptyCondition(fieldNames[0]));
+  };
+  const handleAddGroup = () => {
+    const newGroup = createEmptyGroup("and");
+    newGroup.children = [createEmptyCondition(fieldNames[0])];
+    addChildToGroup(node.id, newGroup);
+  };
+  const handleDeleteGroup = () => {
+    deleteNode(node.id);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "group/group flex items-center gap-1", children: [
+      !isRoot && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          ref: _optionalChain([dragHandleProps, 'optionalAccess', _77 => _77.ref]),
+          className: "flex cursor-grab items-center text-zinc-400",
+          ..._optionalChain([dragHandleProps, 'optionalAccess', _78 => _78.attributes]),
+          ..._optionalChain([dragHandleProps, 'optionalAccess', _79 => _79.listeners]),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconGripVertical, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select, { value: node.groupOperator, onValueChange: handleOperatorChange, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "h-[26px] w-16 gap-3 rounded-md border-zinc-300 bg-blue-50 px-2 text-sm font-medium capitalize text-zinc-700 [&>svg]:text-zinc-400", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, {}) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SelectContent, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: "and", children: "And" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: "or", children: "Or" })
+        ] })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DropdownMenu, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            type: "button",
+            className: "flex h-[26px] w-[26px] items-center justify-center rounded-md border border-zinc-300 text-zinc-500 transition-colors hover:text-zinc-700",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { size: 16 })
+          }
+        ) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DropdownMenuContent, { align: "start", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuItem, { onClick: handleAddCondition, children: "Add Condition" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuItem, { onClick: handleAddGroup, children: "Add Group" })
+        ] })
+      ] }),
+      node.boost !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BoostBadge, { node }),
+      node.not && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NotBadge, {}),
+      !isRoot && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          className: `flex -translate-x-[2px] items-center gap-1 opacity-0 transition-all duration-100 group-hover/group:translate-x-0 group-hover/group:opacity-100 has-[[data-state=open]]:translate-x-0 has-[[data-state=open]]:opacity-100`,
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NodeActionsMenu, { node }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                onClick: handleDeleteGroup,
+                className: `flex h-[26px] w-[26px] items-center justify-center rounded-md border border-zinc-300 text-zinc-500 transition-colors hover:text-red-500`,
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconX, { size: 16 })
+              }
+            )
+          ]
         }
-      ) }) }),
+      )
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: `min-h-[20px] ${isRoot ? "" : "ml-2 border-l-2 border-zinc-200 pl-3"}`, children: node.children.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmptyGroupDropZone, { groupId: node.id, isOver: activeOverId === `drop-${node.id}-0` }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      node.children.map((child, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          DropIndicator,
+          {
+            id: `drop-${node.id}-${index}`,
+            isOver: activeOverId === `drop-${node.id}-${index}`
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DraggableItem, { id: child.id, droppingId, children: child.type === "condition" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QueryCondition, { node: child }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          InnerGroup,
+          {
+            node: child,
+            depth: depth + 1,
+            activeOverId,
+            droppingId
+          }
+        ) })
+      ] }, child.id)),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        PopoverContent,
+        DropIndicator,
         {
-          className: "w-[--radix-popover-trigger-width] divide-y px-3 py-2 text-[13px] text-zinc-900",
-          autoFocus: false,
-          onOpenAutoFocus: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          },
-          children: filteredHistory.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full py-[3px]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "button",
-            {
-              ref: (el) => {
-                historyItemRefs.current[index] = el;
-              },
-              onClick: () => handleSubmit(item),
-              onMouseEnter: () => setFocusedIndex(index),
-              className: `block w-full truncate rounded-sm p-1 text-left transition-colors ${focusedIndex === index ? "bg-zinc-100" : "hover:bg-zinc-100"}`,
-              children: item
-            }
-          ) }, item))
+          id: `drop-${node.id}-${node.children.length}`,
+          isOver: activeOverId === `drop-${node.id}-${node.children.length}`
         }
       )
-    ] }),
-    state && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      Button,
+    ] }) })
+  ] });
+};
+var QueryGroup = ({ node, isRoot = false, depth }) => {
+  const [activeOverId, setActiveOverId] = _react.useState.call(void 0, null);
+  const [droppingId, setDroppingId] = _react.useState.call(void 0, null);
+  if (node.type !== "group") return;
+  if (!isRoot) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      InnerGroup,
       {
-        type: "button",
-        variant: "link",
-        size: "icon",
-        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__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconX, { size: 16 }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Clear" })
-        ]
+        node,
+        isRoot,
+        depth,
+        activeOverId,
+        droppingId
       }
-    ),
-    " "
-  ] });
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    QueryDndProvider,
+    {
+      rootNode: node,
+      setActiveOverId,
+      setDroppingId,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        InnerGroup,
+        {
+          node,
+          isRoot,
+          depth,
+          activeOverId,
+          droppingId
+        }
+      )
+    }
+  );
 };
 
-// src/components/databrowser/components/sidebar/skeleton-buttons.tsx
-
-var DEFAULT_SKELETON_COUNT = 6;
-var LoadingSkeleton = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center gap-2 px-3", children: [
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "size-5 shrink-0 rounded" }),
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "h-4 grow rounded" })
-] }, idx)) });
-
-// src/components/databrowser/components/sidebar/type-selector.tsx
+// src/components/databrowser/components/ui-query-builder/use-query-state-sync.ts
 
-var ALL_TYPES_KEY = "all";
-function DataTypeSelector() {
-  const { search, setSearchType } = useTab();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    Select,
-    {
-      onValueChange: (type) => {
-        if (type === ALL_TYPES_KEY) {
-          setSearchType(void 0);
-        } else {
-          setSearchType(type);
-        }
-      },
-      value: search.type === void 0 ? ALL_TYPES_KEY : search.type,
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "!w-auto select-none whitespace-nowrap rounded-r-none border-r-0 border-zinc-300 pr-8", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, {}) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectGroup, { children: [[ALL_TYPES_KEY, "All Types"], ...Object.entries(DATA_TYPE_NAMES)].map(
-          ([key, value]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: key, children: value }, key)
-        ) }) })
-      ]
+var useQueryStateSync = () => {
+  const { valuesSearch, setValuesSearchQuery } = useTab();
+  const [queryState, setQueryStateInternal] = _react.useState.call(void 0, () => {
+    const parsed = parseQueryString(valuesSearch.query);
+    return parsed || createInitialQueryState();
+  });
+  const lastSyncedQuery = _react.useRef.call(void 0, valuesSearch.query);
+  const isOurUpdate = _react.useRef.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    if (isOurUpdate.current) {
+      isOurUpdate.current = false;
+      lastSyncedQuery.current = valuesSearch.query;
+      return;
+    }
+    if (valuesSearch.query !== lastSyncedQuery.current) {
+      const parsed = parseQueryString(valuesSearch.query);
+      if (parsed) {
+        setQueryStateInternal(parsed);
+      }
+      lastSyncedQuery.current = valuesSearch.query;
     }
+  }, [valuesSearch.query]);
+  const setQueryState = _react.useCallback.call(void 0, 
+    (modifier) => {
+      setQueryStateInternal((currentState) => {
+        const newState = modifier(structuredClone(currentState));
+        const newQueryString = stringifyQueryState(newState);
+        isOurUpdate.current = true;
+        lastSyncedQuery.current = newQueryString;
+        setValuesSearchQuery(newQueryString);
+        return newState;
+      });
+    },
+    [setValuesSearchQuery]
   );
-}
+  return {
+    queryState,
+    setQueryState
+  };
+};
 
-// src/components/databrowser/components/sidebar/index.tsx
+// src/components/databrowser/components/ui-query-builder/ui-query-builder.tsx
 
-function Sidebar() {
-  const { keys, query } = useKeys();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2 p-4", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg bg-zinc-100", children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center justify-between pl-1", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayDbSize, {}),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-1", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            ReloadButton,
-            {
-              onClick: () => {
-                queryClient.invalidateQueries({
-                  queryKey: [FETCH_KEYS_QUERY_KEY]
-                });
-                queryClient.invalidateQueries({
-                  queryKey: [FETCH_LIST_ITEMS_QUERY_KEY]
-                });
-                queryClient.invalidateQueries({
-                  queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY]
-                });
-                queryClient.invalidateQueries({
-                  queryKey: [FETCH_DB_SIZE_QUERY_KEY]
-                });
-                queryClient.invalidateQueries({
-                  queryKey: [FETCH_KEY_TYPE_QUERY_KEY]
-                });
-              },
-              isLoading: query.isFetching
-            }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddKeyModal, {})
-        ] })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataTypeSelector, {}),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchInput, {})
-      ] })
-    ] }),
-    query.isLoading && keys.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingSkeleton, {}) : keys.length > 0 ? (
-      // Infinite scroll already has a loader at the bottom
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfiniteScroll, { query, disableRoundedInherit: true, className: "min-h-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysList, {}) })
-    ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Empty, {})
-  ] });
-}
+var UIQueryBuilder = () => {
+  const { valuesSearch } = useTab();
+  const { data: indexDetails } = useFetchSearchIndex(valuesSearch.index);
+  const { queryState, setQueryState } = useQueryStateSync();
+  const fieldInfos = _optionalChain([indexDetails, 'optionalAccess', _80 => _80.schema]) ? extractFieldInfo(indexDetails.schema) : [];
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QueryBuilderUIProvider, { fieldInfos, setQueryState, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rounded-lg border border-zinc-200 bg-zinc-50 p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QueryGroup, { node: queryState.root, isRoot: true, depth: 0 }) }) });
+};
+var getFieldType = (schemaType) => {
+  switch (schemaType) {
+    case "TEXT": {
+      return "string";
+    }
+    case "U64":
+    case "I64":
+    case "F64": {
+      return "number";
+    }
+    case "BOOL": {
+      return "boolean";
+    }
+    case "DATE": {
+      return "date";
+    }
+    default: {
+      return "unknown";
+    }
+  }
+};
+var extractFieldInfo = (schema) => {
+  return Object.entries(schema).map(([fieldPath, fieldInfo]) => ({
+    name: fieldPath,
+    type: getFieldType(fieldInfo.type)
+  }));
+};
 
 // src/components/databrowser/components/databrowser-instance.tsx
 
-var DatabrowserInstance = ({ hidden }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("min-h-0 grow rounded-md bg-zinc-100", hidden && "hidden"), children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _reactresizablepanels.PanelGroup,
+var PREFIX = "const query: Query = ";
+var SearchContent = () => {
+  const { data: indexes, isLoading } = useFetchSearchIndexes();
+  const [mode, setMode] = _react.useState.call(void 0, "builder");
+  if (isLoading) {
+    return null;
+  }
+  const hasIndexes = indexes && indexes.length > 0;
+  if (!hasIndexes) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchEmptyState, {});
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute right-4 top-4 z-10", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      Segmented,
       {
-        autoSaveId: "persistence",
-        direction: "horizontal",
-        className: "h-full w-full gap-0.5 text-sm antialiased",
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Sidebar, {}) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.PanelResizeHandle, { className: "group flex h-full w-3 justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full border-r border-dashed border-zinc-200 transition-colors group-hover:border-zinc-500" }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { minSize: 40, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataDisplay, {}) })
-        ]
+        options: [
+          { key: "builder", label: "Query Builder" },
+          { key: "code", label: "Code Editor" }
+        ],
+        value: mode,
+        onChange: (value) => setMode(value),
+        buttonClassName: "h-6"
       }
-    ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Toaster, {})
-  ] }) });
+    ) }),
+    mode === "builder" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UIQueryBuilder, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QueryBuilder, {})
+  ] });
+};
+var DatabrowserInstance = ({ hidden }) => {
+  const { isValuesSearchSelected } = useTab();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: cn(
+        "flex min-h-0 grow flex-col rounded-md bg-white px-5 pb-5",
+        hidden && "hidden"
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-3 py-5", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Header, {}),
+          isValuesSearchSelected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchContent, {}),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HeaderError, {})
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _reactresizablepanels.PanelGroup,
+          {
+            autoSaveId: "persistence",
+            direction: "horizontal",
+            className: "h-full w-full text-sm antialiased",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Sidebar, {}) }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reactresizablepanels.PanelResizeHandle, { className: "group mx-[2px] flex h-full flex-col items-center justify-center gap-1 rounded-md px-[8px] transition-colors hover:bg-zinc-300/10", children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[3px] w-[3px] rounded-full bg-zinc-300" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[3px] w-[3px] rounded-full bg-zinc-300" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[3px] w-[3px] rounded-full bg-zinc-300" })
+              ] }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { minSize: 40, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataDisplay, {}) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Toaster, {})
+      ]
+    }
+  ) });
 };
 
 // src/components/databrowser/components/databrowser-tabs.tsx
@@ -6271,7 +8490,7 @@ var DatabrowserInstance = ({ hidden }) => {
 
 
 
-var _core = require('@dnd-kit/core');
+
 var _modifiers = require('@dnd-kit/modifiers');
 var _sortable = require('@dnd-kit/sortable');
 var _utilities = require('@dnd-kit/utilities');
@@ -6279,8 +8498,8 @@ var _utilities = require('@dnd-kit/utilities');
 
 // src/components/ui/command.tsx
 
-var _cmdk = require('cmdk');
 
+var _cmdk = require('cmdk');
 
 var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   _cmdk.Command,
@@ -6368,15 +8587,6 @@ CommandShortcut.displayName = "CommandShortcut";
 
 
 
-// src/components/databrowser/components/tab-type-icon.tsx
-
-function TabTypeIcon({ selectedKey }) {
-  const { data: keyType, isLoading } = useFetchKeyType(selectedKey);
-  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "h-5 w-5 rounded" });
-  if (!keyType || keyType === "none") return;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: keyType, type: "icon" });
-}
-
 // src/hooks/use-overflow.ts
 
 var useOverflow = () => {
@@ -6389,7 +8599,7 @@ var useOverflow = () => {
     }
     if (!node) return;
     observerRef.current = new ResizeObserver((entries) => {
-      const el = _optionalChain([entries, 'access', _61 => _61.at, 'call', _62 => _62(0), 'optionalAccess', _63 => _63.target]);
+      const el = _optionalChain([entries, 'access', _81 => _81.at, 'call', _82 => _82(0), 'optionalAccess', _83 => _83.target]);
       if (!el) return;
       setIsOverflow(el.scrollWidth > el.clientWidth);
     });
@@ -6397,16 +8607,25 @@ var useOverflow = () => {
   }, []);
   _react.useEffect.call(void 0, () => {
     return () => {
-      _optionalChain([observerRef, 'access', _64 => _64.current, 'optionalAccess', _65 => _65.disconnect, 'call', _66 => _66()]);
+      _optionalChain([observerRef, 'access', _84 => _84.current, 'optionalAccess', _85 => _85.disconnect, 'call', _86 => _86()]);
     };
   }, []);
   return { ref, isOverflow };
 };
 
+// src/components/databrowser/components/tab-type-icon.tsx
+
+function TabTypeIcon({ selectedKey }) {
+  const { data: keyType, isLoading } = useFetchKeyType(selectedKey);
+  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "h-5 w-5 rounded" });
+  if (!keyType || keyType === "none") return;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: keyType, type: "icon" });
+}
+
 // src/components/databrowser/components/tab.tsx
 
 var Tab = ({ id, isList }) => {
-  const { active, search, selectedKey, pinned } = useTab();
+  const { active, search, selectedKey, valuesSearch, pinned, isValuesSearchSelected } = useTab();
   const {
     selectTab,
     removeTab,
@@ -6419,21 +8638,20 @@ var Tab = ({ id, isList }) => {
   } = useDatabrowserStore();
   const hasPinnedTabs = tabs.some(([, data]) => data.pinned);
   const { ref, isOverflow } = useOverflow();
-  const label = search.key || selectedKey;
-  const iconNode = search.key ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 15 }) : selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabTypeIcon, { selectedKey }) : void 0;
+  const label = isValuesSearchSelected ? valuesSearch.index : search.key || selectedKey;
+  const iconNode = isValuesSearchSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-[20px] w-[20px] items-center justify-center rounded-md bg-emerald-200 text-emerald-800", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 14 }) }) : search.key ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-[20px] w-[20px] items-center justify-center rounded-md bg-zinc-100 text-zinc-600", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 14 }) }) : selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabTypeIcon, { selectedKey }) : void 0;
   const tabNode = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
       id: isList ? `list-tab-${id}` : `tab-${id}`,
       onClick: () => selectTab(id),
       className: cn(
-        "flex h-9 w-full cursor-pointer items-center gap-2 px-3 text-[13px] transition-colors",
+        "flex h-[40px] w-full cursor-pointer items-center gap-2 rounded-t-lg 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")
+        !isList && (active ? "bg-white text-zinc-950" : "bg-zinc-200 text-zinc-600 hover:bg-zinc-100")
       ),
       children: [
-        iconNode,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn(!active && "transition-colors"), children: iconNode }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "span",
           {
@@ -6450,7 +8668,7 @@ var Tab = ({ id, isList }) => {
               e.stopPropagation();
               removeTab(id);
             },
-            className: "p-1 text-zinc-300 transition-colors hover:text-zinc-500 dark:text-zinc-400",
+            className: "p-[2px] text-zinc-400 transition-colors hover:text-zinc-500",
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconX, { size: 16 })
           }
         )
@@ -6507,8 +8725,8 @@ var SortableTab = ({ id }) => {
   const [originalWidth, setOriginalWidth] = _react.useState.call(void 0, null);
   const textRef = _react.useRef.call(void 0, null);
   const { tabs } = useDatabrowserStore();
-  const tabData = _optionalChain([tabs, 'access', _67 => _67.find, 'call', _68 => _68(([tabId]) => tabId === id), 'optionalAccess', _69 => _69[1]]);
-  const isPinned = _optionalChain([tabData, 'optionalAccess', _70 => _70.pinned]);
+  const tabData = _optionalChain([tabs, 'access', _87 => _87.find, 'call', _88 => _88(([tabId]) => tabId === id), 'optionalAccess', _89 => _89[1]]);
+  const isPinned = _optionalChain([tabData, 'optionalAccess', _90 => _90.pinned]);
   const { attributes, listeners: listeners2, setNodeRef, transform, transition, isDragging } = _sortable.useSortable.call(void 0, {
     id,
     disabled: isPinned,
@@ -6653,73 +8871,70 @@ var DatabrowserTabs = ({ onFullScreenClick }) => {
       reorderTabs(oldIndex, newIndex);
     }
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative mb-2 shrink-0", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex translate-y-[1px] items-center gap-1", children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative min-w-0 flex-1", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "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__ */ _jsxruntime.jsx.call(void 0, 
-          "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"}`
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          "div",
-          {
-            ref: scrollRef,
-            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__ */ _jsxruntime.jsx.call(void 0, 
-                _core.DndContext,
-                {
-                  sensors,
-                  collisionDetection: _core.closestCenter,
-                  onDragEnd: handleDragEnd,
-                  modifiers: [_modifiers.restrictToHorizontalAxis],
-                  measuring: {
-                    droppable: {
-                      strategy: _core.MeasuringStrategy.Always
-                    }
-                  },
-                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _sortable.SortableContext,
-                    {
-                      items: sortedTabs.map(([id]) => id),
-                      strategy: _sortable.horizontalListSortingStrategy,
-                      children: selectedTab && sortedTabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortableTab, { id }, id))
-                    }
-                  )
-                }
-              ),
-              !isOverflow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-1 pl-1 pr-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddTabButton, {}) })
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 pl-1", children: [
-        isOverflow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddTabButton, {}),
-        tabs.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabsListButton, { tabs, onSelectTab: selectTab }),
-        onFullScreenClick && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Button,
-          {
-            "aria-label": "Toggle fullscreen",
-            variant: "secondary",
-            size: "icon-sm",
-            onClick: onFullScreenClick,
-            className: "flex-shrink-0 bg-blue-100 hover:bg-blue-600 hover:text-white",
-            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconMaximize, { size: 16 })
-          }
-        )
-      ] })
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "relative shrink-0 overflow-hidden rounded-t-lg bg-zinc-300", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative min-w-0 flex-1", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "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__ */ _jsxruntime.jsx.call(void 0, 
+        "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"}`
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          ref: scrollRef,
+          onScroll: recomputeShadows,
+          className: "scrollbar-hide flex min-w-0 flex-1 items-center gap-1 overflow-x-auto [&::-webkit-scrollbar]:hidden",
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _core.DndContext,
+              {
+                sensors,
+                collisionDetection: _core.closestCenter,
+                onDragEnd: handleDragEnd,
+                modifiers: [_modifiers.restrictToHorizontalAxis],
+                measuring: {
+                  droppable: {
+                    strategy: _core.MeasuringStrategy.Always
+                  }
+                },
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _sortable.SortableContext,
+                  {
+                    items: sortedTabs.map(([id]) => id),
+                    strategy: _sortable.horizontalListSortingStrategy,
+                    children: selectedTab && sortedTabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortableTab, { id }, id))
+                  }
+                )
+              }
+            ),
+            !isOverflow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-1 pl-1 pr-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddTabButton, {}) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 pl-1", children: [
+      isOverflow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddTabButton, {}),
+      tabs.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabsListButton, { tabs, onSelectTab: selectTab }),
+      onFullScreenClick && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        Button,
+        {
+          "aria-label": "Toggle fullscreen",
+          variant: "secondary",
+          size: "icon-sm",
+          onClick: onFullScreenClick,
+          className: "flex-shrink-0 bg-white text-zinc-500 dark:bg-zinc-100",
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconWindowMaximize, { size: 16 })
+        }
+      )
     ] })
-  ] });
+  ] }) });
 };
 function AddTabButton() {
   const { addTab, selectTab } = useDatabrowserStore();
@@ -6728,7 +8943,7 @@ function AddTabButton() {
     const tabsId = addTab();
     selectTab(tabsId);
     setTimeout(() => {
-      const tab = _optionalChain([rootRef, 'optionalAccess', _71 => _71.current, 'optionalAccess', _72 => _72.querySelector, 'call', _73 => _73(`#tab-${tabsId}`)]);
+      const tab = _optionalChain([rootRef, 'optionalAccess', _91 => _91.current, 'optionalAccess', _92 => _92.querySelector, 'call', _93 => _93(`#tab-${tabsId}`)]);
       if (!tab) return;
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);
@@ -6740,8 +8955,8 @@ function AddTabButton() {
       variant: "secondary",
       size: "icon-sm",
       onClick: handleAddTab,
-      className: "flex-shrink-0 dark:bg-zinc-200",
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "text-zinc-500 dark:text-zinc-600", size: 16 })
+      className: "flex-shrink-0 bg-zinc-200 ",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "text-zinc-600", size: 16 })
     }
   );
 }
@@ -6762,7 +8977,7 @@ function TabsListButton({
     onSelectTab(id);
     setOpen(false);
     setTimeout(() => {
-      const tab = _optionalChain([rootRef, 'optionalAccess', _74 => _74.current, 'optionalAccess', _75 => _75.querySelector, 'call', _76 => _76(`#tab-${id}`)]);
+      const tab = _optionalChain([rootRef, 'optionalAccess', _94 => _94.current, 'optionalAccess', _95 => _95.querySelector, 'call', _96 => _96(`#tab-${id}`)]);
       if (!tab) return;
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);
@@ -6773,7 +8988,7 @@ function TabsListButton({
       {
         variant: "secondary",
         size: "sm",
-        className: "h-7 gap-1 px-2",
+        className: "gap-1 bg-white px-2",
         "aria-label": "Search in tabs",
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs text-zinc-600", children: tabs.length }),
@@ -6844,7 +9059,7 @@ var RedisBrowserRoot = ({
         className: `ups-db ${theme === "dark" ? "dark" : ""}`,
         style: { height: "100%" },
         ref: rootRef,
-        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col text-zinc-700", children: [
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col overflow-hidden rounded-[14px] border-[4px] border-zinc-300 text-zinc-700", children: [
           !hideTabs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserTabs, { onFullScreenClick }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstances, {})
         ] })