@mastra/playground-ui 27.0.0-alpha.7 → 27.0.0

package/dist/index.es.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { X, CheckIcon as CheckIcon$1, CopyIcon, Wand2, ShieldX, LogIn, Check, ChevronsUpDown, Search, ChevronDown, Circle, TriangleAlertIcon, SearchIcon, XIcon, TrendingUpIcon, TrendingDownIcon, EllipsisVerticalIcon, SaveIcon, Trash2Icon, ListFilterPlusIcon, ArrowLeftIcon, FilterIcon, PlusIcon, ChevronLeftIcon, ChevronRightIcon, Monitor, Sun, Moon, CalendarIcon, CircleAlertIcon, InfoIcon as InfoIcon$1, ArrowRightIcon, Type, Hash, ToggleLeft, AlignLeft, Braces, List, MenuIcon, PanelRightIcon, KeyboardIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, ChevronsRightIcon, ClockIcon, BanIcon, FileTextIcon, OctagonAlertIcon, LightbulbIcon, ChevronRight, Folder, File, AlertTriangle, CircleXIcon, ExpandIcon, ExternalLinkIcon, Link2Icon, Ban, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, Text, TextSearch, EqualNot, Equal, Plus, Component, ArrowRight, ArrowLeft, LogsIcon as LogsIcon$1, EyeIcon, GaugeIcon, BrainIcon, ChevronUpIcon, ChevronDownIcon, ChevronsUpIcon, ChevronsDownIcon, FoldVerticalIcon, UnfoldVerticalIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, CircleGaugeIcon, FileInputIcon, FileOutputIcon, BracesIcon, CircleSlashIcon } from 'lucide-react';
+import { Shadows, Glows, BorderColors, Colors, Sizes, FontSizes, LineHeights, BorderRadius, Spacings } from './tokens.es.js';
+import './index.css';export { Animations } from './tokens.es.js';
 import * as React from 'react';
 import React__default, { useState, useRef, useCallback, createContext, useContext, useSyncExternalStore, useMemo, useEffect, useLayoutEffect, forwardRef, useId, Suspense, Fragment as Fragment$1 } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { Shadows, Glows, BorderColors, Colors, Sizes, FontSizes, LineHeights, BorderRadius, Spacings } from './tokens.es.js';
-import './index.css';export { Animations } from './tokens.es.js';
 import { jsonLanguage, json } from '@codemirror/lang-json';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
@@ -15,16 +14,18 @@ import { tags } from '@lezer/highlight';
 import { draculaInit } from '@uiw/codemirror-theme-dracula';
 import ReactCodeMirror from '@uiw/react-codemirror';
 import { autocompletion } from '@codemirror/autocomplete';
+import { CheckIcon as CheckIcon$1, CopyIcon, Wand2, ShieldX, LogIn, Check, ChevronsUpDown, Search, X, ChevronDown, Circle, TriangleAlertIcon, SearchIcon, XIcon, TrendingUpIcon, TrendingDownIcon, EllipsisVerticalIcon, SaveIcon, Trash2Icon, LockIcon, ListFilterPlusIcon, ArrowLeftIcon, FilterIcon, PlusIcon, ChevronLeftIcon, ChevronRightIcon, Monitor, Sun, Moon, CalendarIcon, CircleAlertIcon, InfoIcon as InfoIcon$1, ArrowRightIcon, Type, Hash, ToggleLeft, AlignLeft, Braces, List, MenuIcon, PanelRightIcon, KeyboardIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, ChevronsRightIcon, ClockIcon, BanIcon, FileTextIcon, OctagonAlertIcon, LightbulbIcon, ChevronRight, Folder, File, AlertTriangle, CircleXIcon, ExpandIcon, ExternalLinkIcon, Link2Icon, Ban, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, Text, TextSearch, EqualNot, Equal, Plus, Component, ArrowRight, ArrowLeft, LogsIcon as LogsIcon$1, EyeIcon, GaugeIcon, BrainIcon, ChevronUpIcon, ChevronDownIcon, ChevronsUpIcon, ChevronsDownIcon, FoldVerticalIcon, UnfoldVerticalIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, CircleGaugeIcon, FileInputIcon, FileOutputIcon, BracesIcon, CircleSlashIcon } from 'lucide-react';
 import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
 import { useMastraClient } from '@mastra/react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
+export { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
 import { Command as Command$1 } from 'cmdk';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import * as RadixTabs from '@radix-ui/react-tabs';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Portal, SubContent } from '@radix-ui/react-dropdown-menu';
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
@@ -34,7 +35,7 @@ import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
 import { useDebouncedCallback } from 'use-debounce';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
@@ -57,47 +58,6 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
-const cx = clsx;
-const cva = (base, config)=>(props)=>{
-        var _config_compoundVariants;
-        if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-        const { variants, defaultVariants } = config;
-        const getVariantClassNames = Object.keys(variants).map((variant)=>{
-            const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-            const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-            if (variantProp === null) return null;
-            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-            return variants[variant][variantKey];
-        });
-        const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{
-            let [key, value] = param;
-            if (value === undefined) {
-                return acc;
-            }
-            acc[key] = value;
-            return acc;
-        }, {});
-        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{
-            let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
-            return Object.entries(compoundVariantOptions).every((param)=>{
-                let [key, value] = param;
-                return Array.isArray(value) ? value.includes({
-                    ...defaultVariants,
-                    ...propsWithoutUndefined
-                }[key]) : ({
-                    ...defaultVariants,
-                    ...propsWithoutUndefined
-                })[key] === value;
-            }) ? [
-                ...acc,
-                cvClass,
-                cvClassName
-            ] : acc;
-        }, []);
-        return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-    };
-
 /**
  * Concatenates two arrays faster than the array spread operator.
  */
@@ -3382,6 +3342,185 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+const variants = {
+  // UI text sizes
+  "ui-xs": "text-ui-xs leading-ui-xs",
+  "ui-sm": "text-ui-sm leading-ui-sm",
+  "ui-smd": "text-ui-smd leading-ui-smd",
+  "ui-md": "text-ui-md leading-ui-md",
+  "ui-lg": "text-ui-lg leading-ui-lg",
+  // Header sizes
+  "header-xs": "text-header-xs leading-header-xs",
+  "header-sm": "text-header-sm leading-header-sm",
+  "header-md": "text-header-md leading-header-md",
+  "header-lg": "text-header-lg leading-header-lg",
+  "header-xl": "text-header-xl leading-header-xl"
+};
+const fonts = {
+  mono: "font-mono"
+};
+const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
+  return /* @__PURE__ */ jsx(Root, { className: cn(variants[variant], font && fonts[font], className), ...props });
+};
+
+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",
+  // For shadow changes
+  shadow: "transition-shadow duration-normal ease-out-custom",
+  // For slower transitions (sidebar collapse, etc.)
+  allSlow: "transition-all duration-slow ease-out-custom"
+};
+const hoverEffects = {
+  // Subtle scale effect for buttons and cards
+  scale: "hover:scale-[1.02] active:scale-[0.98]",
+  // Even more subtle scale for active state only
+  scaleSubtle: "active:scale-[0.98]",
+  // Brightness increase
+  brightness: "hover:brightness-110",
+  // Background lift
+  lift: "hover:bg-surface4"
+};
+const focusRing = {
+  // Standard focus ring with glow
+  default: "focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring",
+  // Focus ring without glow
+  simple: "focus:outline-hidden focus:ring-1 focus:ring-accent1",
+  // Focus visible only (keyboard navigation)
+  visible: "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring"
+};
+
+const sizeClasses$4 = {
+  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", interactive = false }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        sizeClasses$4[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__ */ jsx("img", { src, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsx(Txt, { variant: "ui-md", className: "text-center text-neutral4", children: name[0].toUpperCase() })
+    }
+  );
+};
+
+const sizes = {
+  sm: "[&>svg]:h-icon-sm [&>svg]:w-icon-sm",
+  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default",
+  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg"
+};
+const Icon = ({ children, className, size = "default", ...props }) => {
+  return /* @__PURE__ */ jsx("span", { className: cn("block", sizes[size], className), ...props, children });
+};
+
+const variantClasses = {
+  default: "text-neutral5 bg-surface4 border-border1",
+  success: "text-notice-success-fg bg-notice-success/20 border-notice-success/20",
+  error: "text-notice-destructive-fg bg-notice-destructive/20 border-notice-destructive/20",
+  info: "text-notice-info-fg bg-notice-info/20 border-notice-info/20",
+  warning: "text-notice-warning-fg bg-notice-warning/20 border-notice-warning/20"
+};
+const Badge = ({ icon, variant = "default", className, children, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "font-mono text-ui-sm gap-1 h-badge-default inline-flex items-center rounded-full border shrink-0",
+        transitions.colors,
+        icon ? "pl-2 pr-2.5" : "px-2.5",
+        variantClasses[variant],
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx(Icon, { size: "sm", children: icon }),
+        children
+      ]
+    }
+  );
+};
+
+const SlashIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M5.25684 12.6387L10.4003 3.36133H11.7432L6.5997 12.6387H5.25684Z", fill: "currentColor" }) });
+
+const Breadcrumb = ({ children, label }) => {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsx("ol", { className: "gap-0.5 flex items-center", children }) });
+};
+const Crumb = ({ className, as, isCurrent, action, ...props }) => {
+  const Root = as || "span";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("li", { className: "flex h-full shrink-0 items-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        Root,
+        {
+          "aria-current": isCurrent ? "page" : void 0,
+          className: cn(
+            "text-ui-md leading-ui-md flex items-center gap-2",
+            transitions.colors,
+            isCurrent ? "text-white" : "text-neutral3 hover:text-neutral5",
+            className
+          ),
+          ...props
+        }
+      ),
+      action
+    ] }),
+    !isCurrent && /* @__PURE__ */ jsx("li", { role: "separator", className: "flex h-full items-center", children: /* @__PURE__ */ jsx(Icon, { className: cn("text-neutral2", transitions.colors), children: /* @__PURE__ */ jsx(SlashIcon, {}) }) })
+  ] });
+};
+
+const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config)=>(props)=>{
+        var _config_compoundVariants;
+        if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+        const { variants, defaultVariants } = config;
+        const getVariantClassNames = Object.keys(variants).map((variant)=>{
+            const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+            const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+            if (variantProp === null) return null;
+            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+            return variants[variant][variantKey];
+        });
+        const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{
+            let [key, value] = param;
+            if (value === undefined) {
+                return acc;
+            }
+            acc[key] = value;
+            return acc;
+        }, {});
+        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{
+            let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+            return Object.entries(compoundVariantOptions).every((param)=>{
+                let [key, value] = param;
+                return Array.isArray(value) ? value.includes({
+                    ...defaultVariants,
+                    ...propsWithoutUndefined
+                }[key]) : ({
+                    ...defaultVariants,
+                    ...propsWithoutUndefined
+                })[key] === value;
+            }) ? [
+                ...acc,
+                cvClass,
+                cvClassName
+            ] : acc;
+        }, []);
+        return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+    };
+
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
@@ -3403,15 +3542,6 @@ const TooltipContent = React.forwardRef(({ className, sideOffset = 4, children,
 ) }));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-const sizes = {
-  sm: "[&>svg]:h-icon-sm [&>svg]:w-icon-sm",
-  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default",
-  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg"
-};
-const Icon = ({ children, className, size = "default", ...props }) => {
-  return /* @__PURE__ */ jsx("span", { className: cn("block", sizes[size], className), ...props, children });
-};
-
 const formElementSizes = {
   sm: "h-form-sm",
   md: "h-form-md",
@@ -3444,7 +3574,7 @@ const buttonVariants = cva(
         default: "bg-surface3 border border-border1 hover:bg-surface5 hover:text-neutral6 active:bg-surface6 text-neutral6",
         primary: "bg-surface4 border border-border2 hover:bg-surface5 hover:text-neutral6 active:bg-surface6 text-neutral6",
         cta: "bg-accent1 border border-transparent hover:bg-accent1/90 hover:shadow-glow-accent1 disabled:hover:shadow-none text-surface1 font-medium",
-        ghost: "bg-transparent border border-transparent hover:bg-surface4 hover:text-neutral6 active:bg-surface5 text-neutral4",
+        ghost: "bg-transparent border border-transparent hover:bg-surface3 hover:text-neutral6 active:bg-surface4 text-neutral4",
         outline: "bg-transparent border border-border1 hover:bg-surface3 hover:text-neutral6 active:bg-surface4 text-neutral5",
         link: "inline-flex justify-start rounded-none h-auto px-0 bg-transparent text-neutral3 hover:text-neutral4 gap-1 [&>svg]:mx-0 w-auto [&>svg]:opacity-70"
       },
@@ -3529,189 +3659,6 @@ const ButtonWithTooltip = React__default.forwardRef(
 );
 ButtonWithTooltip.displayName = "ButtonWithTooltip";
 
-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",
-  // For shadow changes
-  shadow: "transition-shadow duration-normal ease-out-custom",
-  // For slower transitions (sidebar collapse, etc.)
-  allSlow: "transition-all duration-slow ease-out-custom"
-};
-const hoverEffects = {
-  // Subtle scale effect for buttons and cards
-  scale: "hover:scale-[1.02] active:scale-[0.98]",
-  // Even more subtle scale for active state only
-  scaleSubtle: "active:scale-[0.98]",
-  // Brightness increase
-  brightness: "hover:brightness-110",
-  // Background lift
-  lift: "hover:bg-surface4"
-};
-const focusRing = {
-  // Standard focus ring with glow
-  default: "focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring",
-  // Focus ring without glow
-  simple: "focus:outline-hidden focus:ring-1 focus:ring-accent1",
-  // Focus visible only (keyboard navigation)
-  visible: "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring"
-};
-
-const Threads = ({ children }) => {
-  return /* @__PURE__ */ jsx("nav", { className: "min-h-full overflow-hidden", children });
-};
-const ThreadLink = ({ children, as: Component = "a", href, className, prefetch, to }) => {
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      href,
-      prefetch,
-      to,
-      className: cn(
-        "text-ui-sm flex h-full w-full flex-col justify-center font-medium cursor-pointer",
-        transitions.colors,
-        className
-      ),
-      children
-    }
-  );
-};
-const ThreadList = ({ children }) => {
-  return /* @__PURE__ */ jsx("ol", { "data-testid": "thread-list", children });
-};
-const ThreadItem = ({ children, isActive, className }) => {
-  return /* @__PURE__ */ jsx(
-    "li",
-    {
-      className: cn(
-        "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
-    }
-  );
-};
-const ThreadDeleteButton = ({ onClick }) => {
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      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__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(X, { "aria-label": "delete thread", className: "text-neutral3 hover:text-accent2 transition-colors" }) })
-    }
-  );
-};
-
-const variants = {
-  // UI text sizes
-  "ui-xs": "text-ui-xs leading-ui-xs",
-  "ui-sm": "text-ui-sm leading-ui-sm",
-  "ui-smd": "text-ui-smd leading-ui-smd",
-  "ui-md": "text-ui-md leading-ui-md",
-  "ui-lg": "text-ui-lg leading-ui-lg",
-  // Header sizes
-  "header-xs": "text-header-xs leading-header-xs",
-  "header-sm": "text-header-sm leading-header-sm",
-  "header-md": "text-header-md leading-header-md",
-  "header-lg": "text-header-lg leading-header-lg",
-  "header-xl": "text-header-xl leading-header-xl"
-};
-const fonts = {
-  mono: "font-mono"
-};
-const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
-  return /* @__PURE__ */ jsx(Root, { className: cn(variants[variant], font && fonts[font], className), ...props });
-};
-
-const sizeClasses$4 = {
-  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", interactive = false }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        sizeClasses$4[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__ */ jsx("img", { src, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsx(Txt, { variant: "ui-md", className: "text-center text-neutral4", children: name[0].toUpperCase() })
-    }
-  );
-};
-
-const variantClasses = {
-  default: "text-neutral5 bg-surface4 border-border1",
-  success: "text-notice-success-fg bg-notice-success/20 border-notice-success/20",
-  error: "text-notice-destructive-fg bg-notice-destructive/20 border-notice-destructive/20",
-  info: "text-notice-info-fg bg-notice-info/20 border-notice-info/20",
-  warning: "text-notice-warning-fg bg-notice-warning/20 border-notice-warning/20"
-};
-const Badge = ({ icon, variant = "default", className, children, ...props }) => {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "font-mono text-ui-sm gap-1 h-badge-default inline-flex items-center rounded-full border shrink-0",
-        transitions.colors,
-        icon ? "pl-2 pr-2.5" : "px-2.5",
-        variantClasses[variant],
-        className
-      ),
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsx(Icon, { size: "sm", children: icon }),
-        children
-      ]
-    }
-  );
-};
-
-const SlashIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M5.25684 12.6387L10.4003 3.36133H11.7432L6.5997 12.6387H5.25684Z", fill: "currentColor" }) });
-
-const Breadcrumb = ({ children, label }) => {
-  return /* @__PURE__ */ jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsx("ol", { className: "gap-0.5 flex items-center", children }) });
-};
-const Crumb = ({ className, as, isCurrent, action, ...props }) => {
-  const Root = as || "span";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("li", { className: "flex h-full shrink-0 items-center gap-1", children: [
-      /* @__PURE__ */ jsx(
-        Root,
-        {
-          "aria-current": isCurrent ? "page" : void 0,
-          className: cn(
-            "text-ui-md leading-ui-md flex items-center gap-2",
-            transitions.colors,
-            isCurrent ? "text-white" : "text-neutral3 hover:text-neutral5",
-            className
-          ),
-          ...props
-        }
-      ),
-      action
-    ] }),
-    !isCurrent && /* @__PURE__ */ jsx("li", { role: "separator", className: "flex h-full items-center", children: /* @__PURE__ */ jsx(Icon, { className: cn("text-neutral2", transitions.colors), children: /* @__PURE__ */ jsx(SlashIcon, {}) }) })
-  ] });
-};
-
 function flattenSchemaToVariables(schema, maxDepth = 5) {
   if (!schema?.properties) {
     return [];
@@ -6043,16 +5990,29 @@ CollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.display
 const comboboxStyles = {
   /** Root wrapper */
   root: "flex flex-col gap-1.5",
-  /** Trigger — form input look, sized to mirror SelectTrigger. */
+  /** Trigger base — shared layout/typography for all variants. */
   trigger: cn(
-    "inline-flex w-full min-w-32 select-none items-center justify-between gap-1.5 whitespace-nowrap",
-    "rounded-lg border border-border1 bg-transparent px-2.5 text-ui-smd leading-ui-sm text-neutral4",
+    "inline-flex w-full min-w-32 select-none items-center justify-between gap-1.5 whitespace-nowrap cursor-pointer",
+    "rounded-lg border bg-transparent px-2.5 text-ui-smd leading-ui-sm text-neutral4",
     "outline-none transition-colors duration-normal ease-out-custom",
-    "hover:bg-surface3 hover:text-neutral6 hover:border-border2 active:bg-surface4",
-    "focus:outline-none focus-visible:outline-none focus-visible:border-border2",
-    "data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2",
+    "focus:outline-none focus-visible:outline-none",
     "disabled:cursor-not-allowed disabled:opacity-50"
   ),
+  /** Variant: default — bordered form input look. */
+  triggerDefault: cn(
+    "border-border1",
+    "hover:bg-surface2 hover:text-neutral6 hover:border-border2 active:bg-surface3",
+    "focus-visible:border-border2",
+    "data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2"
+  ),
+  /** Variant: ghost — borderless, hover-only surface. */
+  triggerGhost: cn(
+    "border-transparent",
+    "hover:bg-surface2 hover:text-neutral6 active:bg-surface3",
+    "data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6"
+  ),
+  /** Variant: link — text-only trigger. */
+  triggerLink: cn("border-transparent px-0", "hover:text-neutral6", "data-[popup-open]:text-neutral6"),
   /** Trigger with error state */
   triggerError: "border-accent2 hover:border-accent2 focus-visible:border-accent2",
   /** Chevron icon in trigger */
@@ -6061,7 +6021,7 @@ const comboboxStyles = {
   placeholder: "text-neutral3",
   /** Popup container — concentric with rounded-xl + p-1 (8px items inside 12px container). */
   popup: cn(
-    "min-w-(--anchor-width) w-max max-w-[500px] rounded-xl border border-border1 bg-surface3 text-neutral4",
+    "min-w-(--anchor-width) w-max max-w-(--available-width) rounded-xl border border-border1 bg-surface3 text-neutral4",
     "shadow-dialog",
     "origin-(--transform-origin)",
     "transition-[transform,scale,opacity] duration-150 ease-out",
@@ -6071,9 +6031,9 @@ const comboboxStyles = {
   /** Positioner */
   positioner: "z-50 pointer-events-auto",
   /** Search input container — borderless top section, hairline divider below. */
-  searchContainer: cn("flex items-center border-b border-border1 px-2.5 py-2", transitions.colors),
+  searchContainer: cn("flex items-center border-b border-border1 px-2.5 py-1.5", transitions.colors),
   /** Search icon */
-  searchIcon: cn("mr-2 h-4 w-4 shrink-0 text-neutral3", transitions.colors),
+  searchIcon: cn("mr-2 h-3.5 w-3.5 shrink-0 text-neutral3", transitions.colors),
   /** Search input */
   searchInput: cn(
     "flex h-7 w-full rounded-md bg-transparent py-1 text-ui-smd leading-ui-sm text-neutral6",
@@ -6082,25 +6042,37 @@ const comboboxStyles = {
     transitions.colors
   ),
   /** Empty state */
-  empty: "not-empty:block hidden py-6 text-center text-ui-smd text-neutral3",
+  empty: "not-empty:block hidden py-4 text-center text-ui-smd text-neutral3",
   /** Options list */
   list: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1",
-  /** Option item base — rounded-lg (8px) sits concentrically inside rounded-xl + p-1. */
+  /** Option item base — rounded-md sits concentrically inside rounded-xl + p-1. */
   item: cn(
-    "relative flex cursor-pointer select-none items-center gap-2.5 rounded-lg px-2 py-1.5",
+    "group/item relative flex cursor-pointer select-none items-center gap-2 rounded-md",
+    "pl-2.5 pr-2 py-1.5 min-h-8",
     "text-ui-smd leading-ui-sm text-neutral4",
     "outline-none focus:outline-none focus-visible:outline-none",
     transitions.colors,
-    "data-highlighted:bg-surface4 data-highlighted:text-neutral6"
+    "data-highlighted:bg-surface4 data-highlighted:text-neutral6",
+    "data-selected:text-neutral6"
   ),
-  /** Option item with selected state (single select) — quiet emphasis, no accent fill. */
-  itemSelected: "data-selected:text-neutral6",
-  /** Check indicator container */
-  checkContainer: "flex h-4 w-4 shrink-0 items-center justify-center",
+  /** Multi-select item — keeps the left checkbox slot, no right indicator. */
+  itemMulti: cn(
+    "relative flex cursor-pointer select-none items-center gap-2.5 rounded-md",
+    "pl-2 pr-2.5 py-1.5 min-h-8",
+    "text-ui-smd leading-ui-sm text-neutral4",
+    "outline-none focus:outline-none focus-visible:outline-none",
+    transitions.colors,
+    "data-highlighted:bg-surface4 data-highlighted:text-neutral6",
+    "data-selected:text-neutral6"
+  ),
+  /** Right-aligned slot grouping end content + selection check. */
+  itemRightSlot: "ml-auto flex items-center gap-2 shrink-0",
+  /** Check indicator container — inline, fixed 16x16, shown only when item is selected. */
+  checkContainer: "flex h-4 w-4 shrink-0 items-center justify-center text-accent1",
   /** Check icon (single select) */
-  checkIcon: cn("h-4 w-4 text-neutral6", transitions.opacity),
+  checkIcon: "h-3.5 w-3.5",
   /** Checkbox container (multi select) */
-  checkbox: "flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border",
+  checkbox: "flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border",
   /** Checkbox selected state */
   checkboxSelected: "bg-accent1 border-accent1",
   /** Checkbox unselected state */
@@ -6115,12 +6087,17 @@ const comboboxStyles = {
   optionLabel: "truncate",
   /** Option description */
   optionDescription: "text-ui-sm text-neutral3 truncate",
-  /** Option end slot */
-  optionEnd: "ml-auto",
+  /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */
+  optionEnd: "ml-auto flex items-center shrink-0",
   /** Error message */
   error: "text-ui-sm text-accent2"
 };
 
+const triggerVariantStyles = {
+  default: comboboxStyles.triggerDefault,
+  ghost: comboboxStyles.triggerGhost,
+  link: comboboxStyles.triggerLink
+};
 function Combobox({
   options,
   value,
@@ -6130,6 +6107,7 @@ function Combobox({
   emptyText = "No option found.",
   className,
   disabled = false,
+  variant = "default",
   size = "default",
   open,
   onOpenChange,
@@ -6158,6 +6136,7 @@ function Combobox({
             {
               className: cn(
                 comboboxStyles.trigger,
+                triggerVariantStyles[variant],
                 formElementSizes[size],
                 error && comboboxStyles.triggerError,
                 className
@@ -6177,25 +6156,17 @@ function Combobox({
               /* @__PURE__ */ jsx(Combobox$1.Input, { className: comboboxStyles.searchInput, placeholder: searchPlaceholder })
             ] }),
             /* @__PURE__ */ jsx(Combobox$1.Empty, { className: comboboxStyles.empty, children: emptyText }),
-            /* @__PURE__ */ jsx(Combobox$1.List, { className: comboboxStyles.list, children: (option) => /* @__PURE__ */ jsxs(
-              Combobox$1.Item,
-              {
-                value: option,
-                className: cn(comboboxStyles.item, comboboxStyles.itemSelected),
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: comboboxStyles.checkContainer, children: /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: comboboxStyles.checkIcon }) }) }),
-                  /* @__PURE__ */ jsxs("span", { className: comboboxStyles.optionContent, children: [
-                    option.start,
-                    /* @__PURE__ */ jsxs("span", { className: comboboxStyles.optionText, children: [
-                      /* @__PURE__ */ jsx("span", { className: comboboxStyles.optionLabel, children: option.label }),
-                      option.description && /* @__PURE__ */ jsx("span", { className: comboboxStyles.optionDescription, children: option.description })
-                    ] }),
-                    option.end ? /* @__PURE__ */ jsx("div", { className: comboboxStyles.optionEnd, children: option.end }) : null
-                  ] })
-                ]
-              },
-              option.value
-            ) })
+            /* @__PURE__ */ jsx(Combobox$1.List, { className: comboboxStyles.list, children: (option) => /* @__PURE__ */ jsxs(Combobox$1.Item, { value: option, className: comboboxStyles.item, children: [
+              option.start,
+              /* @__PURE__ */ jsxs("span", { className: comboboxStyles.optionText, children: [
+                /* @__PURE__ */ jsx("span", { className: comboboxStyles.optionLabel, children: option.label }),
+                option.description && /* @__PURE__ */ jsx("span", { className: comboboxStyles.optionDescription, children: option.description })
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: comboboxStyles.itemRightSlot, children: [
+                option.end ? /* @__PURE__ */ jsx("div", { className: comboboxStyles.optionEnd, children: option.end }) : null,
+                /* @__PURE__ */ jsx("span", { className: comboboxStyles.checkContainer, children: /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: comboboxStyles.checkIcon }) }) })
+              ] })
+            ] }, option.value) })
           ] }) }) })
         ]
       }
@@ -6261,7 +6232,7 @@ function MultiCombobox({
             /* @__PURE__ */ jsx(Combobox$1.Empty, { className: comboboxStyles.empty, children: emptyText }),
             /* @__PURE__ */ jsx(Combobox$1.List, { className: comboboxStyles.list, children: (option) => {
               const isSelected = value.includes(option.value);
-              return /* @__PURE__ */ jsxs(Combobox$1.Item, { value: option, className: comboboxStyles.item, children: [
+              return /* @__PURE__ */ jsxs(Combobox$1.Item, { value: option, className: comboboxStyles.itemMulti, children: [
                 /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -6529,44 +6500,91 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const Tabs = ({ children, defaultTab, value, onValueChange, className }) => {
-  const [internalTab, setInternalTab] = useState(defaultTab);
-  const isControlled = value !== void 0 && onValueChange !== void 0;
-  const currentTab = isControlled ? value : internalTab;
-  const handleTabChange = (newValue) => {
-    const typedValue = newValue;
-    if (isControlled) {
-      onValueChange(typedValue);
-    } else {
-      setInternalTab(typedValue);
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Root,
+    {
+      defaultValue: defaultTab,
+      value,
+      onValueChange: onValueChange ? (next) => onValueChange(next) : void 0,
+      className: cn("overflow-y-auto", className),
+      children
     }
-  };
-  return /* @__PURE__ */ jsx(RadixTabs.Root, { value: currentTab, onValueChange: handleTabChange, className: cn("overflow-y-auto", className), children });
+  );
 };
 
-const TabList = ({ children, className }) => {
-  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsx(
-    RadixTabs.List,
+const tabListVariants = cva("flex items-center relative text-ui-lg", {
+  variants: {
+    variant: {
+      line: "w-max min-w-full border-b border-border1",
+      pill: "w-fit gap-1 rounded-full bg-surface2 p-1",
+      "pill-ghost": "w-fit gap-1 rounded-full p-1"
+    }
+  },
+  defaultVariants: {
+    variant: "line"
+  }
+});
+const TabList = ({ children, className, variant, sticky }) => {
+  const resolvedVariant = variant ?? "line";
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto", sticky && "sticky top-0 z-10 bg-surface2"), children: /* @__PURE__ */ jsxs(
+    Tabs$1.List,
     {
-      className: cn("flex items-center relative w-max min-w-full", "text-ui-lg border-b border-border1", className),
-      children
+      "data-variant": resolvedVariant,
+      className: cn("group/tabs-list", tabListVariants({ variant: resolvedVariant }), className),
+      children: [
+        children,
+        resolvedVariant === "line" && /* @__PURE__ */ jsx(
+          Tabs$1.Indicator,
+          {
+            className: cn(
+              "absolute bottom-0 left-0 bg-neutral3",
+              "w-[var(--active-tab-width)] h-0.5",
+              "transition-all duration-200 ease-in-out"
+            ),
+            style: { transform: "translateX(var(--active-tab-left))" }
+          }
+        ),
+        (resolvedVariant === "pill" || resolvedVariant === "pill-ghost") && /* @__PURE__ */ jsx(
+          Tabs$1.Indicator,
+          {
+            className: cn(
+              "absolute top-1/2 left-0 z-0 rounded-full bg-surface4",
+              "w-[var(--active-tab-width)] h-[calc(100%-0.5rem)]",
+              "transition-all duration-200 ease-in-out"
+            ),
+            style: { transform: "translateY(-50%) translateX(var(--active-tab-left))" }
+          }
+        )
+      ]
     }
   ) });
 };
 
 const Tab = ({ children, value, onClick, onClose, disabled, className }) => {
   return /* @__PURE__ */ jsxs(
-    RadixTabs.Trigger,
+    Tabs$1.Tab,
     {
       value,
       disabled,
       className: cn(
-        "py-2 px-5 text-ui-md font-normal text-neutral3 border-b-2 border-transparent",
+        "text-ui-md font-normal text-neutral3",
         "whitespace-nowrap shrink-0 flex items-center justify-center gap-1.5 outline-none cursor-pointer",
         transitions.colors,
         focusRing.visible,
         "hover:text-neutral4",
-        "data-[state=active]:text-neutral5 data-[state=active]:border-neutral3",
+        "data-[active]:text-neutral5",
         "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:text-neutral3",
+        // Line variant (default) — active state drawn by <Tabs.Indicator> in TabList
+        "group-data-[variant=line]/tabs-list:py-2 group-data-[variant=line]/tabs-list:px-5",
+        "group-data-[variant=line]/tabs-list:border-b-2 group-data-[variant=line]/tabs-list:border-transparent",
+        // Pill variant
+        "group-data-[variant=pill]/tabs-list:relative group-data-[variant=pill]/tabs-list:z-10",
+        "group-data-[variant=pill]/tabs-list:py-1 group-data-[variant=pill]/tabs-list:px-3",
+        "group-data-[variant=pill]/tabs-list:rounded-full",
+        // Pill-ghost variant (pill without list background)
+        "group-data-[variant=pill-ghost]/tabs-list:relative group-data-[variant=pill-ghost]/tabs-list:z-10",
+        "group-data-[variant=pill-ghost]/tabs-list:py-1 group-data-[variant=pill-ghost]/tabs-list:px-3",
+        "group-data-[variant=pill-ghost]/tabs-list:rounded-full",
         className
       ),
       onClick,
@@ -6591,7 +6609,7 @@ const Tab = ({ children, value, onClick, onClose, disabled, className }) => {
 
 const TabContent = ({ children, value, className }) => {
   return /* @__PURE__ */ jsx(
-    RadixTabs.Content,
+    Tabs$1.Panel,
     {
       value,
       className: cn("grid py-3 overflow-y-auto ring-offset-background", focusRing.visible, className),
@@ -6840,13 +6858,13 @@ function Skeleton({ className, ...props }) {
 }
 
 const EntityHeader = ({ icon, title, isLoading, children }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "p-5 w-full overflow-x-hidden", children: [
-    /* @__PURE__ */ jsxs("div", { className: "text-neutral6 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(Icon, { size: "lg", className: "bg-surface4 rounded-md p-1", children: icon }),
-      isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/3" }) : /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-4", children: /* @__PURE__ */ jsx(Txt, { variant: "header-md", as: "h2", className: "truncate font-medium", children: title }) })
+  return /* @__PURE__ */ jsx("div", { className: "p-3 pb-1 w-full overflow-x-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-neutral6 flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Icon, { size: "lg", children: icon }),
+      isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-32" }) : /* @__PURE__ */ jsx(Txt, { variant: "header-md", as: "h2", className: "truncate font-medium", children: title })
     ] }),
-    children && /* @__PURE__ */ jsx("div", { className: "pt-2", children })
-  ] });
+    children
+  ] }) });
 };
 
 function FieldBlockColumn({ children, className }) {
@@ -7184,6 +7202,149 @@ function SelectFieldBlock({
   ] });
 }
 
+const InputGroupSizeContext = React.createContext("md");
+const inputGroupClassName = cn(
+  "group/input-group relative flex w-full min-w-0 items-stretch",
+  "bg-surface2 border border-border1 text-neutral6",
+  "hover:border-border2",
+  formElementRadius,
+  formElementFocusWithin,
+  transitions.all,
+  "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
+  "has-[[aria-invalid=true]]:border-error has-[[aria-invalid=true]]:focus-within:ring-error has-[[aria-invalid=true]]:focus-within:shadow-glow-accent2",
+  "has-[>[data-align=block-start]]:flex-col",
+  "has-[>[data-align=block-end]]:flex-col",
+  "has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-0",
+  "has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-0",
+  // In flex-col, flex-1 collapses the input to basis-0. Force flex-none so `h-form-*` applies.
+  "has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:flex-none has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:w-full",
+  "has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:flex-none has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:w-full"
+);
+const InputGroup = React.forwardRef(({ className, size = "md", ...props }, ref) => {
+  return /* @__PURE__ */ jsx(InputGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx("div", { ref, role: "group", "data-slot": "input-group", className: cn(inputGroupClassName, className), ...props }) });
+});
+InputGroup.displayName = "InputGroup";
+const inputGroupAddonVariants = cva(
+  cn(
+    "flex items-center justify-center gap-2 text-neutral3 select-none",
+    "group-has-[:disabled]/input-group:opacity-50",
+    "[&>svg:not([class*='size-'])]:size-4"
+  ),
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 pr-1 has-[>button]:pl-1",
+        "inline-end": "order-last pr-3 pl-1 has-[>button]:pr-1",
+        "block-start": "order-first w-full justify-start px-3 pt-2 pb-1 border-b border-border1",
+        "block-end": "order-last w-full justify-start px-3 pb-2 pt-1 border-t border-border1"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+const InputGroupAddon = React.forwardRef(
+  ({ className, align = "inline-start", onClick, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "data-slot": "input-group-addon",
+        "data-align": align,
+        className: cn(inputGroupAddonVariants({ align }), className),
+        onClick: (event) => {
+          const target = event.target;
+          if (!target.closest('button, input, textarea, [role="button"]')) {
+            event.currentTarget.parentElement?.querySelector("[data-slot=input-group-control]")?.focus();
+          }
+          onClick?.(event);
+        },
+        ...props
+      }
+    );
+  }
+);
+InputGroupAddon.displayName = "InputGroupAddon";
+const inputGroupControlTextSize = {
+  sm: "text-ui-sm",
+  md: "text-ui-md",
+  default: "text-ui-md",
+  lg: "text-ui-lg"
+};
+const InputGroupInput = React.forwardRef(
+  ({ className, testId, error, type = "text", ...props }, ref) => {
+    const size = React.useContext(InputGroupSizeContext);
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type,
+        "data-slot": "input-group-control",
+        "data-testid": testId,
+        "aria-invalid": error,
+        className: cn(
+          "flex-1 min-w-0 bg-transparent text-neutral6 px-3 outline-hidden",
+          formElementSizes[size],
+          inputGroupControlTextSize[size],
+          "placeholder:text-neutral2 placeholder:transition-opacity placeholder:duration-normal",
+          "focus:placeholder:opacity-70",
+          "disabled:cursor-not-allowed",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+InputGroupInput.displayName = "InputGroupInput";
+const InputGroupTextarea = React.forwardRef(
+  ({ className, testId, error, ...props }, ref) => {
+    const size = React.useContext(InputGroupSizeContext);
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        "data-slot": "input-group-control",
+        "data-testid": testId,
+        "aria-invalid": error,
+        className: cn(
+          "flex-1 min-w-0 min-h-[60px] resize-y bg-transparent text-neutral6 px-3 py-2 outline-hidden",
+          inputGroupControlTextSize[size],
+          "placeholder:text-neutral2 placeholder:transition-opacity placeholder:duration-normal",
+          "focus:placeholder:opacity-70",
+          "disabled:cursor-not-allowed",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+InputGroupTextarea.displayName = "InputGroupTextarea";
+const InputGroupText = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn(
+        "flex items-center gap-2 text-ui-sm text-neutral3 [&_svg]:pointer-events-none",
+        "[&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+});
+InputGroupText.displayName = "InputGroupText";
+const InputGroupButton = React.forwardRef(
+  ({ size = "icon-sm", variant = "ghost", type = "button", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Button, { ref, type, size, variant, ...props });
+  }
+);
+InputGroupButton.displayName = "InputGroupButton";
+
 const themeClasses = {
   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)]"
@@ -7579,6 +7740,122 @@ function PropertyFilterActions({
   ] });
 }
 
+const ButtonsGroupOrientationContext = React.createContext("horizontal");
+const buttonsGroupVariants = cva(
+  // Elevate the focused child's border above its siblings so it isn't clipped in close-spacing.
+  cn("flex", "[&>*:focus-visible]:relative [&>*:focus-visible]:z-10"),
+  {
+    variants: {
+      orientation: {
+        horizontal: "flex-row items-center",
+        vertical: "flex-col items-stretch"
+      },
+      spacing: {
+        default: "gap-2",
+        close: "gap-0"
+      }
+    },
+    compoundVariants: [
+      {
+        orientation: "horizontal",
+        spacing: "close",
+        // Skip separators when collapsing borders so they stay visible.
+        className: cn(
+          "[&>*:not(:last-child)]:rounded-r-none",
+          "[&>*:not(:first-child)]:rounded-l-none",
+          "[&>*:not([data-slot=buttons-group-separator]):not(:first-child)]:-ml-px"
+        )
+      },
+      {
+        orientation: "vertical",
+        spacing: "close",
+        // Children carry `rounded-full` (capsule) which looks awkward when stacked vertically.
+        // Replace the outer corners with a regular `rounded-xl` and flatten the inner ones.
+        className: cn(
+          "[&>*:not(:last-child)]:rounded-b-none",
+          "[&>*:not(:first-child)]:rounded-t-none",
+          "[&>:first-child]:rounded-t-xl",
+          "[&>:last-child]:rounded-b-xl",
+          "[&>*:not([data-slot=buttons-group-separator]):not(:first-child)]:-mt-px"
+        )
+      }
+    ],
+    defaultVariants: {
+      orientation: "horizontal",
+      spacing: "default"
+    }
+  }
+);
+const ButtonsGroup = React.forwardRef(
+  ({ children, className, orientation = "horizontal", spacing = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(ButtonsGroupOrientationContext.Provider, { value: orientation, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "data-slot": "buttons-group",
+        "data-orientation": orientation,
+        className: cn(buttonsGroupVariants({ orientation, spacing }), className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ButtonsGroup.displayName = "ButtonsGroup";
+const ButtonsGroupSeparator = React.forwardRef(
+  ({ className, orientation, ...props }, ref) => {
+    const parentOrientation = React.useContext(ButtonsGroupOrientationContext);
+    const resolved = orientation ?? (parentOrientation === "vertical" ? "horizontal" : "vertical");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": resolved,
+        "data-slot": "buttons-group-separator",
+        className: cn("self-stretch bg-border1", resolved === "vertical" ? "w-px" : "h-px", className),
+        ...props
+      }
+    );
+  }
+);
+ButtonsGroupSeparator.displayName = "ButtonsGroupSeparator";
+const buttonsGroupTextVariants = cva(
+  cn(
+    "inline-flex items-center justify-center bg-surface3 border border-border1 text-neutral5 select-none",
+    "rounded-full gap-[.75em] px-[1em] whitespace-nowrap shrink-0",
+    "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-50"
+  ),
+  {
+    variants: {
+      size: {
+        sm: `${formElementSizes.sm} text-ui-sm`,
+        md: `${formElementSizes.md} text-ui-md`,
+        default: `${formElementSizes.default} text-ui-md`,
+        lg: `${formElementSizes.lg} text-ui-lg`
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+const ButtonsGroupText = React.forwardRef(
+  ({ className, size = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "buttons-group-text",
+        className: cn(buttonsGroupTextVariants({ size }), className),
+        ...props
+      }
+    );
+  }
+);
+ButtonsGroupText.displayName = "ButtonsGroupText";
+
 const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ...props, ref });
 });
@@ -7717,13 +7994,40 @@ function stringifyTokenValue(value) {
   if (Array.isArray(value)) return value.length === 0 ? "Any" : value.join(", ");
   return value;
 }
-const PILL_CLASS = "inline-flex";
-const SHARED_LABEL_OPERATOR_CLASSES = `${formElementSizes.md} border-y-2 border-border1 px-[.75em] text-neutral3 whitespace-nowrap flex items-center`;
-const LABEL_CLASS = `${SHARED_LABEL_OPERATOR_CLASSES} text-ui-md rounded-l-lg border-l-2 border-r-1`;
-const OPERATOR_CLASS = `${SHARED_LABEL_OPERATOR_CLASSES} text-ui-md `;
-const REMOVE_CLASS = "rounded-tl-none rounded-bl-none border-l-transparent";
-const INPUT_CLASS = "rounded-none";
-const VALUE_BUTTON_CLASS = "rounded-none";
+const DEFAULT_LOCKED_TOOLTIP = "This filter is set by the current context and cannot be removed here.";
+function lookupOptionLabel(field, value) {
+  if (field.kind === "pick-multi" && field.options) {
+    if (Array.isArray(value)) {
+      if (value.length === 0) return "Any";
+      return value.map((v) => field.options.find((o) => o.value === v)?.label ?? v).join(", ");
+    }
+    return field.options.find((o) => o.value === value)?.label ?? value;
+  }
+  return stringifyTokenValue(value);
+}
+function LockedTokenPill({ field, value, tooltipContent }) {
+  const display = lookupOptionLabel(field, value);
+  const lockA11yLabel = `${field.label} filter is locked by context`;
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      ButtonsGroup,
+      {
+        spacing: "close",
+        "data-locked-field-id": field.id,
+        "data-property-filter-pill": "locked",
+        tabIndex: 0,
+        "aria-label": lockA11yLabel,
+        children: [
+          /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: field.label }),
+          /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: "is" }),
+          /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: display }),
+          /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: /* @__PURE__ */ jsx(LockIcon, {}) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tooltipContent })
+  ] }) });
+}
 function TextTokenPill({ field, value, onChange, onRemove, disabled, autoFocus }) {
   const [draft, setDraft] = useState(value);
   const inputRef = useRef(null);
@@ -7733,9 +8037,9 @@ function TextTokenPill({ field, value, onChange, onRemove, disabled, autoFocus }
   useEffect(() => {
     if (autoFocus) inputRef.current?.focus();
   }, [autoFocus]);
-  return /* @__PURE__ */ jsxs("div", { className: PILL_CLASS, children: [
-    /* @__PURE__ */ jsx("span", { className: LABEL_CLASS, children: field.label }),
-    /* @__PURE__ */ jsx("span", { className: OPERATOR_CLASS, children: "is" }),
+  return /* @__PURE__ */ jsxs(ButtonsGroup, { spacing: "close", children: [
+    /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: field.label }),
+    /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: "is" }),
     /* @__PURE__ */ jsx(
       Input,
       {
@@ -7744,7 +8048,6 @@ function TextTokenPill({ field, value, onChange, onRemove, disabled, autoFocus }
         disabled,
         value: draft,
         placeholder: field.placeholder ?? `Enter ${field.label}`,
-        className: INPUT_CLASS,
         onChange: (e) => {
           const next = e.target.value;
           setDraft(next);
@@ -7769,7 +8072,6 @@ function TextTokenPill({ field, value, onChange, onRemove, disabled, autoFocus }
         type: "button",
         disabled,
         "aria-label": `Remove ${field.label} filter`,
-        className: REMOVE_CLASS,
         size: "md",
         onMouseDown: (e) => e.preventDefault(),
         onClick: onRemove,
@@ -7780,20 +8082,11 @@ function TextTokenPill({ field, value, onChange, onRemove, disabled, autoFocus }
 }
 function PickMultiTokenPill({ field, token, tokens, onChange, onRemove, disabled }) {
   const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: PILL_CLASS, children: [
-    /* @__PURE__ */ jsx("span", { className: LABEL_CLASS, children: field.label }),
-    /* @__PURE__ */ jsx("span", { className: OPERATOR_CLASS, children: "is" }),
+  return /* @__PURE__ */ jsxs(ButtonsGroup, { spacing: "close", children: [
+    /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: field.label }),
+    /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: "is" }),
     /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          disabled,
-          size: "md",
-          className: VALUE_BUTTON_CLASS,
-          children: stringifyTokenValue(token.value)
-        }
-      ) }),
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", disabled, size: "md", children: stringifyTokenValue(token.value) }) }),
       /* @__PURE__ */ jsx(PopoverContent, { align: "start", sideOffset: 8, className: "w-64 p-2", "data-pick-multi-panel": true, children: /* @__PURE__ */ jsx(PickMultiPanel, { field, tokens, onChange }) })
     ] }),
     /* @__PURE__ */ jsx(
@@ -7802,7 +8095,6 @@ function PickMultiTokenPill({ field, token, tokens, onChange, onRemove, disabled
         type: "button",
         disabled,
         "aria-label": `Remove ${field.label} filter`,
-        className: REMOVE_CLASS,
         size: "md",
         onClick: onRemove,
         children: /* @__PURE__ */ jsx(XIcon, {})
@@ -7815,9 +8107,12 @@ function PropertyFilterApplied({
   tokens,
   onTokensChange,
   disabled,
-  autoFocusFieldId
+  autoFocusFieldId,
+  lockedFieldIds,
+  lockedTooltipContent = DEFAULT_LOCKED_TOOLTIP
 }) {
   if (tokens.length === 0) return null;
+  const lockedSet = new Set(lockedFieldIds ?? []);
   const replaceTokenAt = (index, next) => {
     const copy = [...tokens];
     copy[index] = next;
@@ -7829,6 +8124,17 @@ function PropertyFilterApplied({
   return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap", children: tokens.map((token, index) => {
     const field = fields.find((f) => f.id === token.fieldId);
     if (!field) return null;
+    if (lockedSet.has(token.fieldId)) {
+      return /* @__PURE__ */ jsx(
+        LockedTokenPill,
+        {
+          field,
+          value: token.value,
+          tooltipContent: lockedTooltipContent
+        },
+        `${token.fieldId}-${index}`
+      );
+    }
     if (field.kind === "text" && typeof token.value === "string") {
       return /* @__PURE__ */ jsx(
         TextTokenPill,
@@ -7863,10 +8169,10 @@ function PropertyFilterApplied({
         `${token.fieldId}-${index}`
       );
     }
-    return /* @__PURE__ */ jsxs("div", { className: PILL_CLASS, children: [
-      /* @__PURE__ */ jsx("span", { className: LABEL_CLASS, children: field.label }),
-      /* @__PURE__ */ jsx("span", { className: OPERATOR_CLASS, children: "is" }),
-      /* @__PURE__ */ jsx("span", { className: "px-2.5 py-1.5 max-w-[20rem] truncate", children: stringifyTokenValue(token.value) }),
+    return /* @__PURE__ */ jsxs(ButtonsGroup, { spacing: "close", children: [
+      /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: field.label }),
+      /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: "is" }),
+      /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: stringifyTokenValue(token.value) }),
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -7874,7 +8180,6 @@ function PropertyFilterApplied({
           disabled,
           size: "md",
           "aria-label": `Remove ${field.label} filter`,
-          className: REMOVE_CLASS,
           onClick: () => removeTokenAt(index),
           children: /* @__PURE__ */ jsx(XIcon, {})
         }
@@ -7890,8 +8195,14 @@ function PropertyFilterCreator({
   label = "Add Filter",
   disabled,
   size,
-  onStartTextFilter
+  onStartTextFilter,
+  hiddenFieldIds
 }) {
+  const visibleFields = useMemo(() => {
+    if (!hiddenFieldIds || hiddenFieldIds.length === 0) return fields;
+    const hidden = new Set(hiddenFieldIds);
+    return fields.filter((f) => !hidden.has(f.id));
+  }, [fields, hiddenFieldIds]);
   const [open, setOpen] = useState(false);
   const [fieldId, setFieldId] = useState();
   const [textValue, setTextValue] = useState("");
@@ -7907,7 +8218,7 @@ function PropertyFilterCreator({
   useEffect(() => {
     if (!open) setOpenPickMultiFieldId(void 0);
   }, [open]);
-  const selectedField = useMemo(() => fields.find((f) => f.id === fieldId), [fields, fieldId]);
+  const selectedField = useMemo(() => visibleFields.find((f) => f.id === fieldId), [visibleFields, fieldId]);
   const singleUseFieldIds = useMemo(() => {
     const ids = /* @__PURE__ */ new Set();
     for (const token of tokens) {
@@ -8027,7 +8338,7 @@ function PropertyFilterCreator({
                 else next = current <= 0 ? buttons.length - 1 : current - 1;
                 buttons[next]?.focus();
               },
-              children: fields.length > 0 ? fields.map((f) => {
+              children: visibleFields.length > 0 ? visibleFields.map((f) => {
                 const used = singleUseFieldIds.has(f.id);
                 if (f.kind === "pick-multi") {
                   return /* @__PURE__ */ jsx(
@@ -8296,30 +8607,34 @@ const useAutoscroll = (ref, { enabled = true }) => {
   }, [enabled, ref]);
 };
 
-function useScrollOverflowAttrs(ref) {
-  React.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const update = () => {
-      const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = el;
-      el.toggleAttribute("data-overflow-y-start", scrollTop > 0);
-      el.toggleAttribute("data-overflow-y-end", scrollTop + clientHeight < scrollHeight - 1);
-      el.toggleAttribute("data-overflow-x-start", scrollLeft > 0);
-      el.toggleAttribute("data-overflow-x-end", scrollLeft + clientWidth < scrollWidth - 1);
-    };
-    update();
-    el.addEventListener("scroll", update, { passive: true });
-    const ro = new ResizeObserver(update);
-    ro.observe(el);
-    const inner = el.firstElementChild;
-    if (inner) ro.observe(inner);
-    return () => {
-      el.removeEventListener("scroll", update);
-      ro.disconnect();
-    };
-  }, [ref]);
+function resolveMask(mask, orientation) {
+  if (mask === false) return { top: false, bottom: false, left: false, right: false };
+  const vertical = orientation === "vertical" || orientation === "both";
+  const horizontal = orientation === "horizontal" || orientation === "both";
+  const sides = { top: vertical, bottom: vertical, left: horizontal, right: horizontal };
+  if (mask === true || mask === void 0) return sides;
+  if (mask.y !== void 0) {
+    sides.top = mask.y;
+    sides.bottom = mask.y;
+  }
+  if (mask.x !== void 0) {
+    sides.left = mask.x;
+    sides.right = mask.x;
+  }
+  if (mask.top !== void 0) sides.top = mask.top;
+  if (mask.bottom !== void 0) sides.bottom = mask.bottom;
+  if (mask.left !== void 0) sides.left = mask.left;
+  if (mask.right !== void 0) sides.right = mask.right;
+  return sides;
+}
+function maskClasses(sides) {
+  return cn(
+    sides.top && "data-[overflow-y-start]:mask-t-from-[calc(100%-2rem)]",
+    sides.bottom && "data-[overflow-y-end]:mask-b-from-[calc(100%-2rem)]",
+    sides.left && "data-[overflow-x-start]:mask-l-from-[calc(100%-2rem)]",
+    sides.right && "data-[overflow-x-end]:mask-r-from-[calc(100%-2rem)]"
+  );
 }
-const MASK_CLASSES = "data-[overflow-y-start]:mask-t-from-[calc(100%-2rem)] data-[overflow-y-end]:mask-b-from-[calc(100%-2rem)] data-[overflow-x-start]:mask-l-from-[calc(100%-2rem)] data-[overflow-x-end]:mask-r-from-[calc(100%-2rem)]";
 const ScrollArea = React.forwardRef(
   ({
     className,
@@ -8328,46 +8643,58 @@ const ScrollArea = React.forwardRef(
     maxHeight,
     autoScroll = false,
     orientation = "vertical",
-    showMask = false,
+    mask,
+    showMask,
     ...props
   }, ref) => {
     const areaRef = React.useRef(null);
     useAutoscroll(areaRef, { enabled: autoScroll });
-    useScrollOverflowAttrs(areaRef);
-    return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
+    const effectiveMask = mask !== void 0 ? mask : showMask;
+    const sides = resolveMask(effectiveMask, orientation);
+    const viewportStyle = {};
+    if (maxHeight) viewportStyle.maxHeight = maxHeight;
+    if (orientation === "vertical") {
+      viewportStyle.overflowX = "hidden";
+      viewportStyle.overflowY = "scroll";
+    } else if (orientation === "horizontal") {
+      viewportStyle.overflowX = "scroll";
+      viewportStyle.overflowY = "hidden";
+    }
+    const contentStyle = orientation === "vertical" ? { minWidth: "0px" } : orientation === "horizontal" ? { minHeight: "0px" } : void 0;
+    return /* @__PURE__ */ jsxs(ScrollArea$1.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
       /* @__PURE__ */ jsx(
-        ScrollAreaPrimitive.Viewport,
+        ScrollArea$1.Viewport,
         {
           ref: areaRef,
-          className: cn("h-full w-full rounded-[inherit] [&>div]:block!", showMask && MASK_CLASSES, viewPortClassName),
-          style: maxHeight ? { maxHeight } : void 0,
-          children
+          className: cn("h-full w-full rounded-[inherit]", maskClasses(sides), viewPortClassName),
+          style: viewportStyle,
+          children: /* @__PURE__ */ jsx(ScrollArea$1.Content, { style: contentStyle, children })
         }
       ),
       (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" }),
       (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
-      orientation === "both" && /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+      orientation === "both" && /* @__PURE__ */ jsx(ScrollArea$1.Corner, {})
     ] });
   }
 );
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+ScrollArea.displayName = "ScrollArea";
 const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  ScrollArea$1.Scrollbar,
   {
     ref,
     orientation,
     className: cn(
-      "flex touch-none select-none transition-all duration-normal ease-out-custom",
-      "opacity-0 hover:opacity-100 data-[state=visible]:opacity-100",
+      "flex touch-none select-none transition-opacity duration-normal ease-out-custom",
+      "opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100 data-[scrolling]:duration-0",
       orientation === "vertical" && "h-full w-1.5 p-px",
       orientation === "horizontal" && "h-1.5 w-full flex-col p-px",
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-neutral4/30 hover:bg-neutral4/60 transition-colors duration-normal" })
+    children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, { className: "relative flex-1 rounded-full bg-neutral4/30 hover:bg-neutral4/60 transition-colors duration-normal" })
   }
 ));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+ScrollBar.displayName = "ScrollBar";
 
 const searchbarSizeClasses = {
   sm: formElementSizes.sm,
@@ -8664,22 +8991,6 @@ function Truncate({
   ] });
 }
 
-function ButtonsGroup({ children, className, spacing = "default" }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        `flex gap-2 items-center`,
-        {
-          "gap-0 [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:-ml-px": spacing === "close"
-        },
-        className
-      ),
-      children
-    }
-  );
-}
-
 function MainContentLayout({
   children,
   className,
@@ -10229,7 +10540,7 @@ function MainSidebarNav({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: cn("flex flex-col flex-1 min-h-0", className), ...props, children: /* @__PURE__ */ jsx(ScrollArea, { showMask: true, className: "flex-1 min-h-0", children }) });
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: cn("flex flex-col flex-1 min-h-0", className), ...props, children: /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 min-h-0", children }) });
 }
 
 function MainSidebarNavSeparator({ className, ...props }) {
@@ -15621,29 +15932,20 @@ const PanelSeparator = () => {
         "group/separator relative w-0 bg-transparent z-10",
         "focus:outline-hidden focus-visible:outline-hidden"
       ),
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("absolute inset-y-0 -left-1 -right-1", "cursor-col-resize touch-none"), children: /* @__PURE__ */ jsx(
         "span",
         {
-          "aria-hidden": true,
           className: cn(
-            "absolute inset-y-0 -left-1 -right-1 flex items-center justify-center",
-            "cursor-col-resize touch-none"
-          ),
-          children: /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "block h-full w-px bg-border1 pointer-events-none",
-                "transition-[width,background-color] duration-150 ease-out motion-reduce:transition-none",
-                "group-hover/separator:w-0.5 group-hover/separator:bg-surface5",
-                "group-data-[separator='hover']/separator:w-0.5 group-data-[separator='hover']/separator:bg-surface5",
-                "group-data-[separator='active']/separator:w-0.5 group-data-[separator='active']/separator:bg-accent1",
-                "group-focus-visible/separator:w-0.5 group-focus-visible/separator:bg-accent1"
-              )
-            }
+            "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+            "h-10 w-0.5 bg-surface5 pointer-events-none rounded-full",
+            "transition-all duration-150 ease-out motion-reduce:transition-none",
+            "group-hover/separator:h-12 group-hover/separator:w-1 group-hover/separator:bg-surface5",
+            "group-data-[separator='hover']/separator:h-12 group-data-[separator='hover']/separator:w-1 group-data-[separator='hover']/separator:bg-surface5",
+            "group-data-[separator='active']/separator:h-12 group-data-[separator='active']/separator:w-1 group-data-[separator='active']/separator:bg-accent1",
+            "group-focus-visible/separator:h-12 group-focus-visible/separator:w-1 group-focus-visible/separator:bg-accent1"
           )
         }
-      )
+      ) })
     }
   );
 };
@@ -17659,6 +17961,7 @@ const TRACE_SYNTHETIC_FILTER_FIELD_IDS = ["rootEntityType", "status"];
 const TRACE_ROOT_ENTITY_TYPE_PARAM = "rootEntityType";
 const TRACE_STATUS_PARAM = "status";
 const TRACE_LIST_MODE_PARAM = "listMode";
+const TRACE_ANCHOR_SPAN_ID_PARAM = "anchorSpanId";
 const TRACE_LIST_MODE_VALUES = /* @__PURE__ */ new Set(["traces", "branches"]);
 const TRACE_DATE_PRESET_PARAM = "datePreset";
 const TRACE_DATE_FROM_PARAM = "dateFrom";
@@ -18144,7 +18447,7 @@ function useDrilldown() {
   return { getTracesHref, getLogsHref, getBucketTracesHref };
 }
 
-const formatHierarchicalSpans = (spans) => {
+const formatHierarchicalSpans = (spans, anchorSpanId) => {
   if (!spans || spans.length === 0) {
     return [];
   }
@@ -18172,9 +18475,10 @@ const formatHierarchicalSpans = (spans) => {
     };
     spanMap.set(spanRecord.spanId, uiSpan);
   });
+  const isAnchor = (spanRecord) => anchorSpanId ? spanRecord.spanId === anchorSpanId : spanRecord?.parentSpanId == null;
   spans.forEach((spanRecord) => {
     const uiSpan = spanMap.get(spanRecord.spanId);
-    if (spanRecord?.parentSpanId == null) {
+    if (isAnchor(spanRecord)) {
       if (overallEndDate && uiSpan.endTime && overallEndDate > new Date(uiSpan.endTime)) {
         uiSpan.endTime = overallEndDate.toISOString();
         const overallEndTime = new Date(overallEndDate).getTime();
@@ -18183,7 +18487,7 @@ const formatHierarchicalSpans = (spans) => {
       }
       rootSpans.push(uiSpan);
     } else {
-      const parent = spanMap.get(spanRecord.parentSpanId);
+      const parent = spanRecord.parentSpanId ? spanMap.get(spanRecord.parentSpanId) : void 0;
       if (parent) {
         parent.spans.push(uiSpan);
       } else {
@@ -18896,10 +19200,15 @@ function TracesToolbar({
   filterFields,
   filterTokens,
   onFilterTokensChange,
-  autoFocusFilterFieldId
+  autoFocusFilterFieldId,
+  lockedFieldIds,
+  lockedTooltipContent
 }) {
   const hasActiveFilters = filterTokens.length > 0;
-  const hasNonDefaultFilter = filterTokens.some((token) => isNonDefaultFilter$1(token, filterFields));
+  const lockedSet = new Set(lockedFieldIds ?? []);
+  const editableTokens = filterTokens.filter((t) => !lockedSet.has(t.fieldId));
+  const hasNonDefaultFilter = editableTokens.some((token) => isNonDefaultFilter$1(token, filterFields));
+  const hasEditableFilters = editableTokens.length > 0;
   return (
     // 1fr | auto — pills wrap in the first column; Clear stays pinned to the
     // top of the second column regardless of how many pill rows render.
@@ -18911,10 +19220,12 @@ function TracesToolbar({
           tokens: filterTokens,
           onTokensChange: onFilterTokensChange,
           disabled: isLoading,
-          autoFocusFieldId: autoFocusFilterFieldId
+          autoFocusFieldId: autoFocusFilterFieldId,
+          lockedFieldIds,
+          lockedTooltipContent
         }
       ),
-      hasActiveFilters && /* @__PURE__ */ jsx(
+      hasActiveFilters && hasEditableFilters && /* @__PURE__ */ jsx(
         PropertyFilterActions,
         {
           disabled: isLoading,
@@ -18959,7 +19270,8 @@ function TraceDataPanelView({
   placement,
   timelineChartWidth = "default",
   LinkComponent,
-  traceHref
+  traceHref,
+  anchorSpanId
 }) {
   const isOnTracePage = placement === "trace-page";
   const [internalCollapsed, setInternalCollapsed] = useState(false);
@@ -18988,14 +19300,17 @@ function TraceDataPanelView({
     const el = contentRef.current.querySelector(`[data-span-id="${selectedSpanId}"]`);
     el?.scrollIntoView({ block: "nearest" });
   }, [selectedSpanId]);
-  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(spans ?? []), [spans]);
+  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(spans ?? [], anchorSpanId), [spans, anchorSpanId]);
   const [expandedSpanIds, setExpandedSpanIds] = useState([]);
   useEffect(() => {
     if (hierarchicalSpans.length > 0) {
       setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));
     }
   }, [hierarchicalSpans]);
-  const rootSpan = useMemo(() => spans?.find((s) => s.parentSpanId == null), [spans]);
+  const rootSpan = useMemo(
+    () => anchorSpanId ? spans?.find((s) => s.spanId === anchorSpanId) : spans?.find((s) => s.parentSpanId == null),
+    [spans, anchorSpanId]
+  );
   const handleSpanClick = (id) => {
     const newId = selectedSpanId === id ? void 0 : id;
     setSelectedSpanId(newId);
@@ -19160,7 +19475,8 @@ function SpanDataPanelView({
   scoringTabSlot,
   scoringTabBadge,
   feedbackTabSlot,
-  feedbackTabBadge
+  feedbackTabBadge,
+  isAnchor
 }) {
   return /* @__PURE__ */ jsxs(DataPanel, { children: [
     /* @__PURE__ */ jsxs(DataPanel.Header, { children: [
@@ -19195,7 +19511,8 @@ function SpanDataPanelView({
         scoringTabSlot,
         scoringTabBadge,
         feedbackTabSlot,
-        feedbackTabBadge
+        feedbackTabBadge,
+        isAnchor
       }
     )
   ] });
@@ -19209,7 +19526,8 @@ function SpanDataPanelContent({
   scoringTabSlot,
   scoringTabBadge,
   feedbackTabSlot,
-  feedbackTabBadge
+  feedbackTabBadge,
+  isAnchor
 }) {
   const durationMs = span.startedAt && span.endedAt ? new Date(span.endedAt).getTime() - new Date(span.startedAt).getTime() : null;
   const usage = span.attributes?.usage;
@@ -19217,7 +19535,7 @@ function SpanDataPanelContent({
     isTokenLimitExceeded(span) && /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx(Notice, { variant: "warning", title: "Token Limit Exceeded", children: /* @__PURE__ */ jsx(Notice.Message, { children: getTokenLimitMessage(span) }) }) }),
     usage && /* @__PURE__ */ jsx(SpanTokenUsage, { usage, className: "mb-3" }),
     /* @__PURE__ */ jsxs(DataKeysAndValues, { children: [
-      span.parentSpanId == null && /* @__PURE__ */ jsxs(Fragment, { children: [
+      (isAnchor ?? span.parentSpanId == null) && /* @__PURE__ */ jsxs(Fragment, { children: [
         span.traceId && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Trace Id" }),
           /* @__PURE__ */ jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Trace Id to clipboard", copyValue: span.traceId, children: span.traceId })
@@ -19569,6 +19887,7 @@ function TracesListView({
   setEndOfListElement,
   filtersApplied,
   featuredTraceId,
+  featuredSpanId,
   onTraceClick,
   groupByThread,
   threadTitles
@@ -19577,7 +19896,7 @@ function TracesListView({
   const items = useMemo(() => {
     if (traces.length === 0) return [];
     if (!groupByThread) {
-      return traces.map((trace) => ({ kind: "row", key: trace.traceId, trace }));
+      return traces.map((trace) => ({ kind: "row", key: `${trace.traceId}:${trace.spanId ?? ""}`, trace }));
     }
     const { groups, ungrouped } = groupTracesByThread(traces);
     const result = [];
@@ -19604,7 +19923,7 @@ function TracesListView({
         ] })
       });
       for (const trace of group.traces) {
-        result.push({ kind: "row", key: trace.traceId, trace });
+        result.push({ kind: "row", key: `${trace.traceId}:${trace.spanId ?? ""}`, trace });
       }
     }
     if (ungrouped.length > 0) {
@@ -19621,7 +19940,7 @@ function TracesListView({
         ] })
       });
       for (const trace of ungrouped) {
-        result.push({ kind: "row", key: trace.traceId, trace });
+        result.push({ kind: "row", key: `${trace.traceId}:${trace.spanId ?? ""}`, trace });
       }
     }
     return result;
@@ -19670,7 +19989,7 @@ function TracesListView({
           return /* @__PURE__ */ jsx(TracesDataList.Subheader, { ref: virtualizer.measureElement, "data-index": vi.index, children: item.node }, item.key);
         }
         const trace = item.trace;
-        const isFeatured = trace.traceId === featuredTraceId;
+        const isFeatured = trace.traceId === featuredTraceId && (featuredSpanId == null || trace.spanId === featuredSpanId);
         const displayDate = trace.startedAt ?? trace.createdAt;
         const entityName = trace.entityName || trace.entityId || trace.attributes?.agentId || trace.attributes?.workflowId;
         return /* @__PURE__ */ jsxs(
@@ -19706,6 +20025,23 @@ function TracesListView({
   ] });
 }
 
+const TRACES_LIST_MODE_LABELS = {
+  traces: "Top-level traces only",
+  branches: "All traces, nested too"
+};
+function TracesListModeToggle({ value, onChange, disabled }) {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { size: "md", variant: "default", disabled, children: [
+      TRACES_LIST_MODE_LABELS[value],
+      /* @__PURE__ */ jsx(ChevronDownIcon, {})
+    ] }) }),
+    /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "start", children: /* @__PURE__ */ jsxs(DropdownMenu.RadioGroup, { value, onValueChange: (v) => onChange(v), children: [
+      /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: "traces", children: TRACES_LIST_MODE_LABELS.traces }),
+      /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: "branches", children: TRACES_LIST_MODE_LABELS.branches })
+    ] }) })
+  ] });
+}
+
 function TracesErrorContent({ error, resource, errorTitle }) {
   if (is401UnauthorizedError(error)) return /* @__PURE__ */ jsx(SessionExpired, {});
   if (is403ForbiddenError(error)) return /* @__PURE__ */ jsx(PermissionDenied, { resource });
@@ -19772,6 +20108,26 @@ const NoTracesInfo = ({ datePreset, dateFrom, dateTo } = {}) => {
   ) });
 };
 
+const IMMUTABLE_CACHE_TIME$2 = 1e3 * 60 * 60 * 24 * 30;
+function useBranch({ traceId, spanId, depth }) {
+  const client = useMastraClient();
+  return useQuery({
+    queryKey: ["branch", traceId, spanId, depth],
+    queryFn: async () => {
+      if (!traceId || !spanId) {
+        throw new Error("traceId and spanId are required");
+      }
+      return client.getBranch({ traceId, spanId, depth });
+    },
+    enabled: !!traceId && !!spanId,
+    staleTime: (query) => {
+      const data = query.state.data;
+      const isFinished = data?.spans.every((s) => Boolean(s.endedAt));
+      return isFinished ? IMMUTABLE_CACHE_TIME$2 : 0;
+    }
+  });
+}
+
 const IMMUTABLE_CACHE_TIME$1 = 1e3 * 60 * 60 * 24 * 30;
 function useSpanDetail(traceId, spanId) {
   const client = useMastraClient();
@@ -19818,6 +20174,37 @@ function useTraceLightSpans(traceId) {
   });
 }
 
+function useTraceOrBranchSpans({
+  traceId,
+  anchorSpanId,
+  listMode,
+  depth
+}) {
+  const isBranches = listMode === "branches";
+  const traceQuery = useTraceLightSpans(isBranches ? null : traceId);
+  const branchQuery = useBranch({
+    traceId: isBranches ? traceId : null,
+    spanId: isBranches ? anchorSpanId : null,
+    depth
+  });
+  if (isBranches) {
+    return {
+      spans: branchQuery.data?.spans,
+      anchorSpanId: anchorSpanId ?? void 0,
+      isLoading: branchQuery.isLoading,
+      isError: branchQuery.isError,
+      error: branchQuery.error
+    };
+  }
+  return {
+    spans: traceQuery.data?.spans,
+    anchorSpanId: void 0,
+    isLoading: traceQuery.isLoading,
+    isError: traceQuery.isError,
+    error: traceQuery.error
+  };
+}
+
 function useTraceSpans(traceId) {
   const client = useMastraClient();
   return useQuery({
@@ -19838,7 +20225,7 @@ const fetchTracesFn = async ({
   page,
   perPage,
   filters,
-  listMode = "traces"
+  listMode = "branches"
 }) => {
   const params = {
     pagination: {
@@ -19879,7 +20266,7 @@ function selectUniqueTraces(data) {
   }
   return { spans, threadTitles };
 }
-const useTraces = ({ filters, listMode = "traces" }) => {
+const useTraces = ({ filters, listMode = "branches" }) => {
   const client = useMastraClient();
   const { inView: isEndOfListInView, setRef: setEndOfListElement } = useInView();
   const query = useInfiniteQuery({
@@ -19991,13 +20378,17 @@ function useTraceSpanNavigation(lightSpans, featuredSpanId, onSpanChange) {
   return { handlePreviousSpan, handleNextSpan, timelineSpanIds };
 }
 
-function useTraceListNavigation(traces, featuredTraceId, onTraceChange) {
+function useTraceListNavigation(traces, featuredTraceId, featuredSpanId, onTraceChange) {
   const featuredTraceIdx = useMemo(
-    () => featuredTraceId ? traces.findIndex((t) => t.traceId === featuredTraceId) : -1,
-    [traces, featuredTraceId]
+    () => featuredTraceId ? traces.findIndex(
+      (t) => t.traceId === featuredTraceId && (featuredSpanId == null || t.spanId === featuredSpanId)
+    ) : -1,
+    [traces, featuredTraceId, featuredSpanId]
   );
-  const handlePreviousTrace = featuredTraceIdx > 0 ? () => onTraceChange(traces[featuredTraceIdx - 1].traceId) : void 0;
-  const handleNextTrace = featuredTraceIdx >= 0 && featuredTraceIdx < traces.length - 1 ? () => onTraceChange(traces[featuredTraceIdx + 1].traceId) : void 0;
+  const passSpanId = featuredSpanId != null;
+  const navigateTo = (row) => onTraceChange(row.traceId, passSpanId ? row.spanId ?? void 0 : void 0);
+  const handlePreviousTrace = featuredTraceIdx > 0 ? () => navigateTo(traces[featuredTraceIdx - 1]) : void 0;
+  const handleNextTrace = featuredTraceIdx >= 0 && featuredTraceIdx < traces.length - 1 ? () => navigateTo(traces[featuredTraceIdx + 1]) : void 0;
   return { featuredTraceIdx, handlePreviousTrace, handleNextTrace };
 }
 
@@ -20016,6 +20407,7 @@ const PRESET_MS$1 = {
 function clearSelectionParams$1(params) {
   params.delete(TRACE_ID_PARAM);
   params.delete(SPAN_ID_PARAM);
+  params.delete(TRACE_ANCHOR_SPAN_ID_PARAM);
   params.delete(TAB_PARAM);
   params.delete(SCORE_ID_PARAM);
 }
@@ -20046,12 +20438,13 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
   datePresetRef.current = datePreset;
   const traceIdParam = searchParams.get(TRACE_ID_PARAM) || void 0;
   const spanIdParam = searchParams.get(SPAN_ID_PARAM) || void 0;
+  const anchorSpanIdParam = searchParams.get(TRACE_ANCHOR_SPAN_ID_PARAM) || void 0;
   const tabParam = searchParams.get(TAB_PARAM);
   const spanTabParam = tabParam === "scoring" ? "scoring" : tabParam === "feedback" ? "feedback" : tabParam === "details" ? "details" : void 0;
   const scoreIdParam = searchParams.get(SCORE_ID_PARAM) || void 0;
   const listMode = useMemo(() => {
     const value = searchParams.get(TRACE_LIST_MODE_PARAM);
-    return value && TRACE_LIST_MODE_VALUES.has(value) ? value : "traces";
+    return value && TRACE_LIST_MODE_VALUES.has(value) ? value : "branches";
   }, [searchParams]);
   const selectedEntityOption = useMemo(
     () => ROOT_ENTITY_TYPE_OPTIONS.find((option) => option.entityType === searchParams.get(TRACE_ROOT_ENTITY_TYPE_PARAM)),
@@ -20063,7 +20456,7 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
   }, [searchParams]);
   const filterTokens = useMemo(() => getTracePropertyFilterTokens(searchParams), [searchParams]);
   const handleTraceClick = useCallback(
-    (traceId) => {
+    (traceId, spanId, anchorSpanId) => {
       setSearchParams(
         (prev) => {
           const next = new URLSearchParams(prev);
@@ -20072,7 +20465,16 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
           } else {
             next.delete(TRACE_ID_PARAM);
           }
-          next.delete(SPAN_ID_PARAM);
+          if (spanId) {
+            next.set(SPAN_ID_PARAM, spanId);
+          } else {
+            next.delete(SPAN_ID_PARAM);
+          }
+          if (anchorSpanId) {
+            next.set(TRACE_ANCHOR_SPAN_ID_PARAM, anchorSpanId);
+          } else {
+            next.delete(TRACE_ANCHOR_SPAN_ID_PARAM);
+          }
           next.delete(TAB_PARAM);
           next.delete(SCORE_ID_PARAM);
           return next;
@@ -20204,6 +20606,24 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
     },
     [setSearchParams]
   );
+  const handleListModeChange = useCallback(
+    (mode) => {
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          if (mode === "branches") {
+            next.delete(TRACE_LIST_MODE_PARAM);
+          } else {
+            next.set(TRACE_LIST_MODE_PARAM, mode);
+          }
+          clearSelectionParams$1(next);
+          return next;
+        },
+        { replace: true }
+      );
+    },
+    [setSearchParams]
+  );
   const handleRemoveAll = useCallback(() => {
     setSearchParams(
       (prev) => {
@@ -20230,6 +20650,7 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
     datePresetRef,
     traceIdParam,
     spanIdParam,
+    anchorSpanIdParam,
     spanTabParam,
     scoreIdParam,
     listMode,
@@ -20242,6 +20663,7 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
     handleSpanClose,
     handleSpanTabChange,
     handleScoreChange,
+    handleListModeChange,
     handleFilterTokensChange,
     handleDateChange,
     handleDatePresetChange,
@@ -21005,5 +21427,5 @@ function useLogsListNavigation(logs, featuredLogId, onFeaturedChange, featuredTr
   };
 }
 
-export { AddField, AgentCoinIcon, AgentIcon, AgentNetworkCoinIcon, AiIcon, AlertDialog, AmazonIcon, AnthropicChatIcon, AnthropicMessagesIcon, ApiIcon, Avatar, AzureIcon, Badge, BarListContent, BorderColors, BorderRadius, BranchIcon, BrandLoader, Breadcrumb, Button, ButtonWithTooltip, ButtonsGroup, CHART_COLORS, CONTEXT_FIELD_IDS, Card, CardContent, CardDescription, CardFooter, CardHeader, CardHeading, CardTitle, Cell, CheckIcon, Checkbox, ChevronIcon, Chip, ChipsGroup, CodeBlock$1 as CodeBlock, CodeDiff, CodeEditor, CohereIcon, Collapsible, CollapsibleContent, CollapsiblePanel, CollapsibleTrigger, Colors, Column, Columns, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommitIcon, ContentBlock, ContentBlocks, CopyButton, CrossIcon, Crumb, DATE_PRESETS, DEFAULT_LOGS_FILTERS_STORAGE_KEY, DEFAULT_TRACE_FILTERS_STORAGE_KEY, DashboardCard, DataCodeSection, DataDetailsPanel, DataKeysAndValues, DataList, DataListSkeleton, DataPanel, DatePicker, DateRangeSelector, DateTimeCell, DateTimePicker, DateTimePickerContent, DateTimeRangePicker, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DividerIcon, DocsIcon, DropdownMenu, EXTENSION_TO_MIME, ElementSelect, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityList, EntityListPageLayout, EntityListSkeleton, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, ErrorBoundary, ErrorState, Field, FieldBlock, FieldBlocksLayout, FieldDescription, FieldList, FieldName, FieldNullable, FieldOptional, FieldRemove, FieldType, FiltersIcon, FolderIcon, FontSizes, GithubCoinIcon, GithubIcon, Glows, GoogleIcon, GroqIcon, Header$1 as Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, HorizontalBars, HoverPopover, Icon, InfoIcon, Input, ItemList, ItemListSkeleton, JSONSchemaForm, JudgeIcon, Kbd, KeyValueList, KpiCardView, LOGS_DATE_FROM_PARAM, LOGS_DATE_PRESET_PARAM, LOGS_DATE_PRESET_VALUES, LOGS_DATE_TO_PARAM, LOGS_PROPERTY_FILTER_FIELD_IDS, LOGS_PROPERTY_FILTER_PARAM_BY_FIELD, LOGS_ROOT_ENTITY_TYPES, LOGS_ROOT_ENTITY_TYPE_OPTIONS, LOGS_ROOT_ENTITY_TYPE_PARAM, LOG_LEVEL_OPTIONS, LOG_LEVEL_VALUES, Label, LatencyCardView, LatencyIcon, LineHeights, ListSearch, LogDetailsView, Logo, LogoWithoutText, LogsDataList, DataListSkeleton as LogsDataListSkeleton, LogsErrorContent, LogsIcon, LogsLayout, LogsListView, LogsToolbar, MainContentContent, MainContentLayout, MainHeader, MainSidebar, MainSidebarMobileTrigger, MainSidebarProvider, MainSidebarTrigger, MarkdownRenderer, MastraIcon, McpCoinIcon, McpServerIcon, MemoryCardView, MemoryIcon, MetricsCard, MetricsDataTable, MetricsFlexGrid, MetricsKpiCard, MetricsLineChart, MetricsLineChartTooltip, MetricsProvider, MistralIcon, ModelUsageCostCardView, MultiColumn, MultiCombobox, NestedFields, NetlifyIcon, NoDataPageLayout, NoLogsInfo, NoTracesInfo, Notice, OPERATORS, OPERATOR_LABELS, OpenAIIcon, OpenErrorsInLogsButton, OpenInTracesButton, OpenaiChatIcon, PageHeader, PageLayout, PanelSeparator, PermissionDenied, PickMultiPanel, Popover, PopoverContent, PopoverTrigger, PrevNextNav, ProcessStepList, ProcessStepListItem, ProcessStepProgressBar, ProcessorIcon, PromptIcon, PropertyFilterActions, PropertyFilterApplied, PropertyFilterCreator, ROOT_ENTITY_TYPES, ROOT_ENTITY_TYPE_OPTIONS, RadioGroup, RadioGroupItem, RepoIcon, Root$1 as Root, Row, RuleBuilder, RuleFieldSelect, RuleOperatorSelect, RuleRow, RuleValueInput, ScoresCardView, ScoresDataList, ScrollArea, ScrollBar, ScrollableContainer, SearchFieldBlock, Searchbar, SearchbarWrapper, Section, SectionCard, SectionRoot, Sections, Select, SelectContent, SelectDataFilter, SelectFieldBlock, SelectGroup, SelectItem, SelectTrigger, SelectValue, SessionExpired, SettingsIcon, SettingsRow, Shadows, SideDialog, Sizes, Skeleton, SkillIcon, SlashIcon, Slider, Spacings, SpanDataPanelView, SpanDetailsView, SpanTokenUsage, Spinner, StackedRunsBars, StatusBadge, SubSectionRoot, Switch, TRACE_DATE_FROM_PARAM, TRACE_DATE_PRESET_PARAM, TRACE_DATE_PRESET_VALUES, TRACE_DATE_TO_PARAM, TRACE_LIST_MODE_PARAM, TRACE_LIST_MODE_VALUES, TRACE_PROPERTY_FILTER_FIELD_IDS, TRACE_PROPERTY_FILTER_PARAM_BY_FIELD, TRACE_ROOT_ENTITY_TYPE_PARAM, TRACE_STATUS_OPTIONS, TRACE_STATUS_PARAM, TRACE_STATUS_VALUES, TRACE_SYNTHETIC_FILTER_FIELD_IDS, Tab, TabContent, TabList, Table, Tabs, Tbody, TextAndIcon, TextFieldBlock, Textarea, Th, Thead, ThemeProvider, ThemeToggle, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, TimePicker, TimelineExpandCol, TimelineNameCol, TimelineStructureSign, TimelineTimingCol, Toaster, TokenUsageByAgentCardView, ToolCoinIcon, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDataPanelView, TraceDetailsView, TraceIcon, TraceKeysAndValues, TraceTimeline, TraceTimelineSpan, TracesDataList, TracesErrorContent, TracesLayout, TracesListView, TracesToolbar, TracesVolumeCardView, Tree, Truncate, TsIcon, Txt, TxtCell, VARIABLE_PATTERN, VariablesIcon, WorkflowCoinIcon, WorkflowIcon, XGroqIcon, applyLogsPropertyFilterTokens, applyMetricsPropertyFilterTokens, applyTracePropertyFilterTokens, buildLogsDrilldownUrl, buildLogsListFilters, buildMetricsDimensionalFilter, buildTraceListFilters, buildTracesDrilldownUrl, buttonVariants, clearSavedLogsFilters, clearSavedMetricsFilters, clearSavedTraceFilters, cn, comboboxStyles, countLeafRules, createDefaultRule, createDefaultRuleGroup, createField, createLogsPropertyFilterFields, createMetricsPropertyFilterFields, createTracePropertyFilterFields, createVariableAutocomplete, fieldsToJSONSchema, fileToBase64, flattenSchemaToVariables, focusRing, formElementFocus, formElementFocusWithin, formElementRadius, formElementSizes, formElementTransition, formatCompact, formatCost, formatHierarchicalSpans, formatJSON, generateDefaultValues, getAllSpanIds, getChildFieldOptions, getColumnTemplate, getFieldOptionAtPath, getFieldOptionsFromSchema, getFileContentType, getInputPreview, getIsLinkActive, getItemListColumnTemplate, getLogsPropertyFilterTokens, getMainContentContentClassName, getMetricsPropertyFilterTokens, getPreservedLogsFilterParams, getPreservedTraceFilterParams, getShortId$1 as getShortId, getSpanDescendantIds, getSpanTypeUi, getStatusIcon, getToNextEntryFn, getToNextItemFn, getToPreviousEntryFn, getToPreviousItemFn, getTokenLimitMessage, getTracePropertyFilterTokens, groupTracesByThread, hasAnyLogsFilterParams, hasAnyMetricsFilterParams, hasAnyTraceFilterParams, highlight, hoverEffects, inputVariants, is401UnauthorizedError, is403ForbiddenError, isNonRetryableError, isObjectEmpty, isRule, isRuleGroup, isTokenLimitExceeded, isValidJson, isValidPreset, jsonSchemaToFields, loadLogsFiltersFromStorage, loadMetricsFiltersFromStorage, loadTraceFiltersFromStorage, lodashTitleCase, narrowWindowToBucket, navItemClasses, neutralizeFilterTokens, neutralizeLogsFilterTokens, parseError, parseFieldPath, saveLogsFiltersToStorage, saveMetricsFiltersToStorage, saveTraceFiltersToStorage, sharedFormElementDisabledStyle, sharedFormElementFocusStyle, sharedFormElementStyle, shouldRetryQuery, spanTypePrefixes, stringToColor, textareaVariants, toSigFigs, toast, transitions, truncateString, useActiveResourcesKpiMetrics, useActiveThreadsKpiMetrics, useAgentRunsKpiMetrics, useAutoscroll, useCodemirrorTheme$3 as useCodemirrorTheme, useCopyToClipboard, useDrilldown, useEntityNames, useEnvironments, useInView, useJSONSchemaForm, useJSONSchemaFormField, useJSONSchemaFormNestedContext, useLatencyMetrics, useLogs, useLogsFilterPersistence, useLogsListNavigation, useLogsUrlState, useMainSidebar, useMaybeSidebar, useMetrics, useMetricsFilters, useModelCostKpiMetrics, useModelUsageCostMetrics, usePlaygroundStore, useScoresMetrics, useServiceNames, useSpanDetail, useTableKeyboardNavigation, useTags, useTheme, useTokenUsageByAgentMetrics, useTopActiveThreadsMetrics, useTopResourcesByThreadsMetrics, useTotalTokensKpiMetrics, useTraceFilterPersistence, useTraceLightSpans, useTraceListNavigation, useTraceSpanNavigation, useTraceSpans, useTraceUrlState, useTraceVolumeMetrics, useTraces, variableHighlight };
+export { AddField, AgentCoinIcon, AgentIcon, AgentNetworkCoinIcon, AiIcon, AlertDialog, AmazonIcon, AnthropicChatIcon, AnthropicMessagesIcon, ApiIcon, Avatar, AzureIcon, Badge, BarListContent, BorderColors, BorderRadius, BranchIcon, BrandLoader, Breadcrumb, Button, ButtonWithTooltip, ButtonsGroup, ButtonsGroupSeparator, ButtonsGroupText, CHART_COLORS, CONTEXT_FIELD_IDS, Card, CardContent, CardDescription, CardFooter, CardHeader, CardHeading, CardTitle, Cell, CheckIcon, Checkbox, ChevronIcon, Chip, ChipsGroup, CodeBlock$1 as CodeBlock, CodeDiff, CodeEditor, CohereIcon, Collapsible, CollapsibleContent, CollapsiblePanel, CollapsibleTrigger, Colors, Column, Columns, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommitIcon, ContentBlock, ContentBlocks, CopyButton, CrossIcon, Crumb, DATE_PRESETS, DEFAULT_LOGS_FILTERS_STORAGE_KEY, DEFAULT_TRACE_FILTERS_STORAGE_KEY, DashboardCard, DataCodeSection, DataDetailsPanel, DataKeysAndValues, DataList, DataListSkeleton, DataPanel, DatePicker, DateRangeSelector, DateTimeCell, DateTimePicker, DateTimePickerContent, DateTimeRangePicker, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DividerIcon, DocsIcon, DropdownMenu, EXTENSION_TO_MIME, ElementSelect, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityList, EntityListPageLayout, EntityListSkeleton, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, ErrorBoundary, ErrorState, Field, FieldBlock, FieldBlocksLayout, FieldDescription, FieldList, FieldName, FieldNullable, FieldOptional, FieldRemove, FieldType, FiltersIcon, FolderIcon, FontSizes, GithubCoinIcon, GithubIcon, Glows, GoogleIcon, GroqIcon, Header$1 as Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, HorizontalBars, HoverPopover, Icon, InfoIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, ItemList, ItemListSkeleton, JSONSchemaForm, JudgeIcon, Kbd, KeyValueList, KpiCardView, LOGS_DATE_FROM_PARAM, LOGS_DATE_PRESET_PARAM, LOGS_DATE_PRESET_VALUES, LOGS_DATE_TO_PARAM, LOGS_PROPERTY_FILTER_FIELD_IDS, LOGS_PROPERTY_FILTER_PARAM_BY_FIELD, LOGS_ROOT_ENTITY_TYPES, LOGS_ROOT_ENTITY_TYPE_OPTIONS, LOGS_ROOT_ENTITY_TYPE_PARAM, LOG_LEVEL_OPTIONS, LOG_LEVEL_VALUES, Label, LatencyCardView, LatencyIcon, LineHeights, ListSearch, LogDetailsView, Logo, LogoWithoutText, LogsDataList, DataListSkeleton as LogsDataListSkeleton, LogsErrorContent, LogsIcon, LogsLayout, LogsListView, LogsToolbar, MainContentContent, MainContentLayout, MainHeader, MainSidebar, MainSidebarMobileTrigger, MainSidebarProvider, MainSidebarTrigger, MarkdownRenderer, MastraIcon, McpCoinIcon, McpServerIcon, MemoryCardView, MemoryIcon, MetricsCard, MetricsDataTable, MetricsFlexGrid, MetricsKpiCard, MetricsLineChart, MetricsLineChartTooltip, MetricsProvider, MistralIcon, ModelUsageCostCardView, MultiColumn, MultiCombobox, NestedFields, NetlifyIcon, NoDataPageLayout, NoLogsInfo, NoTracesInfo, Notice, OPERATORS, OPERATOR_LABELS, OpenAIIcon, OpenErrorsInLogsButton, OpenInTracesButton, OpenaiChatIcon, PageHeader, PageLayout, PanelSeparator, PermissionDenied, PickMultiPanel, Popover, PopoverContent, PopoverTrigger, PrevNextNav, ProcessStepList, ProcessStepListItem, ProcessStepProgressBar, ProcessorIcon, PromptIcon, PropertyFilterActions, PropertyFilterApplied, PropertyFilterCreator, ROOT_ENTITY_TYPES, ROOT_ENTITY_TYPE_OPTIONS, RadioGroup, RadioGroupItem, RepoIcon, Root$1 as Root, Row, RuleBuilder, RuleFieldSelect, RuleOperatorSelect, RuleRow, RuleValueInput, ScoresCardView, ScoresDataList, ScrollArea, ScrollBar, ScrollableContainer, SearchFieldBlock, Searchbar, SearchbarWrapper, Section, SectionCard, SectionRoot, Sections, Select, SelectContent, SelectDataFilter, SelectFieldBlock, SelectGroup, SelectItem, SelectTrigger, SelectValue, SessionExpired, SettingsIcon, SettingsRow, Shadows, SideDialog, Sizes, Skeleton, SkillIcon, SlashIcon, Slider, Spacings, SpanDataPanelView, SpanDetailsView, SpanTokenUsage, Spinner, StackedRunsBars, StatusBadge, SubSectionRoot, Switch, TRACE_ANCHOR_SPAN_ID_PARAM, TRACE_DATE_FROM_PARAM, TRACE_DATE_PRESET_PARAM, TRACE_DATE_PRESET_VALUES, TRACE_DATE_TO_PARAM, TRACE_LIST_MODE_PARAM, TRACE_LIST_MODE_VALUES, TRACE_PROPERTY_FILTER_FIELD_IDS, TRACE_PROPERTY_FILTER_PARAM_BY_FIELD, TRACE_ROOT_ENTITY_TYPE_PARAM, TRACE_STATUS_OPTIONS, TRACE_STATUS_PARAM, TRACE_STATUS_VALUES, TRACE_SYNTHETIC_FILTER_FIELD_IDS, Tab, TabContent, TabList, Table, Tabs, Tbody, TextAndIcon, TextFieldBlock, Textarea, Th, Thead, ThemeProvider, ThemeToggle, TimePicker, TimelineExpandCol, TimelineNameCol, TimelineStructureSign, TimelineTimingCol, Toaster, TokenUsageByAgentCardView, ToolCoinIcon, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDataPanelView, TraceDetailsView, TraceIcon, TraceKeysAndValues, TraceTimeline, TraceTimelineSpan, TracesDataList, TracesErrorContent, TracesLayout, TracesListModeToggle, TracesListView, TracesToolbar, TracesVolumeCardView, Tree, Truncate, TsIcon, Txt, TxtCell, VARIABLE_PATTERN, VariablesIcon, WorkflowCoinIcon, WorkflowIcon, XGroqIcon, applyLogsPropertyFilterTokens, applyMetricsPropertyFilterTokens, applyTracePropertyFilterTokens, buildLogsDrilldownUrl, buildLogsListFilters, buildMetricsDimensionalFilter, buildTraceListFilters, buildTracesDrilldownUrl, buttonVariants, buttonsGroupVariants, clearSavedLogsFilters, clearSavedMetricsFilters, clearSavedTraceFilters, cn, comboboxStyles, countLeafRules, createDefaultRule, createDefaultRuleGroup, createField, createLogsPropertyFilterFields, createMetricsPropertyFilterFields, createTracePropertyFilterFields, createVariableAutocomplete, fieldsToJSONSchema, fileToBase64, flattenSchemaToVariables, focusRing, formElementFocus, formElementFocusWithin, formElementRadius, formElementSizes, formElementTransition, formatCompact, formatCost, formatHierarchicalSpans, formatJSON, generateDefaultValues, getAllSpanIds, getChildFieldOptions, getColumnTemplate, getFieldOptionAtPath, getFieldOptionsFromSchema, getFileContentType, getInputPreview, getIsLinkActive, getItemListColumnTemplate, getLogsPropertyFilterTokens, getMainContentContentClassName, getMetricsPropertyFilterTokens, getPreservedLogsFilterParams, getPreservedTraceFilterParams, getShortId$1 as getShortId, getSpanDescendantIds, getSpanTypeUi, getStatusIcon, getToNextEntryFn, getToNextItemFn, getToPreviousEntryFn, getToPreviousItemFn, getTokenLimitMessage, getTracePropertyFilterTokens, groupTracesByThread, hasAnyLogsFilterParams, hasAnyMetricsFilterParams, hasAnyTraceFilterParams, highlight, hoverEffects, inputVariants, is401UnauthorizedError, is403ForbiddenError, isNonRetryableError, isObjectEmpty, isRule, isRuleGroup, isTokenLimitExceeded, isValidJson, isValidPreset, jsonSchemaToFields, loadLogsFiltersFromStorage, loadMetricsFiltersFromStorage, loadTraceFiltersFromStorage, lodashTitleCase, narrowWindowToBucket, navItemClasses, neutralizeFilterTokens, neutralizeLogsFilterTokens, parseError, parseFieldPath, saveLogsFiltersToStorage, saveMetricsFiltersToStorage, saveTraceFiltersToStorage, sharedFormElementDisabledStyle, sharedFormElementFocusStyle, sharedFormElementStyle, shouldRetryQuery, spanTypePrefixes, stringToColor, textareaVariants, toSigFigs, toast, transitions, truncateString, useActiveResourcesKpiMetrics, useActiveThreadsKpiMetrics, useAgentRunsKpiMetrics, useAutoscroll, useBranch, useCodemirrorTheme$3 as useCodemirrorTheme, useCopyToClipboard, useDrilldown, useEntityNames, useEnvironments, useInView, useJSONSchemaForm, useJSONSchemaFormField, useJSONSchemaFormNestedContext, useLatencyMetrics, useLogs, useLogsFilterPersistence, useLogsListNavigation, useLogsUrlState, useMainSidebar, useMaybeSidebar, useMetrics, useMetricsFilters, useModelCostKpiMetrics, useModelUsageCostMetrics, usePlaygroundStore, useScoresMetrics, useServiceNames, useSpanDetail, useTableKeyboardNavigation, useTags, useTheme, useTokenUsageByAgentMetrics, useTopActiveThreadsMetrics, useTopResourcesByThreadsMetrics, useTotalTokensKpiMetrics, useTraceFilterPersistence, useTraceLightSpans, useTraceListNavigation, useTraceOrBranchSpans, useTraceSpanNavigation, useTraceSpans, useTraceUrlState, useTraceVolumeMetrics, useTraces, variableHighlight };
 //# sourceMappingURL=index.es.js.map