@mastra/playground-ui 30.0.2-alpha.2 → 31.0.0-alpha.4

package/dist/index.es.js

@@ -3624,12 +3624,14 @@ const formElementSizes = {
   lg: "h-form-lg"
 };
 const formElementFocus = "focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring transition-shadow duration-normal";
-const formElementFocusWithin = "focus-within:outline-hidden focus-within:ring-1 focus-within:ring-accent1 focus-within:shadow-focus-ring transition-shadow duration-normal";
-const formElementRadius = "rounded-md";
-const sharedFormElementStyle = "bg-surface2 border border-border1 text-neutral5 hover:text-neutral6 hover:border-border2 rounded-lg";
 const sharedFormElementFocusStyle = "outline-hidden focus-visible:outline-hidden focus-visible:border-accent1 focus-visible:ring-1 focus-visible:ring-accent1/40";
 const sharedFormElementDisabledStyle = "disabled:opacity-50 disabled:cursor-not-allowed";
-const formElementTransition = "transition-all duration-normal ease-out-custom";
+const inputFocusBorderVisible = "focus-visible:border-neutral5/50";
+const inputFocusBorderWithin = "focus-within:border-neutral5/50";
+const inputHoverBorderWithin = "[&:hover:not(:focus-within)]:border-border2";
+const inputSurfaceAndFocusStyle = "bg-surface-overlay-soft border border-border1 text-neutral5 hover:text-neutral6 hover:bg-surface-overlay-strong hover:border-border2 outline-hidden focus-visible:outline-hidden focus-visible:bg-surface-overlay-strong " + inputFocusBorderVisible;
+const inputOutlineAndFocusStyle = "bg-transparent border border-border1 text-neutral5 hover:text-neutral6 hover:border-border2 outline-hidden focus-visible:outline-hidden " + inputFocusBorderVisible;
+const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";
 
 const TEXT_MODE_ADORNMENTS = cn(
   "gap-[.75em] rounded-full",
@@ -3706,6 +3708,7 @@ const Button = React__default.forwardRef(
         ref,
         disabled,
         "aria-label": ariaLabel,
+        "data-variant": variant,
         className: cn(buttonVariants({ variant, size: resolvedSize }), isLabelless && "[&>svg]:opacity-75", className),
         ...props,
         children: content
@@ -6011,14 +6014,18 @@ const textareaVariants = cva(
   {
     variants: {
       variant: {
-        default: cn(sharedFormElementStyle, sharedFormElementFocusStyle, sharedFormElementDisabledStyle),
-        unstyled: "border-0 bg-transparent shadow-none focus:shadow-none focus:ring-0"
+        default: cn(inputSurfaceAndFocusStyle, "rounded-xl", sharedFormElementDisabledStyle),
+        filled: cn(inputSurfaceAndFocusStyle, "rounded-xl", sharedFormElementDisabledStyle),
+        outline: cn(inputOutlineAndFocusStyle, "rounded-xl", sharedFormElementDisabledStyle),
+        unstyled: unstyledFormElementStyle
       },
+      // Text tokens mirror the Input size scale (sm→ui-sm, md/default→ui-md, lg→ui-lg)
+      // so a Textarea reads at the same size as a sibling Input.
       size: {
         sm: "px-2 py-1.5 text-ui-sm",
-        md: "px-3 py-2 text-ui-sm",
+        md: "px-3 py-2 text-ui-md",
         default: "px-3 py-2 text-ui-md",
-        lg: "px-4 py-3 text-ui-sm"
+        lg: "px-4 py-3 text-ui-lg"
       }
     },
     defaultVariants: {
@@ -6034,8 +6041,7 @@ const Textarea = React.forwardRef(
       {
         className: cn(
           textareaVariants({ variant, size }),
-          // Error state styling
-          error && "border-error focus:ring-error focus:shadow-glow-accent2",
+          error && "border-error focus-visible:border-error",
           className
         ),
         "data-testid": testId,
@@ -6907,6 +6913,7 @@ const SelectTrigger = React.forwardRef(
       Select$1.Trigger,
       {
         ref,
+        "data-slot": "select-trigger",
         className: cn(
           "inline-flex w-full cursor-pointer select-none items-center justify-between gap-1.5 whitespace-nowrap",
           formElementSizes[size],
@@ -7157,8 +7164,21 @@ function CodeBlock$1({
     }
   );
 }
+function tokenStyle(token, isDark) {
+  if (token.htmlStyle && typeof token.htmlStyle === "object") {
+    const vars = token.htmlStyle;
+    const color = isDark ? vars["--shiki-dark"] : vars["--shiki-light"];
+    const background = isDark ? vars["--shiki-dark-bg"] : vars["--shiki-light-bg"];
+    const style = {};
+    if (color) style.color = color;
+    if (background) style.backgroundColor = background;
+    return Object.keys(style).length ? style : void 0;
+  }
+  return token.color ? { color: token.color } : void 0;
+}
 function HighlightedCode({ code, lang }) {
   const [tokens, setTokens] = React.useState(null);
+  const isDark = useTheme().resolvedTheme === "dark";
   React.useEffect(() => {
     if (!lang) {
       setTokens(null);
@@ -7179,14 +7199,7 @@ function HighlightedCode({ code, lang }) {
     return /* @__PURE__ */ jsx("pre", { className: preClass, children: code });
   }
   return /* @__PURE__ */ jsx("pre", { className: preClass, children: /* @__PURE__ */ jsx("code", { children: tokens.map((line, lineIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { children: line.map((token, tokenIndex) => /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "text-shiki-light bg-shiki-light-bg dark:text-shiki-dark dark:bg-shiki-dark-bg",
-        children: token.content
-      },
-      tokenIndex
-    )) }),
+    /* @__PURE__ */ jsx("span", { children: line.map((token, tokenIndex) => /* @__PURE__ */ jsx("span", { style: tokenStyle(token, isDark), children: token.content }, tokenIndex)) }),
     lineIndex !== tokens.length - 1 && "\n"
   ] }, lineIndex)) }) });
 }
@@ -7658,13 +7671,25 @@ const inputVariants = cva(
     "flex w-full text-neutral6 border bg-transparent",
     "transition-all duration-normal ease-out-custom",
     "placeholder:text-neutral2 placeholder:transition-opacity placeholder:duration-normal",
-    "focus:placeholder:opacity-70"
+    "focus:placeholder:opacity-70",
+    // type="number": hide native browser spinner arrows (they clip the pill).
+    // For incrementable numeric inputs, compose <InputGroup> with +/- buttons
+    // instead — see the NumberWithStepper story. WebKit uses the spin-button
+    // pseudo-elements; Firefox needs `appearance: textfield` on the input.
+    "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0",
+    "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0",
+    "[&[type=number]]:[appearance:textfield]",
+    // type="search": drop WebKit's native clear button so the DS owns the search chrome.
+    // Compose an <InputGroup> with an InputGroupButton to add a clear control.
+    "[&::-webkit-search-cancel-button]:appearance-none"
   ),
   {
     variants: {
       variant: {
-        default: cn(sharedFormElementStyle, sharedFormElementFocusStyle, sharedFormElementDisabledStyle),
-        unstyled: "border-0 bg-transparent shadow-none focus:shadow-none focus:ring-0"
+        default: cn(inputSurfaceAndFocusStyle, "rounded-full", sharedFormElementDisabledStyle),
+        filled: cn(inputSurfaceAndFocusStyle, "rounded-full", sharedFormElementDisabledStyle),
+        outline: cn(inputOutlineAndFocusStyle, "rounded-full", sharedFormElementDisabledStyle),
+        unstyled: unstyledFormElementStyle
       },
       size: {
         sm: `${formElementSizes.sm} text-ui-sm px-[.75em]`,
@@ -7685,12 +7710,7 @@ const Input = React.forwardRef(
       "input",
       {
         type,
-        className: cn(
-          inputVariants({ variant, size }),
-          // Error state styling
-          error && "border-error focus:ring-error focus:shadow-glow-accent2",
-          className
-        ),
+        className: cn(inputVariants({ variant, size }), error && "border-error focus-visible:border-error", className),
         "data-testid": testId,
         ref,
         "aria-invalid": error,
@@ -7757,6 +7777,7 @@ function SearchFieldBlock({
   onReset,
   className,
   size,
+  variant,
   isMinimized,
   onMinimizedChange
 }) {
@@ -7796,6 +7817,7 @@ function SearchFieldBlock({
             placeholder,
             onChange,
             size,
+            variant,
             className: cn(
               size === "sm" && "pl-8 pr-8",
               size === "md" && "pl-9 pr-9",
@@ -7909,27 +7931,75 @@ const HoverCardContent = React.forwardRef(
 );
 HoverCardContent.displayName = "HoverCardContent";
 
-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,
+const inputGroupBaseClassName = cn(
+  // `flex-1` (not `min-w-0`) lets the root fill a flex row while keeping its content-floor
+  // so it never collapses to 0. `items-center` centres the control: it carries its own
+  // h-form-* (2px taller than the root's content box), so stretch would push its text low
+  // / overflow the bottom border, while centring overlaps the (transparent) borders cleanly.
+  "group/input-group relative flex w-full flex-1 items-center",
+  "border border-border1 text-neutral6",
   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-[[aria-invalid=true]]:border-error",
+  // Height is on the root (border-box) so the group matches a same-size sibling control.
+  // Auto height when vertical (block-* addon) or wrapping a textarea.
+  "has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:h-auto",
+  "has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:h-auto",
+  "has-[textarea]:h-auto",
   "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.
+  // In flex-col, flex-1 zeroes the control's height; force flex-none + w-full instead.
   "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 }) });
+const inputGroupRoundedTextareaClassName = cn(
+  // Pill (rounded-full) only fits single-line inline shapes. Fall back to rounded-xl
+  // whenever the group goes vertical (block-* addon) or wraps a textarea.
+  "has-[>[data-align=block-start]]:rounded-xl",
+  "has-[>[data-align=block-end]]:rounded-xl",
+  "has-[textarea]:rounded-xl"
+);
+const inputGroupFilledVariant = cn(
+  "bg-surface-overlay-soft rounded-full",
+  "hover:bg-surface-overlay-strong",
+  inputHoverBorderWithin,
+  "outline-hidden focus-within:outline-hidden focus-within:bg-surface-overlay-strong",
+  inputFocusBorderWithin,
+  inputGroupRoundedTextareaClassName
+);
+const inputGroupVariants = cva(inputGroupBaseClassName, {
+  variants: {
+    variant: {
+      default: inputGroupFilledVariant,
+      filled: inputGroupFilledVariant,
+      outline: cn(
+        "bg-transparent rounded-full",
+        inputHoverBorderWithin,
+        "outline-hidden focus-within:outline-hidden",
+        inputFocusBorderWithin,
+        inputGroupRoundedTextareaClassName
+      )
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
 });
+const InputGroup = React.forwardRef(
+  ({ className, size = "md", variant, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "data-slot": "input-group",
+        "data-size": size,
+        className: cn(inputGroupVariants({ variant }), formElementSizes[size], className),
+        ...props
+      }
+    );
+  }
+);
 InputGroup.displayName = "InputGroup";
 const inputGroupAddonVariants = cva(
   cn(
@@ -7974,15 +8044,20 @@ const InputGroupAddon = React.forwardRef(
   }
 );
 InputGroupAddon.displayName = "InputGroupAddon";
-const inputGroupControlTextSize = {
-  sm: "text-ui-sm",
-  md: "text-ui-md",
-  default: "text-ui-md",
-  lg: "text-ui-lg"
-};
+const inputGroupControlHeightBySize = cn(
+  "group-data-[size=sm]/input-group:h-form-sm",
+  "group-data-[size=md]/input-group:h-form-md",
+  "group-data-[size=default]/input-group:h-form-default",
+  "group-data-[size=lg]/input-group:h-form-lg"
+);
+const inputGroupControlTextBySize = cn(
+  "group-data-[size=sm]/input-group:text-ui-sm",
+  "group-data-[size=md]/input-group:text-ui-md",
+  "group-data-[size=default]/input-group:text-ui-md",
+  "group-data-[size=lg]/input-group:text-ui-lg"
+);
 const InputGroupInput = React.forwardRef(
   ({ className, testId, error, type = "text", ...props }, ref) => {
-    const size = React.useContext(InputGroupSizeContext);
     return /* @__PURE__ */ jsx(
       "input",
       {
@@ -7992,12 +8067,23 @@ const InputGroupInput = React.forwardRef(
         "data-testid": testId,
         "aria-invalid": error,
         className: cn(
+          // Height matches the root box (which is fixed/border-box, so it doesn't grow);
+          // this also keeps the control from collapsing in block mode (flex-col).
           "flex-1 min-w-0 bg-transparent text-neutral6 px-3 outline-hidden",
-          formElementSizes[size],
-          inputGroupControlTextSize[size],
+          inputGroupControlHeightBySize,
+          inputGroupControlTextBySize,
           "placeholder:text-neutral2 placeholder:transition-opacity placeholder:duration-normal",
           "focus:placeholder:opacity-70",
           "disabled:cursor-not-allowed",
+          // Hide native number-spinner arrows so consumers can compose their own
+          // stepper (see the NumberWithStepper story). WebKit uses the spin-button
+          // pseudo-elements; Firefox needs `appearance: textfield` on the input.
+          "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0",
+          "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0",
+          "[&[type=number]]:[appearance:textfield]",
+          // type="search": drop WebKit's native clear button so it doesn't double up with a
+          // custom clear control (e.g. the scorers toolbar's InputGroupButton).
+          "[&::-webkit-search-cancel-button]:appearance-none",
           className
         ),
         ...props
@@ -8008,7 +8094,6 @@ const InputGroupInput = React.forwardRef(
 InputGroupInput.displayName = "InputGroupInput";
 const InputGroupTextarea = React.forwardRef(
   ({ className, testId, error, ...props }, ref) => {
-    const size = React.useContext(InputGroupSizeContext);
     return /* @__PURE__ */ jsx(
       "textarea",
       {
@@ -8018,7 +8103,7 @@ const InputGroupTextarea = React.forwardRef(
         "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],
+          inputGroupControlTextBySize,
           "placeholder:text-neutral2 placeholder:transition-opacity placeholder:duration-normal",
           "focus:placeholder:opacity-70",
           "disabled:cursor-not-allowed",
@@ -8476,8 +8561,18 @@ 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"),
+  // Lift the hovered/focused segment so its full border paints over the collapsed seam (else a
+  // neighbour clips a side / the seam ignores the active colour). Use `:focus-visible`, NOT
+  // `:focus-within`: a mouse click leaves a plain `:focus` on a button, which would otherwise
+  // keep its seam border highlighted until blur. `:has(:focus-visible)` covers a nested
+  // focusable (the <input> inside an InputGroup); text inputs match :focus-visible on click too,
+  // which is the wanted behaviour for a field.
+  cn(
+    "flex",
+    "[&>*:hover]:relative [&>*:hover]:z-10",
+    "[&>*:focus-visible]:relative [&>*:focus-visible]:z-10",
+    "[&>*:has(:focus-visible)]:relative [&>*:has(:focus-visible)]:z-10"
+  ),
   {
     variants: {
       orientation: {
@@ -8493,24 +8588,50 @@ const buttonsGroupVariants = cva(
       {
         orientation: "horizontal",
         spacing: "close",
-        // Skip separators when collapsing borders so they stay visible.
+        // Flatten inner corners. A segment rounds its right edge off having a *real* segment
+        // somewhere after it (general sibling `~`, not `:not(:last-child)` and not adjacent
+        // `+`). This survives non-segment children that frameworks inject between/around the
+        // real ones: Base UI's trailing `<input aria-hidden>` (Select), and the visually
+        // -hidden focus guards (`[data-base-ui-focus-guard]`) + positioner anchor (`[aria-owns]`)
+        // a Menu/Popover inserts while OPEN — without this a DropdownMenu split-button seam
+        // breaks the moment the menu opens. The same ignore-list is applied to every seam rule.
         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"
+          "[&>*:has(~_*:not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]))]:rounded-r-none",
+          "[&>*:not(:first-child):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns])]:rounded-l-none",
+          // One-line seam: `-ml-px` overlaps adjacent borders onto the same pixel. Filled
+          // segments (opaque bg: default/primary buttons, the text chip) keep their own
+          // border — the bg hides the neighbour's. Transparent/outline segments null their
+          // left border at rest (so the neighbour's shows without doubling) and reveal it on
+          // hover / keyboard-focus, where the z-10 lift paints the complete border on top.
+          "[&>*:not([data-slot=buttons-group-separator]):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]):not(:first-child)]:-ml-px",
+          "[&>*:not([data-slot=buttons-group-separator]):not([data-slot=buttons-group-text]):not([data-variant=default]):not([data-variant=primary]):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible))]:border-l-transparent",
+          // `primary` is filled but borderless — give it (only) an inset-shadow divider.
+          "[&>[data-variant=primary]:not([aria-hidden=true]):not(:first-child)]:shadow-[inset_1px_0_0_0_var(--color-border1)]",
+          // Animate only colour/bg so the seam + ring snap (no fade desynced from the z-10 drop).
+          "[&>*:not([data-slot=buttons-group-separator]):not([aria-hidden=true])]:transition-[color,background-color]",
+          // Group owns sizing (no consumer width classes): fill on flex/InputGroup/input,
+          // content-width on a Select trigger (descendant rule beats the trigger's `w-full`).
+          "[&>[data-slot=select-trigger]]:w-fit [&>[data-slot=select-trigger]]:flex-none",
+          "[&>input]:flex-1"
         )
       },
       {
         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.
+        // Children are capsules (rounded-full); re-round the outer ends to rounded-xl and
+        // flatten the touching ones. Unlike the horizontal block, these use plain structural
+        // selectors (no aria-hidden / data-base-ui-focus-guard / aria-owns ignore-list): vertical
+        // close-spacing is only used with plain buttons, so it never hosts a Select/DropdownMenu
+        // that injects guard siblings. Mirror the horizontal ignore-list here if one ever does.
         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"
+          "[&>*:not([data-slot=buttons-group-separator]):not(:first-child)]:-mt-px",
+          "[&>*:not([data-slot=buttons-group-separator]):not([data-slot=buttons-group-text]):not([data-variant=default]):not([data-variant=primary]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible))]:border-t-transparent",
+          "[&>[data-variant=primary]:not(:first-child)]:shadow-[inset_0_1px_0_0_var(--color-border1)]",
+          "[&>*:not([data-slot=buttons-group-separator])]:transition-[color,background-color]"
         )
       }
     ],
@@ -9443,12 +9564,30 @@ const searchbarSizeClasses = {
   lg: formElementSizes.lg,
   default: formElementSizes.default
 };
+const searchbarFilledSurface = cn(
+  "bg-surface-overlay-soft rounded-full",
+  "hover:bg-surface-overlay-strong",
+  inputHoverBorderWithin,
+  "outline-hidden focus-within:outline-hidden focus-within:bg-surface-overlay-strong",
+  inputFocusBorderWithin
+);
+const searchbarVariantClasses = {
+  default: searchbarFilledSurface,
+  filled: searchbarFilledSurface,
+  outline: cn(
+    "bg-transparent rounded-full",
+    inputHoverBorderWithin,
+    "outline-hidden focus-within:outline-hidden",
+    inputFocusBorderWithin
+  )
+};
 const Searchbar = ({
   onSearch,
   label,
   placeholder,
   debounceMs = 300,
   size = "md",
+  variant = "outline",
   className
 }) => {
   const id = useId();
@@ -9483,10 +9622,8 @@ const Searchbar = ({
     {
       className: cn(
         "border border-border1 flex w-full items-center gap-2 overflow-hidden pl-2 pr-1",
-        formElementRadius,
-        formElementFocusWithin,
         transitions.all,
-        "hover:border-neutral2",
+        searchbarVariantClasses[variant],
         searchbarSizeClasses[size],
         className
       ),
@@ -9501,7 +9638,7 @@ const Searchbar = ({
               type: "text",
               placeholder,
               className: cn(
-                "bg-transparent text-ui-md placeholder:text-neutral3 block w-full px-2 outline-hidden",
+                "bg-transparent text-ui-md placeholder:text-neutral2 block w-full px-2 outline-hidden",
                 searchbarSizeClasses[size]
               ),
               name: id,
@@ -14056,7 +14193,8 @@ const ListSearch = ({
   placeholder,
   debounceMs = 300,
   size,
-  value: controlledValue
+  value: controlledValue,
+  variant = "outline"
 }) => {
   const id = useId();
   const [internalValue, setInternalValue] = useState(controlledValue ?? "");
@@ -14093,6 +14231,7 @@ const ListSearch = ({
       onChange: handleChange,
       onReset: handleReset,
       size,
+      variant,
       className: "w-full max-w-[30rem]"
     }
   );
@@ -15706,6 +15845,16 @@ const formatJSON = async (code) => {
   });
   return formatted;
 };
+const formatTypeScript = async (code) => {
+  const [prettier, prettierPluginBabel, prettierPluginEstree] = await loadPrettier();
+  const formatted = await prettier.format(code, {
+    parser: "babel-ts",
+    printWidth: 80,
+    tabWidth: 2,
+    plugins: [prettierPluginBabel, prettierPluginEstree]
+  });
+  return formatted;
+};
 const isValidJson = (str) => {
   try {
     const obj = JSON.parse(str);
@@ -20557,7 +20706,11 @@ const NoTracesInfo = ({ datePreset, dateFrom, dateTo } = {}) => {
 };
 
 const IMMUTABLE_CACHE_TIME$2 = 1e3 * 60 * 60 * 24 * 30;
-function useBranch({ traceId, spanId, depth }) {
+function useBranch({
+  traceId,
+  spanId,
+  depth
+}) {
   const client = useMastraClient();
   return useQuery({
     queryKey: ["branch", traceId, spanId, depth],
@@ -20781,7 +20934,11 @@ function mergeDeltaIntoPage0(old, delta, listMode) {
   }
   return { ...old, pages: [updatedFirst, ...rest] };
 }
-const useTraces = ({ filters, listMode = "traces", polling = {} }) => {
+const useTraces = ({
+  filters,
+  listMode = "traces",
+  polling = {}
+}) => {
   const {
     deltaPollIntervalMs = DEFAULT_POLLING_CONFIG.deltaPollIntervalMs,
     deltaChaseIntervalMs = DEFAULT_POLLING_CONFIG.deltaChaseIntervalMs,
@@ -21781,13 +21938,13 @@ const useLogs = ({ filters } = {}) => {
     retry: false,
     refetchInterval: 1e4
   });
-  const { hasNextPage, isFetchingNextPage, fetchNextPage } = query;
+  const { hasNextPage, isFetchingNextPage, fetchNextPage, data, isLoading, isError, error } = query;
   useEffect(() => {
     if (isEndOfListInView && hasNextPage && !isFetchingNextPage) {
       void fetchNextPage();
     }
   }, [isEndOfListInView, hasNextPage, isFetchingNextPage, fetchNextPage]);
-  return { ...query, data: query.data, setEndOfListElement };
+  return { data, hasNextPage, isFetchingNextPage, fetchNextPage, isLoading, isError, error, setEndOfListElement };
 };
 
 const LOG_PARAM = "logId";
@@ -22095,5 +22252,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, 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, ContextMenu, CopyButton, CrossIcon, Crumb, DATE_PRESETS, DEFAULT_LOGS_FILTERS_STORAGE_KEY, DEFAULT_TRACE_FILTERS_STORAGE_KEY, DashboardCard, DataCodeSection, DataDetailsPanel, DataKeysAndValues, DataList, DataListSkeleton, DataPanel, DatasetsIcon, DatePicker, DateRangeSelector, DateTimeCell, DateTimePicker, DateTimePickerContent, DateTimeRangePicker, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DividerIcon, DocsIcon, Drawer, DrawerBackdrop, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerIndent, DrawerIndentBackground, DrawerInteractive, DrawerPopup, DrawerPortal, DrawerProvider, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, DropdownMenu, EXTENSION_TO_MIME, ElementSelect, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityName, Entry, EntryCell, EnvIcon, ErrorBoundary, ErrorState, ExperimentsIcon, 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, HoverCard, HoverCardContent, HoverCardTrigger, 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, MetricsIcon, MetricsKpiCard, MetricsLineChart, MetricsLineChartTooltip, MetricsProvider, MistralIcon, ModelUsageCostCardView, MultiColumn, MultiCombobox, NestedFields, NetlifyIcon, NoDataPageLayout, NoLogsInfo, NoTracesInfo, Notice, OPERATORS, OPERATOR_LABELS, OpenAIIcon, OpenErrorsInLogsButton, OpenInTracesButton, OpenaiChatIcon, PageHeader, PageHeadingContext, 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, RequestContextIcon, Root$1 as Root, Row, RuleBuilder, RuleFieldSelect, RuleOperatorSelect, RuleRow, RuleValueInput, ScorersIcon, 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_OPTIONS, 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, WorkspacesIcon, XGroqIcon, applyLogsPropertyFilterTokens, applyMetricsPropertyFilterTokens, applyTracePropertyFilterTokens, buildLogsDrilldownUrl, buildLogsListFilters, buildMetricsDimensionalFilter, buildTraceListFilters, buildTracesDrilldownUrl, buttonVariants, buttonsGroupVariants, clearSavedLogsFilters, clearSavedMetricsFilters, clearSavedTraceFilters, cn, comboboxStyles, countLeafRules, createDefaultRule, createDefaultRuleGroup, createDrawerHandle, createField, createLogsPropertyFilterFields, createMetricsPropertyFilterFields, createTracePropertyFilterFields, createVariableAutocomplete, fieldsToJSONSchema, fileToBase64, flattenSchemaToVariables, focusRing, formElementFocus, formElementFocusWithin, formElementRadius, formElementSizes, formElementTransition, formatCompact, formatCost, formatHierarchicalSpans, formatJSON, generateDefaultValues, getAllSpanIds, getChildFieldOptions, getFieldOptionAtPath, getFieldOptionsFromSchema, getFileContentType, getInputPreview, getIsLinkActive, getItemListColumnTemplate, getLogsPropertyFilterTokens, getMainContentContentClassName, getMetricsPropertyFilterTokens, getPreservedLogsFilterParams, getPreservedTraceFilterParams, getShortId$1 as getShortId, getSpanDescendantIds, getSpanTypeUi, getStatusIcon, getToNextItemFn, getToPreviousItemFn, getTokenLimitMessage, getTracePropertyFilterTokens, hasAnyLogsFilterParams, hasAnyMetricsFilterParams, hasAnyTraceFilterParams, highlight, hoverEffects, inputVariants, is401UnauthorizedError, is403ForbiddenError, isBranchesNotSupportedError, 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, useDrawerSide, useDrilldown, useEntityNames, useEnvironments, useInView, useJSONSchemaForm, useJSONSchemaFormField, useJSONSchemaFormNestedContext, useLatencyMetrics, useLogs, useLogsFilterPersistence, useLogsListNavigation, useLogsUrlState, useMainSidebar, useMaybeSidebar, useMetrics, useMetricsFilters, useModelCostKpiMetrics, useModelUsageCostMetrics, usePageHeading, usePlaygroundStore, useScoresMetrics, useServiceNames, useSpanDetail, useTableKeyboardNavigation, useTags, useTheme, useTokenUsageByAgentMetrics, useTopActiveThreadsMetrics, useTopResourcesByThreadsMetrics, useTotalTokensKpiMetrics, useTraceFilterPersistence, useTraceLightSpans, useTraceListNavigation, useTraceOrBranchSpans, 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, 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, ContextMenu, CopyButton, CrossIcon, Crumb, DATE_PRESETS, DEFAULT_LOGS_FILTERS_STORAGE_KEY, DEFAULT_TRACE_FILTERS_STORAGE_KEY, DashboardCard, DataCodeSection, DataDetailsPanel, DataKeysAndValues, DataList, DataListSkeleton, DataPanel, DatasetsIcon, DatePicker, DateRangeSelector, DateTimeCell, DateTimePicker, DateTimePickerContent, DateTimeRangePicker, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DividerIcon, DocsIcon, Drawer, DrawerBackdrop, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerIndent, DrawerIndentBackground, DrawerInteractive, DrawerPopup, DrawerPortal, DrawerProvider, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, DropdownMenu, EXTENSION_TO_MIME, ElementSelect, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityName, Entry, EntryCell, EnvIcon, ErrorBoundary, ErrorState, ExperimentsIcon, 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, HoverCard, HoverCardContent, HoverCardTrigger, 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, MetricsIcon, MetricsKpiCard, MetricsLineChart, MetricsLineChartTooltip, MetricsProvider, MistralIcon, ModelUsageCostCardView, MultiColumn, MultiCombobox, NestedFields, NetlifyIcon, NoDataPageLayout, NoLogsInfo, NoTracesInfo, Notice, OPERATORS, OPERATOR_LABELS, OpenAIIcon, OpenErrorsInLogsButton, OpenInTracesButton, OpenaiChatIcon, PageHeader, PageHeadingContext, 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, RequestContextIcon, Root$1 as Root, Row, RuleBuilder, RuleFieldSelect, RuleOperatorSelect, RuleRow, RuleValueInput, ScorersIcon, 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_OPTIONS, 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, WorkspacesIcon, XGroqIcon, applyLogsPropertyFilterTokens, applyMetricsPropertyFilterTokens, applyTracePropertyFilterTokens, buildLogsDrilldownUrl, buildLogsListFilters, buildMetricsDimensionalFilter, buildTraceListFilters, buildTracesDrilldownUrl, buttonVariants, buttonsGroupVariants, clearSavedLogsFilters, clearSavedMetricsFilters, clearSavedTraceFilters, cn, comboboxStyles, countLeafRules, createDefaultRule, createDefaultRuleGroup, createDrawerHandle, createField, createLogsPropertyFilterFields, createMetricsPropertyFilterFields, createTracePropertyFilterFields, createVariableAutocomplete, fieldsToJSONSchema, fileToBase64, flattenSchemaToVariables, focusRing, formElementFocus, formElementSizes, formatCompact, formatCost, formatHierarchicalSpans, formatJSON, formatTypeScript, generateDefaultValues, getAllSpanIds, getChildFieldOptions, getFieldOptionAtPath, getFieldOptionsFromSchema, getFileContentType, getInputPreview, getIsLinkActive, getItemListColumnTemplate, getLogsPropertyFilterTokens, getMainContentContentClassName, getMetricsPropertyFilterTokens, getPreservedLogsFilterParams, getPreservedTraceFilterParams, getShortId$1 as getShortId, getSpanDescendantIds, getSpanTypeUi, getStatusIcon, getToNextItemFn, getToPreviousItemFn, getTokenLimitMessage, getTracePropertyFilterTokens, hasAnyLogsFilterParams, hasAnyMetricsFilterParams, hasAnyTraceFilterParams, highlight, hoverEffects, inputFocusBorderVisible, inputFocusBorderWithin, inputHoverBorderWithin, inputOutlineAndFocusStyle, inputSurfaceAndFocusStyle, is401UnauthorizedError, is403ForbiddenError, isBranchesNotSupportedError, isNonRetryableError, isObjectEmpty, isRule, isRuleGroup, isTokenLimitExceeded, isValidJson, isValidPreset, jsonSchemaToFields, loadLogsFiltersFromStorage, loadMetricsFiltersFromStorage, loadTraceFiltersFromStorage, lodashTitleCase, narrowWindowToBucket, navItemClasses, neutralizeFilterTokens, neutralizeLogsFilterTokens, parseError, parseFieldPath, saveLogsFiltersToStorage, saveMetricsFiltersToStorage, saveTraceFiltersToStorage, sharedFormElementDisabledStyle, sharedFormElementFocusStyle, shouldRetryQuery, spanTypePrefixes, stringToColor, toSigFigs, toast, transitions, truncateString, unstyledFormElementStyle, useActiveResourcesKpiMetrics, useActiveThreadsKpiMetrics, useAgentRunsKpiMetrics, useAutoscroll, useBranch, useCodemirrorTheme$3 as useCodemirrorTheme, useCopyToClipboard, useDrawerSide, useDrilldown, useEntityNames, useEnvironments, useInView, useJSONSchemaForm, useJSONSchemaFormField, useJSONSchemaFormNestedContext, useLatencyMetrics, useLogs, useLogsFilterPersistence, useLogsListNavigation, useLogsUrlState, useMainSidebar, useMaybeSidebar, useMetrics, useMetricsFilters, useModelCostKpiMetrics, useModelUsageCostMetrics, usePageHeading, 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