@upstash/react-redis-browser 0.2.1 → 0.2.2

package/dist/index.css

@@ -374,6 +374,9 @@
 .ups-db .pointer-events-auto {
   pointer-events: auto;
 }
+.ups-db .visible {
+  visibility: visible;
+}
 .ups-db .fixed {
   position: fixed;
 }
@@ -692,6 +695,9 @@
   --tw-translate-y: 1px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.ups-db .transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 @keyframes pulse {
   50% {
     opacity: .5;
@@ -711,6 +717,12 @@
 .ups-db .cursor-default {
   cursor: default;
 }
+.ups-db .cursor-grab {
+  cursor: grab;
+}
+.ups-db .cursor-grabbing {
+  cursor: grabbing;
+}
 .ups-db .cursor-pointer {
   cursor: pointer;
 }
@@ -1404,6 +1416,47 @@
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
+.ups-db .transition {
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke,
+    opacity,
+    box-shadow,
+    transform,
+    filter,
+    -webkit-backdrop-filter;
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke,
+    opacity,
+    box-shadow,
+    transform,
+    filter,
+    backdrop-filter;
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke,
+    opacity,
+    box-shadow,
+    transform,
+    filter,
+    backdrop-filter,
+    -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .ups-db .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

package/dist/index.js

@@ -278,6 +278,15 @@ var storeCreator = (set, get) => ({
       tabs: [...old.tabs, [id, newTabData]],
       selectedTab: id
     }));
+    return id;
+  },
+  reorderTabs: (oldIndex, newIndex) => {
+    set((old) => {
+      const newTabs = [...old.tabs];
+      const [movedTab] = newTabs.splice(oldIndex, 1);
+      newTabs.splice(newIndex, 0, movedTab);
+      return { ...old, tabs: newTabs };
+    });
   },
   removeTab: (id) => {
     set((old) => {
@@ -393,7 +402,8 @@ var useTab = () => {
   } = 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]);
-  if (!selectedTab || !tabData) throw new Error("selectedTab is undefined when using useTab()");
+  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,
@@ -4394,6 +4404,7 @@ var ItemContextMenu = ({
   const { mutate: editItem } = useEditListItem();
   const [isAlertOpen, setAlertOpen] = _react.useState.call(void 0, false);
   const [data, setData] = _react.useState.call(void 0, );
+  const { addTab, setSelectedKey, selectTab, setSelectedListItem } = useDatabrowserStore();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       DeleteAlertDialog,
@@ -4462,6 +4473,21 @@ var ItemContextMenu = ({
             children: "Copy value"
           }
         ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          ContextMenuItem,
+          {
+            onClick: () => {
+              if (!data) return;
+              const newTabId = addTab();
+              selectTab(newTabId);
+              setSelectedKey(newTabId, dataKey);
+              setSelectedListItem(newTabId, {
+                key: data.key
+              });
+            },
+            children: "Open in new tab"
+          }
+        ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactcontextmenu.ContextMenuSeparator, {}),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuItem, { disabled: type === "stream", onClick: () => setAlertOpen(true), children: "Delete item" })
       ] })
@@ -5675,6 +5701,8 @@ var SidebarContextMenu = ({ children }) => {
   const { mutate: deleteKey } = useDeleteKey();
   const [isAlertOpen, setAlertOpen] = _react.useState.call(void 0, false);
   const [dataKey, setDataKey] = _react.useState.call(void 0, "");
+  const { addTab, setSelectedKey, selectTab, setSearch } = useDatabrowserStore();
+  const { search: currentSearch } = useTab();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       DeleteAlertDialog,
@@ -5718,6 +5746,18 @@ var SidebarContextMenu = ({ children }) => {
             children: "Copy key"
           }
         ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          ContextMenuItem,
+          {
+            onClick: () => {
+              const newTabId = addTab();
+              setSelectedKey(newTabId, dataKey);
+              setSearch(newTabId, currentSearch);
+              selectTab(newTabId);
+            },
+            children: "Open in new tab"
+          }
+        ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactcontextmenu.ContextMenuSeparator, {}),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuItem, { onClick: () => setAlertOpen(true), children: "Delete key" })
       ] })
@@ -5998,6 +6038,18 @@ var DatabrowserInstance = ({ hidden }) => {
 // src/components/databrowser/components/databrowser-tabs.tsx
 
 
+
+
+
+
+
+
+var _core = require('@dnd-kit/core');
+var _modifiers = require('@dnd-kit/modifiers');
+var _sortable = require('@dnd-kit/sortable');
+var _utilities = require('@dnd-kit/utilities');
+
+
 // src/components/databrowser/components/tab.tsx
 
 
@@ -6074,12 +6126,116 @@ var Tab = ({ id }) => {
 
 // src/components/databrowser/components/databrowser-tabs.tsx
 
+var SortableTab = ({ id }) => {
+  const [originalWidth, setOriginalWidth] = _react.useState.call(void 0, null);
+  const textRef = _react.useRef.call(void 0, null);
+  const { attributes, listeners: listeners2, setNodeRef, transform, transition, isDragging } = _sortable.useSortable.call(void 0, {
+    id,
+    resizeObserverConfig: {
+      disabled: true
+    }
+  });
+  const measureRef = (element) => {
+    if (element && !originalWidth) {
+      const width = element.getBoundingClientRect().width;
+      setOriginalWidth(width);
+      if (element) {
+        const textSpan = element.querySelector("span");
+        if (textSpan) {
+          textRef.current = textSpan;
+        }
+      }
+    }
+    setNodeRef(element);
+  };
+  _react.useEffect.call(void 0, () => {
+    if (textRef.current && isDragging) {
+      const originalMaxWidth = textRef.current.style.maxWidth;
+      const originalWhiteSpace = textRef.current.style.whiteSpace;
+      const originalOverflow = textRef.current.style.overflow;
+      const originalTextOverflow = textRef.current.style.textOverflow;
+      textRef.current.style.maxWidth = "none";
+      textRef.current.style.whiteSpace = "nowrap";
+      textRef.current.style.overflow = "visible";
+      textRef.current.style.textOverflow = "clip";
+      return () => {
+        if (textRef.current) {
+          textRef.current.style.maxWidth = originalMaxWidth;
+          textRef.current.style.whiteSpace = originalWhiteSpace;
+          textRef.current.style.overflow = originalOverflow;
+          textRef.current.style.textOverflow = originalTextOverflow;
+        }
+      };
+    }
+  }, [isDragging]);
+  _react.useEffect.call(void 0, () => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (entries[0]) {
+        setOriginalWidth(entries[0].contentRect.width);
+      }
+    });
+    return () => resizeObserver.disconnect();
+  }, []);
+  const style = {
+    transform: transform ? _utilities.CSS.Transform.toString({
+      ...transform,
+      y: 0,
+      scaleX: 1,
+      scaleY: 1
+    }) : "",
+    transition,
+    ...isDragging ? {
+      zIndex: 50,
+      minWidth: originalWidth ? `${originalWidth}px` : void 0
+    } : {}
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref: measureRef,
+      style,
+      className: isDragging ? "cursor-grabbing" : "cursor-grab",
+      ...attributes,
+      ...listeners2,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabIdProvider, { value: id, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Tab, { id }) })
+    }
+  );
+};
 var DatabrowserTabs = () => {
-  const { tabs, addTab } = useDatabrowserStore();
+  const { tabs, addTab, reorderTabs, selectedTab } = useDatabrowserStore();
+  const sensors = _core.useSensors.call(void 0, 
+    _core.useSensor.call(void 0, _core.PointerSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    })
+  );
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = tabs.findIndex(([id]) => id === active.id);
+      const newIndex = tabs.findIndex(([id]) => id === over.id);
+      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: "scrollbar-hide flex translate-y-[1px] items-center gap-1 overflow-x-scroll pb-[1px] [&::-webkit-scrollbar]:hidden", children: [
-      tabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabIdProvider, { value: id, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Tab, { id }) }, id)),
+      /* @__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: tabs.map(([id]) => id), strategy: _sortable.horizontalListSortingStrategy, children: selectedTab && tabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortableTab, { id }, id)) })
+        }
+      ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         Button,
         {
@@ -6120,10 +6276,12 @@ var RedisBrowser = ({
   ) }) }) }) });
 };
 var DatabrowserInstances = () => {
-  const { tabs, selectedTab, addTab } = useDatabrowserStore();
+  const { tabs, selectedTab, selectTab, addTab } = useDatabrowserStore();
   _react.useEffect.call(void 0, () => {
     if (tabs.length === 0) addTab();
-  }, [tabs]);
+    else if (!selectedTab) selectTab(tabs[0][0]);
+  }, [tabs, selectedTab, addTab, selectTab]);
+  if (!selectedTab) return;
   return tabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabIdProvider, { value: id, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstance, { hidden: id !== selectedTab }) }, id));
 };
 

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/databrowser/index.tsx
-import { useEffect as useEffect13, useMemo as useMemo8 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo8 } from "react";
 
 // src/redis-context.tsx
 import { createContext, useContext, useMemo } from "react";
@@ -278,6 +278,15 @@ var storeCreator = (set, get) => ({
       tabs: [...old.tabs, [id, newTabData]],
       selectedTab: id
     }));
+    return id;
+  },
+  reorderTabs: (oldIndex, newIndex) => {
+    set((old) => {
+      const newTabs = [...old.tabs];
+      const [movedTab] = newTabs.splice(oldIndex, 1);
+      newTabs.splice(newIndex, 0, movedTab);
+      return { ...old, tabs: newTabs };
+    });
   },
   removeTab: (id) => {
     set((old) => {
@@ -393,7 +402,8 @@ var useTab = () => {
   } = useDatabrowserStore();
   const tabId = useTabId();
   const tabData = useMemo3(() => tabs.find(([id]) => id === tabId)?.[1], [tabs, tabId]);
-  if (!selectedTab || !tabData) throw new Error("selectedTab is undefined when using useTab()");
+  if (!selectedTab) throw new Error("selectedTab is undefined when using useTab()");
+  if (!tabData) throw new Error("tabData is undefined when using useTab()");
   return useMemo3(
     () => ({
       active: selectedTab === tabId,
@@ -4394,6 +4404,7 @@ var ItemContextMenu = ({
   const { mutate: editItem } = useEditListItem();
   const [isAlertOpen, setAlertOpen] = useState5(false);
   const [data, setData] = useState5();
+  const { addTab, setSelectedKey, selectTab, setSelectedListItem } = useDatabrowserStore();
   return /* @__PURE__ */ jsxs11(Fragment2, { children: [
     /* @__PURE__ */ jsx20(
       DeleteAlertDialog,
@@ -4462,6 +4473,21 @@ var ItemContextMenu = ({
             children: "Copy value"
           }
         ),
+        /* @__PURE__ */ jsx20(
+          ContextMenuItem,
+          {
+            onClick: () => {
+              if (!data) return;
+              const newTabId = addTab();
+              selectTab(newTabId);
+              setSelectedKey(newTabId, dataKey);
+              setSelectedListItem(newTabId, {
+                key: data.key
+              });
+            },
+            children: "Open in new tab"
+          }
+        ),
         /* @__PURE__ */ jsx20(ContextMenuSeparator2, {}),
         /* @__PURE__ */ jsx20(ContextMenuItem, { disabled: type === "stream", onClick: () => setAlertOpen(true), children: "Delete item" })
       ] })
@@ -5675,6 +5701,8 @@ var SidebarContextMenu = ({ children }) => {
   const { mutate: deleteKey } = useDeleteKey();
   const [isAlertOpen, setAlertOpen] = useState10(false);
   const [dataKey, setDataKey] = useState10("");
+  const { addTab, setSelectedKey, selectTab, setSearch } = useDatabrowserStore();
+  const { search: currentSearch } = useTab();
   return /* @__PURE__ */ jsxs26(Fragment8, { children: [
     /* @__PURE__ */ jsx41(
       DeleteAlertDialog,
@@ -5718,6 +5746,18 @@ var SidebarContextMenu = ({ children }) => {
             children: "Copy key"
           }
         ),
+        /* @__PURE__ */ jsx41(
+          ContextMenuItem,
+          {
+            onClick: () => {
+              const newTabId = addTab();
+              setSelectedKey(newTabId, dataKey);
+              setSearch(newTabId, currentSearch);
+              selectTab(newTabId);
+            },
+            children: "Open in new tab"
+          }
+        ),
         /* @__PURE__ */ jsx41(ContextMenuSeparator3, {}),
         /* @__PURE__ */ jsx41(ContextMenuItem, { onClick: () => setAlertOpen(true), children: "Delete key" })
       ] })
@@ -5996,6 +6036,18 @@ var DatabrowserInstance = ({ hidden }) => {
 };
 
 // src/components/databrowser/components/databrowser-tabs.tsx
+import { useEffect as useEffect13, useRef as useRef5, useState as useState13 } from "react";
+import {
+  closestCenter,
+  DndContext,
+  MeasuringStrategy,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
+import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { IconPlus as IconPlus2 } from "@tabler/icons-react";
 
 // src/components/databrowser/components/tab.tsx
@@ -6074,12 +6126,116 @@ var Tab = ({ id }) => {
 
 // src/components/databrowser/components/databrowser-tabs.tsx
 import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
+var SortableTab = ({ id }) => {
+  const [originalWidth, setOriginalWidth] = useState13(null);
+  const textRef = useRef5(null);
+  const { attributes, listeners: listeners2, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    resizeObserverConfig: {
+      disabled: true
+    }
+  });
+  const measureRef = (element) => {
+    if (element && !originalWidth) {
+      const width = element.getBoundingClientRect().width;
+      setOriginalWidth(width);
+      if (element) {
+        const textSpan = element.querySelector("span");
+        if (textSpan) {
+          textRef.current = textSpan;
+        }
+      }
+    }
+    setNodeRef(element);
+  };
+  useEffect13(() => {
+    if (textRef.current && isDragging) {
+      const originalMaxWidth = textRef.current.style.maxWidth;
+      const originalWhiteSpace = textRef.current.style.whiteSpace;
+      const originalOverflow = textRef.current.style.overflow;
+      const originalTextOverflow = textRef.current.style.textOverflow;
+      textRef.current.style.maxWidth = "none";
+      textRef.current.style.whiteSpace = "nowrap";
+      textRef.current.style.overflow = "visible";
+      textRef.current.style.textOverflow = "clip";
+      return () => {
+        if (textRef.current) {
+          textRef.current.style.maxWidth = originalMaxWidth;
+          textRef.current.style.whiteSpace = originalWhiteSpace;
+          textRef.current.style.overflow = originalOverflow;
+          textRef.current.style.textOverflow = originalTextOverflow;
+        }
+      };
+    }
+  }, [isDragging]);
+  useEffect13(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (entries[0]) {
+        setOriginalWidth(entries[0].contentRect.width);
+      }
+    });
+    return () => resizeObserver.disconnect();
+  }, []);
+  const style = {
+    transform: transform ? CSS.Transform.toString({
+      ...transform,
+      y: 0,
+      scaleX: 1,
+      scaleY: 1
+    }) : "",
+    transition,
+    ...isDragging ? {
+      zIndex: 50,
+      minWidth: originalWidth ? `${originalWidth}px` : void 0
+    } : {}
+  };
+  return /* @__PURE__ */ jsx50(
+    "div",
+    {
+      ref: measureRef,
+      style,
+      className: isDragging ? "cursor-grabbing" : "cursor-grab",
+      ...attributes,
+      ...listeners2,
+      children: /* @__PURE__ */ jsx50(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx50(Tab, { id }) })
+    }
+  );
+};
 var DatabrowserTabs = () => {
-  const { tabs, addTab } = useDatabrowserStore();
+  const { tabs, addTab, reorderTabs, selectedTab } = useDatabrowserStore();
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    })
+  );
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = tabs.findIndex(([id]) => id === active.id);
+      const newIndex = tabs.findIndex(([id]) => id === over.id);
+      reorderTabs(oldIndex, newIndex);
+    }
+  };
   return /* @__PURE__ */ jsxs34("div", { className: "relative mb-2 shrink-0", children: [
     /* @__PURE__ */ jsx50("div", { className: "absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" }),
     /* @__PURE__ */ jsxs34("div", { className: "scrollbar-hide flex translate-y-[1px] items-center gap-1 overflow-x-scroll pb-[1px] [&::-webkit-scrollbar]:hidden", children: [
-      tabs.map(([id]) => /* @__PURE__ */ jsx50(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx50(Tab, { id }) }, id)),
+      /* @__PURE__ */ jsx50(
+        DndContext,
+        {
+          sensors,
+          collisionDetection: closestCenter,
+          onDragEnd: handleDragEnd,
+          modifiers: [restrictToHorizontalAxis],
+          measuring: {
+            droppable: {
+              strategy: MeasuringStrategy.Always
+            }
+          },
+          children: /* @__PURE__ */ jsx50(SortableContext, { items: tabs.map(([id]) => id), strategy: horizontalListSortingStrategy, children: selectedTab && tabs.map(([id]) => /* @__PURE__ */ jsx50(SortableTab, { id }, id)) })
+        }
+      ),
       /* @__PURE__ */ jsx50(
         Button,
         {
@@ -6104,7 +6260,7 @@ var RedisBrowser = ({
   storage
 }) => {
   const credentials = useMemo8(() => ({ token, url }), [token, url]);
-  useEffect13(() => {
+  useEffect14(() => {
     queryClient.resetQueries();
   }, [credentials.url]);
   return /* @__PURE__ */ jsx51(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx51(RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx51(DatabrowserProvider, { storage, children: /* @__PURE__ */ jsx51(TooltipProvider, { children: /* @__PURE__ */ jsxs35(
@@ -6120,10 +6276,12 @@ var RedisBrowser = ({
   ) }) }) }) });
 };
 var DatabrowserInstances = () => {
-  const { tabs, selectedTab, addTab } = useDatabrowserStore();
-  useEffect13(() => {
+  const { tabs, selectedTab, selectTab, addTab } = useDatabrowserStore();
+  useEffect14(() => {
     if (tabs.length === 0) addTab();
-  }, [tabs]);
+    else if (!selectedTab) selectTab(tabs[0][0]);
+  }, [tabs, selectedTab, addTab, selectTab]);
+  if (!selectedTab) return;
   return tabs.map(([id]) => /* @__PURE__ */ jsx51(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx51(DatabrowserInstance, { hidden: id !== selectedTab }) }, id));
 };
 export {

package/package.json

@@ -1 +1 @@
-{ "name": "@upstash/react-redis-browser", "version": "v0.2.1", "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 ./src" }, "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.15", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-label": "^2.1.7", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-portal": "^1.1.2", "@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.34.8", "bytes": "^3.1.2", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "@playwright/test": "^1.53.1", "@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", "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": "v0.2.2", "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 ./src" }, "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.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.15", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-label": "^2.1.7", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-portal": "^1.1.2", "@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.34.8", "bytes": "^3.1.2", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "@playwright/test": "^1.53.1", "@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", "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" } }