@l3mpire/ui 3.2.1 → 3.3.0

package/dist/index.js

@@ -202,7 +202,7 @@ function cn(...inputs) {
 }
 
 // src/components/ui/browser-tab.tsx
-var React3 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_icons3 = require("@l3mpire/icons");
 
@@ -231,19 +231,19 @@ var badgeVariants = (0, import_class_variance_authority.cva)(
         warning: "",
         neutral: ""
       },
-      // Categorical tones — self-contained soft style (bg + text + border).
-      // When `tone` is set it overrides variant/type (handled in the component).
+      // Categorical palette. Colors come from {variant, tone} compound variants below,
+      // so a tone combines with solid / light / outlined just like `type` does.
       tone: {
-        indigo: "bg-badge-indigo-bg text-badge-indigo-text border-badge-indigo-border",
-        rose: "bg-badge-rose-bg text-badge-rose-text border-badge-rose-border",
-        lime: "bg-badge-lime-bg text-badge-lime-text border-badge-lime-border",
-        violet: "bg-badge-violet-bg text-badge-violet-text border-badge-violet-border",
-        cyan: "bg-badge-cyan-bg text-badge-cyan-text border-badge-cyan-border",
-        orange: "bg-badge-orange-bg text-badge-orange-text border-badge-orange-border",
-        emerald: "bg-badge-emerald-bg text-badge-emerald-text border-badge-emerald-border",
-        fuchsia: "bg-badge-fuchsia-bg text-badge-fuchsia-text border-badge-fuchsia-border",
-        amber: "bg-badge-amber-bg text-badge-amber-text border-badge-amber-border",
-        slate: "bg-badge-slate-bg text-badge-slate-text border-badge-slate-border"
+        indigo: "",
+        rose: "",
+        lime: "",
+        violet: "",
+        cyan: "",
+        orange: "",
+        emerald: "",
+        fuchsia: "",
+        amber: "",
+        slate: ""
       },
       size: {
         sm: [
@@ -281,9 +281,40 @@ var badgeVariants = (0, import_class_variance_authority.cva)(
       { variant: "outlined", type: "success", class: "border-badge-outlined-success-border text-badge-outlined-success-text" },
       { variant: "outlined", type: "critical", class: "border-badge-outlined-critical-border text-badge-outlined-critical-text" },
       { variant: "outlined", type: "warning", class: "border-badge-outlined-warning-border text-badge-outlined-warning-text" },
-      { variant: "outlined", type: "neutral", class: "border-badge-outlined-neutral-border text-badge-outlined-neutral-text" }
+      { variant: "outlined", type: "neutral", class: "border-badge-outlined-neutral-border text-badge-outlined-neutral-text" },
+      // ── Categorical tones × variant ──────────────────────────────────────
+      { variant: "solid", tone: "indigo", class: "bg-badge-solid-indigo-bg text-badge-solid-indigo-text" },
+      { variant: "solid", tone: "rose", class: "bg-badge-solid-rose-bg text-badge-solid-rose-text" },
+      { variant: "solid", tone: "lime", class: "bg-badge-solid-lime-bg text-badge-solid-lime-text" },
+      { variant: "solid", tone: "violet", class: "bg-badge-solid-violet-bg text-badge-solid-violet-text" },
+      { variant: "solid", tone: "cyan", class: "bg-badge-solid-cyan-bg text-badge-solid-cyan-text" },
+      { variant: "solid", tone: "orange", class: "bg-badge-solid-orange-bg text-badge-solid-orange-text" },
+      { variant: "solid", tone: "emerald", class: "bg-badge-solid-emerald-bg text-badge-solid-emerald-text" },
+      { variant: "solid", tone: "fuchsia", class: "bg-badge-solid-fuchsia-bg text-badge-solid-fuchsia-text" },
+      { variant: "solid", tone: "amber", class: "bg-badge-solid-amber-bg text-badge-solid-amber-text" },
+      { variant: "solid", tone: "slate", class: "bg-badge-solid-slate-bg text-badge-solid-slate-text" },
+      { variant: "light", tone: "indigo", class: "bg-badge-light-indigo-bg text-badge-light-indigo-text" },
+      { variant: "light", tone: "rose", class: "bg-badge-light-rose-bg text-badge-light-rose-text" },
+      { variant: "light", tone: "lime", class: "bg-badge-light-lime-bg text-badge-light-lime-text" },
+      { variant: "light", tone: "violet", class: "bg-badge-light-violet-bg text-badge-light-violet-text" },
+      { variant: "light", tone: "cyan", class: "bg-badge-light-cyan-bg text-badge-light-cyan-text" },
+      { variant: "light", tone: "orange", class: "bg-badge-light-orange-bg text-badge-light-orange-text" },
+      { variant: "light", tone: "emerald", class: "bg-badge-light-emerald-bg text-badge-light-emerald-text" },
+      { variant: "light", tone: "fuchsia", class: "bg-badge-light-fuchsia-bg text-badge-light-fuchsia-text" },
+      { variant: "light", tone: "amber", class: "bg-badge-light-amber-bg text-badge-light-amber-text" },
+      { variant: "light", tone: "slate", class: "bg-badge-light-slate-bg text-badge-light-slate-text" },
+      { variant: "outlined", tone: "indigo", class: "border-badge-outlined-indigo-border text-badge-outlined-indigo-text" },
+      { variant: "outlined", tone: "rose", class: "border-badge-outlined-rose-border text-badge-outlined-rose-text" },
+      { variant: "outlined", tone: "lime", class: "border-badge-outlined-lime-border text-badge-outlined-lime-text" },
+      { variant: "outlined", tone: "violet", class: "border-badge-outlined-violet-border text-badge-outlined-violet-text" },
+      { variant: "outlined", tone: "cyan", class: "border-badge-outlined-cyan-border text-badge-outlined-cyan-text" },
+      { variant: "outlined", tone: "orange", class: "border-badge-outlined-orange-border text-badge-outlined-orange-text" },
+      { variant: "outlined", tone: "emerald", class: "border-badge-outlined-emerald-border text-badge-outlined-emerald-text" },
+      { variant: "outlined", tone: "fuchsia", class: "border-badge-outlined-fuchsia-border text-badge-outlined-fuchsia-text" },
+      { variant: "outlined", tone: "amber", class: "border-badge-outlined-amber-border text-badge-outlined-amber-text" },
+      { variant: "outlined", tone: "slate", class: "border-badge-outlined-slate-border text-badge-outlined-slate-text" }
     ],
-    // variant/type defaults are applied in the component so `tone` can suppress them.
+    // variant/type defaults are applied in the component so `tone` can suppress `type`.
     defaultVariants: {
       size: "md"
     }
@@ -291,16 +322,15 @@ var badgeVariants = (0, import_class_variance_authority.cva)(
 );
 var Badge = React.forwardRef(
   ({ className, variant, type, tone, size, icon, children, ...props }, ref) => {
-    const tonal = tone != null;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "span",
       {
         ref,
         className: cn(
           badgeVariants({
-            // A categorical tone is self-contained and overrides variant/type.
-            variant: tonal ? void 0 : variant ?? "solid",
-            type: tonal ? void 0 : type ?? "primary",
+            variant: variant ?? "solid",
+            // `tone` and `type` share the color axis — when a tone is set it wins.
+            type: tone != null ? void 0 : type ?? "primary",
             tone,
             size
           }),
@@ -573,17 +603,78 @@ var Button = React2.forwardRef(
 );
 Button.displayName = "Button";
 
-// src/components/ui/browser-tab.tsx
+// src/components/ui/tooltip.tsx
+var React3 = __toESM(require("react"));
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
+var import_class_variance_authority3 = require("class-variance-authority");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var BrowserTabContext = React3.createContext(null);
-var BrowserTabItem = React3.forwardRef(
-  ({ className, icon, label, badge, isActive = false, onClose, onRename, ...props }, ref) => {
-    const [isHovered, setIsHovered] = React3.useState(false);
-    const [isEditing, setIsEditing] = React3.useState(false);
-    const [editValue, setEditValue] = React3.useState(label);
-    const inputRef = React3.useRef(null);
-    const ctx = React3.useContext(BrowserTabContext);
-    React3.useEffect(() => {
+var tooltipContentVariants = (0, import_class_variance_authority3.cva)(
+  [
+    "inline-flex items-center z-50",
+    "gap-xs",
+    "px-base py-sm",
+    "rounded-lg",
+    "shadow-lg",
+    "text-sm",
+    "font-regular",
+    "leading-sm",
+    "data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out]",
+    "data-[state=instant-open]:animate-[tooltip-in_0ms]",
+    "data-[state=closed]:animate-[tooltip-out_100ms_ease-in]"
+  ],
+  {
+    variants: {
+      type: {
+        default: [
+          "bg-tooltip-default-bg",
+          "text-tooltip-default-text"
+        ],
+        invert: [
+          "bg-tooltip-invert-bg",
+          "text-tooltip-invert-text",
+          "border border-tooltip-invert-border"
+        ]
+      }
+    },
+    defaultVariants: {
+      type: "default"
+    }
+  }
+);
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React3.forwardRef(({ className, type, hasArrow = true, sideOffset = 4, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(tooltipContentVariants({ type, className })),
+    ...props,
+    children: [
+      children,
+      hasArrow && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        TooltipPrimitive.Arrow,
+        {
+          className: type === "default" ? "fill-tooltip-default-bg" : "fill-tooltip-invert-bg"
+        }
+      )
+    ]
+  }
+) }));
+TooltipContent.displayName = "TooltipContent";
+
+// src/components/ui/browser-tab.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var BrowserTabContext = React4.createContext(null);
+var BrowserTabItem = React4.forwardRef(
+  ({ className, icon, label, badge, isActive = false, pinned = false, isEditable = false, onEdit, onClose, onRename, ...props }, ref) => {
+    const [isHovered, setIsHovered] = React4.useState(false);
+    const [isEditing, setIsEditing] = React4.useState(false);
+    const [editValue, setEditValue] = React4.useState(label);
+    const inputRef = React4.useRef(null);
+    const ctx = React4.useContext(BrowserTabContext);
+    React4.useEffect(() => {
       if (isEditing && inputRef.current) {
         inputRef.current.focus();
         inputRef.current.select();
@@ -612,7 +703,7 @@ var BrowserTabItem = React3.forwardRef(
     const isDragged = ctx?.draggable && ctx.dragIndex === ctx.itemIndex;
     const isDropTarget = ctx?.draggable && ctx.dropIndex === ctx.itemIndex && ctx.dragIndex !== ctx.itemIndex;
     const showGrip = ctx?.draggable && isHovered;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    const tab = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
         ref,
@@ -629,15 +720,15 @@ var BrowserTabItem = React3.forwardRef(
         ...dragProps,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             "div",
             {
               className: cn(
-                "flex items-center gap-base px-xs py-2xs transition-[background-color,border-radius,box-shadow]",
+                "relative flex items-center gap-base px-xs py-2xs transition-[background-color,border-radius,box-shadow]",
                 isHovered && !isActive ? "bg-browser-tab-item-hover-bg rounded-sm shadow-sm" : "bg-browser-tab-item-bg rounded-base"
               ),
               children: [
-                icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   import_icons3.Icon,
                   {
                     icon: showGrip ? import_icons3.faGripDotsVerticalSolid : icon,
@@ -647,7 +738,7 @@ var BrowserTabItem = React3.forwardRef(
                     )
                   }
                 ) }),
-                isEditing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                isEditing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "input",
                   {
                     ref: inputRef,
@@ -666,7 +757,7 @@ var BrowserTabItem = React3.forwardRef(
                     ),
                     style: { width: `${Math.max(editValue.length + 1, 2)}ch` }
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "span",
                   {
                     className: cn(
@@ -683,46 +774,86 @@ var BrowserTabItem = React3.forwardRef(
                     children: label
                   }
                 ),
-                badge && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Badge, { variant: "light", type: "neutral", size: "sm", children: badge }),
-                onClose && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "button",
+                badge && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Badge, { variant: "light", type: "neutral", size: "sm", children: badge }),
+                !pinned && (isEditable || onClose) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                  "div",
                   {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onClose(e);
-                    },
+                    "aria-hidden": !isHovered,
                     className: cn(
-                      "shrink-0 flex items-center justify-center cursor-pointer",
-                      isActive ? "text-browser-tab-item-active-icon" : "text-browser-tab-item-inactive-icon"
+                      "absolute right-0 top-0 bottom-0 flex items-center justify-end gap-2xs pl-2xl pr-2xs",
+                      "transition-opacity duration-150 bg-gradient-to-l from-[72%] to-transparent",
+                      isActive ? "from-browser-tab-item-bg rounded-r-base" : "from-browser-tab-item-hover-bg rounded-r-sm",
+                      isHovered ? "opacity-100" : "opacity-0 pointer-events-none"
                     ),
-                    "aria-label": `Close ${label}`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons3.Icon, { icon: import_icons3.faXmarkOutline, size: "xs" })
+                    children: [
+                      isEditable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        "button",
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            onEdit?.(e);
+                          },
+                          tabIndex: isHovered ? 0 : -1,
+                          className: cn(
+                            "shrink-0 flex items-center justify-center cursor-pointer rounded-2xs p-2xs",
+                            "hover:bg-black/5 transition-colors",
+                            isActive ? "text-browser-tab-item-active-icon" : "text-browser-tab-item-inactive-icon"
+                          ),
+                          "aria-label": `Edit ${label}`,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.Icon, { icon: import_icons3.faPenOutline, size: "xs" })
+                        }
+                      ),
+                      onClose && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        "button",
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            onClose(e);
+                          },
+                          tabIndex: isHovered ? 0 : -1,
+                          className: cn(
+                            "shrink-0 flex items-center justify-center cursor-pointer rounded-2xs p-2xs",
+                            "hover:bg-black/5 transition-colors",
+                            isActive ? "text-browser-tab-item-active-icon" : "text-browser-tab-item-inactive-icon"
+                          ),
+                          "aria-label": `Close ${label}`,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.Icon, { icon: import_icons3.faXmarkOutline, size: "xs" })
+                        }
+                      )
+                    ]
                   }
                 )
               ]
             }
           ),
-          isActive && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 left-[-1px] w-px h-[8px] bg-browser-tab-item-bg" }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 right-[-1px] w-px h-[8px] bg-browser-tab-item-bg" }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 left-[-8px] size-[8px]", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute bottom-0 left-0 right-0 h-px bg-browser-tab-item-bg" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute inset-0 rounded-br-[8px] border-b border-r border-solid border-browser-tab-item-border" })
+          isActive && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 left-[-1px] w-px h-[8px] bg-browser-tab-item-bg" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 right-[-1px] w-px h-[8px] bg-browser-tab-item-bg" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 left-[-8px] size-[8px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "absolute bottom-0 left-0 right-0 h-px bg-browser-tab-item-bg" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "absolute inset-0 rounded-br-[8px] border-b border-r border-solid border-browser-tab-item-border" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 right-[-8px] size-[8px]", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute bottom-0 left-0 right-0 h-px bg-browser-tab-item-bg" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute inset-0 rounded-bl-[8px] border-b border-l border-solid border-browser-tab-item-border" })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 right-[-8px] size-[8px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "absolute bottom-0 left-0 right-0 h-px bg-browser-tab-item-bg" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "absolute inset-0 rounded-bl-[8px] border-b border-l border-solid border-browser-tab-item-border" })
             ] })
           ] })
         ]
       }
     );
+    if (pinned) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipTrigger, { asChild: true, children: tab }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipContent, { side: "bottom", hasArrow: false, children: "Pinned tab" })
+      ] }) });
+    }
+    return tab;
   }
 );
 BrowserTabItem.displayName = "BrowserTabItem";
 function useOverflowDetection(containerRef, childCount) {
-  const [visibleCount, setVisibleCount] = React3.useState(childCount);
-  React3.useEffect(() => {
+  const [visibleCount, setVisibleCount] = React4.useState(childCount);
+  React4.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     const measure = () => {
@@ -750,12 +881,12 @@ function useOverflowDetection(containerRef, childCount) {
   }, [containerRef, childCount]);
   return visibleCount;
 }
-var BrowserTab = React3.forwardRef(
+var BrowserTab = React4.forwardRef(
   ({ className, children, onAddTab, draggable = false, onReorder, onOverflowSelect, ...props }, ref) => {
-    const [dragIndex, setDragIndex] = React3.useState(null);
-    const [dropIndex, setDropIndex] = React3.useState(null);
-    const tabsContainerRef = React3.useRef(null);
-    const childArray = React3.Children.toArray(children).filter(React3.isValidElement);
+    const [dragIndex, setDragIndex] = React4.useState(null);
+    const [dropIndex, setDropIndex] = React4.useState(null);
+    const tabsContainerRef = React4.useRef(null);
+    const childArray = React4.Children.toArray(children).filter(React4.isValidElement);
     const visibleCount = useOverflowDetection(tabsContainerRef, childArray.length);
     const hasOverflow = visibleCount < childArray.length;
     const ctxBase = {
@@ -789,7 +920,7 @@ var BrowserTab = React3.forwardRef(
         isActive: childProps.isActive
       };
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
         ref,
@@ -799,15 +930,15 @@ var BrowserTab = React3.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             "div",
             {
               ref: tabsContainerRef,
               className: "flex items-center flex-1 min-w-0 pl-base",
               style: { overflowX: "clip", overflowY: "visible" },
               children: [
-                childArray.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BrowserTabContext.Provider, { value: { ...ctxBase, itemIndex: index }, children: child }, index)),
-                onAddTab && !hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                childArray.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BrowserTabContext.Provider, { value: { ...ctxBase, itemIndex: index }, children: child }, index)),
+                onAddTab && !hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   Button,
                   {
                     className: "ml-base",
@@ -823,8 +954,8 @@ var BrowserTab = React3.forwardRef(
               ]
             }
           ),
-          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(DropdownMenuPrimitive.Root, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DropdownMenuPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(DropdownMenuPrimitive.Root, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropdownMenuPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               Button,
               {
                 className: "mb-sm",
@@ -836,7 +967,7 @@ var BrowserTab = React3.forwardRef(
                 "aria-label": "Show more tabs"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               DropdownMenuPrimitive.Content,
               {
                 sideOffset: 4,
@@ -848,7 +979,7 @@ var BrowserTab = React3.forwardRef(
                   "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=top]:slide-in-from-bottom-2"
                 ),
-                children: hiddenItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                children: hiddenItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                   DropdownMenuPrimitive.Item,
                   {
                     className: cn(
@@ -861,7 +992,7 @@ var BrowserTab = React3.forwardRef(
                       }
                     },
                     children: [
-                      item.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      item.icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                         import_icons3.Icon,
                         {
                           icon: item.icon,
@@ -871,7 +1002,7 @@ var BrowserTab = React3.forwardRef(
                           )
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                         "span",
                         {
                           className: cn(
@@ -881,7 +1012,7 @@ var BrowserTab = React3.forwardRef(
                           children: item.label
                         }
                       ),
-                      item.badge && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Badge, { variant: "light", type: "neutral", size: "sm", children: item.badge })
+                      item.badge && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Badge, { variant: "light", type: "neutral", size: "sm", children: item.badge })
                     ]
                   },
                   item.index
@@ -889,7 +1020,7 @@ var BrowserTab = React3.forwardRef(
               }
             ) })
           ] }),
-          onAddTab && hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          onAddTab && hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             Button,
             {
               className: "mb-sm",
@@ -910,14 +1041,14 @@ var BrowserTab = React3.forwardRef(
 BrowserTab.displayName = "BrowserTab";
 
 // src/components/ui/bulk-action.tsx
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_icons5 = require("@l3mpire/icons");
 
 // src/components/ui/dropdown-menu.tsx
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var DropdownMenuPrimitive2 = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_icons4 = require("@l3mpire/icons");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var textSm = "text-sm font-regular leading-sm";
 var textXs = "text-xs font-regular leading-xs";
 var textXsMedium = "text-xs font-medium leading-xs";
@@ -930,13 +1061,13 @@ var containerStyle = [
   "p-xs",
   "shadow-lg"
 ];
-var DropdownMenu = React4.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn(containerStyle, className), ...props, children })
+var DropdownMenu = React5.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: cn(containerStyle, className), ...props, children })
 );
 DropdownMenu.displayName = "DropdownMenu";
 var DropdownMenuRoot = DropdownMenuPrimitive2.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive2.Trigger;
-var DropdownMenuContent = React4.forwardRef(({ className, sideOffset = 4, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropdownMenuPrimitive2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var DropdownMenuContent = React5.forwardRef(({ className, sideOffset = 4, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropdownMenuPrimitive2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   DropdownMenuPrimitive2.Content,
   {
     ref,
@@ -955,12 +1086,12 @@ var DropdownMenuContent = React4.forwardRef(({ className, sideOffset = 4, childr
   }
 ) }));
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuList = React4.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("flex flex-col", className), role: "listbox", ...props, children })
+var DropdownMenuList = React5.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: cn("flex flex-col", className), role: "listbox", ...props, children })
 );
 DropdownMenuList.displayName = "DropdownMenuList";
 var itemStyle = "flex items-center gap-base p-base rounded-base cursor-pointer hover:bg-dropdown-item-hover";
-var DropdownMenuItem = React4.forwardRef(
+var DropdownMenuItem = React5.forwardRef(
   ({
     className,
     icon,
@@ -975,7 +1106,7 @@ var DropdownMenuItem = React4.forwardRef(
     onClick,
     ...props
   }, ref) => {
-    const handleClick = React4.useCallback(
+    const handleClick = React5.useCallback(
       (e) => {
         const target = e.target;
         if (!target.closest("button[role='checkbox']")) {
@@ -988,7 +1119,7 @@ var DropdownMenuItem = React4.forwardRef(
       },
       [onClick]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
         ref,
@@ -1005,7 +1136,7 @@ var DropdownMenuItem = React4.forwardRef(
           children,
           avatar,
           flag,
-          icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             import_icons4.Icon,
             {
               icon,
@@ -1013,9 +1144,9 @@ var DropdownMenuItem = React4.forwardRef(
               className: "shrink-0 text-dropdown-item-icon"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-1 items-center gap-sm min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("truncate shrink-0", textSm, "text-dropdown-item-text"), children: label }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("truncate", textXs, "text-dropdown-item-secondary"), children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-1 items-center gap-sm min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("truncate shrink-0", textSm, "text-dropdown-item-text"), children: label }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("truncate", textXs, "text-dropdown-item-secondary"), children: description })
           ] }),
           badge,
           action
@@ -1025,7 +1156,7 @@ var DropdownMenuItem = React4.forwardRef(
   }
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuRadixItem = React4.forwardRef(
+var DropdownMenuRadixItem = React5.forwardRef(
   ({
     className,
     icon,
@@ -1037,7 +1168,7 @@ var DropdownMenuRadixItem = React4.forwardRef(
     action,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     DropdownMenuPrimitive2.Item,
     {
       ref,
@@ -1051,7 +1182,7 @@ var DropdownMenuRadixItem = React4.forwardRef(
         children,
         avatar,
         flag,
-        icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_icons4.Icon,
           {
             icon,
@@ -1059,9 +1190,9 @@ var DropdownMenuRadixItem = React4.forwardRef(
             className: "shrink-0 text-dropdown-item-icon"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-1 items-center gap-sm min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("truncate shrink-0", textSm, "text-dropdown-item-text"), children: label }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("truncate", textXs, "text-dropdown-item-secondary"), children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-1 items-center gap-sm min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("truncate shrink-0", textSm, "text-dropdown-item-text"), children: label }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("truncate", textXs, "text-dropdown-item-secondary"), children: description })
         ] }),
         badge,
         action
@@ -1070,7 +1201,7 @@ var DropdownMenuRadixItem = React4.forwardRef(
   )
 );
 DropdownMenuRadixItem.displayName = "DropdownMenuRadixItem";
-var DropdownMenuHeading = React4.forwardRef(({ className, action, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+var DropdownMenuHeading = React5.forwardRef(({ className, action, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
   "div",
   {
     ref,
@@ -1080,7 +1211,7 @@ var DropdownMenuHeading = React4.forwardRef(({ className, action, children, ...p
     ),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("flex-1 truncate uppercase", textXsMedium, "text-dropdown-heading-text"), children }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("flex-1 truncate uppercase", textXsMedium, "text-dropdown-heading-text"), children }),
       action
     ]
   }
@@ -1095,7 +1226,7 @@ var clearStyle = [
   "shadow-sm",
   "cursor-pointer"
 ];
-var DropdownMenuClear = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var DropdownMenuClear = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   "button",
   {
     ref,
@@ -1108,10 +1239,10 @@ var DropdownMenuClear = React4.forwardRef(({ className, children, ...props }, re
 DropdownMenuClear.displayName = "DropdownMenuClear";
 
 // src/components/ui/bulk-action.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var GAP_PX = 8;
 var MORE_BTN_FALLBACK = 36;
-var BulkAction = React5.forwardRef(
+var BulkAction = React6.forwardRef(
   ({
     count,
     onClear,
@@ -1122,11 +1253,11 @@ var BulkAction = React5.forwardRef(
     className,
     ...props
   }, ref) => {
-    const slotRef = React5.useRef(null);
-    const measureRef = React5.useRef(null);
-    const moreBtnMeasureRef = React5.useRef(null);
-    const [visibleCount, setVisibleCount] = React5.useState(actions.length);
-    React5.useLayoutEffect(() => {
+    const slotRef = React6.useRef(null);
+    const measureRef = React6.useRef(null);
+    const moreBtnMeasureRef = React6.useRef(null);
+    const [visibleCount, setVisibleCount] = React6.useState(actions.length);
+    React6.useLayoutEffect(() => {
       const slot = slotRef.current;
       const measure = measureRef.current;
       if (!slot || !measure) return;
@@ -1166,7 +1297,7 @@ var BulkAction = React5.forwardRef(
     }, [actions]);
     const visibleItems = actions.slice(0, visibleCount);
     const overflowItems = actions.slice(visibleCount);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
         ref,
@@ -1182,20 +1313,20 @@ var BulkAction = React5.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-sm font-regular leading-sm text-bulk-action-count whitespace-nowrap shrink-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "text-sm font-regular leading-sm text-bulk-action-count whitespace-nowrap shrink-0", children: [
             count,
             " ",
             countLabel
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "div",
             {
               ref: slotRef,
               className: "relative flex flex-1 items-center gap-base min-w-0 overflow-hidden",
               children: [
-                visibleItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ActionButton, { item }, item.id)),
-                overflowItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(DropdownMenuRoot, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                visibleItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ActionButton, { item }, item.id)),
+                overflowItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DropdownMenuRoot, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     Button,
                     {
                       type: "button",
@@ -1207,7 +1338,7 @@ var BulkAction = React5.forwardRef(
                       "aria-label": "More actions"
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropdownMenuContent, { align: "end", side: "top", sideOffset: 8, children: overflowItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuContent, { align: "end", side: "top", sideOffset: 8, children: overflowItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     DropdownMenuItem,
                     {
                       icon: item.icon,
@@ -1217,29 +1348,29 @@ var BulkAction = React5.forwardRef(
                     item.id
                   )) })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   "div",
                   {
                     ref: measureRef,
                     "aria-hidden": true,
                     className: "pointer-events-none absolute inset-0 flex items-center gap-base opacity-0 invisible",
-                    children: actions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ActionButton, { item, tabIndex: -1 }, `measure-${item.id}`))
+                    children: actions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ActionButton, { item, tabIndex: -1 }, `measure-${item.id}`))
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   "button",
                   {
                     ref: moreBtnMeasureRef,
                     "aria-hidden": true,
                     tabIndex: -1,
                     className: "pointer-events-none absolute opacity-0 invisible h-8 w-8 min-w-8",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons5.Icon, { icon: import_icons5.faEllipsisOutline, size: "sm" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons5.Icon, { icon: import_icons5.faEllipsisOutline, size: "sm" })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Button,
             {
               type: "button",
@@ -1259,7 +1390,7 @@ var BulkAction = React5.forwardRef(
   }
 );
 BulkAction.displayName = "BulkAction";
-var ActionButton = ({ item, tabIndex }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var ActionButton = ({ item, tabIndex }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   Button,
   {
     type: "button",
@@ -1275,67 +1406,6 @@ var ActionButton = ({ item, tabIndex }) => /* @__PURE__ */ (0, import_jsx_runtim
   }
 );
 
-// src/components/ui/tooltip.tsx
-var React6 = __toESM(require("react"));
-var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-var import_class_variance_authority3 = require("class-variance-authority");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var tooltipContentVariants = (0, import_class_variance_authority3.cva)(
-  [
-    "inline-flex items-center z-50",
-    "gap-xs",
-    "px-base py-sm",
-    "rounded-lg",
-    "shadow-lg",
-    "text-sm",
-    "font-regular",
-    "leading-sm",
-    "data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out]",
-    "data-[state=instant-open]:animate-[tooltip-in_0ms]",
-    "data-[state=closed]:animate-[tooltip-out_100ms_ease-in]"
-  ],
-  {
-    variants: {
-      type: {
-        default: [
-          "bg-tooltip-default-bg",
-          "text-tooltip-default-text"
-        ],
-        invert: [
-          "bg-tooltip-invert-bg",
-          "text-tooltip-invert-text",
-          "border border-tooltip-invert-border"
-        ]
-      }
-    },
-    defaultVariants: {
-      type: "default"
-    }
-  }
-);
-var TooltipProvider = TooltipPrimitive.Provider;
-var Tooltip = TooltipPrimitive.Root;
-var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React6.forwardRef(({ className, type, hasArrow = true, sideOffset = 4, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(tooltipContentVariants({ type, className })),
-    ...props,
-    children: [
-      children,
-      hasArrow && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        TooltipPrimitive.Arrow,
-        {
-          className: type === "default" ? "fill-tooltip-default-bg" : "fill-tooltip-invert-bg"
-        }
-      )
-    ]
-  }
-) }));
-TooltipContent.displayName = "TooltipContent";
-
 // src/components/ui/truncated-text.tsx
 var React7 = __toESM(require("react"));
 var TooltipPrimitive2 = __toESM(require("@radix-ui/react-tooltip"));