@mastra/playground-ui 7.0.0-beta.22 → 7.0.0-beta.24

package/dist/index.cjs.js

@@ -6,7 +6,7 @@ require('./index.css');const jsxRuntime = require('react/jsx-runtime');
 const react = require('@assistant-ui/react');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const tokens = require('./tokens.cjs.js');
+const spacings = require('./spacings-bCnRJAUT.cjs');
 const TooltipPrimitive = require('@radix-ui/react-tooltip');
 const reactMarkdown = require('@assistant-ui/react-markdown');
 require('@assistant-ui/react-markdown/styles/dot.css');
@@ -3116,19 +3116,21 @@ const mergeArrayProperties = (baseObject, mergeObject, key) => {
 };
 const extendTailwindMerge = (configExtension, ...createConfig) => typeof configExtension === 'function' ? createTailwindMerge(getDefaultConfig, configExtension, ...createConfig) : createTailwindMerge(() => mergeConfigs(getDefaultConfig(), configExtension), ...createConfig);
 
-const colorKeys = Object.keys({ ...tokens.Colors, ...tokens.BorderColors });
-const spacingKeys = Object.keys(tokens.Spacings);
-const fontSizeKeys = Object.keys(tokens.FontSizes);
-const lineHeightKeys = Object.keys(tokens.LineHeights);
-const borderRadiusKeys = Object.keys(tokens.BorderRadius);
-const sizeKeys = Object.keys(tokens.Sizes);
+const colorKeys = Object.keys({ ...spacings.Colors, ...spacings.BorderColors });
+const spacingKeys = Object.keys(spacings.Spacings);
+const fontSizeKeys = Object.keys(spacings.FontSizes);
+const lineHeightKeys = Object.keys(spacings.LineHeights);
+const borderRadiusKeys = Object.keys(spacings.BorderRadius);
+const sizeKeys = Object.keys(spacings.Sizes);
+const shadowKeys = Object.keys(spacings.Shadows).concat(Object.keys(spacings.Glows));
 const twMerge = extendTailwindMerge({
   extend: {
     theme: {
       color: colorKeys,
       spacing: spacingKeys,
       radius: borderRadiusKeys,
-      leading: lineHeightKeys
+      leading: lineHeightKeys,
+      shadow: shadowKeys
     },
     classGroups: {
       "font-size": [{ text: fontSizeKeys }],
@@ -3152,47 +3154,44 @@ const formElementSizes = {
   md: "h-form-md",
   lg: "h-form-lg"
 };
-const formElementFocus = "focus:outline focus:outline-1 focus:outline-accent1";
-const formElementFocusWithin = "focus-within:outline focus-within:outline-1 focus-within:outline-accent1 focus-within:-outline-offset-2";
+const formElementFocus = "focus:outline-none focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring transition-shadow duration-normal";
+const formElementFocusWithin = "focus-within:outline-none focus-within:ring-1 focus-within:ring-accent1 focus-within:shadow-focus-ring transition-shadow duration-normal";
 const formElementRadius = "rounded-md";
 
-const sizeClasses$1 = {
+const sizeClasses$2 = {
   sm: `${formElementSizes.sm} gap-0.5`,
   md: `${formElementSizes.md} gap-1`,
   lg: `${formElementSizes.lg} gap-2`
 };
 const variantClasses$2 = {
-  default: "bg-surface2 hover:bg-surface4 text-neutral3 hover:text-neutral6 disabled:opacity-50",
-  light: "bg-surface3 hover:bg-surface5 text-neutral6 disabled:opacity-50",
-  outline: "bg-transparent hover:bg-surface2 text-neutral3 hover:text-neutral6 disabled:opacity-50",
-  ghost: "bg-transparent border-transparent hover:bg-surface2 text-neutral3 hover:text-neutral6 disabled:opacity-50"
+  default: "bg-surface2 hover:bg-surface4 text-neutral3 hover:text-neutral6 disabled:opacity-50 disabled:cursor-not-allowed",
+  light: "bg-surface3 hover:bg-surface5 text-neutral6 disabled:opacity-50 disabled:cursor-not-allowed",
+  outline: "bg-transparent hover:bg-surface2 text-neutral3 hover:text-neutral6 disabled:opacity-50 disabled:cursor-not-allowed",
+  ghost: "bg-transparent border-transparent hover:bg-surface2 text-neutral3 hover:text-neutral6 disabled:opacity-50 disabled:cursor-not-allowed",
+  primary: "bg-accent1 hover:bg-accent1/90 text-surface1 font-medium hover:shadow-glow-accent1 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none"
 };
+const baseButtonStyles = "border border-border1 px-2 text-ui-md inline-flex items-center justify-center rounded-md transition-all duration-normal ease-out-custom active:scale-[0.98]";
 function buttonVariants(options) {
   const variant = options?.variant || "default";
   const size = options?.size || "md";
-  return cn(
-    "bg-surface2 border border-border1 px-2 text-ui-md inline-flex items-center justify-center rounded-md border",
-    formElementFocus,
-    variantClasses$2[variant],
-    sizeClasses$1[size]
-  );
+  return cn(baseButtonStyles, formElementFocus, variantClasses$2[variant], sizeClasses$2[size]);
 }
 const Button = React.forwardRef(
-  ({ className, as, size = "md", variant = "default", ...props }, ref) => {
+  ({ className, as, size = "md", variant = "default", disabled, ...props }, ref) => {
     const Component = as || "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
       Component,
       {
         ref,
+        disabled,
         className: cn(
-          "bg-surface2 border border-border1 px-2 text-ui-md inline-flex items-center justify-center rounded-md border",
+          baseButtonStyles,
           formElementFocus,
           variantClasses$2[variant],
-          sizeClasses$1[size],
-          className,
-          {
-            "cursor-not-allowed": props.disabled
-          }
+          sizeClasses$2[size],
+          // Remove active scale when disabled
+          disabled && "active:scale-100",
+          className
         ),
         ...props
       }
@@ -3247,17 +3246,36 @@ const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) =
   return /* @__PURE__ */ jsxRuntime.jsx(Root, { className: cn(variants[variant], font && fonts[font], className), ...props });
 };
 
-const sizeClasses = {
+const transitions = {
+  // For color changes (background, text, border)
+  colors: "transition-colors duration-normal ease-out-custom",
+  // For transform changes (scale, translate, rotate)
+  transform: "transition-transform duration-normal ease-out-custom",
+  // For all property changes
+  all: "transition-all duration-normal ease-out-custom",
+  // For opacity changes
+  opacity: "transition-opacity duration-normal ease-out-custom"};
+const focusRing = {
+  // Focus visible only (keyboard navigation)
+  visible: "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring"
+};
+
+const sizeClasses$1 = {
   sm: "h-avatar-sm w-avatar-sm",
   md: "h-avatar-md w-avatar-md",
   lg: "h-avatar-lg w-avatar-lg"
 };
-const Avatar = ({ src, name, size = "sm" }) => {
+const Avatar = ({ src, name, size = "sm", interactive = false }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: `${sizeClasses[size]} border border-border1 bg-surface3 shrink-0 overflow-hidden rounded-full flex items-center justify-center`,
-      children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-center", children: name[0].toUpperCase() })
+      className: cn(
+        sizeClasses$1[size],
+        "border border-border1 bg-surface3 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
+        transitions.all,
+        interactive && "cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm"
+      ),
+      children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-center text-neutral4", children: name[0].toUpperCase() })
     }
   );
 };
@@ -4322,21 +4340,33 @@ const AgentNetworkCoinIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", {
 ] });
 
 const variantClasses$1 = {
-  warning: "bg-yellow-900/20 border border-yellow-200 text-yellow-200",
-  destructive: "bg-red-900/20 border border-red-200 text-red-200",
-  info: "bg-blue-900/20 border border-blue-200 text-blue-200"
+  warning: "bg-accent6Darker border-accent6/30 text-accent6",
+  destructive: "bg-accent2Darker border-accent2/30 text-accent2",
+  info: "bg-accent5Darker border-accent5/30 text-accent5"
 };
 const variantIcons = {
   warning: lucideReact.TriangleAlert,
   destructive: lucideReact.AlertCircle,
   info: lucideReact.InfoIcon
 };
-const Alert = ({ children, variant = "destructive" }) => {
+const Alert = ({ children, variant = "destructive", className }) => {
   const Ico = variantIcons[variant];
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(variantClasses$1[variant], "p-2 rounded-md"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "mt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(Ico, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        variantClasses$1[variant],
+        "p-3 rounded-md border shadow-sm",
+        transitions.all,
+        "animate-in fade-in-0 slide-in-from-top-2 duration-200",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "mt-0.5 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Ico, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral4", children })
+      ] })
+    }
+  );
 };
 const AlertTitle = ({ children, as: As = "h5" }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: As, variant: "ui-md", className: "font-semibold", children });
@@ -4346,24 +4376,33 @@ const AlertDescription = ({ children, as: As = "p" }) => {
 };
 
 const variantClasses = {
+  default: "text-neutral3 bg-surface4",
+  success: "text-accent1 bg-accent1Dark",
+  error: "text-accent2 bg-accent2Dark",
+  info: "text-accent5 bg-accent5Dark",
+  warning: "text-accent6 bg-accent6Dark"
+};
+const iconClasses = {
   default: "text-neutral3",
   success: "text-accent1",
   error: "text-accent2",
-  info: "text-accent3"
+  info: "text-accent5",
+  warning: "text-accent6"
 };
 const Badge = ({ icon, variant = "default", className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
-        "font-mono bg-surface4 text-ui-sm gap-1 h-badge-default inline-flex items-center rounded-md shrink-0",
+        "font-mono text-ui-sm gap-1 h-badge-default inline-flex items-center rounded-md shrink-0",
+        transitions.colors,
         icon ? "pl-1 pr-1.5" : "px-1.5",
-        icon || variant === "default" ? "text-neutral5" : variantClasses[variant],
+        variant === "default" && icon ? "bg-surface4 text-neutral5" : variantClasses[variant],
         className
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: variantClasses[variant], children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon }) }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: iconClasses[variant], children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon }) }),
         children
       ]
     }
@@ -4466,20 +4505,34 @@ function CopyButton({
   iconSize = "default",
   className
 }) {
-  const { handleCopy } = useCopyToClipboard({
+  const [copied, setCopied] = React.useState(false);
+  const { handleCopy: originalHandleCopy } = useCopyToClipboard({
     text: content,
     copyMessage
   });
+  const handleCopy = () => {
+    originalHandleCopy();
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleCopy, type: "button", className, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Icon,
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
       {
-        className: "transition-colors hover:bg-surface4 rounded-lg text-neutral3 hover:text-neutral6",
-        size: iconSize,
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {})
+        onClick: handleCopy,
+        type: "button",
+        className: cn("rounded-lg p-1", transitions.all, focusRing.visible, "hover:bg-surface4", className),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Icon,
+          {
+            className: cn("text-neutral3", transitions.all, "hover:text-neutral6", copied && "text-accent1"),
+            size: iconSize,
+            children: copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {})
+          }
+        )
       }
-    ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltip })
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: copied ? "Copied!" : tooltip })
   ] });
 }
 
@@ -4582,7 +4635,9 @@ const DialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref)
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-overlay 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",
       className
     ),
     ...props
@@ -4596,16 +4651,35 @@ const DialogContent = React__namespace.forwardRef(({ className, children, ...pro
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border1 bg-surface3 py-6 shadow-lg duration-200 rounded-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-[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%]",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]",
+        "gap-4 border border-border1 bg-surface3 py-6 shadow-dialog rounded-lg",
+        "duration-slow",
+        "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-[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%]",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none data-[state=open]:bg-surface5 data-[state=open]:text-neutral3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          DialogPrimitive__namespace.Close,
+          {
+            className: cn(
+              "absolute right-4 top-4 rounded-md p-1",
+              "text-neutral3 hover:text-neutral6 hover:bg-surface4",
+              "transition-all duration-normal ease-out-custom",
+              "focus:outline-none focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring",
+              "disabled:pointer-events-none"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        )
       ]
     }
   )
@@ -5817,7 +5891,21 @@ function WorkflowRunProvider({
 }
 
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("animate-pulse rounded-md bg-surface4/50", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-md bg-surface4 relative overflow-hidden",
+        // Shimmer effect using pseudo-element
+        "before:absolute before:inset-0",
+        "before:translate-x-[-100%]",
+        "before:animate-[shimmer_2s_infinite]",
+        "before:bg-gradient-to-r before:from-transparent before:via-surface5/20 before:to-transparent",
+        className
+      ),
+      ...props
+    }
+  );
 }
 
 const lodashTitleCase = (str) => {
@@ -6215,11 +6303,40 @@ const constructNodesAndEdges = ({
 };
 
 const Collapsible = CollapsiblePrimitive__namespace.Root;
-const CollapsibleTrigger = (props) => {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.CollapsibleTrigger, { className: cn("-outline-offset-2", className), ...rest });
-};
-const CollapsibleContent = CollapsiblePrimitive__namespace.CollapsibleContent;
+const CollapsibleTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  CollapsiblePrimitive__namespace.CollapsibleTrigger,
+  {
+    ref,
+    className: cn(
+      "-outline-offset-2",
+      transitions.colors,
+      focusRing.visible,
+      "hover:text-neutral5",
+      "[&>svg]:transition-transform [&>svg]:duration-normal [&>svg]:ease-out-custom",
+      "[&[data-state=open]>svg]:rotate-90",
+      className
+    ),
+    ...props,
+    children
+  }
+));
+CollapsibleTrigger.displayName = CollapsiblePrimitive__namespace.CollapsibleTrigger.displayName;
+const CollapsibleContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  CollapsiblePrimitive__namespace.CollapsibleContent,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-1",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-1",
+      "duration-normal ease-out-custom",
+      className
+    ),
+    ...props,
+    children
+  }
+));
+CollapsibleContent.displayName = CollapsiblePrimitive__namespace.CollapsibleContent.displayName;
 
 const BADGE_COLORS = {
   sleep: "#A855F7",
@@ -6369,13 +6486,14 @@ const ScrollBar = React__namespace.forwardRef(({ className, orientation = "verti
     ref,
     orientation,
     className: cn(
-      "flex touch-none select-none transition-colors",
+      "flex touch-none select-none transition-all duration-normal ease-out-custom",
+      "opacity-0 hover:opacity-100 data-[state=visible]:opacity-100",
       orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
       orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px",
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border1" })
+    children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-neutral2 hover:bg-neutral3 transition-colors duration-normal" })
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
@@ -6512,16 +6630,22 @@ const cva = (base, config)=>(props)=>{
 
 const inputVariants = cva(
   cn(
-    "flex w-full text-neutral6 border bg-transparent shadow-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+    // Base styles with enhanced transitions
+    "flex w-full text-neutral6 border bg-transparent",
+    "transition-all duration-normal ease-out-custom",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    // Better placeholder styling
+    "placeholder:text-neutral2 placeholder:transition-opacity placeholder:duration-normal",
+    "focus:placeholder:opacity-70",
     formElementRadius,
     formElementFocus
   ),
   {
     variants: {
       variant: {
-        default: "border border-border1 placeholder:text-neutral3",
-        filled: "border bg-inputFill border-border1 placeholder:text-neutral3",
-        unstyled: "border-0 bg-transparent placeholder:text-neutral3"
+        default: "border border-border1 hover:border-border2",
+        filled: "border bg-surface2 border-border1 hover:border-border2",
+        unstyled: "border-0 bg-transparent shadow-none focus:shadow-none focus:ring-0"
       },
       size: {
         sm: `${formElementSizes.sm} px-2 text-ui-sm`,
@@ -6536,14 +6660,20 @@ const inputVariants = cva(
   }
 );
 const Input = React__namespace.forwardRef(
-  ({ className, size, testId, variant, type, ...props }, ref) => {
+  ({ className, size, testId, variant, type, error, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         type,
-        className: cn(className, inputVariants({ variant, size, className })),
+        className: cn(
+          inputVariants({ variant, size }),
+          // Error state styling
+          error && "border-error focus:ring-error focus:shadow-glow-accent2",
+          className
+        ),
         "data-testid": testId,
         ref,
+        "aria-invalid": error,
         ...props
       }
     );
@@ -6591,11 +6721,27 @@ const Checkbox = React__namespace.forwardRef(({ className, ...props }, ref) => /
   {
     ref,
     className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-neutral6 shadow disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral6 data-[state=checked]:text-surface2",
+      "peer h-4 w-4 shrink-0 rounded-sm border border-neutral3",
+      "shadow-sm",
+      transitions.all,
+      "hover:border-neutral5 hover:shadow-md",
+      formElementFocus,
+      "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-neutral3 disabled:hover:shadow-sm",
+      "data-[state=checked]:bg-accent1 data-[state=checked]:border-accent1 data-[state=checked]:text-surface1",
+      "data-[state=checked]:shadow-glow-accent1",
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { className: cn("flex items-center justify-center text-current"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) })
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      CheckboxPrimitive__namespace.Indicator,
+      {
+        className: cn(
+          "flex items-center justify-center text-current",
+          "data-[state=checked]:animate-in data-[state=checked]:zoom-in-50 data-[state=checked]:duration-150"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 stroke-[3]" })
+      }
+    )
   }
 ));
 Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
@@ -6698,13 +6844,15 @@ const SelectTrigger = React__namespace.forwardRef(
         "flex w-full items-center justify-between border border-border1 bg-transparent py-2 shadow-sm placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50",
         formElementRadius,
         formElementFocus,
+        transitions.all,
+        "hover:border-neutral2",
         selectTriggerSizeClasses[size],
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn("h-4 w-4 text-neutral3", transitions.colors) }) })
       ]
     }
   )
@@ -6739,12 +6887,17 @@ const SelectItem = React__namespace.forwardRef(({ className, children, ...props
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-neutral5 text-sm focus:bg-surface5 focus:text-neutral5 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-neutral5 text-sm",
+      transitions.colors,
+      "hover:bg-surface5 hover:text-neutral5",
+      "focus:bg-surface5 focus:text-neutral5",
+      "data-[state=checked]:bg-accent1Dark data-[state=checked]:text-accent1",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-accent1" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
     ]
   }
@@ -6925,7 +7078,13 @@ function SearchField({ onReset, ...props }) {
       {
         type: "button",
         onClick: onReset,
-        className: cn("absolute top-1/2 right-2 -translate-y-1/2 p-1", "[&:hover>svg]:text-neutral5"),
+        className: cn(
+          "absolute top-1/2 right-2 -translate-y-1/2 p-1 rounded",
+          transitions.all,
+          "hover:bg-surface4",
+          "[&>svg]:transition-colors [&>svg]:duration-normal",
+          "[&:hover>svg]:text-neutral5"
+        ),
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "text-neutral3 w-[1rem] h-[1rem]" })
       }
     )
@@ -7979,11 +8138,26 @@ const RadioGroupItem = React__namespace.forwardRef(({ className, ...props }, ref
     {
       ref,
       className: cn(
-        "aspect-square h-4 w-4 rounded-full border border-neutral6 text-neutral6 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square h-4 w-4 rounded-full border border-neutral3 text-neutral6",
+        "shadow-sm",
+        transitions.all,
+        "hover:border-neutral5 hover:shadow-md",
+        formElementFocus,
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-neutral3 disabled:hover:shadow-sm",
+        "data-[state=checked]:border-accent1 data-[state=checked]:shadow-glow-accent1",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        RadioGroupPrimitive__namespace.Indicator,
+        {
+          className: cn(
+            "flex items-center justify-center",
+            "data-[state=checked]:animate-in data-[state=checked]:zoom-in-50 data-[state=checked]:duration-150"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2 w-2 fill-accent1 text-accent1" })
+        }
+      )
     }
   );
 });
@@ -9132,11 +9306,29 @@ const Slider = React__namespace.forwardRef(({ className, ...props }, ref) => /*
   SliderPrimitive__namespace.Root,
   {
     ref,
-    className: cn("relative flex w-full touch-none select-none items-center", className),
+    className: cn("relative flex w-full touch-none select-none items-center group", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-neutral6/20", children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full bg-neutral6/50" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Thumb, { className: "block h-4 w-4 rounded-full border border-neutral6/50 bg-white shadow transition-colors disabled:pointer-events-none disabled:opacity-50" })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SliderPrimitive__namespace.Track,
+        {
+          className: cn("relative h-1.5 w-full grow overflow-hidden rounded-full bg-neutral2", transitions.colors),
+          children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: cn("absolute h-full bg-accent1", transitions.all) })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SliderPrimitive__namespace.Thumb,
+        {
+          className: cn(
+            "block h-4 w-4 rounded-full border-2 border-accent1 bg-white shadow-md",
+            "transition-all duration-normal ease-out-custom",
+            formElementFocus,
+            "hover:scale-110 hover:shadow-lg",
+            "active:scale-95",
+            "disabled:pointer-events-none disabled:opacity-50"
+          )
+        }
+      )
     ]
   }
 ));
@@ -9601,20 +9793,31 @@ const WorkflowRunDetail = ({
   }
 };
 
-const EmptyState = ({
+function EmptyState({
   iconSlot,
   titleSlot,
   descriptionSlot,
   actionSlot,
-  as: Component = "div"
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-[340px] flex-col items-center justify-center text-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-auto [&>svg]:w-[126px]", children: iconSlot }),
-    /* @__PURE__ */ jsxRuntime.jsx(Component, { className: "text-neutral6 pt-8 font-serif text-header-xl font-semibold", children: titleSlot }),
-    /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-lg", className: "text-neutral3 pb-8", children: descriptionSlot }),
-    actionSlot
-  ] });
-};
+  className,
+  as: HeadingTag = "h3"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center text-center py-10 px-6",
+        "transition-opacity duration-normal ease-out-custom",
+        className
+      ),
+      children: [
+        iconSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: iconSlot }),
+        /* @__PURE__ */ jsxRuntime.jsx(HeadingTag, { className: "font-medium text-neutral5 text-ui-md", children: titleSlot }),
+        descriptionSlot && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-neutral3 text-ui-sm max-w-md", children: descriptionSlot }),
+        actionSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-5", children: actionSlot })
+      ]
+    }
+  );
+}
 
 const rowSize = {
   default: "[&>tbody>tr]:h-table-row",
@@ -9624,14 +9827,14 @@ const Table = ({ className, children, size = "default", style }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("table", { className: cn("w-full", rowSize[size], className), style, children });
 };
 const Thead = ({ className, children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: cn("h-table-header border-b border-border1 bg-surface2", className), children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: cn("h-table-header border-b border-border1 bg-surface2/80", className), children }) });
 };
 const Th = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "th",
     {
       className: cn(
-        "text-neutral3 text-ui-sm h-full whitespace-nowrap text-left font-normal uppercase first:pl-3 last:pr-3",
+        "text-neutral2 text-ui-xs h-full whitespace-nowrap text-left font-medium uppercase tracking-wide first:pl-3 last:pr-3",
         className
       ),
       ...props,
@@ -9653,7 +9856,12 @@ const Row = React.forwardRef(
       "tr",
       {
         className: cn(
-          "border-b border-border1 hover:bg-surface3 focus:bg-surface3 -outline-offset-2",
+          "border-b border-border1",
+          // Smooth hover transition
+          "transition-colors duration-normal ease-out-custom",
+          "hover:bg-surface3",
+          // Focus state
+          "focus:bg-surface3 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-accent1/50",
           selected && "bg-surface4",
           onClick && "cursor-pointer",
           className
@@ -9966,10 +10174,12 @@ const Searchbar = ({ onSearch, label, placeholder, debounceMs = 300, size = "md"
         "border border-border1 flex w-full items-center gap-2 overflow-hidden pl-2 pr-1",
         formElementRadius,
         formElementFocusWithin,
+        transitions.all,
+        "hover:border-neutral2",
         searchbarSizeClasses[size]
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "text-neutral3 h-4 w-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: cn("text-neutral3 h-4 w-4", transitions.colors) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "sr-only", children: label }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -9979,7 +10189,7 @@ const Searchbar = ({ onSearch, label, placeholder, debounceMs = 300, size = "md"
               type: "text",
               placeholder,
               className: cn(
-                "bg-surface2 text-ui-md placeholder:text-icon-3 block w-full px-2 outline-none",
+                "bg-transparent text-ui-md placeholder:text-neutral3 block w-full px-2 outline-none",
                 searchbarSizeClasses[size]
               ),
               name: id,
@@ -10092,16 +10302,18 @@ const TabList = ({ children, variant = "default", className }) => {
     RadixTabs__namespace.List,
     {
       className: cn(
-        "flex items-center",
+        "flex items-center relative",
         {
           // variant: default
           "text-ui-lg": variant === "default",
           "[&>button]:py-2 [&>button]:px-6 [&>button]:font-normal [&>button]:text-neutral3 [&>button]:flex-1 [&>button]:border-b [&>button]:border-border1": variant === "default",
-          "[&>button[data-state=active]]:text-neutral5 [&>button[data-state=active]]:transition-colors [&>button[data-state=active]]:duration-200 [&>button[data-state=active]]:border-neutral3": variant === "default",
+          [`[&>button]:${transitions.colors} [&>button]:hover:text-neutral4`]: variant === "default",
+          "[&>button[data-state=active]]:text-neutral5 [&>button[data-state=active]]:border-accent1": variant === "default",
           // variant: buttons
           "border border-border1 flex justify-stretch rounded-md overflow-hidden text-ui-md min-h-[2.5rem]": variant === "buttons",
-          "[&>button]:flex-1 [&>button]:py-2 [&>button]:px-4 [&>button]:text-neutral3": variant === "buttons",
-          "[&>button[data-state=active]]:text-neutral5 [&>button[data-state=active]]:bg-surface4": variant === "buttons"
+          [`[&>button]:flex-1 [&>button]:py-2 [&>button]:px-4 [&>button]:text-neutral3 [&>button]:${transitions.all}`]: variant === "buttons",
+          "[&>button]:hover:text-neutral4 [&>button]:hover:bg-surface3": variant === "buttons",
+          "[&>button[data-state=active]]:text-neutral5 [&>button[data-state=active]]:bg-surface4 [&>button[data-state=active]]:shadow-inner": variant === "buttons"
         },
         className
       ),
@@ -10116,7 +10328,11 @@ const Tab = ({ children, value, onClick, onClose, className }) => {
     {
       value,
       className: cn(
-        "text-xs p-3 text-neutral3 data-[state=active]:text-neutral5 data-[state=active]:border-b-2 whitespace-nowrap flex-shrink-0 flex items-center justify-center gap-1.5",
+        "text-xs p-3 text-neutral3 whitespace-nowrap flex-shrink-0 flex items-center justify-center gap-1.5",
+        transitions.all,
+        focusRing.visible,
+        "hover:text-neutral4",
+        "data-[state=active]:text-neutral5 data-[state=active]:border-b-2 data-[state=active]:border-accent1",
         className
       ),
       onClick,
@@ -10129,7 +10345,7 @@ const Tab = ({ children, value, onClick, onClose, className }) => {
               e.stopPropagation();
               onClose();
             },
-            className: "p-0.5 hover:bg-surface3 rounded transition-colors",
+            className: cn("p-0.5 hover:bg-surface4 rounded", transitions.colors, "hover:text-neutral5"),
             "aria-label": "Close tab",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
           }
@@ -10145,7 +10361,10 @@ const TabContent = ({ children, value, className }) => {
     {
       value,
       className: cn(
-        "grid py-3 overflow-y-auto ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:none",
+        "grid py-3 overflow-y-auto ring-offset-background",
+        focusRing.visible,
+        "data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:duration-200",
+        "data-[state=inactive]:animate-out data-[state=inactive]:fade-out-0 data-[state=inactive]:duration-150",
         className
       ),
       children
@@ -10197,21 +10416,27 @@ const TracingRunOptions = () => {
   ] });
 };
 
-function Spinner({ color = "#fff", className }) {
+const sizeClasses = {
+  sm: "w-4 h-4",
+  md: "w-6 h-6",
+  lg: "w-8 h-8"
+};
+function Spinner({ color, className, size = "md" }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
-      className: cn("animate-spin duration-700", className),
+      className: cn("animate-spin", sizeClasses[size], className),
+      style: { animationDuration: "800ms", animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)" },
       xmlns: "http://www.w3.org/2000/svg",
       width: "24",
       height: "24",
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
-      strokeWidth: "2",
+      strokeWidth: "2.5",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", stroke: color })
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", stroke: color || "currentColor", className: "text-accent1" })
     }
   );
 }
@@ -10546,59 +10771,84 @@ function Combobox({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "p-0 w-fit", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col overflow-hidden rounded-md bg-surface3 text-neutral5", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b px-3 py-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref: inputRef,
-            className: "flex h-8 w-full rounded-md bg-transparent py-1 text-sm placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50 outline-none",
-            placeholder: searchPlaceholder,
-            value: search,
-            onChange: (e) => setSearch(e.target.value),
-            onKeyDown: handleKeyDown,
-            role: "combobox",
-            "aria-autocomplete": "list",
-            "aria-controls": "combobox-options",
-            "aria-expanded": open
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ref: listRef,
-          id: "combobox-options",
-          role: "listbox",
-          className: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1",
-          children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm", children: emptyText }) : filteredOptions.map((option, index) => {
-            const isSelected = value === option.value;
-            const isHighlighted = index === highlightedIndex;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "p-0 w-fit", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex h-full w-full flex-col overflow-hidden rounded-md bg-surface3 text-neutral5",
+          "shadow-elevated",
+          "animate-in fade-in-0 zoom-in-95 duration-150"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center border-b border-border1 px-3 py-2", transitions.colors), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: cn("mr-2 h-4 w-4 shrink-0 text-neutral3", transitions.colors) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
               {
-                role: "option",
-                "aria-selected": isSelected,
+                ref: inputRef,
                 className: cn(
-                  "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm transition-colors",
-                  "hover:bg-surface5 hover:text-neutral5",
-                  isHighlighted && "bg-surface5 text-neutral5",
-                  isSelected && !isHighlighted && "bg-surface5/50"
+                  "flex h-8 w-full rounded-md bg-transparent py-1 text-sm",
+                  "placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50",
+                  "outline-none",
+                  transitions.colors
                 ),
-                onClick: () => handleSelect(option.value),
-                onMouseEnter: () => setHighlightedIndex(index),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("mr-2 h-4 w-4", isSelected ? "opacity-100" : "opacity-0") }),
-                  option.label
-                ]
-              },
-              option.value
-            );
-          })
-        }
-      )
-    ] }) })
+                placeholder: searchPlaceholder,
+                value: search,
+                onChange: (e) => setSearch(e.target.value),
+                onKeyDown: handleKeyDown,
+                role: "combobox",
+                "aria-autocomplete": "list",
+                "aria-controls": "combobox-options",
+                "aria-expanded": open
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: listRef,
+              id: "combobox-options",
+              role: "listbox",
+              className: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1",
+              children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm text-neutral3", children: emptyText }) : filteredOptions.map((option, index) => {
+                const isSelected = value === option.value;
+                const isHighlighted = index === highlightedIndex;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    role: "option",
+                    "aria-selected": isSelected,
+                    className: cn(
+                      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm",
+                      transitions.colors,
+                      "hover:bg-surface5 hover:text-neutral5",
+                      isHighlighted && "bg-surface5 text-neutral5",
+                      isSelected && !isHighlighted && "bg-accent1Dark text-accent1"
+                    ),
+                    onClick: () => handleSelect(option.value),
+                    onMouseEnter: () => setHighlightedIndex(index),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        lucideReact.Check,
+                        {
+                          className: cn(
+                            "mr-2 h-4 w-4",
+                            transitions.opacity,
+                            isSelected ? "opacity-100 text-accent1" : "opacity-0"
+                          )
+                        }
+                      ),
+                      option.label
+                    ]
+                  },
+                  option.value
+                );
+              })
+            }
+          )
+        ]
+      }
+    ) })
   ] });
 }
 
@@ -10805,7 +11055,7 @@ const LoadingBadge = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BadgeWrapper,
     {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { color: tokens.Colors.neutral3 }),
+      icon: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { color: spacings.Colors.neutral3 }),
       title: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "ml-2 w-12 h-2" }),
       collapsible: false
     }
@@ -14120,22 +14370,19 @@ function EntryListEntry({ entry, isSelected, onClick, children, columns }) {
       className: cn(
         "border-t text-neutral5 border-border1 last:border-b-0 text-ui-md",
         "[&:last-child>button]:rounded-b-lg",
+        transitions.colors,
         {
-          "bg-surface5": isSelected
+          "bg-accent1Dark": isSelected
         }
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: handleClick,
-          className: cn(
-            "grid w-full px-6 gap-6 text-left items-center min-h-12",
-            "focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_1px_rgba(24,251,111,.75)]",
-            {
-              // hover effect only not for skeleton and selected
-              "hover:bg-surface4": entry && !isSelected
-            }
-          ),
+          className: cn("grid w-full px-6 gap-6 text-left items-center min-h-12", transitions.colors, focusRing.visible, {
+            // hover effect only not for skeleton and selected
+            "hover:bg-surface4": entry && !isSelected
+          }),
           style: { gridTemplateColumns: getColumnTemplate(columns) },
           disabled: !entry,
           children
@@ -14379,18 +14626,28 @@ function SideDialogRoot({
 }) {
   const isConfirmation = variant === "confirmation";
   return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
-    !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: cn("bg-black top-0 bottom-0 right-0 left-0 fixed z-50 opacity-40") }),
+    !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(
+      DialogPrimitive__namespace.Overlay,
+      {
+        className: cn(
+          "bg-overlay backdrop-blur-sm top-0 bottom-0 right-0 left-0 fixed z-50",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-200",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-150"
+        )
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       DialogPrimitive__namespace.Content,
       {
         className: cn(
-          "fixed top-0 bottom-0 right-0 border-l border-border2 z-50 bg-surface2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ",
+          "fixed top-0 bottom-0 right-0 border-l border-border2 z-50 bg-surface2",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-right-1/4 data-[state=closed]:duration-200",
           {
             "w-[75vw] 2xl:w-[65vw] 4xl:w-[55vw]": level === 1,
             "w-[70vw] 2xl:w-[59vw] 4xl:w-[48vw]": level === 2,
             "w-[65vw] 2xl:w-[53vw] 4xl:w-[41vw]": level === 3,
-            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-right-1/4 shadow-[-3rem_0_2rem_0_rgba(0,0,0,0.75)]": !isConfirmation,
-            "bg-surface2/70": isConfirmation
+            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-right-1/4 data-[state=open]:duration-300 shadow-dialog": !isConfirmation,
+            "bg-surface2/70 backdrop-blur-sm": isConfirmation
           },
           className
         ),
@@ -14403,8 +14660,9 @@ function SideDialogRoot({
             "button",
             {
               className: cn(
-                "flex appearance-none items-center justify-center rounded-bl-lg h-[3.5rem] w-[3.5rem] absolute top-0 left-[-3.5rem] bg-surface2 text-neutral4 border-l border-b border-border2",
-                "hover:surface5 hover:text-neutral5"
+                "flex appearance-none items-center justify-center rounded-bl-lg h-[3.5rem] w-[3.5rem] absolute top-0 left-[-3.5rem] bg-surface2 text-neutral3 border-l border-b border-border2",
+                transitions.all,
+                "hover:bg-surface4 hover:text-neutral5"
               ),
               "aria-label": "Close",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRightIcon, {})
@@ -15629,7 +15887,13 @@ const Switch = React__namespace.forwardRef(({ className, ...props }, ref) => /*
   SwitchPrimitives__namespace.Root,
   {
     className: cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent4 data-[state=unchecked]:bg-input",
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
+      transitions.all,
+      formElementFocus,
+      "hover:brightness-110",
+      "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:brightness-100",
+      "data-[state=checked]:bg-accent1 data-[state=checked]:shadow-glow-accent1",
+      "data-[state=unchecked]:bg-neutral2",
       className
     ),
     ...props,
@@ -15638,7 +15902,10 @@ const Switch = React__namespace.forwardRef(({ className, ...props }, ref) => /*
       SwitchPrimitives__namespace.Thumb,
       {
         className: cn(
-          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-md",
+          "transition-all duration-normal ease-out-custom",
+          "data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+          "data-[state=checked]:shadow-lg"
         )
       }
     )
@@ -16073,7 +16340,11 @@ const ThreadLink = ({ children, as: Component = "a", href, className, prefetch,
       href,
       prefetch,
       to,
-      className: cn("text-ui-sm flex h-full w-full flex-col justify-center font-medium cursor-pointer", className),
+      className: cn(
+        "text-ui-sm flex h-full w-full flex-col justify-center font-medium cursor-pointer",
+        transitions.colors,
+        className
+      ),
       children
     }
   );
@@ -16086,8 +16357,10 @@ const ThreadItem = ({ children, isActive, className }) => {
     "li",
     {
       className: cn(
-        "border-b border-border1 hover:bg-surface3 group flex h-[54px] items-center justify-between gap-2 px-3 py-2",
-        isActive && "bg-surface4",
+        "border-b border-border1 group flex h-[54px] items-center justify-between gap-2 px-3 py-2",
+        transitions.colors,
+        "hover:bg-surface3",
+        isActive && "bg-accent1Dark",
         className
       ),
       children
@@ -16098,9 +16371,15 @@ const ThreadDeleteButton = ({ onClick }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
-      className: "shrink-0 border-none bg-transparent opacity-0 transition-all group-focus-within:opacity-100 group-hover:opacity-100",
+      variant: "ghost",
+      className: cn(
+        "shrink-0 opacity-0",
+        transitions.all,
+        "group-focus-within:opacity-100 group-hover:opacity-100",
+        "hover:bg-surface4 hover:text-accent2"
+      ),
       onClick,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-label": "delete thread", className: "text-neutral3" }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-label": "delete thread", className: "text-neutral3 hover:text-accent2 transition-colors" }) })
     }
   );
 };
@@ -16119,7 +16398,9 @@ const AlertDialogOverlay = React__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Overlay,
   {
     className: cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-overlay backdrop-blur-sm",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-200",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-150",
       className
     ),
     ...props,
@@ -16134,7 +16415,9 @@ const AlertDialogContent = React__namespace.forwardRef(({ className, ...props },
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border1 bg-surface3 p-6 shadow-lg duration-200 rounded-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-[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%]",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border1 bg-surface3 p-6 shadow-dialog rounded-md",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=open]:duration-200",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=closed]:duration-150",
         className
       ),
       ...props
@@ -17926,30 +18209,53 @@ function ProcessStepListItem({ stepId, step, isActive, position }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn("grid gap-6 grid-cols-[1fr_auto] py-3 px-4 rounded-lg", {
-        "border border-dashed border-gray-500": isActive
+      className: cn("grid gap-6 grid-cols-[1fr_auto] py-3 px-4 rounded-lg", transitions.all, {
+        "border border-dashed border-neutral2 bg-surface3": isActive
       }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-md text-neutral5 min-w-6 flex justify-end", children: [
-            position,
-            "."
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: cn("text-ui-md min-w-6 flex justify-end", transitions.colors, {
+                "text-neutral5": isActive || step.status === "success",
+                "text-neutral3": !isActive && step.status !== "success"
+              }),
+              children: [
+                position,
+                "."
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-ui-md text-neutral5", children: formatStepTitle(stepId) }),
-            step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md -mt-0.5", children: step.description })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h4",
+              {
+                className: cn("text-ui-md", transitions.colors, {
+                  "text-neutral5": isActive || step.status === "success",
+                  "text-neutral3": !isActive && step.status !== "success"
+                }),
+                children: formatStepTitle(stepId)
+              }
+            ),
+            step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md text-neutral2 -mt-0.5", children: step.description })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn("w-[1.75rem] h-[1.75rem] rounded-full flex items-center justify-center self-center", {
-              "border border-gray-500 border-dashed": step.status === "pending",
-              "[&>svg]:text-white [&>svg]:w-[1rem] [&>svg]:h-[1rem]": step.status !== "running",
-              "w-[1.75rem] h-[1.75rem]": step.status === "running",
-              "bg-green-900": step.status === "success",
-              "bg-red-900": step.status === "failed"
-            }),
+            className: cn(
+              "w-[1.75rem] h-[1.75rem] rounded-full flex items-center justify-center self-center",
+              transitions.all,
+              {
+                "border border-neutral2 border-dashed": step.status === "pending",
+                "[&>svg]:text-white [&>svg]:w-[1rem] [&>svg]:h-[1rem]": step.status !== "running",
+                "w-[1.75rem] h-[1.75rem]": step.status === "running",
+                "bg-accent1Dark shadow-glow-accent1": step.status === "success",
+                "bg-accent2Dark shadow-glow-accent2": step.status === "failed",
+                "scale-110": step.status === "success" || step.status === "failed"
+              }
+            ),
             children: getStatusIcon(step.status)
           }
         )
@@ -17979,19 +18285,20 @@ function ProcessStepProgressBar({ steps }) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: cn("flex justify-end items-center relative h-[2rem] ", {
-            "bg-green-900": step.status === "success" && steps?.[idx - 1]?.status === "success"
+          className: cn("flex justify-end items-center relative h-[2rem]", transitions.colors, {
+            "bg-accent1Dark": step.status === "success" && steps?.[idx - 1]?.status === "success"
           }),
           children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
                 "w-[2rem] h-[2rem] rounded-full flex items-center justify-center self-center absolute right-0 translate-x-[50%] bg-surface3 z-10 text-neutral3 font-bold text-ui-sm",
+                transitions.all,
                 {
-                  "border border-gray-500 border-dashed": step.status === "pending",
-                  "[&>svg]:text-surface4 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]": step.status !== "running",
-                  "bg-green-900 text-white": step.status === "success",
-                  "bg-red-900 text-white": step.status === "failed"
+                  "border border-neutral2 border-dashed": step.status === "pending",
+                  "[&>svg]:text-surface1 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]": step.status !== "running",
+                  "bg-accent1Dark text-white shadow-glow-accent1 scale-110": step.status === "success",
+                  "bg-accent2Dark text-white shadow-glow-accent2 scale-110": step.status === "failed"
                 }
               ),
               children: step.status === "running" ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : idx + 1
@@ -18001,7 +18308,7 @@ function ProcessStepProgressBar({ steps }) {
         step.id
       );
     }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-neutral3 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-xs text-neutral3 text-center", transitions.colors), children: [
       completedSteps,
       " of ",
       totalSteps,
@@ -19874,46 +20181,67 @@ function Notification({
   type = "info"
 }) {
   const [localIsVisible, setLocalIsVisible] = React.useState(isVisible);
+  const [isAnimatingOut, setIsAnimatingOut] = React.useState(false);
   React.useEffect(() => {
     if (dismissible && autoDismiss && isVisible) {
       const timer = setTimeout(() => {
-        setLocalIsVisible(false);
+        handleDismiss();
       }, dismissTime);
       return () => clearTimeout(timer);
     }
-  }, [autoDismiss, isVisible, dismissTime]);
+  }, [autoDismiss, isVisible, dismissTime, dismissible]);
   React.useEffect(() => {
-    setLocalIsVisible(isVisible);
+    if (isVisible) {
+      setIsAnimatingOut(false);
+      setLocalIsVisible(true);
+    }
   }, [isVisible]);
+  const handleDismiss = () => {
+    setIsAnimatingOut(true);
+    setTimeout(() => {
+      setLocalIsVisible(false);
+      setIsAnimatingOut(false);
+    }, 200);
+  };
   if (!localIsVisible) return null;
+  const typeStyles = {
+    info: "bg-surface4 border-border1",
+    error: "bg-accent2Darker border-accent2/30",
+    success: "bg-accent1Darker border-accent1/30",
+    warning: "bg-accent6Darker border-accent6/30"
+  };
+  const iconStyles = {
+    info: "text-accent5",
+    error: "text-accent2",
+    success: "text-accent1",
+    warning: "text-accent6"
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
-        "grid grid-cols-[1fr_auto] gap-2 rounded-lg bg-white/5 p-6 py-4 text-ui-md text-neutral3 items-center",
-        {
-          "bg-red-900/10 border border-red-900": type === "error"
-        },
+        "grid grid-cols-[auto_1fr_auto] gap-3 rounded-lg border p-4 text-ui-md text-neutral4 items-start",
+        "shadow-card",
+        transitions.all,
+        isAnimatingOut ? "animate-out fade-out-0 slide-out-to-right-2 duration-200" : "animate-in fade-in-0 slide-in-from-right-2 duration-300",
+        typeStyles[type],
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-shrink-0 mt-0.5", iconStyles[type]), children: type === "error" || type === "warning" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangleIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 items-start min-w-0", children }),
+        dismissible && /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
           {
-            className: cn(
-              "flex gap-2 items-start",
-              "[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-70 [&>svg]:translate-y-0.5",
-              {
-                "[&>svg]:text-red-400": type === "error"
-              }
-            ),
-            children
+            variant: "ghost",
+            className: cn("h-6 w-6 p-0 flex-shrink-0", transitions.colors, "hover:bg-surface5"),
+            onClick: handleDismiss,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: "Dismiss" })
+            ]
           }
-        ),
-        dismissible && /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: () => setLocalIsVisible(false), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: "Dismiss" })
-        ] })
+        )
       ]
     }
   );
@@ -20019,7 +20347,8 @@ const Crumb = ({ className, as, isCurrent, action, ...props }) => {
           "aria-current": isCurrent ? "page" : void 0,
           className: cn(
             "text-ui-md leading-ui-md flex items-center gap-2",
-            isCurrent ? "text-white" : "text-neutral3",
+            transitions.colors,
+            isCurrent ? "text-white" : "text-neutral3 hover:text-neutral5",
             className
           ),
           ...props
@@ -20027,7 +20356,7 @@ const Crumb = ({ className, as, isCurrent, action, ...props }) => {
       ),
       action
     ] }),
-    !isCurrent && /* @__PURE__ */ jsxRuntime.jsx("li", { role: "separator", className: "flex h-full items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "text-neutral3", children: /* @__PURE__ */ jsxRuntime.jsx(SlashIcon, {}) }) })
+    !isCurrent && /* @__PURE__ */ jsxRuntime.jsx("li", { role: "separator", className: "flex h-full items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: cn("text-neutral2", transitions.colors), children: /* @__PURE__ */ jsxRuntime.jsx(SlashIcon, {}) }) })
   ] });
 };
 
@@ -20096,12 +20425,24 @@ const LogoWithoutText = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns
 ) });
 
 const themeClasses = {
-  light: "bg-gray-100 border-gray-300 text-gray-700",
-  dark: "bg-surface4 border-border1 text-neutral6"
+  light: "bg-gray-100 border-gray-300 text-gray-700 shadow-[0_1px_0_rgba(0,0,0,0.1)]",
+  dark: "bg-surface4 border-border1 text-neutral5 shadow-[0_1px_0_rgba(0,0,0,0.3)]"
 };
-const Kbd = ({ children, theme = "dark" }) => {
+const Kbd = ({ children, theme = "dark", className }) => {
   const themeClass = themeClasses[theme];
-  return /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: cn("border rounded-md px-1 py-0.5 font-mono", themeClass), children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "kbd",
+    {
+      className: cn(
+        "border rounded-md px-1.5 py-0.5 font-mono text-ui-sm inline-flex items-center justify-center min-w-[1.5rem]",
+        transitions.transform,
+        "active:scale-95 active:shadow-none",
+        themeClass,
+        className
+      ),
+      children
+    }
+  );
 };
 
 const SIDEBAR_COOKIE_NAME = "sidebar:state";
@@ -20171,6 +20512,8 @@ function MainSidebarRoot({ children, className }) {
     {
       className: cn(
         "flex flex-col h-full px-4 relative overflow-y-auto",
+        // Smooth width transition for collapse/expand
+        "transition-all duration-slow ease-out-custom",
         {
           "lg:min-w-52 xl:min-w-56 2xl:min-w-60 3xl:min-w-64 4xl:min-w-72": !isCollapsed
         },
@@ -20187,8 +20530,10 @@ function MainSidebarRoot({ children, className }) {
                 onClick: toggleSidebar,
                 className: cn(
                   "inline-flex w-auto items-center text-neutral3 h-8 px-3 rounded-md ml-auto",
-                  "hover:bg-surface4",
-                  "[&_svg]:w-[1rem] [&_svg]:h-[1rem] [&_svg]:text-neutral3",
+                  "hover:bg-surface4 hover:text-neutral5",
+                  "transition-all duration-normal ease-out-custom",
+                  "focus:outline-none focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring",
+                  "[&_svg]:w-[1rem] [&_svg]:h-[1rem] [&_svg]:text-neutral3 [&_svg]:transition-transform [&_svg]:duration-normal",
                   {
                     "ml-auto": !isCollapsed
                   }
@@ -20256,15 +20601,23 @@ function MainSidebarNavLink({
     "li",
     {
       className: cn(
-        "flex",
+        "flex relative",
+        // Base link styles with smooth transitions
         "[&>a]:flex [&>a]:items-center [&>a]:min-h-8 [&>a]:gap-2.5 [&>a]:text-ui-md [&>a]:text-neutral3 [&>a]:py-1.5 [&>a]:px-3 [&>a]:w-full [&>a]:rounded-lg [&>a]:justify-center",
-        "[&_svg]:w-4 [&_svg]:h-4 [&_svg]:text-neutral3/60",
+        "[&>a]:transition-all [&>a]:duration-normal [&>a]:ease-out-custom",
+        // Icon styles with transitions
+        "[&_svg]:w-4 [&_svg]:h-4 [&_svg]:text-neutral3/60 [&_svg]:transition-colors [&_svg]:duration-normal",
+        // Hover states
         "[&>a:hover]:bg-surface4 [&>a:hover]:text-neutral5 [&>a:hover_svg]:text-neutral3",
         {
+          // Active state with left indicator bar
           "[&>a]:text-neutral5 [&>a]:bg-surface3": isActive,
           "[&_svg]:text-neutral5": isActive,
+          // Active indicator bar
+          "before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-5 before:bg-accent1 before:rounded-r-full before:transition-all before:duration-normal": isActive && !isCollapsed,
           "[&>a]:justify-start": !isCollapsed,
           "[&_svg]:text-neutral3": isCollapsed,
+          // Featured variant
           "[&>a]:rounded-md [&>a]:my-2 [&>a]:bg-accent1/75 [&>a:hover]:bg-accent1/85 [&>a]:text-black [&>a:hover]:text-black": isFeatured,
           "[&_svg]:text-black/75 [&>a:hover_svg]:text-black": isFeatured
         },