@l3mpire/ui 3.0.0 → 3.3.0

package/dist/index.mjs

@@ -15,9 +15,9 @@ function cn(...inputs) {
 }
 
 // src/components/ui/browser-tab.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Icon as Icon3, faXmarkOutline, faGripDotsVerticalSolid, faPlusSolid, faChevronDownSolid } from "@l3mpire/icons";
+import { Icon as Icon3, faXmarkOutline, faPenOutline, faGripDotsVerticalSolid, faPlusSolid, faChevronDownSolid } from "@l3mpire/icons";
 
 // src/components/ui/badge.tsx
 import * as React from "react";
@@ -44,6 +44,20 @@ var badgeVariants = cva(
         warning: "",
         neutral: ""
       },
+      // Categorical palette. Colors come from {variant, tone} compound variants below,
+      // so a tone combines with solid / light / outlined just like `type` does.
+      tone: {
+        indigo: "",
+        rose: "",
+        lime: "",
+        violet: "",
+        cyan: "",
+        orange: "",
+        emerald: "",
+        fuchsia: "",
+        amber: "",
+        slate: ""
+      },
       size: {
         sm: [
           "p-2xs gap-2xs",
@@ -80,22 +94,61 @@ var badgeVariants = 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 `type`.
     defaultVariants: {
-      variant: "solid",
-      type: "primary",
       size: "md"
     }
   }
 );
 var Badge = React.forwardRef(
-  ({ className, variant, type, size, icon, children, ...props }, ref) => {
+  ({ className, variant, type, tone, size, icon, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "span",
       {
         ref,
-        className: cn(badgeVariants({ variant, type, size }), className),
+        className: cn(
+          badgeVariants({
+            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
+          }),
+          className
+        ),
         ...props,
         children: [
           icon && /* @__PURE__ */ jsx(Icon, { icon, size: "xs" }),
@@ -363,17 +416,78 @@ var Button = React2.forwardRef(
 );
 Button.displayName = "Button";
 
+// src/components/ui/tooltip.tsx
+import * as React3 from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var tooltipContentVariants = cva3(
+  [
+    "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__ */ jsx3(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs3(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(tooltipContentVariants({ type, className })),
+    ...props,
+    children: [
+      children,
+      hasArrow && /* @__PURE__ */ jsx3(
+        TooltipPrimitive.Arrow,
+        {
+          className: type === "default" ? "fill-tooltip-default-bg" : "fill-tooltip-invert-bg"
+        }
+      )
+    ]
+  }
+) }));
+TooltipContent.displayName = "TooltipContent";
+
 // src/components/ui/browser-tab.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "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(() => {
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "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();
@@ -402,7 +516,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__ */ jsxs3(
+    const tab = /* @__PURE__ */ jsxs4(
       "div",
       {
         ref,
@@ -419,15 +533,15 @@ var BrowserTabItem = React3.forwardRef(
         ...dragProps,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs4(
             "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__ */ jsx3("div", { className: "shrink-0", children: /* @__PURE__ */ jsx3(
+                icon && /* @__PURE__ */ jsx4("div", { className: "shrink-0", children: /* @__PURE__ */ jsx4(
                   Icon3,
                   {
                     icon: showGrip ? faGripDotsVerticalSolid : icon,
@@ -437,7 +551,7 @@ var BrowserTabItem = React3.forwardRef(
                     )
                   }
                 ) }),
-                isEditing ? /* @__PURE__ */ jsx3(
+                isEditing ? /* @__PURE__ */ jsx4(
                   "input",
                   {
                     ref: inputRef,
@@ -456,7 +570,7 @@ var BrowserTabItem = React3.forwardRef(
                     ),
                     style: { width: `${Math.max(editValue.length + 1, 2)}ch` }
                   }
-                ) : /* @__PURE__ */ jsx3(
+                ) : /* @__PURE__ */ jsx4(
                   "span",
                   {
                     className: cn(
@@ -473,46 +587,86 @@ var BrowserTabItem = React3.forwardRef(
                     children: label
                   }
                 ),
-                badge && /* @__PURE__ */ jsx3(Badge, { variant: "light", type: "neutral", size: "sm", children: badge }),
-                onClose && /* @__PURE__ */ jsx3(
-                  "button",
+                badge && /* @__PURE__ */ jsx4(Badge, { variant: "light", type: "neutral", size: "sm", children: badge }),
+                !pinned && (isEditable || onClose) && /* @__PURE__ */ jsxs4(
+                  "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__ */ jsx3(Icon3, { icon: faXmarkOutline, size: "xs" })
+                    children: [
+                      isEditable && /* @__PURE__ */ jsx4(
+                        "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__ */ jsx4(Icon3, { icon: faPenOutline, size: "xs" })
+                        }
+                      ),
+                      onClose && /* @__PURE__ */ jsx4(
+                        "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__ */ jsx4(Icon3, { icon: faXmarkOutline, size: "xs" })
+                        }
+                      )
+                    ]
                   }
                 )
               ]
             }
           ),
-          isActive && /* @__PURE__ */ jsxs3(Fragment, { children: [
-            /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 left-[-1px] w-px h-[8px] bg-browser-tab-item-bg" }),
-            /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 right-[-1px] w-px h-[8px] bg-browser-tab-item-bg" }),
-            /* @__PURE__ */ jsxs3("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 left-[-8px] size-[8px]", children: [
-              /* @__PURE__ */ jsx3("span", { className: "absolute bottom-0 left-0 right-0 h-px bg-browser-tab-item-bg" }),
-              /* @__PURE__ */ jsx3("span", { className: "absolute inset-0 rounded-br-[8px] border-b border-r border-solid border-browser-tab-item-border" })
+          isActive && /* @__PURE__ */ jsxs4(Fragment, { children: [
+            /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 left-[-1px] w-px h-[8px] bg-browser-tab-item-bg" }),
+            /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 right-[-1px] w-px h-[8px] bg-browser-tab-item-bg" }),
+            /* @__PURE__ */ jsxs4("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 left-[-8px] size-[8px]", children: [
+              /* @__PURE__ */ jsx4("span", { className: "absolute bottom-0 left-0 right-0 h-px bg-browser-tab-item-bg" }),
+              /* @__PURE__ */ jsx4("span", { className: "absolute inset-0 rounded-br-[8px] border-b border-r border-solid border-browser-tab-item-border" })
             ] }),
-            /* @__PURE__ */ jsxs3("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 right-[-8px] size-[8px]", children: [
-              /* @__PURE__ */ jsx3("span", { className: "absolute bottom-0 left-0 right-0 h-px bg-browser-tab-item-bg" }),
-              /* @__PURE__ */ jsx3("span", { className: "absolute inset-0 rounded-bl-[8px] border-b border-l border-solid border-browser-tab-item-border" })
+            /* @__PURE__ */ jsxs4("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 right-[-8px] size-[8px]", children: [
+              /* @__PURE__ */ jsx4("span", { className: "absolute bottom-0 left-0 right-0 h-px bg-browser-tab-item-bg" }),
+              /* @__PURE__ */ jsx4("span", { className: "absolute inset-0 rounded-bl-[8px] border-b border-l border-solid border-browser-tab-item-border" })
             ] })
           ] })
         ]
       }
     );
+    if (pinned) {
+      return /* @__PURE__ */ jsx4(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs4(Tooltip, { children: [
+        /* @__PURE__ */ jsx4(TooltipTrigger, { asChild: true, children: tab }),
+        /* @__PURE__ */ jsx4(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 = () => {
@@ -540,12 +694,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 = {
@@ -579,7 +733,7 @@ var BrowserTab = React3.forwardRef(
         isActive: childProps.isActive
       };
     });
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4(
       "div",
       {
         ref,
@@ -589,15 +743,15 @@ var BrowserTab = React3.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs4(
             "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__ */ jsx3(BrowserTabContext.Provider, { value: { ...ctxBase, itemIndex: index }, children: child }, index)),
-                onAddTab && !hasOverflow && /* @__PURE__ */ jsx3(
+                childArray.map((child, index) => /* @__PURE__ */ jsx4(BrowserTabContext.Provider, { value: { ...ctxBase, itemIndex: index }, children: child }, index)),
+                onAddTab && !hasOverflow && /* @__PURE__ */ jsx4(
                   Button,
                   {
                     className: "ml-base",
@@ -613,10 +767,11 @@ var BrowserTab = React3.forwardRef(
               ]
             }
           ),
-          hasOverflow && /* @__PURE__ */ jsxs3(DropdownMenuPrimitive.Root, { children: [
-            /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+          hasOverflow && /* @__PURE__ */ jsxs4(DropdownMenuPrimitive.Root, { children: [
+            /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx4(
               Button,
               {
+                className: "mb-sm",
                 appearance: "ghost",
                 intent: "brand",
                 size: "sm",
@@ -625,7 +780,7 @@ var BrowserTab = React3.forwardRef(
                 "aria-label": "Show more tabs"
               }
             ) }),
-            /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
               DropdownMenuPrimitive.Content,
               {
                 sideOffset: 4,
@@ -637,7 +792,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__ */ jsxs3(
+                children: hiddenItems.map((item) => /* @__PURE__ */ jsxs4(
                   DropdownMenuPrimitive.Item,
                   {
                     className: cn(
@@ -650,7 +805,7 @@ var BrowserTab = React3.forwardRef(
                       }
                     },
                     children: [
-                      item.icon && /* @__PURE__ */ jsx3(
+                      item.icon && /* @__PURE__ */ jsx4(
                         Icon3,
                         {
                           icon: item.icon,
@@ -660,7 +815,7 @@ var BrowserTab = React3.forwardRef(
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsx3(
+                      /* @__PURE__ */ jsx4(
                         "span",
                         {
                           className: cn(
@@ -670,7 +825,7 @@ var BrowserTab = React3.forwardRef(
                           children: item.label
                         }
                       ),
-                      item.badge && /* @__PURE__ */ jsx3(Badge, { variant: "light", type: "neutral", size: "sm", children: item.badge })
+                      item.badge && /* @__PURE__ */ jsx4(Badge, { variant: "light", type: "neutral", size: "sm", children: item.badge })
                     ]
                   },
                   item.index
@@ -678,9 +833,10 @@ var BrowserTab = React3.forwardRef(
               }
             ) })
           ] }),
-          onAddTab && hasOverflow && /* @__PURE__ */ jsx3(
+          onAddTab && hasOverflow && /* @__PURE__ */ jsx4(
             Button,
             {
+              className: "mb-sm",
               appearance: "ghost",
               intent: "brand",
               size: "sm",
@@ -698,7 +854,7 @@ var BrowserTab = React3.forwardRef(
 BrowserTab.displayName = "BrowserTab";
 
 // src/components/ui/bulk-action.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import {
   Icon as Icon5,
   faXmarkOutline as faXmarkOutline2,
@@ -706,10 +862,10 @@ import {
 } from "@l3mpire/icons";
 
 // src/components/ui/dropdown-menu.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import * as DropdownMenuPrimitive2 from "@radix-ui/react-dropdown-menu";
 import { Icon as Icon4 } from "@l3mpire/icons";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "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";
@@ -722,13 +878,13 @@ var containerStyle = [
   "p-xs",
   "shadow-lg"
 ];
-var DropdownMenu = React4.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx4("div", { ref, className: cn(containerStyle, className), ...props, children })
+var DropdownMenu = React5.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx5("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__ */ jsx4(DropdownMenuPrimitive2.Portal, { children: /* @__PURE__ */ jsx4(
+var DropdownMenuContent = React5.forwardRef(({ className, sideOffset = 4, children, ...props }, ref) => /* @__PURE__ */ jsx5(DropdownMenuPrimitive2.Portal, { children: /* @__PURE__ */ jsx5(
   DropdownMenuPrimitive2.Content,
   {
     ref,
@@ -747,12 +903,12 @@ var DropdownMenuContent = React4.forwardRef(({ className, sideOffset = 4, childr
   }
 ) }));
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuList = React4.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx4("div", { ref, className: cn("flex flex-col", className), role: "listbox", ...props, children })
+var DropdownMenuList = React5.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx5("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,
@@ -767,7 +923,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']")) {
@@ -780,7 +936,7 @@ var DropdownMenuItem = React4.forwardRef(
       },
       [onClick]
     );
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5(
       "div",
       {
         ref,
@@ -797,7 +953,7 @@ var DropdownMenuItem = React4.forwardRef(
           children,
           avatar,
           flag,
-          icon && /* @__PURE__ */ jsx4(
+          icon && /* @__PURE__ */ jsx5(
             Icon4,
             {
               icon,
@@ -805,9 +961,9 @@ var DropdownMenuItem = React4.forwardRef(
               className: "shrink-0 text-dropdown-item-icon"
             }
           ),
-          /* @__PURE__ */ jsxs4("div", { className: "flex flex-1 items-center gap-sm min-w-0", children: [
-            /* @__PURE__ */ jsx4("span", { className: cn("truncate shrink-0", textSm, "text-dropdown-item-text"), children: label }),
-            description && /* @__PURE__ */ jsx4("span", { className: cn("truncate", textXs, "text-dropdown-item-secondary"), children: description })
+          /* @__PURE__ */ jsxs5("div", { className: "flex flex-1 items-center gap-sm min-w-0", children: [
+            /* @__PURE__ */ jsx5("span", { className: cn("truncate shrink-0", textSm, "text-dropdown-item-text"), children: label }),
+            description && /* @__PURE__ */ jsx5("span", { className: cn("truncate", textXs, "text-dropdown-item-secondary"), children: description })
           ] }),
           badge,
           action
@@ -817,7 +973,7 @@ var DropdownMenuItem = React4.forwardRef(
   }
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuRadixItem = React4.forwardRef(
+var DropdownMenuRadixItem = React5.forwardRef(
   ({
     className,
     icon,
@@ -829,7 +985,7 @@ var DropdownMenuRadixItem = React4.forwardRef(
     action,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs4(
+  }, ref) => /* @__PURE__ */ jsxs5(
     DropdownMenuPrimitive2.Item,
     {
       ref,
@@ -843,7 +999,7 @@ var DropdownMenuRadixItem = React4.forwardRef(
         children,
         avatar,
         flag,
-        icon && /* @__PURE__ */ jsx4(
+        icon && /* @__PURE__ */ jsx5(
           Icon4,
           {
             icon,
@@ -851,9 +1007,9 @@ var DropdownMenuRadixItem = React4.forwardRef(
             className: "shrink-0 text-dropdown-item-icon"
           }
         ),
-        /* @__PURE__ */ jsxs4("div", { className: "flex flex-1 items-center gap-sm min-w-0", children: [
-          /* @__PURE__ */ jsx4("span", { className: cn("truncate shrink-0", textSm, "text-dropdown-item-text"), children: label }),
-          description && /* @__PURE__ */ jsx4("span", { className: cn("truncate", textXs, "text-dropdown-item-secondary"), children: description })
+        /* @__PURE__ */ jsxs5("div", { className: "flex flex-1 items-center gap-sm min-w-0", children: [
+          /* @__PURE__ */ jsx5("span", { className: cn("truncate shrink-0", textSm, "text-dropdown-item-text"), children: label }),
+          description && /* @__PURE__ */ jsx5("span", { className: cn("truncate", textXs, "text-dropdown-item-secondary"), children: description })
         ] }),
         badge,
         action
@@ -862,7 +1018,7 @@ var DropdownMenuRadixItem = React4.forwardRef(
   )
 );
 DropdownMenuRadixItem.displayName = "DropdownMenuRadixItem";
-var DropdownMenuHeading = React4.forwardRef(({ className, action, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+var DropdownMenuHeading = React5.forwardRef(({ className, action, children, ...props }, ref) => /* @__PURE__ */ jsxs5(
   "div",
   {
     ref,
@@ -872,7 +1028,7 @@ var DropdownMenuHeading = React4.forwardRef(({ className, action, children, ...p
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx4("span", { className: cn("flex-1 truncate uppercase", textXsMedium, "text-dropdown-heading-text"), children }),
+      /* @__PURE__ */ jsx5("span", { className: cn("flex-1 truncate uppercase", textXsMedium, "text-dropdown-heading-text"), children }),
       action
     ]
   }
@@ -887,7 +1043,7 @@ var clearStyle = [
   "shadow-sm",
   "cursor-pointer"
 ];
-var DropdownMenuClear = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx4(
+var DropdownMenuClear = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx5(
   "button",
   {
     ref,
@@ -900,10 +1056,10 @@ var DropdownMenuClear = React4.forwardRef(({ className, children, ...props }, re
 DropdownMenuClear.displayName = "DropdownMenuClear";
 
 // src/components/ui/bulk-action.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var GAP_PX = 8;
 var MORE_BTN_FALLBACK = 36;
-var BulkAction = React5.forwardRef(
+var BulkAction = React6.forwardRef(
   ({
     count,
     onClear,
@@ -914,11 +1070,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;
@@ -958,7 +1114,7 @@ var BulkAction = React5.forwardRef(
     }, [actions]);
     const visibleItems = actions.slice(0, visibleCount);
     const overflowItems = actions.slice(visibleCount);
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         ref,
@@ -974,20 +1130,20 @@ var BulkAction = React5.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs5("span", { className: "text-sm font-regular leading-sm text-bulk-action-count whitespace-nowrap shrink-0", children: [
+          /* @__PURE__ */ jsxs6("span", { className: "text-sm font-regular leading-sm text-bulk-action-count whitespace-nowrap shrink-0", children: [
             count,
             " ",
             countLabel
           ] }),
-          /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsxs6(
             "div",
             {
               ref: slotRef,
               className: "relative flex flex-1 items-center gap-base min-w-0 overflow-hidden",
               children: [
-                visibleItems.map((item) => /* @__PURE__ */ jsx5(ActionButton, { item }, item.id)),
-                overflowItems.length > 0 && /* @__PURE__ */ jsxs5(DropdownMenuRoot, { children: [
-                  /* @__PURE__ */ jsx5(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(
+                visibleItems.map((item) => /* @__PURE__ */ jsx6(ActionButton, { item }, item.id)),
+                overflowItems.length > 0 && /* @__PURE__ */ jsxs6(DropdownMenuRoot, { children: [
+                  /* @__PURE__ */ jsx6(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx6(
                     Button,
                     {
                       type: "button",
@@ -999,7 +1155,7 @@ var BulkAction = React5.forwardRef(
                       "aria-label": "More actions"
                     }
                   ) }),
-                  /* @__PURE__ */ jsx5(DropdownMenuContent, { align: "end", side: "top", sideOffset: 8, children: overflowItems.map((item) => /* @__PURE__ */ jsx5(
+                  /* @__PURE__ */ jsx6(DropdownMenuContent, { align: "end", side: "top", sideOffset: 8, children: overflowItems.map((item) => /* @__PURE__ */ jsx6(
                     DropdownMenuItem,
                     {
                       icon: item.icon,
@@ -1009,29 +1165,29 @@ var BulkAction = React5.forwardRef(
                     item.id
                   )) })
                 ] }),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "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__ */ jsx5(ActionButton, { item, tabIndex: -1 }, `measure-${item.id}`))
+                    children: actions.map((item) => /* @__PURE__ */ jsx6(ActionButton, { item, tabIndex: -1 }, `measure-${item.id}`))
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "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__ */ jsx5(Icon5, { icon: faEllipsisOutline, size: "sm" })
+                    children: /* @__PURE__ */ jsx6(Icon5, { icon: faEllipsisOutline, size: "sm" })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             Button,
             {
               type: "button",
@@ -1051,7 +1207,7 @@ var BulkAction = React5.forwardRef(
   }
 );
 BulkAction.displayName = "BulkAction";
-var ActionButton = ({ item, tabIndex }) => /* @__PURE__ */ jsx5(
+var ActionButton = ({ item, tabIndex }) => /* @__PURE__ */ jsx6(
   Button,
   {
     type: "button",
@@ -1067,67 +1223,6 @@ var ActionButton = ({ item, tabIndex }) => /* @__PURE__ */ jsx5(
   }
 );
 
-// src/components/ui/tooltip.tsx
-import * as React6 from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var tooltipContentVariants = cva3(
-  [
-    "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__ */ jsx6(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs6(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(tooltipContentVariants({ type, className })),
-    ...props,
-    children: [
-      children,
-      hasArrow && /* @__PURE__ */ jsx6(
-        TooltipPrimitive.Arrow,
-        {
-          className: type === "default" ? "fill-tooltip-default-bg" : "fill-tooltip-invert-bg"
-        }
-      )
-    ]
-  }
-) }));
-TooltipContent.displayName = "TooltipContent";
-
 // src/components/ui/truncated-text.tsx
 import * as React7 from "react";
 import * as TooltipPrimitive2 from "@radix-ui/react-tooltip";
@@ -3173,6 +3268,20 @@ var tagVariants = cva12(
           "text-tag-neutral-text"
         ]
       },
+      // Categorical tones — soft style with a subtle border.
+      // When `tone` is set it overrides `variant` (handled in the component).
+      tone: {
+        indigo: "bg-tag-indigo-bg text-tag-indigo-text border border-tag-indigo-border",
+        rose: "bg-tag-rose-bg text-tag-rose-text border border-tag-rose-border",
+        lime: "bg-tag-lime-bg text-tag-lime-text border border-tag-lime-border",
+        violet: "bg-tag-violet-bg text-tag-violet-text border border-tag-violet-border",
+        cyan: "bg-tag-cyan-bg text-tag-cyan-text border border-tag-cyan-border",
+        orange: "bg-tag-orange-bg text-tag-orange-text border border-tag-orange-border",
+        emerald: "bg-tag-emerald-bg text-tag-emerald-text border border-tag-emerald-border",
+        fuchsia: "bg-tag-fuchsia-bg text-tag-fuchsia-text border border-tag-fuchsia-border",
+        amber: "bg-tag-amber-bg text-tag-amber-text border border-tag-amber-border",
+        slate: "bg-tag-slate-bg text-tag-slate-text border border-tag-slate-border"
+      },
       size: {
         sm: [
           "p-xs",
@@ -3186,21 +3295,29 @@ var tagVariants = cva12(
         ]
       }
     },
+    // variant default is applied in the component so `tone` can suppress it.
     defaultVariants: {
-      variant: "brand",
       size: "sm"
     }
   }
 );
 var iconSizeMap3 = { sm: "xs", md: "sm" };
 var Tag = React26.forwardRef(
-  ({ className, variant, size, icon, onClose, children, ...props }, ref) => {
+  ({ className, variant, tone, size, icon, onClose, children, ...props }, ref) => {
     const iconSize = iconSizeMap3[size ?? "sm"];
     return /* @__PURE__ */ jsxs24(
       "span",
       {
         ref,
-        className: cn(tagVariants({ variant, size }), className),
+        className: cn(
+          tagVariants({
+            // A categorical tone is self-contained and overrides variant.
+            variant: tone != null ? void 0 : variant ?? "brand",
+            tone,
+            size
+          }),
+          className
+        ),
         ...props,
         children: [
           icon && /* @__PURE__ */ jsx26(Icon17, { icon, size: iconSize, className: "shrink-0" }),
@@ -6348,10 +6465,11 @@ var SaveViewButton = React46.forwardRef(
     const sharedStyle = [
       "relative flex items-center justify-center",
       "min-h-[32px] max-h-[32px]",
-      "bg-gradient-to-t from-btn-solid-brand-bg-default from-[10%] to-btn-solid-brand-bg-gradient-to-default",
-      "border border-btn-solid-brand-border-default",
+      "bg-gradient-to-t from-btn-outlined-neutral-bg-default from-[10%] to-btn-outlined-neutral-bg-gradient-to-default",
+      "border border-btn-outlined-neutral-border-default",
       "shadow-sm cursor-pointer transition-colors",
-      "hover:from-btn-solid-brand-bg-hover hover:to-btn-solid-brand-bg-gradient-to-hover"
+      "hover:from-btn-outlined-neutral-bg-hover hover:from-[0%] hover:to-btn-outlined-neutral-bg-gradient-to-hover",
+      "hover:border-btn-outlined-neutral-border-hover"
     ];
     return /* @__PURE__ */ jsxs41(
       "div",
@@ -6360,7 +6478,7 @@ var SaveViewButton = React46.forwardRef(
         className: cn("flex items-center", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs41(
+          /* @__PURE__ */ jsx46(
             "button",
             {
               type: "button",
@@ -6370,33 +6488,28 @@ var SaveViewButton = React46.forwardRef(
                 "gap-sm px-base py-sm min-w-[80px]",
                 "rounded-l-md -mr-px"
               ),
-              children: [
-                /* @__PURE__ */ jsx46("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-btn-solid-brand-text-default", children: label }),
-                /* @__PURE__ */ jsx46("span", { className: "absolute inset-0 rounded-l-[9px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
-              ]
+              children: /* @__PURE__ */ jsx46("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-btn-outlined-neutral-text-default", children: label })
             }
           ),
-          /* @__PURE__ */ jsxs41(
+          /* @__PURE__ */ jsx46(
             "button",
             {
               type: "button",
               onClick: onDropdown,
+              "aria-label": "More save options",
               className: cn(
                 sharedStyle,
                 "p-sm",
                 "rounded-r-md -ml-px"
               ),
-              children: [
-                /* @__PURE__ */ jsx46(
-                  Icon28,
-                  {
-                    icon: faChevronDownOutline,
-                    size: "sm",
-                    className: "text-btn-solid-brand-text-default"
-                  }
-                ),
-                /* @__PURE__ */ jsx46("span", { className: "absolute inset-0 rounded-r-[9px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
-              ]
+              children: /* @__PURE__ */ jsx46(
+                Icon28,
+                {
+                  icon: faChevronDownOutline,
+                  size: "sm",
+                  className: "text-btn-outlined-neutral-text-default"
+                }
+              )
             }
           )
         ]