@upstash/react-redis-browser 0.2.3 → 0.2.5

package/dist/index.css

@@ -371,6 +371,9 @@
   white-space: nowrap;
   border-width: 0;
 }
+.ups-db .pointer-events-none {
+  pointer-events: none;
+}
 .ups-db .pointer-events-auto {
   pointer-events: auto;
 }
@@ -440,6 +443,9 @@
 .ups-db .-z-10 {
   z-index: -10;
 }
+.ups-db .z-10 {
+  z-index: 10;
+}
 .ups-db .z-50 {
   z-index: 50;
 }
@@ -479,6 +485,9 @@
 .ups-db .mr-1 {
   margin-right: 0.25rem;
 }
+.ups-db .mr-2 {
+  margin-right: 0.5rem;
+}
 .ups-db .mt-0\.5 {
   margin-top: 0.125rem;
 }
@@ -574,6 +583,9 @@
 .ups-db .h-px {
   height: 1px;
 }
+.ups-db .max-h-\[300px\] {
+  max-height: 300px;
+}
 .ups-db .max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
   max-height: var(--radix-dropdown-menu-content-available-height);
 }
@@ -616,6 +628,9 @@
 .ups-db .w-5 {
   width: 1.25rem;
 }
+.ups-db .w-6 {
+  width: 1.5rem;
+}
 .ups-db .w-7 {
   width: 1.75rem;
 }
@@ -734,6 +749,9 @@
   -moz-user-select: none;
   user-select: none;
 }
+.ups-db .resize {
+  resize: both;
+}
 .ups-db .flex-col {
   flex-direction: column;
 }
@@ -812,15 +830,15 @@
 .ups-db .overflow-visible {
   overflow: visible;
 }
+.ups-db .overflow-x-auto {
+  overflow-x: auto;
+}
 .ups-db .overflow-y-auto {
   overflow-y: auto;
 }
 .ups-db .overflow-x-hidden {
   overflow-x: hidden;
 }
-.ups-db .overflow-x-scroll {
-  overflow-x: scroll;
-}
 .ups-db .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1133,6 +1151,9 @@
 .ups-db .pl-\[3px\] {
   padding-left: 3px;
 }
+.ups-db .pr-1 {
+  padding-right: 0.25rem;
+}
 .ups-db .pr-2 {
   padding-right: 0.5rem;
 }
@@ -1342,6 +1363,9 @@
 .ups-db .opacity-0 {
   opacity: 0;
 }
+.ups-db .opacity-100 {
+  opacity: 1;
+}
 .ups-db .opacity-50 {
   opacity: 0.5;
 }
@@ -1354,6 +1378,14 @@
 .ups-db .opacity-90 {
   opacity: 0.9;
 }
+.ups-db .shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .ups-db .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1511,6 +1543,20 @@
 .ups-db .duration-200 {
   animation-duration: 200ms;
 }
+.ups-db .ups-db .tabs-shadow-left {
+  background:
+    linear-gradient(
+      to right,
+      rgba(0, 0, 0, 0.08),
+      rgba(0, 0, 0, 0));
+}
+.ups-db .ups-db .tabs-shadow-right {
+  background:
+    linear-gradient(
+      to left,
+      rgba(0, 0, 0, 0.08),
+      rgba(0, 0, 0, 0));
+}
 .ups-db .file\:border-0::file-selector-button {
   border-width: 0px;
 }
@@ -1524,6 +1570,14 @@
 .ups-db .file\:font-medium::file-selector-button {
   font-weight: 500;
 }
+.ups-db .placeholder\:text-neutral-500::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(115 115 115 / var(--tw-text-opacity));
+}
+.ups-db .placeholder\:text-neutral-500::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(115 115 115 / var(--tw-text-opacity));
+}
 .ups-db .placeholder\:text-zinc-500::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(113 113 122 / var(--tw-text-opacity));
@@ -1709,6 +1763,9 @@
 .ups-db .peer:disabled ~ .peer-disabled\:opacity-70 {
   opacity: 0.7;
 }
+.ups-db .data-\[disabled\=true\]\:pointer-events-none[data-disabled=true] {
+  pointer-events: none;
+}
 .ups-db .data-\[disabled\]\:pointer-events-none[data-disabled] {
   pointer-events: none;
 }
@@ -1740,6 +1797,10 @@
   --tw-translate-x: var(--radix-toast-swipe-move-x);
   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 .data-\[selected\=true\]\:bg-neutral-100[data-selected=true] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+}
 .ups-db .data-\[state\=open\]\:bg-neutral-100[data-state=open] {
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
@@ -1748,6 +1809,10 @@
   --tw-bg-opacity: 1;
   background-color: rgb(244 244 245 / var(--tw-bg-opacity));
 }
+.ups-db .data-\[selected\=true\]\:text-neutral-900[data-selected=true] {
+  --tw-text-opacity: 1;
+  color: rgb(23 23 23 / var(--tw-text-opacity));
+}
 .ups-db .data-\[state\=open\]\:text-neutral-900[data-state=open] {
   --tw-text-opacity: 1;
   color: rgb(23 23 23 / var(--tw-text-opacity));
@@ -1756,6 +1821,9 @@
   --tw-text-opacity: 1;
   color: rgb(113 113 122 / var(--tw-text-opacity));
 }
+.ups-db .data-\[disabled\=true\]\:opacity-50[data-disabled=true] {
+  opacity: 0.5;
+}
 .ups-db .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 0.5;
 }
@@ -1918,6 +1986,14 @@
 .ups-db .dark\:ring-offset-zinc-950:is(.dark *) {
   --tw-ring-offset-color: #09090b;
 }
+.ups-db .dark\:placeholder\:text-neutral-400:is(.dark *)::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity));
+}
+.ups-db .dark\:placeholder\:text-neutral-400:is(.dark *)::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity));
+}
 .ups-db .dark\:placeholder\:text-zinc-400:is(.dark *)::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(161 161 170 / var(--tw-text-opacity));
@@ -1993,6 +2069,10 @@
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity));
 }
+.ups-db .dark\:data-\[selected\=true\]\:bg-neutral-800[data-selected=true]:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
 .ups-db .dark\:data-\[state\=open\]\:bg-neutral-800[data-state=open]:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
@@ -2001,6 +2081,10 @@
   --tw-bg-opacity: 1;
   background-color: rgb(39 39 42 / var(--tw-bg-opacity));
 }
+.ups-db .dark\:data-\[selected\=true\]\:text-neutral-50[data-selected=true]:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(250 250 250 / var(--tw-text-opacity));
+}
 .ups-db .dark\:data-\[state\=open\]\:text-neutral-50[data-state=open]:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(250 250 250 / var(--tw-text-opacity));
@@ -2062,6 +2146,59 @@
 .ups-db .\[\&\>svg\]\:shrink-0 > svg {
   flex-shrink: 0;
 }
+.ups-db .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.ups-db .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+.ups-db .\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.ups-db .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
+  font-weight: 500;
+}
+.ups-db .\[\&_\[cmdk-group-heading\]\]\:text-neutral-500 [cmdk-group-heading] {
+  --tw-text-opacity: 1;
+  color: rgb(115 115 115 / var(--tw-text-opacity));
+}
+.ups-db .dark\:\[\&_\[cmdk-group-heading\]\]\:text-neutral-400 [cmdk-group-heading]:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity));
+}
+.ups-db .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~ [cmdk-group] {
+  padding-top: 0px;
+}
+.ups-db .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.ups-db .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
+  height: 1.25rem;
+}
+.ups-db .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
+  width: 1.25rem;
+}
+.ups-db .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
+  height: 3rem;
+}
+.ups-db .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.ups-db .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+.ups-db .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
+  height: 1.25rem;
+}
+.ups-db .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
+  width: 1.25rem;
+}
 .ups-db .\[\&_svg\]\:pointer-events-none svg {
   pointer-events: none;
 }

package/dist/index.js

@@ -1,5 +1,5 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/databrowser/index.tsx
-var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react); var React3 = _interopRequireWildcard(_react); var React4 = _interopRequireWildcard(_react); var React5 = _interopRequireWildcard(_react); var React6 = _interopRequireWildcard(_react); var React7 = _interopRequireWildcard(_react); var React8 = _interopRequireWildcard(_react); var React9 = _interopRequireWildcard(_react); var React10 = _interopRequireWildcard(_react); var React11 = _interopRequireWildcard(_react); var React12 = _interopRequireWildcard(_react);
+var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react); var React3 = _interopRequireWildcard(_react); var React4 = _interopRequireWildcard(_react); var React5 = _interopRequireWildcard(_react); var React6 = _interopRequireWildcard(_react); var React7 = _interopRequireWildcard(_react); var React8 = _interopRequireWildcard(_react); var React9 = _interopRequireWildcard(_react); var React10 = _interopRequireWildcard(_react); var React11 = _interopRequireWildcard(_react); var React12 = _interopRequireWildcard(_react); var React13 = _interopRequireWildcard(_react);
 
 // src/redis-context.tsx
 
@@ -5067,7 +5067,8 @@ var CustomEditor = ({
         lineDecorationsWidth: 0,
         automaticLayout: true,
         scrollBeyondLastLine: false,
-        renderLineHighlight: "none"
+        renderLineHighlight: "none",
+        unusualLineTerminators: "auto"
       }
     }
   );
@@ -5833,7 +5834,7 @@ var SearchInput = () => {
     setState(value);
   };
   const filteredHistory = dedupeSearchHistory(
-    searchHistory.filter((item) => item.includes(state) && item !== state)
+    searchHistory.filter((item) => item.trim() !== "" && item.trim() !== "*").filter((item) => item.includes(state) && item !== state)
   ).slice(0, 5).map((item) => item.endsWith("*") ? item.slice(0, -1) : item);
   _react.useEffect.call(void 0, () => {
     setFocusedIndex(-1);
@@ -6050,6 +6051,106 @@ var _sortable = require('@dnd-kit/sortable');
 var _utilities = require('@dnd-kit/utilities');
 
 
+// src/components/ui/command.tsx
+
+var _cmdk = require('cmdk');
+
+
+var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _cmdk.Command,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = _cmdk.Command.displayName;
+var CommandInput = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _cmdk.Command.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-neutral-400",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = _cmdk.Command.Input.displayName;
+var CommandList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _cmdk.Command.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = _cmdk.Command.List.displayName;
+var CommandEmpty = React13.forwardRef((props, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _cmdk.Command.Empty,
+  {
+    ref,
+    className: "py-6 text-center text-sm",
+    ...props
+  }
+));
+CommandEmpty.displayName = _cmdk.Command.Empty.displayName;
+var CommandGroup = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _cmdk.Command.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 dark:text-neutral-50 dark:[&_[cmdk-group-heading]]:text-neutral-400",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = _cmdk.Command.Group.displayName;
+var CommandSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _cmdk.Command.Separator,
+  {
+    ref,
+    className: cn("-mx-1 h-px bg-neutral-200 dark:bg-neutral-800", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = _cmdk.Command.Separator.displayName;
+var CommandItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _cmdk.Command.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:data-[selected=true]:bg-neutral-800 dark:data-[selected=true]:text-neutral-50",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = _cmdk.Command.Item.displayName;
+var CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400",
+        className
+      ),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
 // src/components/databrowser/components/tab.tsx
 
 
@@ -6202,7 +6303,54 @@ var SortableTab = ({ id }) => {
   );
 };
 var DatabrowserTabs = () => {
-  const { tabs, addTab, reorderTabs, selectedTab } = useDatabrowserStore();
+  const { tabs, addTab, reorderTabs, selectedTab, selectTab } = useDatabrowserStore();
+  const scrollRef = _react.useRef.call(void 0, null);
+  const [hasLeftShadow, setHasLeftShadow] = _react.useState.call(void 0, false);
+  const [hasRightShadow, setHasRightShadow] = _react.useState.call(void 0, false);
+  const [isOverflow, setIsOverflow] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const onWheel = (event) => {
+      if (el.scrollWidth <= el.clientWidth) return;
+      const primaryDelta = Math.abs(event.deltaY) > Math.abs(event.deltaX) ? event.deltaY : event.deltaX;
+      if (primaryDelta !== 0) {
+        el.scrollLeft += primaryDelta;
+        event.preventDefault();
+        requestAnimationFrame(() => {
+          const { scrollLeft, scrollWidth, clientWidth } = el;
+          setHasLeftShadow(scrollLeft > 0);
+          setHasRightShadow(scrollLeft + clientWidth < scrollWidth - 1);
+          setIsOverflow(scrollWidth > clientWidth + 1);
+        });
+      }
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+    };
+  }, []);
+  const recomputeShadows = _react.useCallback.call(void 0, () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+    setHasLeftShadow(scrollLeft > 0);
+    setHasRightShadow(scrollLeft + clientWidth < scrollWidth - 1);
+    setIsOverflow(scrollWidth > clientWidth + 1);
+  }, []);
+  _react.useEffect.call(void 0, () => {
+    recomputeShadows();
+    const el = scrollRef.current;
+    if (!el) return;
+    const onResize = () => recomputeShadows();
+    window.addEventListener("resize", onResize);
+    const obs = new ResizeObserver(onResize);
+    obs.observe(el);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      obs.disconnect();
+    };
+  }, [recomputeShadows]);
   const sensors = _core.useSensors.call(void 0, 
     _core.useSensor.call(void 0, _core.PointerSensor, {
       activationConstraint: {
@@ -6220,36 +6368,152 @@ var DatabrowserTabs = () => {
   };
   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: [
-      /* @__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,
-        {
-          variant: "secondary",
-          size: "icon-sm",
-          onClick: addTab,
-          className: "mr-1 flex-shrink-0",
-          title: "Add new tab",
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "text-zinc-500", size: 16 })
-        }
-      )
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex translate-y-[1px] items-center gap-1", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative min-w-0 flex-1", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: `tabs-shadow-left pointer-events-none absolute left-0 top-0 z-10 h-full w-6 transition-opacity duration-200 ${hasLeftShadow ? "opacity-100" : "opacity-0"}`
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: `tabs-shadow-right pointer-events-none absolute right-0 top-0 z-10 h-full w-6 transition-opacity duration-200 ${hasRightShadow ? "opacity-100" : "opacity-0"}`
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "div",
+          {
+            ref: scrollRef,
+            onScroll: recomputeShadows,
+            className: "scrollbar-hide flex min-w-0 flex-1 items-center gap-1 overflow-x-auto pb-[1px] [&::-webkit-scrollbar]:hidden",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _core.DndContext,
+                {
+                  sensors,
+                  collisionDetection: _core.closestCenter,
+                  onDragEnd: handleDragEnd,
+                  modifiers: [_modifiers.restrictToHorizontalAxis],
+                  measuring: {
+                    droppable: {
+                      strategy: _core.MeasuringStrategy.Always
+                    }
+                  },
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _sortable.SortableContext,
+                    {
+                      items: tabs.map(([id]) => id),
+                      strategy: _sortable.horizontalListSortingStrategy,
+                      children: selectedTab && tabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortableTab, { id }, id))
+                    }
+                  )
+                }
+              ),
+              !isOverflow && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 pl-1 pr-1", children: [
+                tabs.length > 4 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabSearch, { tabs, onSelectTab: selectTab }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  Button,
+                  {
+                    variant: "secondary",
+                    size: "icon-sm",
+                    onClick: addTab,
+                    className: "flex-shrink-0",
+                    title: "Add new tab",
+                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "text-zinc-500", size: 16 })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] }),
+      isOverflow && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 pl-1", children: [
+        tabs.length > 4 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabSearch, { tabs, onSelectTab: selectTab }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Button,
+          {
+            variant: "secondary",
+            size: "icon-sm",
+            onClick: addTab,
+            className: "mr-1 flex-shrink-0",
+            title: "Add new tab",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "text-zinc-500", size: 16 })
+          }
+        )
+      ] })
     ] })
   ] });
 };
+function TabSearch({
+  tabs,
+  onSelectTab
+}) {
+  const [open, setOpen] = _react.useState.call(void 0, false);
+  const [query, setQuery] = _react.useState.call(void 0, "");
+  const items = tabs.map(([id, data]) => ({
+    id,
+    label: data.search.key || data.selectedKey || "New Tab",
+    searchKey: data.search.key,
+    selectedKey: data.selectedKey,
+    selectedItemKey: _optionalChain([data, 'access', _68 => _68.selectedListItem, 'optionalAccess', _69 => _69.key])
+  }));
+  const buildDisplayLabel = (it) => it.selectedItemKey ? `${it.label} > ${it.selectedItemKey}` : it.label;
+  const dedupedMap = /* @__PURE__ */ new Map();
+  for (const it of items) {
+    const display = buildDisplayLabel(it);
+    const key = display.toLowerCase();
+    if (!dedupedMap.has(key)) dedupedMap.set(key, it);
+  }
+  const deduped = [...dedupedMap.values()];
+  const filtered = (query ? deduped.filter((i) => buildDisplayLabel(i).toLowerCase().includes(query.toLowerCase())) : deduped).sort((a, b) => buildDisplayLabel(a).localeCompare(buildDisplayLabel(b)));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    Popover,
+    {
+      open,
+      onOpenChange: (v) => {
+        setOpen(v);
+        if (!v) setQuery("");
+      },
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Tooltip, { delayDuration: 400, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "secondary", size: "icon-sm", "aria-label": "Search in tabs", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { className: "text-zinc-500", size: 16 }) }) }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipContent, { side: "top", children: "Search in tabs" })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverContent, { className: "w-72 p-0", align: "end", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Command, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            CommandInput,
+            {
+              placeholder: "Search tabs...",
+              value: query,
+              onValueChange: (v) => setQuery(v),
+              className: "h-9"
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, CommandList, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CommandEmpty, { children: "No tabs" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CommandGroup, { children: filtered.map((item) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              CommandItem,
+              {
+                value: buildDisplayLabel(item),
+                onSelect: () => {
+                  onSelectTab(item.id);
+                  setOpen(false);
+                },
+                children: [
+                  item.searchKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 15 }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabTypeIcon, { selectedKey: item.selectedKey }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate", children: buildDisplayLabel(item) })
+                ]
+              },
+              item.id
+            )) })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
 
 // src/components/databrowser/index.tsx
 

package/dist/index.mjs

@@ -5067,7 +5067,8 @@ var CustomEditor = ({
         lineDecorationsWidth: 0,
         automaticLayout: true,
         scrollBeyondLastLine: false,
-        renderLineHighlight: "none"
+        renderLineHighlight: "none",
+        unusualLineTerminators: "auto"
       }
     }
   );
@@ -5833,7 +5834,7 @@ var SearchInput = () => {
     setState(value);
   };
   const filteredHistory = dedupeSearchHistory(
-    searchHistory.filter((item) => item.includes(state) && item !== state)
+    searchHistory.filter((item) => item.trim() !== "" && item.trim() !== "*").filter((item) => item.includes(state) && item !== state)
   ).slice(0, 5).map((item) => item.endsWith("*") ? item.slice(0, -1) : item);
   useEffect11(() => {
     setFocusedIndex(-1);
@@ -6036,7 +6037,7 @@ var DatabrowserInstance = ({ hidden }) => {
 };
 
 // src/components/databrowser/components/databrowser-tabs.tsx
-import { useEffect as useEffect13, useRef as useRef5, useState as useState13 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect13, useRef as useRef5, useState as useState13 } from "react";
 import {
   closestCenter,
   DndContext,
@@ -6048,18 +6049,118 @@ import {
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { IconPlus as IconPlus2 } from "@tabler/icons-react";
+import { IconPlus as IconPlus2, IconSearch as IconSearch2 } from "@tabler/icons-react";
+
+// src/components/ui/command.tsx
+import * as React13 from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
+var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+  CommandPrimitive,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = CommandPrimitive.displayName;
+var CommandInput = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs33("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx48(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx48(
+    CommandPrimitive.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-neutral-400",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+var CommandList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+  CommandPrimitive.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = CommandPrimitive.List.displayName;
+var CommandEmpty = React13.forwardRef((props, ref) => /* @__PURE__ */ jsx48(
+  CommandPrimitive.Empty,
+  {
+    ref,
+    className: "py-6 text-center text-sm",
+    ...props
+  }
+));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+var CommandGroup = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+  CommandPrimitive.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 dark:text-neutral-50 dark:[&_[cmdk-group-heading]]:text-neutral-400",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+var CommandSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+  CommandPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 h-px bg-neutral-200 dark:bg-neutral-800", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+var CommandItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+  CommandPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:data-[selected=true]:bg-neutral-800 dark:data-[selected=true]:text-neutral-50",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+var CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx48(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400",
+        className
+      ),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/databrowser/components/tab.tsx
 import { IconSearch, IconX as IconX2 } from "@tabler/icons-react";
 
 // src/components/databrowser/components/tab-type-icon.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 function TabTypeIcon({ selectedKey }) {
   const { data: keyType, isLoading } = useFetchKeyType(selectedKey);
-  if (isLoading) return /* @__PURE__ */ jsx48(Skeleton, { className: "h-5 w-5 rounded" });
+  if (isLoading) return /* @__PURE__ */ jsx49(Skeleton, { className: "h-5 w-5 rounded" });
   if (!keyType || keyType === "none") return;
-  return /* @__PURE__ */ jsx48(TypeTag, { variant: keyType, type: "icon" });
+  return /* @__PURE__ */ jsx49(TypeTag, { variant: keyType, type: "icon" });
 }
 
 // src/hooks/use-overflow.ts
@@ -6089,14 +6190,14 @@ var useOverflow = () => {
 };
 
 // src/components/databrowser/components/tab.tsx
-import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
 var Tab = ({ id }) => {
   const { active, search, selectedKey } = useTab();
   const { selectTab, removeTab, tabs } = useDatabrowserStore();
   const { ref, isOverflow } = useOverflow();
   const label = search.key || selectedKey;
-  const iconNode = search.key ? /* @__PURE__ */ jsx49(IconSearch, { size: 15 }) : selectedKey ? /* @__PURE__ */ jsx49(TabTypeIcon, { selectedKey }) : void 0;
-  const tabNode = /* @__PURE__ */ jsxs33(
+  const iconNode = search.key ? /* @__PURE__ */ jsx50(IconSearch, { size: 15 }) : selectedKey ? /* @__PURE__ */ jsx50(TabTypeIcon, { selectedKey }) : void 0;
+  const tabNode = /* @__PURE__ */ jsxs34(
     "div",
     {
       onClick: () => selectTab(id),
@@ -6106,8 +6207,8 @@ var Tab = ({ id }) => {
       ),
       children: [
         iconNode,
-        /* @__PURE__ */ jsx49("span", { ref, className: "max-w-32 truncate whitespace-nowrap", children: label || "New Tab" }),
-        tabs.length > 1 && /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx50("span", { ref, className: "max-w-32 truncate whitespace-nowrap", children: label || "New Tab" }),
+        tabs.length > 1 && /* @__PURE__ */ jsx50(
           "button",
           {
             onClick: (e) => {
@@ -6115,17 +6216,17 @@ var Tab = ({ id }) => {
               removeTab(id);
             },
             className: "p-1 text-zinc-300 transition-colors hover:text-zinc-500",
-            children: /* @__PURE__ */ jsx49(IconX2, { size: 16 })
+            children: /* @__PURE__ */ jsx50(IconX2, { size: 16 })
           }
         )
       ]
     }
   );
-  return /* @__PURE__ */ jsx49(SimpleTooltip, { content: isOverflow ? label : void 0, children: tabNode });
+  return /* @__PURE__ */ jsx50(SimpleTooltip, { content: isOverflow ? label : void 0, children: tabNode });
 };
 
 // src/components/databrowser/components/databrowser-tabs.tsx
-import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
 var SortableTab = ({ id }) => {
   const [originalWidth, setOriginalWidth] = useState13(null);
   const textRef = useRef5(null);
@@ -6189,7 +6290,7 @@ var SortableTab = ({ id }) => {
       minWidth: originalWidth ? `${originalWidth}px` : void 0
     } : {}
   };
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       ref: measureRef,
@@ -6197,12 +6298,59 @@ var SortableTab = ({ id }) => {
       className: isDragging ? "cursor-grabbing" : "cursor-grab",
       ...attributes,
       ...listeners2,
-      children: /* @__PURE__ */ jsx50(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx50(Tab, { id }) })
+      children: /* @__PURE__ */ jsx51(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx51(Tab, { id }) })
     }
   );
 };
 var DatabrowserTabs = () => {
-  const { tabs, addTab, reorderTabs, selectedTab } = useDatabrowserStore();
+  const { tabs, addTab, reorderTabs, selectedTab, selectTab } = useDatabrowserStore();
+  const scrollRef = useRef5(null);
+  const [hasLeftShadow, setHasLeftShadow] = useState13(false);
+  const [hasRightShadow, setHasRightShadow] = useState13(false);
+  const [isOverflow, setIsOverflow] = useState13(false);
+  useEffect13(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const onWheel = (event) => {
+      if (el.scrollWidth <= el.clientWidth) return;
+      const primaryDelta = Math.abs(event.deltaY) > Math.abs(event.deltaX) ? event.deltaY : event.deltaX;
+      if (primaryDelta !== 0) {
+        el.scrollLeft += primaryDelta;
+        event.preventDefault();
+        requestAnimationFrame(() => {
+          const { scrollLeft, scrollWidth, clientWidth } = el;
+          setHasLeftShadow(scrollLeft > 0);
+          setHasRightShadow(scrollLeft + clientWidth < scrollWidth - 1);
+          setIsOverflow(scrollWidth > clientWidth + 1);
+        });
+      }
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+    };
+  }, []);
+  const recomputeShadows = useCallback3(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+    setHasLeftShadow(scrollLeft > 0);
+    setHasRightShadow(scrollLeft + clientWidth < scrollWidth - 1);
+    setIsOverflow(scrollWidth > clientWidth + 1);
+  }, []);
+  useEffect13(() => {
+    recomputeShadows();
+    const el = scrollRef.current;
+    if (!el) return;
+    const onResize = () => recomputeShadows();
+    window.addEventListener("resize", onResize);
+    const obs = new ResizeObserver(onResize);
+    obs.observe(el);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      obs.disconnect();
+    };
+  }, [recomputeShadows]);
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -6218,41 +6366,157 @@ var DatabrowserTabs = () => {
       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: [
-      /* @__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,
-        {
-          variant: "secondary",
-          size: "icon-sm",
-          onClick: addTab,
-          className: "mr-1 flex-shrink-0",
-          title: "Add new tab",
-          children: /* @__PURE__ */ jsx50(IconPlus2, { className: "text-zinc-500", size: 16 })
-        }
-      )
+  return /* @__PURE__ */ jsxs35("div", { className: "relative mb-2 shrink-0", children: [
+    /* @__PURE__ */ jsx51("div", { className: "absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" }),
+    /* @__PURE__ */ jsxs35("div", { className: "flex translate-y-[1px] items-center gap-1", children: [
+      /* @__PURE__ */ jsxs35("div", { className: "relative min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx51(
+          "div",
+          {
+            className: `tabs-shadow-left pointer-events-none absolute left-0 top-0 z-10 h-full w-6 transition-opacity duration-200 ${hasLeftShadow ? "opacity-100" : "opacity-0"}`
+          }
+        ),
+        /* @__PURE__ */ jsx51(
+          "div",
+          {
+            className: `tabs-shadow-right pointer-events-none absolute right-0 top-0 z-10 h-full w-6 transition-opacity duration-200 ${hasRightShadow ? "opacity-100" : "opacity-0"}`
+          }
+        ),
+        /* @__PURE__ */ jsxs35(
+          "div",
+          {
+            ref: scrollRef,
+            onScroll: recomputeShadows,
+            className: "scrollbar-hide flex min-w-0 flex-1 items-center gap-1 overflow-x-auto pb-[1px] [&::-webkit-scrollbar]:hidden",
+            children: [
+              /* @__PURE__ */ jsx51(
+                DndContext,
+                {
+                  sensors,
+                  collisionDetection: closestCenter,
+                  onDragEnd: handleDragEnd,
+                  modifiers: [restrictToHorizontalAxis],
+                  measuring: {
+                    droppable: {
+                      strategy: MeasuringStrategy.Always
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx51(
+                    SortableContext,
+                    {
+                      items: tabs.map(([id]) => id),
+                      strategy: horizontalListSortingStrategy,
+                      children: selectedTab && tabs.map(([id]) => /* @__PURE__ */ jsx51(SortableTab, { id }, id))
+                    }
+                  )
+                }
+              ),
+              !isOverflow && /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-1 pl-1 pr-1", children: [
+                tabs.length > 4 && /* @__PURE__ */ jsx51(TabSearch, { tabs, onSelectTab: selectTab }),
+                /* @__PURE__ */ jsx51(
+                  Button,
+                  {
+                    variant: "secondary",
+                    size: "icon-sm",
+                    onClick: addTab,
+                    className: "flex-shrink-0",
+                    title: "Add new tab",
+                    children: /* @__PURE__ */ jsx51(IconPlus2, { className: "text-zinc-500", size: 16 })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] }),
+      isOverflow && /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-1 pl-1", children: [
+        tabs.length > 4 && /* @__PURE__ */ jsx51(TabSearch, { tabs, onSelectTab: selectTab }),
+        /* @__PURE__ */ jsx51(
+          Button,
+          {
+            variant: "secondary",
+            size: "icon-sm",
+            onClick: addTab,
+            className: "mr-1 flex-shrink-0",
+            title: "Add new tab",
+            children: /* @__PURE__ */ jsx51(IconPlus2, { className: "text-zinc-500", size: 16 })
+          }
+        )
+      ] })
     ] })
   ] });
 };
+function TabSearch({
+  tabs,
+  onSelectTab
+}) {
+  const [open, setOpen] = useState13(false);
+  const [query, setQuery] = useState13("");
+  const items = tabs.map(([id, data]) => ({
+    id,
+    label: data.search.key || data.selectedKey || "New Tab",
+    searchKey: data.search.key,
+    selectedKey: data.selectedKey,
+    selectedItemKey: data.selectedListItem?.key
+  }));
+  const buildDisplayLabel = (it) => it.selectedItemKey ? `${it.label} > ${it.selectedItemKey}` : it.label;
+  const dedupedMap = /* @__PURE__ */ new Map();
+  for (const it of items) {
+    const display = buildDisplayLabel(it);
+    const key = display.toLowerCase();
+    if (!dedupedMap.has(key)) dedupedMap.set(key, it);
+  }
+  const deduped = [...dedupedMap.values()];
+  const filtered = (query ? deduped.filter((i) => buildDisplayLabel(i).toLowerCase().includes(query.toLowerCase())) : deduped).sort((a, b) => buildDisplayLabel(a).localeCompare(buildDisplayLabel(b)));
+  return /* @__PURE__ */ jsxs35(
+    Popover,
+    {
+      open,
+      onOpenChange: (v) => {
+        setOpen(v);
+        if (!v) setQuery("");
+      },
+      children: [
+        /* @__PURE__ */ jsxs35(Tooltip, { delayDuration: 400, children: [
+          /* @__PURE__ */ jsx51(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(Button, { variant: "secondary", size: "icon-sm", "aria-label": "Search in tabs", children: /* @__PURE__ */ jsx51(IconSearch2, { className: "text-zinc-500", size: 16 }) }) }) }),
+          /* @__PURE__ */ jsx51(TooltipContent, { side: "top", children: "Search in tabs" })
+        ] }),
+        /* @__PURE__ */ jsx51(PopoverContent, { className: "w-72 p-0", align: "end", children: /* @__PURE__ */ jsxs35(Command, { children: [
+          /* @__PURE__ */ jsx51(
+            CommandInput,
+            {
+              placeholder: "Search tabs...",
+              value: query,
+              onValueChange: (v) => setQuery(v),
+              className: "h-9"
+            }
+          ),
+          /* @__PURE__ */ jsxs35(CommandList, { children: [
+            /* @__PURE__ */ jsx51(CommandEmpty, { children: "No tabs" }),
+            /* @__PURE__ */ jsx51(CommandGroup, { children: filtered.map((item) => /* @__PURE__ */ jsxs35(
+              CommandItem,
+              {
+                value: buildDisplayLabel(item),
+                onSelect: () => {
+                  onSelectTab(item.id);
+                  setOpen(false);
+                },
+                children: [
+                  item.searchKey ? /* @__PURE__ */ jsx51(IconSearch2, { size: 15 }) : /* @__PURE__ */ jsx51(TabTypeIcon, { selectedKey: item.selectedKey }),
+                  /* @__PURE__ */ jsx51("span", { className: "truncate", children: buildDisplayLabel(item) })
+                ]
+              },
+              item.id
+            )) })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
 
 // src/components/databrowser/index.tsx
-import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs36 } from "react/jsx-runtime";
 var RedisBrowser = ({
   token,
   url,
@@ -6263,14 +6527,14 @@ var RedisBrowser = ({
   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(
+  return /* @__PURE__ */ jsx52(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx52(RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx52(DatabrowserProvider, { storage, children: /* @__PURE__ */ jsx52(TooltipProvider, { children: /* @__PURE__ */ jsxs36(
     "div",
     {
       className: "ups-db",
       style: { height: "100%", display: "flex", flexDirection: "column" },
       children: [
-        !hideTabs && /* @__PURE__ */ jsx51(DatabrowserTabs, {}),
-        /* @__PURE__ */ jsx51(DatabrowserInstances, {})
+        !hideTabs && /* @__PURE__ */ jsx52(DatabrowserTabs, {}),
+        /* @__PURE__ */ jsx52(DatabrowserInstances, {})
       ]
     }
   ) }) }) }) });
@@ -6282,7 +6546,7 @@ var DatabrowserInstances = () => {
     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));
+  return tabs.map(([id]) => /* @__PURE__ */ jsx52(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx52(DatabrowserInstance, { hidden: id !== selectedTab }) }, id));
 };
 export {
   RedisBrowser

package/package.json

@@ -1 +1 @@
-{ "name": "@upstash/react-redis-browser", "version": "v0.2.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 ./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.35.3", "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.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 ./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.1.14", "@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.35.3", "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.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" } }