@upstash/react-redis-browser 0.1.2-canary-3 → 0.1.2-canary-5

package/dist/index.css

@@ -1059,9 +1059,6 @@
   font-size: 0.75rem;
   line-height: 1rem;
 }
-.ups-db .font-bold {
-  font-weight: 700;
-}
 .ups-db .font-medium {
   font-weight: 500;
 }

package/dist/index.js

@@ -3320,7 +3320,7 @@ var useFetchListItems = ({ dataKey, type }) => {
         count: LIST_DISPLAY_PAGE_SIZE
       });
       return {
-        cursor: nextCursor,
+        cursor: nextCursor === "0" ? void 0 : nextCursor,
         keys: keys.map((key) => ({ key }))
       };
     },
@@ -3336,7 +3336,7 @@ var useFetchListItems = ({ dataKey, type }) => {
         rev: true
       });
       return {
-        cursor: lastIndex + LIST_DISPLAY_PAGE_SIZE,
+        cursor: res.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastIndex + LIST_DISPLAY_PAGE_SIZE,
         keys: transformArray(res)
       };
     },
@@ -3351,7 +3351,7 @@ var useFetchListItems = ({ dataKey, type }) => {
         count: LIST_DISPLAY_PAGE_SIZE
       });
       return {
-        cursor: res[0],
+        cursor: res[0] === "0" ? void 0 : res[0],
         keys: transformArray(res[1])
       };
     },
@@ -3365,7 +3365,7 @@ var useFetchListItems = ({ dataKey, type }) => {
       const lastIndex = Number(pageParam);
       const values = await redis.lrange(dataKey, lastIndex, lastIndex + LIST_DISPLAY_PAGE_SIZE);
       return {
-        cursor: lastIndex + LIST_DISPLAY_PAGE_SIZE,
+        cursor: values.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastIndex + LIST_DISPLAY_PAGE_SIZE,
         keys: values.map((value, i) => ({
           key: (lastIndex + i).toString(),
           value
@@ -3377,17 +3377,18 @@ var useFetchListItems = ({ dataKey, type }) => {
   const streamQuery = _reactquery.useInfiniteQuery.call(void 0, {
     enabled: type === "stream",
     queryKey: [FETCH_LIST_ITEMS_QUERY_KEY, dataKey, "stream"],
-    initialPageParam: "0",
+    initialPageParam: "-",
     queryFn: async ({ pageParam: lastId }) => {
       const messages = await redis.xrange(
         dataKey,
-        lastId,
+        lastId === "-" ? "-" : `(${lastId}`,
         "+",
-        LIST_DISPLAY_PAGE_SIZE
+        // +1 since first message is the last one
+        LIST_DISPLAY_PAGE_SIZE + 1
       );
       const lastMessageId = messages.length > 0 ? _optionalChain([messages, 'access', _15 => _15.at, 'call', _16 => _16(-1), 'optionalAccess', _17 => _17[0]]) : void 0;
       return {
-        cursor: lastMessageId,
+        cursor: messages.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastMessageId,
         keys: messages.map(([id, fields]) => ({
           key: id,
           value: fields.join("\n")
@@ -3790,30 +3791,28 @@ function DeleteAlertDialog({
   children,
   onDeleteConfirm,
   open,
-  onOpenChange
+  onOpenChange,
+  deletionType
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialog, { open, onOpenChange, children: [
     children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogTrigger, { asChild: true, children }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogContent, { children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogHeader, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogTitle, { children: "Irreversible Action!" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogTitle, { children: deletionType === "item" ? "Delete Item" : "Delete Key" }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogDescription, { className: "mt-5", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-bold", children: "This action CANNOT BE UNDONE." }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
-          "By proceeding, you will ",
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-bold", children: "PERMANENTLY REMOVE" }),
-          " your data from our servers, resulting in complete and irreversible loss of your information."
+          "Are you sure you want to delete this ",
+          deletionType,
+          "? This action cannot be undone."
         ] })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogFooter, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogCancel, { children: "Cancel" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogCancel, { type: "button", children: "Cancel" }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           AlertDialogAction,
           {
             className: "bg-red-500 text-gray-50 hover:bg-red-600",
             onClick: onDeleteConfirm,
-            children: "Delete"
+            children: "Yes, Delete"
           }
         )
       ] })
@@ -3836,6 +3835,7 @@ var ItemContextMenu = ({
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       DeleteAlertDialog,
       {
+        deletionType: "item",
         open: isAlertOpen,
         onOpenChange: setAlertOpen,
         onDeleteConfirm: (e) => {
@@ -4540,7 +4540,7 @@ function KeyActions({ dataKey, content }) {
           children: "Copy content"
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DeleteAlertDialog, { onDeleteConfirm: async () => await deleteKey(dataKey), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" }) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DeleteAlertDialog, { deletionType: "key", onDeleteConfirm: async () => await deleteKey(dataKey), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" }) })
     ] })
   ] });
 }
@@ -4552,8 +4552,6 @@ var DisplayHeader = ({
   type,
   content
 }) => {
-  const size = _optionalChain([content, 'optionalAccess', _21 => _21.length]);
-  const length = _optionalChain([content, 'optionalAccess', _22 => _22.length]);
   const { setSelectedListItem } = useDatabrowserStore();
   const handleAddItem = () => {
     setSelectedListItem({ key: type === "stream" ? "*" : "", value: "", isNew: true });
@@ -4570,7 +4568,6 @@ var DisplayHeader = ({
       /* @__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 }),
-      length && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Badge, { label: "Length:", children: size }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TTLBadge, { dataKey })
     ] })
   ] });
@@ -4676,7 +4673,7 @@ var CustomEditor = ({
   language,
   value,
   onChange,
-  maxDynamicHeight,
+  height,
   showCopyButton
 }) => {
   const monaco = _react2.useMonaco.call(void 0, );
@@ -4685,14 +4682,14 @@ var CustomEditor = ({
     if (!monaco || !editorRef.current) {
       return;
     }
-    _optionalChain([monaco, 'optionalAccess', _23 => _23.editor, 'access', _24 => _24.setModelLanguage, 'call', _25 => _25(editorRef.current.getModel(), language)]);
+    _optionalChain([monaco, 'optionalAccess', _21 => _21.editor, 'access', _22 => _22.setModelLanguage, 'call', _23 => _23(editorRef.current.getModel(), language)]);
   }, [monaco, language]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
-      className: cn("group/editor relative", maxDynamicHeight === void 0 && "h-full p-2"),
+      className: cn("group/editor relative", height === void 0 && "h-full p-2"),
       style: {
-        height: maxDynamicHeight
+        height
       },
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -4752,7 +4749,7 @@ var CustomEditor = ({
 var useField = ({
   name,
   form,
-  isEditorDynamic = false,
+  height,
   showCopyButton
 }) => {
   const { field, fieldState } = _reacthookform.useController.call(void 0, {
@@ -4790,7 +4787,7 @@ var useField = ({
         language: contentType === "JSON" ? "json" : "plaintext",
         value: field.value,
         onChange: field.onChange,
-        maxDynamicHeight: isEditorDynamic ? 100 : void 0,
+        height,
         showCopyButton
       }
     ) })
@@ -4842,13 +4839,14 @@ var ListEditForm = ({
   });
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacthookform.FormProvider, { ...form, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit, className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex grow flex-col gap-2", children: [
-      type !== "list" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormItem, { name: "key", label: keyLabel }),
-      type === "zset" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormItem, { name: "value", label: valueLabel })
+      type !== "list" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormItem, { name: "key", height: type === "set" ? 250 : 100, label: keyLabel }),
+      type === "zset" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormItem, { name: "value", height: type === "list" ? 250 : 100, label: valueLabel })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex justify-end gap-2", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         Button,
         {
+          type: "button",
           onClick: () => {
             setSelectedListItem(void 0);
           },
@@ -4892,12 +4890,16 @@ var NumberFormItem = ({ name, label }) => {
     )
   ] });
 };
-var FormItem = ({ name, label }) => {
+var FormItem = ({
+  name,
+  label,
+  height
+}) => {
   const form = _reacthookform.useFormContext.call(void 0, );
   const { editor, selector } = useField({
     name,
     form,
-    isEditorDynamic: true,
+    height,
     showCopyButton: true
   });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-1", children: [
@@ -4935,7 +4937,7 @@ var ListItems = ({
   dataKey
 }) => {
   const { setSelectedListItem } = useDatabrowserStore();
-  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _26 => _26.data, 'optionalAccess', _27 => _27.pages, 'access', _28 => _28.flatMap, 'call', _29 => _29((page) => page.keys)]), () => ( [])), [query.data]);
+  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _24 => _24.data, 'optionalAccess', _25 => _25.pages, 'access', _26 => _26.flatMap, 'call', _27 => _27((page) => page.keys)]), () => ( [])), [query.data]);
   const { mutate: editItem } = useEditListItem();
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     ItemContextMenu,
@@ -4969,22 +4971,33 @@ var ListItems = ({
                 children: value
               }
             ),
-            type !== "stream" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { width: 20, className: "px-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              DeleteAlertDialog,
+            type !== "stream" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "td",
               {
-                onDeleteConfirm: (e) => {
+                width: 20,
+                className: "px-3",
+                onClick: (e) => {
                   e.stopPropagation();
-                  editItem({
-                    type,
-                    dataKey,
-                    itemKey: key,
-                    // For deletion
-                    newKey: void 0
-                  });
                 },
-                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "icon-sm", variant: "secondary", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconTrash, { className: "size-4 text-zinc-500" }) })
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  DeleteAlertDialog,
+                  {
+                    deletionType: "item",
+                    onDeleteConfirm: (e) => {
+                      e.stopPropagation();
+                      editItem({
+                        type,
+                        dataKey,
+                        itemKey: key,
+                        // For deletion
+                        newKey: void 0
+                      });
+                    },
+                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "icon-sm", variant: "secondary", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconTrash, { className: "size-4 text-zinc-500" }) })
+                  }
+                )
               }
-            ) })
+            )
           ]
         }
       )
@@ -5063,12 +5076,13 @@ var DataDisplay = () => {
 
 // src/components/databrowser/components/add-key-modal.tsx
 
+var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _interopRequireWildcard(_reactdialog);
 
 
 
 // src/components/ui/dialog.tsx
 
-var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _interopRequireWildcard(_reactdialog);
+
 
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
@@ -5185,7 +5199,7 @@ function AddKeyModal() {
       setSelectedKey(key);
       setOpen(false);
       setTimeout(() => {
-        _optionalChain([window, 'access', _30 => _30.document, 'access', _31 => _31.querySelector, 'call', _32 => _32(`[data-key="${key}"]`), 'optionalAccess', _33 => _33.scrollIntoView, 'call', _34 => _34({
+        _optionalChain([window, 'access', _28 => _28.document, 'access', _29 => _29.querySelector, 'call', _30 => _30(`[data-key="${key}"]`), 'optionalAccess', _31 => _31.scrollIntoView, 'call', _32 => _32({
           behavior: "smooth",
           block: "start",
           inline: "nearest"
@@ -5210,6 +5224,7 @@ function AddKeyModal() {
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "primary", size: "icon-sm", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.PlusIcon, { className: "size-4" }) }) }),
         /* @__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" }) }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "mt-4", onSubmit, children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-1", children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5235,7 +5250,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', _35 => _35.errors, 'access', _36 => _36.key, 'optionalAccess', _37 => _37.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', _33 => _33.errors, 'access', _34 => _34.key, 'optionalAccess', _35 => _35.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, 
@@ -5281,6 +5296,7 @@ var SidebarContextMenu = ({
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       DeleteAlertDialog,
       {
+        deletionType: "key",
         open: isAlertOpen,
         onOpenChange: setAlertOpen,
         onDeleteConfirm: (e) => {
@@ -5316,7 +5332,7 @@ var SidebarContextMenu = ({
 
 var KeysList = () => {
   const { keys } = useKeys();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pr-3", children: keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyItem, { nextKey: _nullishCoalesce(_optionalChain([keys, 'access', _38 => _38.at, 'call', _39 => _39(i + 1), 'optionalAccess', _40 => _40[0]]), () => ( "")), data }, data[0])) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pr-3", children: keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyItem, { nextKey: _nullishCoalesce(_optionalChain([keys, 'access', _36 => _36.at, 'call', _37 => _37(i + 1), 'optionalAccess', _38 => _38[0]]), () => ( "")), data }, data[0])) });
 };
 var keyStyles = {
   string: "border-sky-400 !bg-sky-50 text-sky-900",
@@ -5444,8 +5460,8 @@ function Sidebar() {
 
 var RedisBrowser = ({ token, url }) => {
   const credentials = _react.useMemo.call(void 0, () => ({ token, url }), [token, url]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, KeysProvider, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ups-db", style: { height: "100%" }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ups-db", style: { height: "100%" }, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       _reactresizablepanels.PanelGroup,
       {
         autoSaveId: "persistence",
@@ -5464,9 +5480,9 @@ var RedisBrowser = ({ token, url }) => {
           /* @__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, {})
-  ] }) }) }) });
+  ] }) }) }) }) });
 };
 
 

package/dist/index.mjs

@@ -3320,7 +3320,7 @@ var useFetchListItems = ({ dataKey, type }) => {
         count: LIST_DISPLAY_PAGE_SIZE
       });
       return {
-        cursor: nextCursor,
+        cursor: nextCursor === "0" ? void 0 : nextCursor,
         keys: keys.map((key) => ({ key }))
       };
     },
@@ -3336,7 +3336,7 @@ var useFetchListItems = ({ dataKey, type }) => {
         rev: true
       });
       return {
-        cursor: lastIndex + LIST_DISPLAY_PAGE_SIZE,
+        cursor: res.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastIndex + LIST_DISPLAY_PAGE_SIZE,
         keys: transformArray(res)
       };
     },
@@ -3351,7 +3351,7 @@ var useFetchListItems = ({ dataKey, type }) => {
         count: LIST_DISPLAY_PAGE_SIZE
       });
       return {
-        cursor: res[0],
+        cursor: res[0] === "0" ? void 0 : res[0],
         keys: transformArray(res[1])
       };
     },
@@ -3365,7 +3365,7 @@ var useFetchListItems = ({ dataKey, type }) => {
       const lastIndex = Number(pageParam);
       const values = await redis.lrange(dataKey, lastIndex, lastIndex + LIST_DISPLAY_PAGE_SIZE);
       return {
-        cursor: lastIndex + LIST_DISPLAY_PAGE_SIZE,
+        cursor: values.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastIndex + LIST_DISPLAY_PAGE_SIZE,
         keys: values.map((value, i) => ({
           key: (lastIndex + i).toString(),
           value
@@ -3377,17 +3377,18 @@ var useFetchListItems = ({ dataKey, type }) => {
   const streamQuery = useInfiniteQuery2({
     enabled: type === "stream",
     queryKey: [FETCH_LIST_ITEMS_QUERY_KEY, dataKey, "stream"],
-    initialPageParam: "0",
+    initialPageParam: "-",
     queryFn: async ({ pageParam: lastId }) => {
       const messages = await redis.xrange(
         dataKey,
-        lastId,
+        lastId === "-" ? "-" : `(${lastId}`,
         "+",
-        LIST_DISPLAY_PAGE_SIZE
+        // +1 since first message is the last one
+        LIST_DISPLAY_PAGE_SIZE + 1
       );
       const lastMessageId = messages.length > 0 ? messages.at(-1)?.[0] : void 0;
       return {
-        cursor: lastMessageId,
+        cursor: messages.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastMessageId,
         keys: messages.map(([id, fields]) => ({
           key: id,
           value: fields.join("\n")
@@ -3790,30 +3791,28 @@ function DeleteAlertDialog({
   children,
   onDeleteConfirm,
   open,
-  onOpenChange
+  onOpenChange,
+  deletionType
 }) {
   return /* @__PURE__ */ jsxs5(AlertDialog, { open, onOpenChange, children: [
     children && /* @__PURE__ */ jsx10(AlertDialogTrigger, { asChild: true, children }),
     /* @__PURE__ */ jsxs5(AlertDialogContent, { children: [
       /* @__PURE__ */ jsxs5(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx10(AlertDialogTitle, { children: "Irreversible Action!" }),
+        /* @__PURE__ */ jsx10(AlertDialogTitle, { children: deletionType === "item" ? "Delete Item" : "Delete Key" }),
         /* @__PURE__ */ jsxs5(AlertDialogDescription, { className: "mt-5", children: [
-          /* @__PURE__ */ jsx10("span", { className: "font-bold", children: "This action CANNOT BE UNDONE." }),
-          /* @__PURE__ */ jsx10("br", {}),
-          /* @__PURE__ */ jsx10("br", {}),
-          "By proceeding, you will ",
-          /* @__PURE__ */ jsx10("span", { className: "font-bold", children: "PERMANENTLY REMOVE" }),
-          " your data from our servers, resulting in complete and irreversible loss of your information."
+          "Are you sure you want to delete this ",
+          deletionType,
+          "? This action cannot be undone."
         ] })
       ] }),
       /* @__PURE__ */ jsxs5(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx10(AlertDialogCancel, { children: "Cancel" }),
+        /* @__PURE__ */ jsx10(AlertDialogCancel, { type: "button", children: "Cancel" }),
         /* @__PURE__ */ jsx10(
           AlertDialogAction,
           {
             className: "bg-red-500 text-gray-50 hover:bg-red-600",
             onClick: onDeleteConfirm,
-            children: "Delete"
+            children: "Yes, Delete"
           }
         )
       ] })
@@ -3836,6 +3835,7 @@ var ItemContextMenu = ({
     /* @__PURE__ */ jsx11(
       DeleteAlertDialog,
       {
+        deletionType: "item",
         open: isAlertOpen,
         onOpenChange: setAlertOpen,
         onDeleteConfirm: (e) => {
@@ -4540,7 +4540,7 @@ function KeyActions({ dataKey, content }) {
           children: "Copy content"
         }
       ),
-      /* @__PURE__ */ jsx22(DeleteAlertDialog, { onDeleteConfirm: async () => await deleteKey(dataKey), children: /* @__PURE__ */ jsx22(DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" }) })
+      /* @__PURE__ */ jsx22(DeleteAlertDialog, { deletionType: "key", onDeleteConfirm: async () => await deleteKey(dataKey), children: /* @__PURE__ */ jsx22(DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" }) })
     ] })
   ] });
 }
@@ -4552,8 +4552,6 @@ var DisplayHeader = ({
   type,
   content
 }) => {
-  const size = content?.length;
-  const length = content?.length;
   const { setSelectedListItem } = useDatabrowserStore();
   const handleAddItem = () => {
     setSelectedListItem({ key: type === "stream" ? "*" : "", value: "", isNew: true });
@@ -4570,7 +4568,6 @@ var DisplayHeader = ({
       /* @__PURE__ */ jsx23(TypeTag, { variant: type, type: "badge" }),
       /* @__PURE__ */ jsx23(SizeBadge, { dataKey }),
       /* @__PURE__ */ jsx23(LengthBadge, { dataKey, type, content }),
-      length && /* @__PURE__ */ jsx23(Badge, { label: "Length:", children: size }),
       /* @__PURE__ */ jsx23(TTLBadge, { dataKey })
     ] })
   ] });
@@ -4676,7 +4673,7 @@ var CustomEditor = ({
   language,
   value,
   onChange,
-  maxDynamicHeight,
+  height,
   showCopyButton
 }) => {
   const monaco = useMonaco();
@@ -4690,9 +4687,9 @@ var CustomEditor = ({
   return /* @__PURE__ */ jsxs18(
     "div",
     {
-      className: cn("group/editor relative", maxDynamicHeight === void 0 && "h-full p-2"),
+      className: cn("group/editor relative", height === void 0 && "h-full p-2"),
       style: {
-        height: maxDynamicHeight
+        height
       },
       children: [
         /* @__PURE__ */ jsx27(
@@ -4752,7 +4749,7 @@ import { Fragment as Fragment4, jsx as jsx28 } from "react/jsx-runtime";
 var useField = ({
   name,
   form,
-  isEditorDynamic = false,
+  height,
   showCopyButton
 }) => {
   const { field, fieldState } = useController({
@@ -4790,7 +4787,7 @@ var useField = ({
         language: contentType === "JSON" ? "json" : "plaintext",
         value: field.value,
         onChange: field.onChange,
-        maxDynamicHeight: isEditorDynamic ? 100 : void 0,
+        height,
         showCopyButton
       }
     ) })
@@ -4842,13 +4839,14 @@ var ListEditForm = ({
   });
   return /* @__PURE__ */ jsx29(FormProvider, { ...form, children: /* @__PURE__ */ jsxs19("form", { onSubmit, className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsxs19("div", { className: "flex grow flex-col gap-2", children: [
-      type !== "list" && /* @__PURE__ */ jsx29(FormItem, { name: "key", label: keyLabel }),
-      type === "zset" ? /* @__PURE__ */ jsx29(NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ jsx29(FormItem, { name: "value", label: valueLabel })
+      type !== "list" && /* @__PURE__ */ jsx29(FormItem, { name: "key", height: type === "set" ? 250 : 100, label: keyLabel }),
+      type === "zset" ? /* @__PURE__ */ jsx29(NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ jsx29(FormItem, { name: "value", height: type === "list" ? 250 : 100, label: valueLabel })
     ] }),
     /* @__PURE__ */ jsxs19("div", { className: "flex justify-end gap-2", children: [
       /* @__PURE__ */ jsx29(
         Button,
         {
+          type: "button",
           onClick: () => {
             setSelectedListItem(void 0);
           },
@@ -4892,12 +4890,16 @@ var NumberFormItem = ({ name, label }) => {
     )
   ] });
 };
-var FormItem = ({ name, label }) => {
+var FormItem = ({
+  name,
+  label,
+  height
+}) => {
   const form = useFormContext();
   const { editor, selector } = useField({
     name,
     form,
-    isEditorDynamic: true,
+    height,
     showCopyButton: true
   });
   return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1", children: [
@@ -4969,22 +4971,33 @@ var ListItems = ({
                 children: value
               }
             ),
-            type !== "stream" && /* @__PURE__ */ jsx30("td", { width: 20, className: "px-3", children: /* @__PURE__ */ jsx30(
-              DeleteAlertDialog,
+            type !== "stream" && /* @__PURE__ */ jsx30(
+              "td",
               {
-                onDeleteConfirm: (e) => {
+                width: 20,
+                className: "px-3",
+                onClick: (e) => {
                   e.stopPropagation();
-                  editItem({
-                    type,
-                    dataKey,
-                    itemKey: key,
-                    // For deletion
-                    newKey: void 0
-                  });
                 },
-                children: /* @__PURE__ */ jsx30(Button, { size: "icon-sm", variant: "secondary", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx30(IconTrash, { className: "size-4 text-zinc-500" }) })
+                children: /* @__PURE__ */ jsx30(
+                  DeleteAlertDialog,
+                  {
+                    deletionType: "item",
+                    onDeleteConfirm: (e) => {
+                      e.stopPropagation();
+                      editItem({
+                        type,
+                        dataKey,
+                        itemKey: key,
+                        // For deletion
+                        newKey: void 0
+                      });
+                    },
+                    children: /* @__PURE__ */ jsx30(Button, { size: "icon-sm", variant: "secondary", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx30(IconTrash, { className: "size-4 text-zinc-500" }) })
+                  }
+                )
               }
-            ) })
+            )
           ]
         }
       )
@@ -5063,6 +5076,7 @@ var DataDisplay = () => {
 
 // src/components/databrowser/components/add-key-modal.tsx
 import { useState as useState8 } from "react";
+import { DialogDescription as DialogDescription2 } from "@radix-ui/react-dialog";
 import { PlusIcon } from "@radix-ui/react-icons";
 import { Controller as Controller3, useForm as useForm4 } from "react-hook-form";
 
@@ -5210,6 +5224,7 @@ function AddKeyModal() {
         /* @__PURE__ */ jsx34(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(Button, { variant: "primary", size: "icon-sm", children: /* @__PURE__ */ jsx34(PlusIcon, { className: "size-4" }) }) }),
         /* @__PURE__ */ jsxs23(DialogContent, { className: "max-w-[400px]", children: [
           /* @__PURE__ */ jsx34(DialogHeader, { children: /* @__PURE__ */ jsx34(DialogTitle, { children: "Create new key" }) }),
+          /* @__PURE__ */ jsx34("div", { className: "sr-only", children: /* @__PURE__ */ jsx34(DialogDescription2, { children: "Create new key" }) }),
           /* @__PURE__ */ jsxs23("form", { className: "mt-4", onSubmit, children: [
             /* @__PURE__ */ jsxs23("div", { className: "flex gap-1", children: [
               /* @__PURE__ */ jsx34(
@@ -5281,6 +5296,7 @@ var SidebarContextMenu = ({
     /* @__PURE__ */ jsx36(
       DeleteAlertDialog,
       {
+        deletionType: "key",
         open: isAlertOpen,
         onOpenChange: setAlertOpen,
         onDeleteConfirm: (e) => {
@@ -5444,8 +5460,8 @@ function Sidebar() {
 import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 var RedisBrowser = ({ token, url }) => {
   const credentials = useMemo6(() => ({ token, url }), [token, url]);
-  return /* @__PURE__ */ jsx42(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx42(TooltipProvider, { children: /* @__PURE__ */ jsx42(DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsxs31(KeysProvider, { children: [
-    /* @__PURE__ */ jsx42("div", { className: "ups-db", style: { height: "100%" }, children: /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsx42(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx42(TooltipProvider, { children: /* @__PURE__ */ jsx42(DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx42(KeysProvider, { children: /* @__PURE__ */ jsxs31("div", { className: "ups-db", style: { height: "100%" }, children: [
+    /* @__PURE__ */ jsxs31(
       PanelGroup,
       {
         autoSaveId: "persistence",
@@ -5464,9 +5480,9 @@ var RedisBrowser = ({ token, url }) => {
           /* @__PURE__ */ jsx42(Panel, { minSize: 40, children: /* @__PURE__ */ jsx42(DataDisplay, {}) })
         ]
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsx42(Toaster, {})
-  ] }) }) }) });
+  ] }) }) }) }) });
 };
 export {
   RedisBrowser

package/package.json

@@ -1 +1 @@
-{ "name": "@upstash/react-redis-browser", "version": "v0.1.2-canary-3", "main": "./dist/index.js", "types": "./dist/index.d.ts", "license": "MIT", "private": false, "publishConfig": { "access": "public" }, "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 ." }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@ianvs/prettier-plugin-sort-imports": "^4.4.0", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "^1.31.6", "bytes": "^3.1.2", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "postcss-prefix-selector": "^2.1.0", "@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", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "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": "v0.1.2-canary-5", "main": "./dist/index.js", "types": "./dist/index.d.ts", "license": "MIT", "private": false, "publishConfig": { "access": "public" }, "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 ." }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@ianvs/prettier-plugin-sort-imports": "^4.4.0", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "^1.31.6", "bytes": "^3.1.2", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "postcss-prefix-selector": "^2.1.0", "@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", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "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" } }