@upstash/react-redis-browser 0.2.16 → 0.2.18

package/dist/index.css

@@ -1223,6 +1223,9 @@
 .ups-db .max-w-32 {
   max-width: 8rem;
 }
+.ups-db .max-w-\[240px\] {
+  max-width: 240px;
+}
 .ups-db .max-w-\[370px\] {
   max-width: 370px;
 }
@@ -1469,6 +1472,9 @@
 .ups-db .break-words {
   overflow-wrap: break-word;
 }
+.ups-db .break-all {
+  word-break: break-all;
+}
 .ups-db .rounded {
   border-radius: 0.25rem;
 }

package/dist/index.js

@@ -2662,7 +2662,7 @@ function formatTime(seconds) {
   if (parts.length === 0) {
     parts.push("0s");
   }
-  return parts.slice(0, 1).join(" ");
+  return parts.slice(0, 2).join(" ");
 }
 var isTest = typeof window !== "undefined" && window.__PLAYWRIGHT__ === true;
 var jsonToJsLiteral = (json) => {
@@ -4183,8 +4183,11 @@ function parseFieldBuilder(str, fieldName) {
     const typeMatch = str.match(/s\.number\(\s*["']?(U64|I64|F64)?["']?\s*\)/);
     const numType = _optionalChain([typeMatch, 'optionalAccess', _35 => _35[1]]) || "F64";
     const fromValue = extractFromValue(str);
-    if (fromValue === void 0) return numType;
-    return { type: numType, from: fromValue };
+    return {
+      type: numType,
+      fast: true,
+      ...fromValue !== void 0 && { from: fromValue }
+    };
   }
   if (str.startsWith("s.boolean()")) {
     const fast = str.includes(".fast()");
@@ -5396,7 +5399,7 @@ function DeleteKeyModal({
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogContent, { children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogHeader, { children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTitle, { children: isPlural ? `Delete ${count2} ${itemsLabel}` : `Delete ${itemLabel}` }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogDescription, { className: "mt-5", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogDescription, { className: "mt-5 break-all", children: [
           "Are you sure you want to delete",
           " ",
           name ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
@@ -5441,6 +5444,7 @@ function DeleteKeyModal({
               setIsPending(true);
               try {
                 await onDeleteConfirm(e, { reindex });
+                _optionalChain([setIsOpen, 'optionalCall', _44 => _44(false)]);
               } finally {
                 setIsPending(false);
               }
@@ -5542,7 +5546,7 @@ function KeyActions({
           name: dataKey,
           showReindex: isValuesSearchSelected && type !== "search",
           onDeleteConfirm: async (_e, options) => {
-            await deleteKey({ keys: [dataKey], reindex: _optionalChain([options, 'optionalAccess', _44 => _44.reindex]) });
+            await deleteKey({ keys: [dataKey], reindex: _optionalChain([options, 'optionalAccess', _45 => _45.reindex]) });
           },
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             DropdownMenuItem,
@@ -5574,7 +5578,7 @@ var DisplayHeader = ({
   };
   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.jsx.call(void 0, "h2", { className: "min-w-0 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" && type !== "search" && !showItemActions && /* @__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" }) }) }),
         showItemActions ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ItemActions, { dataKey, type }) : selectedListItem ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyActions, { dataKey, content, type })
@@ -5775,13 +5779,13 @@ var MonacoEditorWithTypes = ({
   const theme = useTheme();
   _react.useEffect.call(void 0, () => {
     if (!monaco) return;
-    _optionalChain([extraLibRef, 'access', _45 => _45.current, 'optionalAccess', _46 => _46.dispose, 'call', _47 => _47()]);
+    _optionalChain([extraLibRef, 'access', _46 => _46.current, 'optionalAccess', _47 => _47.dispose, 'call', _48 => _48()]);
     extraLibRef.current = monaco.languages.typescript.typescriptDefaults.addExtraLib(
       typeDefinitions,
       `file:///${filePath.replace(".ts", "-types.d.ts")}`
     );
     requestAnimationFrame(() => {
-      const model = _optionalChain([editorRef, 'access', _48 => _48.current, 'optionalAccess', _49 => _49.getModel, 'optionalCall', _50 => _50()]);
+      const model = _optionalChain([editorRef, 'access', _49 => _49.current, 'optionalAccess', _50 => _50.getModel, 'optionalCall', _51 => _51()]);
       if (model) {
         const currentValue = model.getValue();
         model.setValue(currentValue);
@@ -5790,10 +5794,10 @@ var MonacoEditorWithTypes = ({
   }, [monaco, typeDefinitions, filePath]);
   _react.useEffect.call(void 0, () => {
     return () => {
-      _optionalChain([extraLibRef, 'access', _51 => _51.current, 'optionalAccess', _52 => _52.dispose, 'call', _53 => _53()]);
+      _optionalChain([extraLibRef, 'access', _52 => _52.current, 'optionalAccess', _53 => _53.dispose, 'call', _54 => _54()]);
       if (monaco) {
         const model = monaco.editor.getModel(monaco.Uri.parse(filePath));
-        _optionalChain([model, 'optionalAccess', _54 => _54.dispose, 'call', _55 => _55()]);
+        _optionalChain([model, 'optionalAccess', _55 => _55.dispose, 'call', _56 => _56()]);
       }
     };
   }, [monaco, filePath]);
@@ -5803,7 +5807,7 @@ var MonacoEditorWithTypes = ({
     } else if (newValue.trim() === "") {
       onChange(defaultValue);
     } else {
-      _optionalChain([editorRef, 'access', _56 => _56.current, 'optionalAccess', _57 => _57.setValue, 'optionalCall', _58 => _58(valueRef.current)]);
+      _optionalChain([editorRef, 'access', _57 => _57.current, 'optionalAccess', _58 => _58.setValue, 'optionalCall', _59 => _59(valueRef.current)]);
     }
   };
   _react.useEffect.call(void 0, () => {
@@ -6294,7 +6298,7 @@ var SearchDisplay = ({
       indexName: _nullishCoalesce(indexName, () => ( "")),
       editorValue: data.schema ? schemaToEditorValue(data.schema) : SCHEMA_DEFAULT,
       dataType: data.dataType || "string",
-      prefixes: _optionalChain([data, 'access', _59 => _59.prefixes, 'optionalAccess', _60 => _60.join, 'call', _61 => _61(", ")]) || "",
+      prefixes: _optionalChain([data, 'access', _60 => _60.prefixes, 'optionalAccess', _61 => _61.join, 'call', _62 => _62(", ")]) || "",
       language: data.language || "english"
     });
   }, [data, reset, indexName]);
@@ -6667,7 +6671,7 @@ var ItemContextMenu = ({
             editItem({
               type,
               dataKey,
-              itemKey: _optionalChain([data, 'optionalAccess', _62 => _62.key]),
+              itemKey: _optionalChain([data, 'optionalAccess', _63 => _63.key]),
               // For deletion
               newKey: void 0
             });
@@ -6702,7 +6706,7 @@ var ItemContextMenu = ({
           {
             onClick: () => {
               if (!data) return;
-              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _63 => _63.key]));
+              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _64 => _64.key]));
               toast({
                 description: "Key copied to clipboard"
               });
@@ -6714,11 +6718,11 @@ var ItemContextMenu = ({
             ]
           }
         ),
-        _optionalChain([data, 'optionalAccess', _64 => _64.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _optionalChain([data, 'optionalAccess', _65 => _65.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           ContextMenuItem,
           {
             onClick: () => {
-              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _65 => _65.value]), () => ( "")));
+              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _66 => _66.value]), () => ( "")));
               toast({
                 description: "Value copied to clipboard"
               });
@@ -6830,7 +6834,7 @@ var useSetHashTTL = () => {
 var HashFieldTTLBadge = ({ dataKey, field }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields: [field] });
   const { mutate: setTTL, isPending } = useSetHashTTL();
-  const expireAt = _optionalChain([data, 'optionalAccess', _66 => _66[field]]);
+  const expireAt = _optionalChain([data, 'optionalAccess', _67 => _67[field]]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     TTLBadge,
     {
@@ -6927,7 +6931,7 @@ var MonacoEditor = ({
     if (!active || !monaco || !editorRef.current) {
       return;
     }
-    _optionalChain([monaco, 'optionalAccess', _67 => _67.editor, 'access', _68 => _68.setModelLanguage, 'call', _69 => _69(editorRef.current.getModel(), language)]);
+    _optionalChain([monaco, 'optionalAccess', _68 => _68.editor, 'access', _69 => _69.setModelLanguage, 'call', _70 => _70(editorRef.current.getModel(), language)]);
   }, [monaco, language, active]);
   const editor = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _react2.Editor,
@@ -7103,7 +7107,7 @@ var ListEditForm = ({
     dataKey
   });
   const findValue = () => {
-    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _70 => _70.data, 'optionalAccess', _71 => _71.pages]), () => ( []))) {
+    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _71 => _71.data, 'optionalAccess', _72 => _72.pages]), () => ( []))) {
       const item = page.keys.find((item2) => item2.key === itemKey);
       if (item && "value" in item) return item.value;
     }
@@ -7257,7 +7261,7 @@ var HashFieldTTLInfo = ({
   fields
 }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields });
-  const expireAt = _optionalChain([data, 'optionalAccess', _72 => _72[field]]);
+  const expireAt = _optionalChain([data, 'optionalAccess', _73 => _73[field]]);
   const [ttl, setTTL] = _react.useState.call(void 0, () => calculateTTL(expireAt));
   _react.useEffect.call(void 0, () => {
     setTTL(calculateTTL(expireAt));
@@ -7282,7 +7286,7 @@ var headerLabels = {
 var ListDisplay = ({ dataKey, type }) => {
   const { selectedListItem } = useTab();
   const query = useFetchListItems({ dataKey, type });
-  const isEmpty = query.isFetched && _optionalChain([query, 'access', _73 => _73.data, 'optionalAccess', _74 => _74.pages, 'access', _75 => _75.every, 'call', _76 => _76((page) => page.keys.length === 0)]);
+  const isEmpty = query.isFetched && _optionalChain([query, 'access', _74 => _74.data, 'optionalAccess', _75 => _75.pages, 'access', _76 => _76.every, 'call', _77 => _77((page) => page.keys.length === 0)]);
   if (isEmpty) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyDeleted, {});
   }
@@ -7298,7 +7302,7 @@ var ListItems = ({
   dataKey
 }) => {
   const { setSelectedListItem } = useTab();
-  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _77 => _77.data, 'optionalAccess', _78 => _78.pages, 'access', _79 => _79.flatMap, 'call', _80 => _80((page) => page.keys)]), () => ( [])), [query.data]);
+  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _78 => _78.data, 'optionalAccess', _79 => _79.pages, 'access', _80 => _80.flatMap, 'call', _81 => _81((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, 
@@ -7471,7 +7475,7 @@ function AddKeyModal() {
     setSelectedKey(key);
     setOpen(false);
     setTimeout(() => {
-      _optionalChain([window, 'access', _81 => _81.document, 'access', _82 => _82.querySelector, 'call', _83 => _83(`[data-key="${key}"]`), 'optionalAccess', _84 => _84.scrollIntoView, 'call', _85 => _85({
+      _optionalChain([window, 'access', _82 => _82.document, 'access', _83 => _83.querySelector, 'call', _84 => _84(`[data-key="${key}"]`), 'optionalAccess', _85 => _85.scrollIntoView, 'call', _86 => _86({
         behavior: "smooth",
         block: "start",
         inline: "nearest"
@@ -7527,7 +7531,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', _86 => _86.errors, 'access', _87 => _87.key, 'optionalAccess', _88 => _88.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', _87 => _87.errors, 'access', _88 => _88.key, 'optionalAccess', _89 => _89.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, 
@@ -8567,7 +8571,7 @@ var QueryWizardPopover = ({ onClose }) => {
   const fetchSampleKeys = _reactquery.useMutation.call(void 0, {
     mutationFn: async (index) => {
       const firstTenKeys = await scanKeys(redis, {
-        match: `${_optionalChain([index, 'access', _89 => _89.prefixes, 'optionalAccess', _90 => _90[0]])}*`,
+        match: `${_optionalChain([index, 'access', _90 => _90.prefixes, 'optionalAccess', _91 => _91[0]])}*`,
         type: index.dataType,
         limit: 10
       });
@@ -8577,7 +8581,11 @@ var QueryWizardPopover = ({ onClose }) => {
             const data = await redis.json.get(key);
             return { key, data };
           } else if (index.dataType === "hash") {
-            const data = await redis.hgetall(key);
+            const raw = await redis.hgetall(key);
+            const data = Array.isArray(raw) ? raw.reduce((obj, value, i, arr) => {
+              if (i % 2 === 0) obj[String(value)] = arr[i + 1];
+              return obj;
+            }, {}) : raw;
             return { key, data };
           } else {
             const data = await redis.get(key);
@@ -8597,7 +8605,7 @@ var QueryWizardPopover = ({ onClose }) => {
     if (!input.trim() || !valuesSearch.index) return;
     try {
       let samples = sampleData;
-      if (samples.length === 0 && _optionalChain([indexData, 'optionalAccess', _91 => _91.prefixes, 'optionalAccess', _92 => _92[0]])) {
+      if (samples.length === 0 && _optionalChain([indexData, 'optionalAccess', _92 => _92.prefixes, 'optionalAccess', _93 => _93[0]])) {
         samples = await fetchSampleKeys.mutateAsync(indexData);
       }
       const result = await generateQuery.mutateAsync({
@@ -8608,7 +8616,7 @@ var QueryWizardPopover = ({ onClose }) => {
       const queryString = toJsLiteral(result.query);
       setValuesSearchQuery(queryString);
       setQueryBuilderMode("code");
-      _optionalChain([onClose, 'optionalCall', _93 => _93()]);
+      _optionalChain([onClose, 'optionalCall', _94 => _94()]);
     } catch (error) {
       console.error("Error generating query:", error);
     }
@@ -8713,7 +8721,7 @@ var CreateIndexModal = ({
       className: "max-w-2xl",
       onEscapeKeyDown: (e) => {
         const active = document.activeElement;
-        if (_optionalChain([active, 'optionalAccess', _94 => _94.closest, 'call', _95 => _95(".monaco-editor")]) || _optionalChain([active, 'optionalAccess', _96 => _96.tagName]) === "TEXTAREA") {
+        if (_optionalChain([active, 'optionalAccess', _95 => _95.closest, 'call', _96 => _96(".monaco-editor")]) || _optionalChain([active, 'optionalAccess', _97 => _97.tagName]) === "TEXTAREA") {
           e.preventDefault();
         }
       },
@@ -8748,7 +8756,7 @@ var EditIndexModal = ({
       className: "min-h-[500px] max-w-2xl",
       onEscapeKeyDown: (e) => {
         const active = document.activeElement;
-        if (_optionalChain([active, 'optionalAccess', _97 => _97.closest, 'call', _98 => _98(".monaco-editor")]) || _optionalChain([active, 'optionalAccess', _99 => _99.tagName]) === "TEXTAREA") {
+        if (_optionalChain([active, 'optionalAccess', _98 => _98.closest, 'call', _99 => _99(".monaco-editor")]) || _optionalChain([active, 'optionalAccess', _100 => _100.tagName]) === "TEXTAREA") {
           e.preventDefault();
         }
       },
@@ -8862,7 +8870,7 @@ var SearchInput = () => {
     } else if (e.key === "Escape") {
       setState("");
       setFocusedIndex(-1);
-      _optionalChain([inputRef, 'access', _100 => _100.current, 'optionalAccess', _101 => _101.blur, 'call', _102 => _102()]);
+      _optionalChain([inputRef, 'access', _101 => _101.current, 'optionalAccess', _102 => _102.blur, 'call', _103 => _103()]);
     } else if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey) {
       e.preventDefault();
       if (focusedIndex < filteredHistory.length - 1) {
@@ -8876,7 +8884,7 @@ var SearchInput = () => {
         setFocusedIndex(focusedIndex - 1);
       } else if (filteredHistory.length > 0 && focusedIndex === 0) {
         setFocusedIndex(-1);
-        _optionalChain([inputRef, 'access', _103 => _103.current, 'optionalAccess', _104 => _104.focus, 'call', _105 => _105()]);
+        _optionalChain([inputRef, 'access', _104 => _104.current, 'optionalAccess', _105 => _105.focus, 'call', _106 => _106()]);
       } else if (filteredHistory.length > 0) {
         setFocusedIndex(filteredHistory.length - 1);
       }
@@ -9060,8 +9068,8 @@ var IndexSelector = () => {
         },
         modal: false,
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { className: "flex min-w-[140px] items-center justify-between gap-2 rounded-r-lg border border-zinc-300 bg-emerald-50 px-3 py-[5px] text-sm font-medium text-emerald-800 transition-colors hover:bg-emerald-100", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate", children: index || "Select an index" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { className: "flex min-w-[140px] max-w-[240px] items-center justify-between gap-2 rounded-r-lg border border-zinc-300 bg-emerald-50 px-3 py-[5px] text-sm font-medium text-emerald-800 transition-colors hover:bg-emerald-100", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 truncate", children: index || "Select an index" }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconChevronDown, { className: "size-4 shrink-0 opacity-50" })
           ] }) }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverContent, { className: "p-2", align: "center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-2", children: [
@@ -9081,8 +9089,8 @@ var IndexSelector = () => {
             ] }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "max-h-[200px] overflow-y-auto", children: [
               isLoading && !indexes && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLoader2, { className: "size-4 animate-spin text-zinc-400" }) }),
-              !isLoading && _optionalChain([indexes, 'optionalAccess', _106 => _106.length]) === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "py-4 text-center text-sm text-zinc-500", children: "No indexes found" }),
-              _optionalChain([indexes, 'optionalAccess', _107 => _107.map, 'call', _108 => _108((idx) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              !isLoading && _optionalChain([indexes, 'optionalAccess', _107 => _107.length]) === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "py-4 text-center text-sm text-zinc-500", children: "No indexes found" }),
+              _optionalChain([indexes, 'optionalAccess', _108 => _108.map, 'call', _109 => _109((idx) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                 "div",
                 {
                   className: "flex h-9 items-center rounded-md px-2 transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-200",
@@ -9094,13 +9102,13 @@ var IndexSelector = () => {
                           setValuesSearchIndex(idx);
                           setOpen(false);
                         },
-                        className: "flex flex-1 items-center gap-2 text-left text-sm",
+                        className: "flex min-w-0 flex-1 items-center gap-2 text-left text-sm",
                         children: [
                           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                             "span",
                             {
                               className: cn(
-                                "flex size-5 items-center justify-center",
+                                "flex size-5 shrink-0 items-center justify-center",
                                 idx === index ? "text-emerald-600" : "text-transparent"
                               ),
                               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCircleCheck, { className: "size-5" })
@@ -9250,7 +9258,7 @@ var generateNestedInterface = (obj, indent = "  ") => {
 var toAmbientTypes = (types) => types.replaceAll(/export const (\w+) = (\[.*?]) as const;/g, "declare const $1: readonly $2;").replaceAll("export ", "");
 var generateTypeDefinitions = (schema) => {
   let schemaFieldsInterface = "";
-  const schemaFields = _optionalChain([schema, 'optionalAccess', _109 => _109.schema]);
+  const schemaFields = _optionalChain([schema, 'optionalAccess', _110 => _110.schema]);
   if (schemaFields && Object.keys(schemaFields).length > 0) {
     const nested = buildNestedSchema(schemaFields);
     const fieldLines = generateNestedInterface(nested);
@@ -9708,7 +9716,7 @@ var SidebarContextMenu = ({ children }) => {
         showReindex: isValuesSearchSelected,
         onDeleteConfirm: async (e, options) => {
           e.stopPropagation();
-          await deleteKey({ keys: contextKeys, reindex: _optionalChain([options, 'optionalAccess', _110 => _110.reindex]) });
+          await deleteKey({ keys: contextKeys, reindex: _optionalChain([options, 'optionalAccess', _111 => _111.reindex]) });
           setAlertOpen(false);
         }
       }
@@ -10604,7 +10612,7 @@ var QueryCondition = ({
     setLocalValue(formattedConditionValue);
   }
   const currentFieldInfo = fieldInfos.find((f) => f.name === condition.field);
-  const currentFieldType = _nullishCoalesce(_optionalChain([currentFieldInfo, 'optionalAccess', _111 => _111.type]), () => ( "unknown"));
+  const currentFieldType = _nullishCoalesce(_optionalChain([currentFieldInfo, 'optionalAccess', _112 => _112.type]), () => ( "unknown"));
   const isUnknownField = condition.field && !fieldNames.includes(condition.field);
   const getValueTypeError = () => {
     if (isUnknownField || currentFieldType === "unknown" || currentFieldType === "string") {
@@ -10662,8 +10670,8 @@ var QueryCondition = ({
     }
   }, [currentFieldType, condition.value]);
   const handleFieldChange = (value) => {
-    const newFieldInfo = _optionalChain([fieldInfos, 'optionalAccess', _112 => _112.find, 'call', _113 => _113((f) => f.name === value)]);
-    const newFieldType = _nullishCoalesce(_optionalChain([newFieldInfo, 'optionalAccess', _114 => _114.type]), () => ( "unknown"));
+    const newFieldInfo = _optionalChain([fieldInfos, 'optionalAccess', _113 => _113.find, 'call', _114 => _114((f) => f.name === value)]);
+    const newFieldType = _nullishCoalesce(_optionalChain([newFieldInfo, 'optionalAccess', _115 => _115.type]), () => ( "unknown"));
     const validOperators = getOperatorsForFieldType(newFieldType);
     const isOperatorValid = validOperators.includes(condition.operator);
     let newValue = condition.value;
@@ -10804,10 +10812,10 @@ var QueryCondition = ({
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
-        ref: _optionalChain([dragHandleProps, 'optionalAccess', _115 => _115.ref]),
+        ref: _optionalChain([dragHandleProps, 'optionalAccess', _116 => _116.ref]),
         className: "flex cursor-grab items-center px-1 text-zinc-400 hover:text-zinc-600",
-        ..._optionalChain([dragHandleProps, 'optionalAccess', _116 => _116.attributes]),
-        ..._optionalChain([dragHandleProps, 'optionalAccess', _117 => _117.listeners]),
+        ..._optionalChain([dragHandleProps, 'optionalAccess', _117 => _117.attributes]),
+        ..._optionalChain([dragHandleProps, 'optionalAccess', _118 => _118.listeners]),
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconGripVertical, { size: 16 })
       }
     ),
@@ -11315,10 +11323,10 @@ var InnerGroup = ({
       !isRoot && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "div",
         {
-          ref: _optionalChain([dragHandleProps, 'optionalAccess', _118 => _118.ref]),
+          ref: _optionalChain([dragHandleProps, 'optionalAccess', _119 => _119.ref]),
           className: "flex cursor-grab items-center px-1 text-zinc-400",
-          ..._optionalChain([dragHandleProps, 'optionalAccess', _119 => _119.attributes]),
-          ..._optionalChain([dragHandleProps, 'optionalAccess', _120 => _120.listeners]),
+          ..._optionalChain([dragHandleProps, 'optionalAccess', _120 => _120.attributes]),
+          ..._optionalChain([dragHandleProps, 'optionalAccess', _121 => _121.listeners]),
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconGripVertical, { size: 16 })
         }
       ),
@@ -11667,7 +11675,7 @@ var UIQueryBuilder = () => {
   const { valuesSearch } = useTab();
   const { data: indexDetails } = useFetchSearchIndex(valuesSearch.index);
   const { queryState, setQueryState } = useQueryStateSync();
-  const fieldInfos = _optionalChain([indexDetails, 'optionalAccess', _121 => _121.schema]) ? extractFieldInfo(indexDetails.schema) : [];
+  const fieldInfos = _optionalChain([indexDetails, 'optionalAccess', _122 => _122.schema]) ? extractFieldInfo(indexDetails.schema) : [];
   const hasNormalized = _react.useRef.call(void 0, false);
   _react.useEffect.call(void 0, () => {
     if (hasNormalized.current || fieldInfos.length === 0) return;
@@ -11686,7 +11694,7 @@ var UIQueryBuilder = () => {
     setHasBottomShadow(scrollTop + clientHeight < scrollHeight - 1);
   }, []);
   _react.useEffect.call(void 0, () => {
-    viewportRef.current = _optionalChain([scrollAreaRef, 'access', _122 => _122.current, 'optionalAccess', _123 => _123.querySelector, 'call', _124 => _124(
+    viewportRef.current = _optionalChain([scrollAreaRef, 'access', _123 => _123.current, 'optionalAccess', _124 => _124.querySelector, 'call', _125 => _125(
       "[data-radix-scroll-area-viewport]"
     )]);
     recomputeShadows();
@@ -12035,7 +12043,7 @@ var useOverflow = () => {
     }
     if (!node) return;
     observerRef.current = new ResizeObserver((entries) => {
-      const el = _optionalChain([entries, 'access', _125 => _125.at, 'call', _126 => _126(0), 'optionalAccess', _127 => _127.target]);
+      const el = _optionalChain([entries, 'access', _126 => _126.at, 'call', _127 => _127(0), 'optionalAccess', _128 => _128.target]);
       if (!el) return;
       setIsOverflow(el.scrollWidth > el.clientWidth);
     });
@@ -12043,7 +12051,7 @@ var useOverflow = () => {
   }, []);
   _react.useEffect.call(void 0, () => {
     return () => {
-      _optionalChain([observerRef, 'access', _128 => _128.current, 'optionalAccess', _129 => _129.disconnect, 'call', _130 => _130()]);
+      _optionalChain([observerRef, 'access', _129 => _129.current, 'optionalAccess', _130 => _130.disconnect, 'call', _131 => _131()]);
     };
   }, []);
   return { ref, isOverflow };
@@ -12161,8 +12169,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', _131 => _131.find, 'call', _132 => _132(([tabId]) => tabId === id), 'optionalAccess', _133 => _133[1]]);
-  const isPinned = _optionalChain([tabData, 'optionalAccess', _134 => _134.pinned]);
+  const tabData = _optionalChain([tabs, 'access', _132 => _132.find, 'call', _133 => _133(([tabId]) => tabId === id), 'optionalAccess', _134 => _134[1]]);
+  const isPinned = _optionalChain([tabData, 'optionalAccess', _135 => _135.pinned]);
   const { attributes, listeners: listeners2, setNodeRef, transform, transition, isDragging } = _sortable.useSortable.call(void 0, {
     id,
     disabled: isPinned,
@@ -12378,7 +12386,7 @@ function AddTabButton() {
     const tabsId = addTab();
     selectTab(tabsId);
     setTimeout(() => {
-      const tab = _optionalChain([rootRef, 'optionalAccess', _135 => _135.current, 'optionalAccess', _136 => _136.querySelector, 'call', _137 => _137(`#tab-${tabsId}`)]);
+      const tab = _optionalChain([rootRef, 'optionalAccess', _136 => _136.current, 'optionalAccess', _137 => _137.querySelector, 'call', _138 => _138(`#tab-${tabsId}`)]);
       if (!tab) return;
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);
@@ -12412,7 +12420,7 @@ function TabsListButton({
     onSelectTab(id);
     setOpen(false);
     setTimeout(() => {
-      const tab = _optionalChain([rootRef, 'optionalAccess', _138 => _138.current, 'optionalAccess', _139 => _139.querySelector, 'call', _140 => _140(`#tab-${id}`)]);
+      const tab = _optionalChain([rootRef, 'optionalAccess', _139 => _139.current, 'optionalAccess', _140 => _140.querySelector, 'call', _141 => _141(`#tab-${id}`)]);
       if (!tab) return;
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);

package/dist/index.mjs

@@ -2662,7 +2662,7 @@ function formatTime(seconds) {
   if (parts.length === 0) {
     parts.push("0s");
   }
-  return parts.slice(0, 1).join(" ");
+  return parts.slice(0, 2).join(" ");
 }
 var isTest = typeof window !== "undefined" && window.__PLAYWRIGHT__ === true;
 var jsonToJsLiteral = (json) => {
@@ -4183,8 +4183,11 @@ function parseFieldBuilder(str, fieldName) {
     const typeMatch = str.match(/s\.number\(\s*["']?(U64|I64|F64)?["']?\s*\)/);
     const numType = typeMatch?.[1] || "F64";
     const fromValue = extractFromValue(str);
-    if (fromValue === void 0) return numType;
-    return { type: numType, from: fromValue };
+    return {
+      type: numType,
+      fast: true,
+      ...fromValue !== void 0 && { from: fromValue }
+    };
   }
   if (str.startsWith("s.boolean()")) {
     const fast = str.includes(".fast()");
@@ -5396,7 +5399,7 @@ function DeleteKeyModal({
     /* @__PURE__ */ jsxs12(DialogContent, { children: [
       /* @__PURE__ */ jsxs12(DialogHeader, { children: [
         /* @__PURE__ */ jsx26(DialogTitle, { children: isPlural ? `Delete ${count2} ${itemsLabel}` : `Delete ${itemLabel}` }),
-        /* @__PURE__ */ jsxs12(DialogDescription, { className: "mt-5", children: [
+        /* @__PURE__ */ jsxs12(DialogDescription, { className: "mt-5 break-all", children: [
           "Are you sure you want to delete",
           " ",
           name ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
@@ -5441,6 +5444,7 @@ function DeleteKeyModal({
               setIsPending(true);
               try {
                 await onDeleteConfirm(e, { reindex });
+                setIsOpen?.(false);
               } finally {
                 setIsPending(false);
               }
@@ -5574,7 +5578,7 @@ var DisplayHeader = ({
   };
   return /* @__PURE__ */ jsxs15("div", { className: "rounded-lg", children: [
     /* @__PURE__ */ jsxs15("div", { className: "flex h-[26px] items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsx29("h2", { className: "grow truncate text-sm", children: dataKey.trim() === "" ? /* @__PURE__ */ jsx29("span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ jsx29("span", { className: "font-medium text-zinc-950", children: dataKey }) }),
+      /* @__PURE__ */ jsx29("h2", { className: "min-w-0 grow truncate text-sm", children: dataKey.trim() === "" ? /* @__PURE__ */ jsx29("span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ jsx29("span", { className: "font-medium text-zinc-950", children: dataKey }) }),
       /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
         type !== "string" && type !== "json" && type !== "search" && !showItemActions && /* @__PURE__ */ jsx29(SimpleTooltip, { content: "Add item", children: /* @__PURE__ */ jsx29(Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ jsx29(IconPlus, { className: "size-4 text-zinc-500 dark:text-zinc-600" }) }) }),
         showItemActions ? /* @__PURE__ */ jsx29(ItemActions, { dataKey, type }) : selectedListItem ? void 0 : /* @__PURE__ */ jsx29(KeyActions, { dataKey, content, type })
@@ -8577,7 +8581,11 @@ var QueryWizardPopover = ({ onClose }) => {
             const data = await redis.json.get(key);
             return { key, data };
           } else if (index.dataType === "hash") {
-            const data = await redis.hgetall(key);
+            const raw = await redis.hgetall(key);
+            const data = Array.isArray(raw) ? raw.reduce((obj, value, i, arr) => {
+              if (i % 2 === 0) obj[String(value)] = arr[i + 1];
+              return obj;
+            }, {}) : raw;
             return { key, data };
           } else {
             const data = await redis.get(key);
@@ -9060,8 +9068,8 @@ var IndexSelector = () => {
         },
         modal: false,
         children: [
-          /* @__PURE__ */ jsx59(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs35("button", { className: "flex min-w-[140px] items-center justify-between gap-2 rounded-r-lg border border-zinc-300 bg-emerald-50 px-3 py-[5px] text-sm font-medium text-emerald-800 transition-colors hover:bg-emerald-100", children: [
-            /* @__PURE__ */ jsx59("span", { className: "truncate", children: index || "Select an index" }),
+          /* @__PURE__ */ jsx59(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs35("button", { className: "flex min-w-[140px] max-w-[240px] items-center justify-between gap-2 rounded-r-lg border border-zinc-300 bg-emerald-50 px-3 py-[5px] text-sm font-medium text-emerald-800 transition-colors hover:bg-emerald-100", children: [
+            /* @__PURE__ */ jsx59("span", { className: "min-w-0 truncate", children: index || "Select an index" }),
             /* @__PURE__ */ jsx59(IconChevronDown2, { className: "size-4 shrink-0 opacity-50" })
           ] }) }),
           /* @__PURE__ */ jsx59(PopoverContent, { className: "p-2", align: "center", children: /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-2", children: [
@@ -9094,13 +9102,13 @@ var IndexSelector = () => {
                           setValuesSearchIndex(idx);
                           setOpen(false);
                         },
-                        className: "flex flex-1 items-center gap-2 text-left text-sm",
+                        className: "flex min-w-0 flex-1 items-center gap-2 text-left text-sm",
                         children: [
                           /* @__PURE__ */ jsx59(
                             "span",
                             {
                               className: cn(
-                                "flex size-5 items-center justify-center",
+                                "flex size-5 shrink-0 items-center justify-center",
                                 idx === index ? "text-emerald-600" : "text-transparent"
                               ),
                               children: /* @__PURE__ */ jsx59(IconCircleCheck, { className: "size-5" })

package/package.json

@@ -1 +1 @@
-{ "name": "@upstash/react-redis-browser", "version": "0.2.16", "main": "./dist/index.js", "types": "./dist/index.d.ts", "license": "MIT", "private": false, "publishConfig": { "access": "public" }, "repository": { "type": "git", "url": "git@github.com:upstash/react-redis-browser.git" }, "bugs": { "url": "https://github.com/upstash/react-redis-browser/issues" }, "homepage": "https://github.com/upstash/react-redis-browser", "files": [ "./dist/**" ], "scripts": { "build": "tsup", "dev": "vite", "lint": "tsc && eslint", "fmt": "prettier --write ./src", "test": "bun test src", "test:e2e": "playwright test", "prepare": "husky" }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@dnd-kit/core": "^6.3.1", "@dnd-kit/modifiers": "^9.0.0", "@dnd-kit/sortable": "^10.0.0", "@dnd-kit/utilities": "^3.2.2", "@ianvs/prettier-plugin-sort-imports": "^4.7.1", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-context-menu": "^2.2.16", "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dropdown-menu": "^2.1.16", "@radix-ui/react-label": "^2.1.8", "@radix-ui/react-popover": "^1.1.15", "@radix-ui/react-portal": "^1.1.10", "@radix-ui/react-progress": "^1.1.8", "@radix-ui/react-scroll-area": "^1.2.10", "@radix-ui/react-select": "^2.2.6", "@radix-ui/react-separator": "^1.1.8", "@radix-ui/react-slot": "^1.2.4", "@radix-ui/react-switch": "^1.2.6", "@radix-ui/react-toast": "^1.2.15", "@radix-ui/react-tooltip": "^1.2.8", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "1.37.0", "bytes": "^3.1.2", "cmdk": "^1.1.1", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "@playwright/test": "^1.56.1", "@types/bun": "^1.3.7", "@types/node": "^22.8.4", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@typescript-eslint/eslint-plugin": "8.4.0", "@typescript-eslint/parser": "8.4.0", "@vitejs/plugin-react": "^4.1.0", "autoprefixer": "^10.4.14", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "dotenv": "^16.5.0", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "husky": "^9.1.7", "lint-staged": "^16.2.7", "postcss": "^8.4.31", "postcss-prefix-selector": "^2.1.0", "prettier": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.5", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.4", "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", "tsup": "^8.3.5", "typescript": "^5.0.4", "vite": "^5.4.10", "vite-tsconfig-paths": "^5.0.1" }, "peerDependencies": { "react": "^18.2.0 || ^19", "react-dom": "^18.2.0 || ^19" } }
+{ "name": "@upstash/react-redis-browser", "version": "0.2.18", "main": "./dist/index.js", "types": "./dist/index.d.ts", "license": "MIT", "private": false, "publishConfig": { "access": "public" }, "repository": { "type": "git", "url": "git@github.com:upstash/react-redis-browser.git" }, "bugs": { "url": "https://github.com/upstash/react-redis-browser/issues" }, "homepage": "https://github.com/upstash/react-redis-browser", "files": [ "./dist/**" ], "scripts": { "build": "tsup", "dev": "vite", "lint": "tsc && eslint", "fmt": "prettier --write ./src", "test": "bun test src", "test:e2e": "playwright test", "prepare": "husky" }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@dnd-kit/core": "^6.3.1", "@dnd-kit/modifiers": "^9.0.0", "@dnd-kit/sortable": "^10.0.0", "@dnd-kit/utilities": "^3.2.2", "@ianvs/prettier-plugin-sort-imports": "^4.7.1", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-context-menu": "^2.2.16", "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dropdown-menu": "^2.1.16", "@radix-ui/react-label": "^2.1.8", "@radix-ui/react-popover": "^1.1.15", "@radix-ui/react-portal": "^1.1.10", "@radix-ui/react-progress": "^1.1.8", "@radix-ui/react-scroll-area": "^1.2.10", "@radix-ui/react-select": "^2.2.6", "@radix-ui/react-separator": "^1.1.8", "@radix-ui/react-slot": "^1.2.4", "@radix-ui/react-switch": "^1.2.6", "@radix-ui/react-toast": "^1.2.15", "@radix-ui/react-tooltip": "^1.2.8", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "1.37.0", "bytes": "^3.1.2", "cmdk": "^1.1.1", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "@playwright/test": "^1.56.1", "@types/bun": "^1.3.7", "@types/node": "^22.8.4", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@typescript-eslint/eslint-plugin": "8.4.0", "@typescript-eslint/parser": "8.4.0", "@vitejs/plugin-react": "^4.1.0", "autoprefixer": "^10.4.14", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "dotenv": "^16.5.0", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "husky": "^9.1.7", "lint-staged": "^16.2.7", "postcss": "^8.4.31", "postcss-prefix-selector": "^2.1.0", "prettier": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.5", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.4", "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", "tsup": "^8.3.5", "typescript": "^5.0.4", "vite": "^5.4.10", "vite-tsconfig-paths": "^5.0.1" }, "peerDependencies": { "react": "^18.2.0 || ^19", "react-dom": "^18.2.0 || ^19" } }