@upstash/react-redis-browser 0.2.5 → 0.2.7-canary

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.css +588 -394
  2. package/dist/index.d.mts +18 -2
  3. package/dist/index.d.ts +18 -2
  4. package/dist/index.js +414 -241
  5. package/dist/index.mjs +716 -543
  6. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1,6 +1,24 @@
1
1
  "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
2
2
  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);
3
3
 
4
+ // src/dark-mode-context.tsx
5
+
6
+ var _jsxruntime = require('react/jsx-runtime');
7
+ var DarkModeContext = _react.createContext.call(void 0, void 0);
8
+ var DarkModeProvider = ({
9
+ children,
10
+ darkMode
11
+ }) => {
12
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DarkModeContext.Provider, { value: { darkMode }, children });
13
+ };
14
+ var useDarkMode = () => {
15
+ const context = _react.useContext.call(void 0, DarkModeContext);
16
+ if (!context) {
17
+ throw new Error("useDarkMode must be used within a DarkModeProvider");
18
+ }
19
+ return context.darkMode;
20
+ };
21
+
4
22
  // src/redis-context.tsx
5
23
 
6
24
 
@@ -181,7 +199,7 @@ var queryClient = new (0, _reactquery.QueryClient)({
181
199
  });
182
200
 
183
201
  // src/redis-context.tsx
184
- var _jsxruntime = require('react/jsx-runtime');
202
+
185
203
  var RedisContext = _react.createContext.call(void 0, void 0);
186
204
  var RedisProvider = ({
187
205
  children,
@@ -219,7 +237,8 @@ var _middleware = require('zustand/middleware');
219
237
  var DatabrowserContext = _react.createContext.call(void 0, void 0);
220
238
  var DatabrowserProvider = ({
221
239
  children,
222
- storage
240
+ storage,
241
+ rootRef
223
242
  }) => {
224
243
  const store = _react.useMemo.call(void 0, () => {
225
244
  if (!storage) return _zustand.create.call(void 0, storeCreator);
@@ -241,18 +260,29 @@ var DatabrowserProvider = ({
241
260
  removeItem: () => {
242
261
  }
243
262
  },
244
- version: 1,
263
+ version: 2,
245
264
  // @ts-expect-error Reset the store for < v1
246
- migrate: (state, version) => {
265
+ migrate: (originalState, version) => {
266
+ const state = originalState;
247
267
  if (version === 0) {
248
268
  return;
249
269
  }
270
+ if (version === 1) {
271
+ return {
272
+ ...state,
273
+ tabs: state.tabs.map(([id, data]) => [id, { ...data, id }])
274
+ };
275
+ }
250
276
  return state;
251
277
  }
252
278
  })
253
279
  );
254
280
  }, []);
255
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserContext.Provider, { value: { store }, children });
281
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserContext.Provider, { value: { store, rootRef }, children });
282
+ };
283
+ var useDatabrowserRootRef = () => {
284
+ const { rootRef } = useDatabrowser();
285
+ return rootRef;
256
286
  };
257
287
  var useDatabrowser = () => {
258
288
  const context = _react.useContext.call(void 0, DatabrowserContext);
@@ -271,8 +301,10 @@ var storeCreator = (set, get) => ({
271
301
  addTab: () => {
272
302
  const id = crypto.randomUUID();
273
303
  const newTabData = {
304
+ id,
274
305
  selectedKey: void 0,
275
- search: { key: "", type: void 0 }
306
+ search: { key: "", type: void 0 },
307
+ pinned: false
276
308
  };
277
309
  set((old) => ({
278
310
  tabs: [...old.tabs, [id, newTabData]],
@@ -282,6 +314,9 @@ var storeCreator = (set, get) => ({
282
314
  },
283
315
  reorderTabs: (oldIndex, newIndex) => {
284
316
  set((old) => {
317
+ const [, oldTabData] = old.tabs[oldIndex];
318
+ const [, newTabData] = old.tabs[newIndex];
319
+ if (oldTabData.pinned || newTabData.pinned) return old;
285
320
  const newTabs = [...old.tabs];
286
321
  const [movedTab] = newTabs.splice(oldIndex, 1);
287
322
  newTabs.splice(newIndex, 0, movedTab);
@@ -289,6 +324,22 @@ var storeCreator = (set, get) => ({
289
324
  });
290
325
  },
291
326
  removeTab: (id) => {
327
+ set((old) => {
328
+ const tabIndex = old.tabs.findIndex(([tabId]) => tabId === id);
329
+ if (tabIndex === -1) return old;
330
+ const [, tabData] = old.tabs[tabIndex];
331
+ if (tabData.pinned) return old;
332
+ const newTabs = [...old.tabs];
333
+ newTabs.splice(tabIndex, 1);
334
+ let selectedTab = old.selectedTab;
335
+ if (selectedTab === id) {
336
+ const [newId] = _nullishCoalesce(newTabs[tabIndex - 1], () => ( newTabs[tabIndex]));
337
+ selectedTab = newTabs.length > 0 ? newId : void 0;
338
+ }
339
+ return { tabs: newTabs, selectedTab };
340
+ });
341
+ },
342
+ forceRemoveTab: (id) => {
292
343
  set((old) => {
293
344
  const tabIndex = old.tabs.findIndex(([tabId]) => tabId === id);
294
345
  if (tabIndex === -1) return old;
@@ -302,6 +353,45 @@ var storeCreator = (set, get) => ({
302
353
  return { tabs: newTabs, selectedTab };
303
354
  });
304
355
  },
356
+ togglePinTab: (id) => {
357
+ set((old) => {
358
+ const tabIndex = old.tabs.findIndex(([tabId2]) => tabId2 === id);
359
+ if (tabIndex === -1) return old;
360
+ const newTabs = [...old.tabs];
361
+ const [tabId, tabData] = newTabs[tabIndex];
362
+ newTabs[tabIndex] = [tabId, { ...tabData, pinned: !tabData.pinned }];
363
+ return { ...old, tabs: newTabs };
364
+ });
365
+ },
366
+ duplicateTab: (id) => {
367
+ let newId;
368
+ set((old) => {
369
+ const tabIndex = old.tabs.findIndex(([tabId]) => tabId === id);
370
+ if (tabIndex === -1) return old;
371
+ const newTabs = [...old.tabs];
372
+ const [, tabData] = newTabs[tabIndex];
373
+ newId = crypto.randomUUID();
374
+ const duplicated = [newId, { ...tabData, id: newId }];
375
+ newTabs.splice(tabIndex + 1, 0, duplicated);
376
+ return { ...old, tabs: newTabs, selectedTab: newId };
377
+ });
378
+ return newId;
379
+ },
380
+ closeOtherTabs: (id) => {
381
+ set((old) => {
382
+ const exists = old.tabs.some(([tabId]) => tabId === id);
383
+ if (!exists) return old;
384
+ const newTabs = old.tabs.filter(([tabId]) => tabId === id);
385
+ return { ...old, tabs: newTabs, selectedTab: id };
386
+ });
387
+ },
388
+ closeAllButPinned: () => {
389
+ set((old) => {
390
+ const newTabs = old.tabs.filter(([, data]) => data.pinned);
391
+ const newSelected = newTabs.length > 0 ? newTabs[0][0] : void 0;
392
+ return { ...old, tabs: newTabs, selectedTab: newSelected };
393
+ });
394
+ },
305
395
  selectTab: (id) => {
306
396
  set({ selectedTab: id });
307
397
  },
@@ -410,6 +500,7 @@ var useTab = () => {
410
500
  selectedKey: tabData.selectedKey,
411
501
  selectedListItem: tabData.selectedListItem,
412
502
  search: tabData.search,
503
+ pinned: tabData.pinned,
413
504
  setSelectedKey: (key) => setSelectedKey(tabId, key),
414
505
  setSelectedListItem: (item) => setSelectedListItem(tabId, item),
415
506
  setSearch: (search) => setSearch(tabId, search),
@@ -3029,12 +3120,12 @@ var ToastViewport = React2.forwardRef(({ className, ...props }, ref) => /* @__PU
3029
3120
  ));
3030
3121
  ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
3031
3122
  var toastVariants = cva(
3032
- "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border border-zinc-200 p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full dark:border-zinc-800",
3123
+ "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border border-zinc-200 p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
3033
3124
  {
3034
3125
  variants: {
3035
3126
  variant: {
3036
- default: "border bg-white text-zinc-950 dark:bg-zinc-950 dark:text-zinc-50",
3037
- destructive: "destructive group border-red-500 bg-red-500 text-zinc-50 dark:border-red-900 dark:bg-red-900 dark:text-zinc-50"
3127
+ default: "border bg-white text-zinc-950",
3128
+ destructive: "destructive group border-red-500 bg-red-500 text-zinc-50"
3038
3129
  }
3039
3130
  },
3040
3131
  defaultVariants: {
@@ -3058,7 +3149,7 @@ var ToastAction = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
3058
3149
  {
3059
3150
  ref,
3060
3151
  className: cn(
3061
- "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-zinc-100 focus:outline-none focus:ring-1 focus:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-zinc-100/40 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-zinc-50 group-[.destructive]:focus:ring-red-500 dark:border-neutral-800 dark:hover:bg-neutral-800 dark:focus:ring-neutral-300 dark:group-[.destructive]:border-neutral-800/40 dark:group-[.destructive]:hover:border-red-900/30 dark:group-[.destructive]:hover:bg-red-900 dark:group-[.destructive]:hover:text-neutral-50 dark:group-[.destructive]:focus:ring-red-900",
3152
+ "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-zinc-100 focus:outline-none focus:ring-1 focus:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-zinc-100/40 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-zinc-50 group-[.destructive]:focus:ring-red-500",
3062
3153
  className
3063
3154
  ),
3064
3155
  ...props
@@ -3070,7 +3161,7 @@ var ToastClose = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE_
3070
3161
  {
3071
3162
  ref,
3072
3163
  className: cn(
3073
- "absolute right-1 top-1 rounded-md p-1 text-neutral-950/50 opacity-0 transition-opacity hover:text-neutral-950 focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:text-neutral-50/50 dark:hover:text-neutral-50",
3164
+ "absolute right-1 top-1 rounded-md p-1 text-zinc-950/50 opacity-0 transition-opacity hover:text-zinc-950 focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
3074
3165
  className
3075
3166
  ),
3076
3167
  "toast-close": "",
@@ -3241,17 +3332,17 @@ var _iconsreact = require('@tabler/icons-react');
3241
3332
  var _reactslot = require('@radix-ui/react-slot');
3242
3333
 
3243
3334
  var buttonVariants = cva(
3244
- "inline-flex items-center justify-center rounded-md text-sm ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300",
3335
+ "inline-flex items-center justify-center rounded-md text-sm ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
3245
3336
  {
3246
3337
  variants: {
3247
3338
  variant: {
3248
- default: "bg-white text-black border shadow-sm border-zinc-300 hover:bg-[#FFFFFF]/70 dark:bg-black dark:text-[#FFFFFF] dark:hover:bg-black/10",
3249
- destructive: "bg-red-500 text-zinc-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
3250
- outline: "border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-neutral-50",
3251
- primary: "bg-emerald-500 text-white shadow-sm hover:bg-emerald-600 dark:bg-emerald-500 dark:text-white dark:hover:bg-emerald-600",
3252
- secondary: "bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
3253
- ghost: "hover:bg-[#0000000A] dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
3254
- link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50"
3339
+ default: "bg-white text-black border shadow-sm border-zinc-300 hover:bg-white/70",
3340
+ destructive: "bg-red-500 text-zinc-50 hover:bg-red-500/90",
3341
+ outline: "border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900",
3342
+ primary: "bg-emerald-500 text-white shadow-sm hover:bg-emerald-600",
3343
+ secondary: "bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80",
3344
+ ghost: "hover:bg-black/10",
3345
+ link: "text-zinc-900 underline-offset-4 hover:underline"
3255
3346
  },
3256
3347
  size: {
3257
3348
  default: "h-8 px-4 py-2",
@@ -3285,13 +3376,7 @@ Button.displayName = "Button";
3285
3376
  // src/components/ui/skeleton.tsx
3286
3377
 
3287
3378
  function Skeleton({ className, ...props }) {
3288
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
3289
- "div",
3290
- {
3291
- className: cn("animate-pulse rounded-md bg-zinc-900/10 dark:bg-zinc-50/10", className),
3292
- ...props
3293
- }
3294
- );
3379
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse rounded-md bg-zinc-900/10", className), ...props });
3295
3380
  }
3296
3381
 
3297
3382
  // src/components/databrowser/components/sidebar/db-size.tsx
@@ -3334,8 +3419,7 @@ var useAddKey = () => {
3334
3419
  }
3335
3420
  case "hash": {
3336
3421
  await redis.hset(key, {
3337
- field: "field",
3338
- value: "value"
3422
+ field: "value"
3339
3423
  });
3340
3424
  break;
3341
3425
  }
@@ -3766,7 +3850,7 @@ var Input = React4.forwardRef(
3766
3850
  {
3767
3851
  type,
3768
3852
  className: cn(
3769
- "flex h-8 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
3853
+ "flex h-8 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
3770
3854
  className
3771
3855
  ),
3772
3856
  ref,
@@ -3790,7 +3874,7 @@ var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffse
3790
3874
  align,
3791
3875
  sideOffset,
3792
3876
  className: cn(
3793
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none dark:border-zinc-800 mt-0.5 dark:bg-zinc-950 dark:text-zinc-50",
3877
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none mt-0.5",
3794
3878
  className
3795
3879
  ),
3796
3880
  ...props
@@ -3810,7 +3894,7 @@ var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) =
3810
3894
  {
3811
3895
  ref,
3812
3896
  className: cn(
3813
- "relative flex h-8 w-full items-center justify-between rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-zinc-500 focus:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-400 dark:focus:ring-zinc-300",
3897
+ "relative flex h-8 w-full items-center justify-between rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-zinc-500 focus:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
3814
3898
  className
3815
3899
  ),
3816
3900
  ...props,
@@ -3828,9 +3912,9 @@ var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) =
3828
3912
  "path",
3829
3913
  {
3830
3914
  d: "M4 6L8 10L12 6",
3831
- stroke: "black",
3915
+ stroke: "currentColor",
3832
3916
  strokeOpacity: "0.4",
3833
- strokeWidth: "1.4",
3917
+ strokeWidth: "1.2",
3834
3918
  strokeLinecap: "round",
3835
3919
  strokeLinejoin: "round"
3836
3920
  }
@@ -3846,7 +3930,7 @@ var SelectContent = React6.forwardRef(({ className, children, position = "popper
3846
3930
  {
3847
3931
  ref,
3848
3932
  className: cn(
3849
- "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-neutral-50",
3933
+ "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
3850
3934
  position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
3851
3935
  className
3852
3936
  ),
@@ -3879,7 +3963,7 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
3879
3963
  {
3880
3964
  ref,
3881
3965
  className: cn(
3882
- "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
3966
+ "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
3883
3967
  className
3884
3968
  ),
3885
3969
  ...props,
@@ -3913,7 +3997,7 @@ var SelectSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__
3913
3997
  SelectPrimitive.Separator,
3914
3998
  {
3915
3999
  ref,
3916
- className: cn("-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800", className),
4000
+ className: cn("-mx-1 my-1 h-px bg-zinc-100", className),
3917
4001
  ...props
3918
4002
  }
3919
4003
  ));
@@ -3938,7 +4022,7 @@ var Spinner = ({
3938
4022
  viewBox: "0 0 24 24",
3939
4023
  fill: "none",
3940
4024
  stroke: "currentColor",
3941
- strokeWidth: "2",
4025
+ strokeWidth: "1.2",
3942
4026
  strokeLinecap: "round",
3943
4027
  strokeLinejoin: "round",
3944
4028
  className: cn("h-4 w-4 animate-spin", isLoadingText ? "ml-2" : ""),
@@ -4150,6 +4234,7 @@ var useSetTTL = () => {
4150
4234
 
4151
4235
  // src/components/databrowser/components/item-context-menu.tsx
4152
4236
 
4237
+
4153
4238
  var _reactcontextmenu = require('@radix-ui/react-context-menu'); var ContextMenuPrimitive = _interopRequireWildcard(_reactcontextmenu);
4154
4239
 
4155
4240
  // src/components/ui/context-menu.tsx
@@ -4164,7 +4249,7 @@ var ContextMenuSubTrigger = React7.forwardRef(({ className, inset, children, ...
4164
4249
  {
4165
4250
  ref,
4166
4251
  className: cn(
4167
- "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-900 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-50",
4252
+ "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-900",
4168
4253
  inset && "pl-8",
4169
4254
  className
4170
4255
  ),
@@ -4181,7 +4266,7 @@ var ContextMenuSubContent = React7.forwardRef(({ className, ...props }, ref) =>
4181
4266
  {
4182
4267
  ref,
4183
4268
  className: cn(
4184
- "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
4269
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
4185
4270
  className
4186
4271
  ),
4187
4272
  ...props
@@ -4193,7 +4278,7 @@ var ContextMenuContent = React7.forwardRef(({ className, ...props }, ref) => /*
4193
4278
  {
4194
4279
  ref,
4195
4280
  className: cn(
4196
- "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
4281
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
4197
4282
  className
4198
4283
  ),
4199
4284
  ...props
@@ -4205,7 +4290,7 @@ var ContextMenuItem = React7.forwardRef(({ className, inset, ...props }, ref) =>
4205
4290
  {
4206
4291
  ref,
4207
4292
  className: cn(
4208
- "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
4293
+ "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
4209
4294
  inset && "pl-8",
4210
4295
  className
4211
4296
  ),
@@ -4218,7 +4303,7 @@ var ContextMenuCheckboxItem = React7.forwardRef(({ className, children, checked,
4218
4303
  {
4219
4304
  ref,
4220
4305
  className: cn(
4221
- "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
4306
+ "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
4222
4307
  className
4223
4308
  ),
4224
4309
  checked,
@@ -4235,7 +4320,7 @@ var ContextMenuRadioItem = React7.forwardRef(({ className, children, ...props },
4235
4320
  {
4236
4321
  ref,
4237
4322
  className: cn(
4238
- "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
4323
+ "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
4239
4324
  className
4240
4325
  ),
4241
4326
  ...props,
@@ -4250,11 +4335,7 @@ var ContextMenuLabel = React7.forwardRef(({ className, inset, ...props }, ref) =
4250
4335
  ContextMenuPrimitive.Label,
4251
4336
  {
4252
4337
  ref,
4253
- className: cn(
4254
- "px-2 py-1.5 text-sm font-semibold text-neutral-950 dark:text-neutral-50",
4255
- inset && "pl-8",
4256
- className
4257
- ),
4338
+ className: cn("px-2 py-1.5 text-sm font-semibold text-zinc-950", inset && "pl-8", className),
4258
4339
  ...props
4259
4340
  }
4260
4341
  ));
@@ -4263,22 +4344,13 @@ var ContextMenuSeparator = React7.forwardRef(({ className, ...props }, ref) => /
4263
4344
  ContextMenuPrimitive.Separator,
4264
4345
  {
4265
4346
  ref,
4266
- className: cn("-mx-1 my-1 h-px bg-neutral-200 dark:bg-neutral-800", className),
4347
+ className: cn("-mx-1 my-1 h-px bg-zinc-200", className),
4267
4348
  ...props
4268
4349
  }
4269
4350
  ));
4270
4351
  ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
4271
4352
  var ContextMenuShortcut = ({ className, ...props }) => {
4272
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
4273
- "span",
4274
- {
4275
- className: cn(
4276
- "ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400",
4277
- className
4278
- ),
4279
- ...props
4280
- }
4281
- );
4353
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: cn("ml-auto text-xs tracking-widest text-zinc-500", className), ...props });
4282
4354
  };
4283
4355
  ContextMenuShortcut.displayName = "ContextMenuShortcut";
4284
4356
 
@@ -4294,7 +4366,7 @@ var AlertDialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /*
4294
4366
  AlertDialogPrimitive.Overlay,
4295
4367
  {
4296
4368
  className: cn(
4297
- "fixed inset-0 z-50 bg-white/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-zinc-950/80",
4369
+ "fixed inset-0 z-50 bg-white/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
4298
4370
  className
4299
4371
  ),
4300
4372
  ...props,
@@ -4309,7 +4381,7 @@ var AlertDialogContent = React8.forwardRef(({ className, ...props }, ref) => /*
4309
4381
  {
4310
4382
  ref,
4311
4383
  className: cn(
4312
- "antialiased data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-zinc-800 dark:bg-zinc-950 sm:rounded-lg md:w-full",
4384
+ "antialiased data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:slide-in-from-top-[48%]sm:rounded-lg fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 md:w-full",
4313
4385
  className
4314
4386
  ),
4315
4387
  ...props
@@ -4340,7 +4412,7 @@ var AlertDialogDescription = React8.forwardRef(({ className, ...props }, ref) =>
4340
4412
  AlertDialogPrimitive.Description,
4341
4413
  {
4342
4414
  ref,
4343
- className: cn("text-sm text-zinc-500 dark:text-zinc-400", className),
4415
+ className: cn("text-sm text-zinc-500", className),
4344
4416
  ...props
4345
4417
  }
4346
4418
  ));
@@ -4384,7 +4456,7 @@ function DeleteAlertDialog({
4384
4456
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
4385
4457
  AlertDialogAction,
4386
4458
  {
4387
- className: "bg-red-500 text-gray-50 hover:bg-red-600",
4459
+ className: "bg-red-500 text-zinc-50 hover:bg-red-600",
4388
4460
  onClick: onDeleteConfirm,
4389
4461
  children: "Yes, Delete"
4390
4462
  }
@@ -4448,7 +4520,7 @@ var ItemContextMenu = ({
4448
4520
  }
4449
4521
  ),
4450
4522
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuContent, { children: [
4451
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
4523
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
4452
4524
  ContextMenuItem,
4453
4525
  {
4454
4526
  onClick: () => {
@@ -4458,10 +4530,14 @@ var ItemContextMenu = ({
4458
4530
  description: "Key copied to clipboard"
4459
4531
  });
4460
4532
  },
4461
- children: "Copy key"
4533
+ className: "gap-2",
4534
+ children: [
4535
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCopy, { size: 16 }),
4536
+ "Copy key"
4537
+ ]
4462
4538
  }
4463
4539
  ),
4464
- _optionalChain([data, 'optionalAccess', _32 => _32.value]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
4540
+ _optionalChain([data, 'optionalAccess', _32 => _32.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
4465
4541
  ContextMenuItem,
4466
4542
  {
4467
4543
  onClick: () => {
@@ -4470,10 +4546,14 @@ var ItemContextMenu = ({
4470
4546
  description: "Value copied to clipboard"
4471
4547
  });
4472
4548
  },
4473
- children: "Copy value"
4549
+ className: "gap-2",
4550
+ children: [
4551
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCopy, { size: 16 }),
4552
+ "Copy value"
4553
+ ]
4474
4554
  }
4475
4555
  ),
4476
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
4556
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
4477
4557
  ContextMenuItem,
4478
4558
  {
4479
4559
  onClick: () => {
@@ -4485,11 +4565,26 @@ var ItemContextMenu = ({
4485
4565
  key: data.key
4486
4566
  });
4487
4567
  },
4488
- children: "Open in new tab"
4568
+ className: "gap-2",
4569
+ children: [
4570
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconExternalLink, { size: 16 }),
4571
+ "Open in new tab"
4572
+ ]
4489
4573
  }
4490
4574
  ),
4491
4575
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactcontextmenu.ContextMenuSeparator, {}),
4492
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuItem, { disabled: type === "stream", onClick: () => setAlertOpen(true), children: "Delete item" })
4576
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
4577
+ ContextMenuItem,
4578
+ {
4579
+ disabled: type === "stream",
4580
+ onClick: () => setAlertOpen(true),
4581
+ className: "gap-2",
4582
+ children: [
4583
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconTrash, { size: 16 }),
4584
+ "Delete item"
4585
+ ]
4586
+ }
4587
+ )
4493
4588
  ] })
4494
4589
  ] })
4495
4590
  ] });
@@ -4534,7 +4629,7 @@ var ScrollBar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__
4534
4629
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
4535
4630
  ScrollAreaPrimitive.ScrollAreaThumb,
4536
4631
  {
4537
- className: cn("relative flex-1 rounded-full bg-neutral-200/70 dark:bg-neutral-800")
4632
+ className: cn("relative flex-1 rounded-full bg-zinc-200/70")
4538
4633
  }
4539
4634
  )
4540
4635
  }
@@ -4619,13 +4714,13 @@ var DATA_TYPE_NAMES = {
4619
4714
 
4620
4715
 
4621
4716
  var iconsMap = {
4622
- string: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconQuote, { size: 15, stroke: 1.3 }),
4623
- set: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLayersIntersect, { size: 15, stroke: 1.3 }),
4624
- hash: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconHash, { size: 15, stroke: 1.3 }),
4625
- json: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCodeDots, { size: 15, stroke: 1.3 }),
4626
- zset: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconArrowsSort, { size: 15, stroke: 1.3 }),
4627
- list: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.3 }),
4628
- stream: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.3 })
4717
+ string: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconQuote, { size: 15, stroke: 1.2 }),
4718
+ set: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLayersIntersect, { size: 15, stroke: 1.2 }),
4719
+ hash: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconHash, { size: 15, stroke: 1.2 }),
4720
+ json: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCodeDots, { size: 15, stroke: 1.2 }),
4721
+ zset: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconArrowsSort, { size: 15, stroke: 1.2 }),
4722
+ list: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.2 }),
4723
+ stream: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.2 })
4629
4724
  };
4630
4725
  var tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {
4631
4726
  variants: {
@@ -4667,7 +4762,7 @@ var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, .
4667
4762
  {
4668
4763
  ref,
4669
4764
  className: cn(
4670
- "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 data-[state=open]:bg-neutral-100 dark:focus:bg-neutral-800 dark:data-[state=open]:bg-neutral-800 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
4765
+ "data-[state=open]:bg-zinc-100[&_svg]:pointer-events-none flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 [&_svg]:size-4 [&_svg]:shrink-0",
4671
4766
  inset && "pl-8",
4672
4767
  className
4673
4768
  ),
@@ -4684,7 +4779,7 @@ var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) =
4684
4779
  {
4685
4780
  ref,
4686
4781
  className: cn(
4687
- "z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
4782
+ "z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
4688
4783
  className
4689
4784
  ),
4690
4785
  ...props
@@ -4697,7 +4792,7 @@ var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...pr
4697
4792
  ref,
4698
4793
  sideOffset,
4699
4794
  className: cn(
4700
- "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
4795
+ "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-md",
4701
4796
  "origin-[--radix-dropdown-menu-content-transform-origin] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
4702
4797
  className
4703
4798
  ),
@@ -4710,7 +4805,7 @@ var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref)
4710
4805
  {
4711
4806
  ref,
4712
4807
  className: cn(
4713
- "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 [&>svg]:size-4 [&>svg]:shrink-0",
4808
+ "data-[disabled]:opacity-50[&>svg]:size-4 relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none [&>svg]:shrink-0",
4714
4809
  inset && "pl-8",
4715
4810
  className
4716
4811
  ),
@@ -4723,7 +4818,7 @@ var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checke
4723
4818
  {
4724
4819
  ref,
4725
4820
  className: cn(
4726
- "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
4821
+ "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
4727
4822
  className
4728
4823
  ),
4729
4824
  checked,
@@ -4740,7 +4835,7 @@ var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props
4740
4835
  {
4741
4836
  ref,
4742
4837
  className: cn(
4743
- "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
4838
+ "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
4744
4839
  className
4745
4840
  ),
4746
4841
  ...props,
@@ -4764,7 +4859,7 @@ var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) =>
4764
4859
  DropdownMenuPrimitive.Separator,
4765
4860
  {
4766
4861
  ref,
4767
- className: cn("-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800", className),
4862
+ className: cn("-mx-1 my-1 h-px bg-zinc-100", className),
4768
4863
  ...props
4769
4864
  }
4770
4865
  ));
@@ -4864,7 +4959,7 @@ var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }
4864
4959
  ref,
4865
4960
  sideOffset,
4866
4961
  className: cn(
4867
- "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-zinc-50 dark:text-zinc-900",
4962
+ "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
4868
4963
  className
4869
4964
  ),
4870
4965
  ...props
@@ -5028,6 +5123,7 @@ var CustomEditor = ({
5028
5123
  const { active } = useTab();
5029
5124
  const monaco = _react2.useMonaco.call(void 0, );
5030
5125
  const editorRef = _react.useRef.call(void 0, );
5126
+ const theme = useDarkMode();
5031
5127
  _react.useEffect.call(void 0, () => {
5032
5128
  if (!active || !monaco || !editorRef.current) {
5033
5129
  return;
@@ -5037,6 +5133,7 @@ var CustomEditor = ({
5037
5133
  const editor = /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
5038
5134
  _react2.Editor,
5039
5135
  {
5136
+ theme: theme === "dark" ? "vs-dark" : "light",
5040
5137
  loading: void 0,
5041
5138
  onMount: (editor2) => {
5042
5139
  editorRef.current = editor2;
@@ -5068,8 +5165,10 @@ var CustomEditor = ({
5068
5165
  automaticLayout: true,
5069
5166
  scrollBeyondLastLine: false,
5070
5167
  renderLineHighlight: "none",
5071
- unusualLineTerminators: "auto"
5072
- }
5168
+ unusualLineTerminators: "auto",
5169
+ padding: { top: 0, bottom: 0 }
5170
+ },
5171
+ className: "[&_.monaco-editor-background]:!bg-transparent [&_.monaco-editor]:!bg-transparent"
5073
5172
  }
5074
5173
  );
5075
5174
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
@@ -5462,7 +5561,7 @@ var EditorDisplayForm = ({
5462
5561
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
5463
5562
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex grow flex-col gap-1", children: [
5464
5563
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex shrink-0 items-center gap-2", children: type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : selector }),
5465
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grow rounded-md border border-zinc-300 bg-white p-1", children: editor })
5564
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grow rounded-md border border-zinc-300 bg-white p-1 dark:!bg-[#192321]", children: editor })
5466
5565
  ] }),
5467
5566
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex shrink-0 items-center gap-2", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ml-auto flex gap-2", children: [
5468
5567
  form.formState.isDirty && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { onClick: handleCancel, children: "Cancel" }),
@@ -5487,7 +5586,7 @@ var DataDisplay = () => {
5487
5586
  const { selectedKey } = useTab();
5488
5587
  const { query } = useKeys();
5489
5588
  const type = useKeyType(selectedKey);
5490
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full p-4", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? query.isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: type === "string" || type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
5589
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full p-4", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? query.isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: type === "string" || type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
5491
5590
  };
5492
5591
 
5493
5592
  // src/components/databrowser/components/sidebar/index.tsx
@@ -5543,7 +5642,7 @@ var DialogContent = React12.forwardRef(({ className, children, ...props }, ref)
5543
5642
  ...props,
5544
5643
  children: [
5545
5644
  children,
5546
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500 dark:ring-offset-zinc-950 dark:focus:ring-zinc-300 dark:data-[state=open]:bg-zinc-800 dark:data-[state=open]:text-zinc-400", children: [
5645
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500", children: [
5547
5646
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
5548
5647
  "svg",
5549
5648
  {
@@ -5594,7 +5693,7 @@ var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /*
5594
5693
  DialogPrimitive.Description,
5595
5694
  {
5596
5695
  ref,
5597
- className: cn("text-sm text-zinc-500 dark:text-zinc-400", className),
5696
+ className: cn("text-sm text-zinc-500", className),
5598
5697
  ...props
5599
5698
  }
5600
5699
  ));
@@ -5698,6 +5797,7 @@ var Empty = () => {
5698
5797
 
5699
5798
 
5700
5799
 
5800
+
5701
5801
  var SidebarContextMenu = ({ children }) => {
5702
5802
  const { mutate: deleteKey } = useDeleteKey();
5703
5803
  const [isAlertOpen, setAlertOpen] = _react.useState.call(void 0, false);
@@ -5735,7 +5835,7 @@ var SidebarContextMenu = ({ children }) => {
5735
5835
  }
5736
5836
  ),
5737
5837
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuContent, { children: [
5738
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
5838
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
5739
5839
  ContextMenuItem,
5740
5840
  {
5741
5841
  onClick: () => {
@@ -5744,10 +5844,14 @@ var SidebarContextMenu = ({ children }) => {
5744
5844
  description: "Key copied to clipboard"
5745
5845
  });
5746
5846
  },
5747
- children: "Copy key"
5847
+ className: "gap-2",
5848
+ children: [
5849
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCopy, { size: 16 }),
5850
+ "Copy key"
5851
+ ]
5748
5852
  }
5749
5853
  ),
5750
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
5854
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
5751
5855
  ContextMenuItem,
5752
5856
  {
5753
5857
  onClick: () => {
@@ -5756,11 +5860,18 @@ var SidebarContextMenu = ({ children }) => {
5756
5860
  setSearch(newTabId, currentSearch);
5757
5861
  selectTab(newTabId);
5758
5862
  },
5759
- children: "Open in new tab"
5863
+ className: "gap-2",
5864
+ children: [
5865
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconExternalLink, { size: 16 }),
5866
+ "Open in new tab"
5867
+ ]
5760
5868
  }
5761
5869
  ),
5762
5870
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactcontextmenu.ContextMenuSeparator, {}),
5763
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuItem, { onClick: () => setAlertOpen(true), children: "Delete key" })
5871
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuItem, { onClick: () => setAlertOpen(true), className: "gap-2", children: [
5872
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconTrash, { size: 16 }),
5873
+ "Delete key"
5874
+ ] })
5764
5875
  ] })
5765
5876
  ] })
5766
5877
  ] });
@@ -5917,7 +6028,7 @@ var SearchInput = () => {
5917
6028
  type: "button",
5918
6029
  variant: "link",
5919
6030
  size: "icon",
5920
- className: "absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100",
6031
+ className: "absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-zinc-500 hover:text-zinc-900",
5921
6032
  onClick: () => {
5922
6033
  setSearchKey("");
5923
6034
  setState("");
@@ -5979,7 +6090,7 @@ function Sidebar() {
5979
6090
  Button,
5980
6091
  {
5981
6092
  "aria-label": "Refresh",
5982
- className: "h-7 w-7 px-0",
6093
+ className: "h-7 w-7 px-0 text-zinc-500",
5983
6094
  onClick: () => {
5984
6095
  queryClient.invalidateQueries({
5985
6096
  queryKey: [FETCH_KEYS_QUERY_KEY]
@@ -6061,7 +6172,7 @@ var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
6061
6172
  {
6062
6173
  ref,
6063
6174
  className: cn(
6064
- "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50",
6175
+ "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-zinc-950",
6065
6176
  className
6066
6177
  ),
6067
6178
  ...props
@@ -6075,7 +6186,7 @@ var CommandInput = React13.forwardRef(({ className, ...props }, ref) => /* @__PU
6075
6186
  {
6076
6187
  ref,
6077
6188
  className: cn(
6078
- "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",
6189
+ "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-zinc-500 disabled:cursor-not-allowed disabled:opacity-50",
6079
6190
  className
6080
6191
  ),
6081
6192
  ...props
@@ -6092,21 +6203,14 @@ var CommandList = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
6092
6203
  }
6093
6204
  ));
6094
6205
  CommandList.displayName = _cmdk.Command.List.displayName;
6095
- var CommandEmpty = React13.forwardRef((props, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
6096
- _cmdk.Command.Empty,
6097
- {
6098
- ref,
6099
- className: "py-6 text-center text-sm",
6100
- ...props
6101
- }
6102
- ));
6206
+ var CommandEmpty = React13.forwardRef((props, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _cmdk.Command.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
6103
6207
  CommandEmpty.displayName = _cmdk.Command.Empty.displayName;
6104
6208
  var CommandGroup = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
6105
6209
  _cmdk.Command.Group,
6106
6210
  {
6107
6211
  ref,
6108
6212
  className: cn(
6109
- "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",
6213
+ "text-zinc-950[&_[cmdk-group-heading]]:px-2 overflow-hidden p-1 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-zinc-500",
6110
6214
  className
6111
6215
  ),
6112
6216
  ...props
@@ -6117,7 +6221,7 @@ var CommandSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @
6117
6221
  _cmdk.Command.Separator,
6118
6222
  {
6119
6223
  ref,
6120
- className: cn("-mx-1 h-px bg-neutral-200 dark:bg-neutral-800", className),
6224
+ className: cn("-mx-1 h-px bg-zinc-200", className),
6121
6225
  ...props
6122
6226
  }
6123
6227
  ));
@@ -6127,33 +6231,28 @@ var CommandItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
6127
6231
  {
6128
6232
  ref,
6129
6233
  className: cn(
6130
- "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",
6234
+ "data-[disabled=true]:opacity-50[&_svg]:pointer-events-none relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-zinc-100 data-[selected=true]:text-zinc-900 [&_svg]:size-4 [&_svg]:shrink-0",
6131
6235
  className
6132
6236
  ),
6133
6237
  ...props
6134
6238
  }
6135
6239
  ));
6136
6240
  CommandItem.displayName = _cmdk.Command.Item.displayName;
6137
- var CommandShortcut = ({
6138
- className,
6139
- ...props
6140
- }) => {
6141
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
6142
- "span",
6143
- {
6144
- className: cn(
6145
- "ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400",
6146
- className
6147
- ),
6148
- ...props
6149
- }
6150
- );
6241
+ var CommandShortcut = ({ className, ...props }) => {
6242
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: cn("ml-auto text-xs tracking-widest text-zinc-500", className), ...props });
6151
6243
  };
6152
6244
  CommandShortcut.displayName = "CommandShortcut";
6153
6245
 
6154
6246
  // src/components/databrowser/components/tab.tsx
6155
6247
 
6156
6248
 
6249
+
6250
+
6251
+
6252
+
6253
+
6254
+
6255
+
6157
6256
  // src/components/databrowser/components/tab-type-icon.tsx
6158
6257
 
6159
6258
  function TabTypeIcon({ selectedKey }) {
@@ -6191,24 +6290,45 @@ var useOverflow = () => {
6191
6290
 
6192
6291
  // src/components/databrowser/components/tab.tsx
6193
6292
 
6194
- var Tab = ({ id }) => {
6195
- const { active, search, selectedKey } = useTab();
6196
- const { selectTab, removeTab, tabs } = useDatabrowserStore();
6293
+ var Tab = ({ id, isList }) => {
6294
+ const { active, search, selectedKey, pinned } = useTab();
6295
+ const {
6296
+ selectTab,
6297
+ removeTab,
6298
+ forceRemoveTab,
6299
+ tabs,
6300
+ togglePinTab,
6301
+ duplicateTab,
6302
+ closeOtherTabs,
6303
+ closeAllButPinned
6304
+ } = useDatabrowserStore();
6305
+ const hasPinnedTabs = tabs.some(([, data]) => data.pinned);
6197
6306
  const { ref, isOverflow } = useOverflow();
6198
6307
  const label = search.key || selectedKey;
6199
6308
  const iconNode = search.key ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 15 }) : selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabTypeIcon, { selectedKey }) : void 0;
6200
6309
  const tabNode = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
6201
6310
  "div",
6202
6311
  {
6312
+ id: isList ? `list-tab-${id}` : `tab-${id}`,
6203
6313
  onClick: () => selectTab(id),
6204
6314
  className: cn(
6205
- "flex h-9 cursor-pointer items-center gap-2 rounded-t-lg border border-zinc-200 px-3 text-[13px] transition-colors",
6206
- active ? "border-b-white bg-white text-zinc-900" : "bg-zinc-100 hover:bg-zinc-50"
6315
+ "flex h-9 w-full cursor-pointer items-center gap-2 px-3 text-[13px] transition-colors",
6316
+ isList && "max-w-[370px]",
6317
+ !isList && "rounded-t-lg border border-zinc-200",
6318
+ !isList && (active ? "border-b-white bg-white text-zinc-900" : "bg-zinc-100 hover:bg-zinc-50")
6207
6319
  ),
6208
6320
  children: [
6209
6321
  iconNode,
6210
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { ref, className: "max-w-32 truncate whitespace-nowrap", children: label || "New Tab" }),
6211
- tabs.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
6322
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
6323
+ "span",
6324
+ {
6325
+ ref,
6326
+ className: cn("min-w-0 grow truncate whitespace-nowrap", !isList && "max-w-32"),
6327
+ children: label || "New Tab"
6328
+ }
6329
+ ),
6330
+ pinned && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPin, { size: 14, className: "text-zinc-500" }),
6331
+ tabs.length > 1 && !pinned && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
6212
6332
  "button",
6213
6333
  {
6214
6334
  onClick: (e) => {
@@ -6222,7 +6342,48 @@ var Tab = ({ id }) => {
6222
6342
  ]
6223
6343
  }
6224
6344
  );
6225
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: isOverflow ? label : void 0, children: tabNode });
6345
+ return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenu, { children: [
6346
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: isOverflow ? label : void 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuTrigger, { asChild: true, children: tabNode }) }),
6347
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
6348
+ ContextMenuContent,
6349
+ {
6350
+ onClick: (e) => {
6351
+ e.stopPropagation();
6352
+ },
6353
+ children: [
6354
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuItem, { onSelect: () => togglePinTab(id), className: "gap-2", children: [
6355
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPin, { size: 16 }),
6356
+ pinned ? "Unpin Tab" : "Pin Tab"
6357
+ ] }),
6358
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuItem, { onSelect: () => duplicateTab(id), className: "gap-2", children: [
6359
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCopyPlus, { size: 16 }),
6360
+ "Duplicate Tab"
6361
+ ] }),
6362
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuSeparator, {}),
6363
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuItem, { onSelect: () => forceRemoveTab(id), className: "gap-2", children: [
6364
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconX, { size: 16 }),
6365
+ "Close Tab"
6366
+ ] }),
6367
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuItem, { onSelect: () => closeOtherTabs(id), className: "gap-2", children: [
6368
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSquareX, { size: 16 }),
6369
+ "Close Other Tabs"
6370
+ ] }),
6371
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
6372
+ ContextMenuItem,
6373
+ {
6374
+ onSelect: () => closeAllButPinned(),
6375
+ className: "gap-2",
6376
+ disabled: !hasPinnedTabs,
6377
+ children: [
6378
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconArrowsMinimize, { size: 16 }),
6379
+ "Close All But Pinned"
6380
+ ]
6381
+ }
6382
+ )
6383
+ ]
6384
+ }
6385
+ )
6386
+ ] });
6226
6387
  };
6227
6388
 
6228
6389
  // src/components/databrowser/components/databrowser-tabs.tsx
@@ -6230,8 +6391,12 @@ var Tab = ({ id }) => {
6230
6391
  var SortableTab = ({ id }) => {
6231
6392
  const [originalWidth, setOriginalWidth] = _react.useState.call(void 0, null);
6232
6393
  const textRef = _react.useRef.call(void 0, null);
6394
+ const { tabs } = useDatabrowserStore();
6395
+ const tabData = _optionalChain([tabs, 'access', _68 => _68.find, 'call', _69 => _69(([tabId]) => tabId === id), 'optionalAccess', _70 => _70[1]]);
6396
+ const isPinned = _optionalChain([tabData, 'optionalAccess', _71 => _71.pinned]);
6233
6397
  const { attributes, listeners: listeners2, setNodeRef, transform, transition, isDragging } = _sortable.useSortable.call(void 0, {
6234
6398
  id,
6399
+ disabled: isPinned,
6235
6400
  resizeObserverConfig: {
6236
6401
  disabled: true
6237
6402
  }
@@ -6295,15 +6460,22 @@ var SortableTab = ({ id }) => {
6295
6460
  {
6296
6461
  ref: measureRef,
6297
6462
  style,
6298
- className: isDragging ? "cursor-grabbing" : "cursor-grab",
6463
+ className: isDragging ? "cursor-grabbing" : isPinned ? "cursor-default" : "cursor-grab",
6299
6464
  ...attributes,
6300
- ...listeners2,
6465
+ ...isPinned ? {} : listeners2,
6301
6466
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabIdProvider, { value: id, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Tab, { id }) })
6302
6467
  }
6303
6468
  );
6304
6469
  };
6305
6470
  var DatabrowserTabs = () => {
6306
- const { tabs, addTab, reorderTabs, selectedTab, selectTab } = useDatabrowserStore();
6471
+ const { tabs, reorderTabs, selectedTab, selectTab } = useDatabrowserStore();
6472
+ const sortedTabs = _react.useMemo.call(void 0, () => {
6473
+ return [...tabs].sort(([, a], [, b]) => {
6474
+ if (a.pinned && !b.pinned) return -1;
6475
+ if (!a.pinned && b.pinned) return 1;
6476
+ return 0;
6477
+ });
6478
+ }, [tabs]);
6307
6479
  const scrollRef = _react.useRef.call(void 0, null);
6308
6480
  const [hasLeftShadow, setHasLeftShadow] = _react.useState.call(void 0, false);
6309
6481
  const [hasRightShadow, setHasRightShadow] = _react.useState.call(void 0, false);
@@ -6404,115 +6576,103 @@ var DatabrowserTabs = () => {
6404
6576
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
6405
6577
  _sortable.SortableContext,
6406
6578
  {
6407
- items: tabs.map(([id]) => id),
6579
+ items: sortedTabs.map(([id]) => id),
6408
6580
  strategy: _sortable.horizontalListSortingStrategy,
6409
- children: selectedTab && tabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortableTab, { id }, id))
6581
+ children: selectedTab && sortedTabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortableTab, { id }, id))
6410
6582
  }
6411
6583
  )
6412
6584
  }
6413
6585
  ),
6414
- !isOverflow && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 pl-1 pr-1", children: [
6415
- tabs.length > 4 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabSearch, { tabs, onSelectTab: selectTab }),
6416
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
6417
- Button,
6418
- {
6419
- variant: "secondary",
6420
- size: "icon-sm",
6421
- onClick: addTab,
6422
- className: "flex-shrink-0",
6423
- title: "Add new tab",
6424
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "text-zinc-500", size: 16 })
6425
- }
6426
- )
6427
- ] })
6586
+ !isOverflow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-1 pl-1 pr-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddTabButton, {}) })
6428
6587
  ]
6429
6588
  }
6430
6589
  )
6431
6590
  ] }),
6432
- isOverflow && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 pl-1", children: [
6433
- tabs.length > 4 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabSearch, { tabs, onSelectTab: selectTab }),
6434
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
6435
- Button,
6436
- {
6437
- variant: "secondary",
6438
- size: "icon-sm",
6439
- onClick: addTab,
6440
- className: "mr-1 flex-shrink-0",
6441
- title: "Add new tab",
6442
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "text-zinc-500", size: 16 })
6443
- }
6444
- )
6591
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 pl-1", children: [
6592
+ isOverflow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddTabButton, {}),
6593
+ tabs.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabsListButton, { tabs, onSelectTab: selectTab })
6445
6594
  ] })
6446
6595
  ] })
6447
6596
  ] });
6448
6597
  };
6449
- function TabSearch({
6598
+ function AddTabButton() {
6599
+ const { addTab, selectTab } = useDatabrowserStore();
6600
+ const rootRef = useDatabrowserRootRef();
6601
+ const handleAddTab = () => {
6602
+ const tabsId = addTab();
6603
+ selectTab(tabsId);
6604
+ setTimeout(() => {
6605
+ const tab = _optionalChain([rootRef, 'optionalAccess', _72 => _72.current, 'optionalAccess', _73 => _73.querySelector, 'call', _74 => _74(`#tab-${tabsId}`)]);
6606
+ if (!tab) return;
6607
+ tab.scrollIntoView({ behavior: "smooth" });
6608
+ }, 20);
6609
+ };
6610
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
6611
+ Button,
6612
+ {
6613
+ "aria-label": "Add new tab",
6614
+ variant: "secondary",
6615
+ size: "icon-sm",
6616
+ onClick: handleAddTab,
6617
+ className: "flex-shrink-0",
6618
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "text-zinc-500", size: 16 })
6619
+ }
6620
+ );
6621
+ }
6622
+ function TabsListButton({
6450
6623
  tabs,
6451
6624
  onSelectTab
6452
6625
  }) {
6453
6626
  const [open, setOpen] = _react.useState.call(void 0, false);
6454
- const [query, setQuery] = _react.useState.call(void 0, "");
6455
- const items = tabs.map(([id, data]) => ({
6456
- id,
6457
- label: data.search.key || data.selectedKey || "New Tab",
6458
- searchKey: data.search.key,
6459
- selectedKey: data.selectedKey,
6460
- selectedItemKey: _optionalChain([data, 'access', _68 => _68.selectedListItem, 'optionalAccess', _69 => _69.key])
6461
- }));
6462
- const buildDisplayLabel = (it) => it.selectedItemKey ? `${it.label} > ${it.selectedItemKey}` : it.label;
6463
- const dedupedMap = /* @__PURE__ */ new Map();
6464
- for (const it of items) {
6465
- const display = buildDisplayLabel(it);
6466
- const key = display.toLowerCase();
6467
- if (!dedupedMap.has(key)) dedupedMap.set(key, it);
6468
- }
6469
- const deduped = [...dedupedMap.values()];
6470
- const filtered = (query ? deduped.filter((i) => buildDisplayLabel(i).toLowerCase().includes(query.toLowerCase())) : deduped).sort((a, b) => buildDisplayLabel(a).localeCompare(buildDisplayLabel(b)));
6471
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
6472
- Popover,
6473
- {
6474
- open,
6475
- onOpenChange: (v) => {
6476
- setOpen(v);
6477
- if (!v) setQuery("");
6478
- },
6479
- children: [
6480
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Tooltip, { delayDuration: 400, children: [
6481
- /* @__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 }) }) }) }),
6482
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipContent, { side: "top", children: "Search in tabs" })
6483
- ] }),
6484
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverContent, { className: "w-72 p-0", align: "end", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Command, { children: [
6485
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
6486
- CommandInput,
6487
- {
6488
- placeholder: "Search tabs...",
6489
- value: query,
6490
- onValueChange: (v) => setQuery(v),
6491
- className: "h-9"
6492
- }
6493
- ),
6494
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, CommandList, { children: [
6495
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CommandEmpty, { children: "No tabs" }),
6496
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CommandGroup, { children: filtered.map((item) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
6497
- CommandItem,
6498
- {
6499
- value: buildDisplayLabel(item),
6500
- onSelect: () => {
6501
- onSelectTab(item.id);
6502
- setOpen(false);
6503
- },
6504
- children: [
6505
- item.searchKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 15 }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabTypeIcon, { selectedKey: item.selectedKey }),
6506
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate", children: buildDisplayLabel(item) })
6507
- ]
6508
- },
6509
- item.id
6510
- )) })
6511
- ] })
6512
- ] }) })
6513
- ]
6514
- }
6515
- );
6627
+ const sorted = _react.useMemo.call(void 0, () => {
6628
+ return [...tabs].sort(([, a], [, b]) => {
6629
+ if (a.pinned && !b.pinned) return -1;
6630
+ if (!a.pinned && b.pinned) return 1;
6631
+ return 0;
6632
+ });
6633
+ }, [tabs]);
6634
+ const rootRef = useDatabrowserRootRef();
6635
+ const handleSelectTab = (id) => {
6636
+ onSelectTab(id);
6637
+ setOpen(false);
6638
+ setTimeout(() => {
6639
+ const tab = _optionalChain([rootRef, 'optionalAccess', _75 => _75.current, 'optionalAccess', _76 => _76.querySelector, 'call', _77 => _77(`#tab-${id}`)]);
6640
+ if (!tab) return;
6641
+ tab.scrollIntoView({ behavior: "smooth" });
6642
+ }, 20);
6643
+ };
6644
+ return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Popover, { open, onOpenChange: setOpen, children: [
6645
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
6646
+ Button,
6647
+ {
6648
+ variant: "secondary",
6649
+ size: "sm",
6650
+ className: "h-7 gap-1 px-2",
6651
+ "aria-label": "Search in tabs",
6652
+ children: [
6653
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs text-zinc-600", children: tabs.length }),
6654
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconChevronDown, { className: "text-zinc-500", size: 16 })
6655
+ ]
6656
+ }
6657
+ ) }),
6658
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverContent, { className: "w-96 p-0", align: "end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Command, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, CommandList, { children: [
6659
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CommandEmpty, { children: "No tabs" }),
6660
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CommandGroup, { children: sorted.map(([_id, item]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
6661
+ CommandItem,
6662
+ {
6663
+ style: {
6664
+ padding: 0
6665
+ },
6666
+ value: item.id,
6667
+ onSelect: () => {
6668
+ handleSelectTab(item.id);
6669
+ },
6670
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabIdProvider, { value: _id, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Tab, { id: _id, isList: true }) })
6671
+ },
6672
+ item.id
6673
+ )) })
6674
+ ] }) }) })
6675
+ ] });
6516
6676
  }
6517
6677
 
6518
6678
  // src/components/databrowser/index.tsx
@@ -6521,23 +6681,36 @@ var RedisBrowser = ({
6521
6681
  token,
6522
6682
  url,
6523
6683
  hideTabs,
6524
- storage
6684
+ storage,
6685
+ darkMode = "light"
6525
6686
  }) => {
6526
6687
  const credentials = _react.useMemo.call(void 0, () => ({ token, url }), [token, url]);
6688
+ const rootRef = _react.useRef.call(void 0, null);
6527
6689
  _react.useEffect.call(void 0, () => {
6528
6690
  queryClient.resetQueries();
6529
6691
  }, [credentials.url]);
6530
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { storage, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
6531
- "div",
6532
- {
6533
- className: "ups-db",
6534
- style: { height: "100%", display: "flex", flexDirection: "column" },
6535
- children: [
6536
- !hideTabs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserTabs, {}),
6537
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstances, {})
6538
- ]
6539
- }
6540
- ) }) }) }) });
6692
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DarkModeProvider, { darkMode, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisBrowserRoot, { hideTabs, rootRef }) }) }) }) }) });
6693
+ };
6694
+ var RedisBrowserRoot = ({
6695
+ hideTabs,
6696
+ rootRef
6697
+ }) => {
6698
+ const theme = useDarkMode();
6699
+ return (
6700
+ /* ups-db is the custom class used to prefix every style in the css bundle */
6701
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
6702
+ "div",
6703
+ {
6704
+ className: `ups-db ${theme === "dark" ? "dark" : ""}`,
6705
+ style: { height: "100%", display: "flex", flexDirection: "column" },
6706
+ ref: rootRef,
6707
+ children: [
6708
+ !hideTabs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserTabs, {}),
6709
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstances, {})
6710
+ ]
6711
+ }
6712
+ )
6713
+ );
6541
6714
  };
6542
6715
  var DatabrowserInstances = () => {
6543
6716
  const { tabs, selectedTab, selectTab, addTab } = useDatabrowserStore();