@mastra/playground-ui 51.3.1 → 51.4.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @mastra/playground-ui
 
+## 51.4.0-alpha.1
+
+### Minor Changes
+
+- Removed the separate `Chip`, `ChipsGroup`, and `StatusBadge` exports. `Badge` is now the single compact label and status primitive, with nine color-based variants, muted emphasis, sizes, icons, and dot or pulse indicators. Its variants are `neutral`, `green`, `red`, `blue`, `yellow`, `purple`, `orange`, `cyan`, and `pink`; omitting `variant` uses `neutral`. ([#22640](https://github.com/mastra-ai/mastra/pull/22640))
+
+  `ChipsGroup` has no direct replacement. Use a layout element appropriate to the surrounding UI around `Badge` instances.
+
+  `Badge` now renders an inline `<span>` instead of a `<div>`, and `BadgeProps` now extends `HTMLAttributes<HTMLSpanElement>` instead of `HTMLAttributes<HTMLDivElement>`. Update block-layout assumptions and div-specific refs or handlers when migrating.
+
+  Badges use soft corners and a subtle ring, with an inner shadow in light mode and an inner glow in dark mode.
+
+  Before:
+
+  ```tsx
+  import { Chip, ChipsGroup } from '@mastra/playground-ui/components/Chip';
+  import { StatusBadge } from '@mastra/playground-ui/components/StatusBadge';
+
+  <ChipsGroup>
+    <Chip color="purple" intensity="muted">Baseline</Chip>
+    <Chip color="blue" intensity="muted">Candidate</Chip>
+  </ChipsGroup>
+  <StatusBadge variant="success" withDot>Connected</StatusBadge>
+  ```
+
+  After:
+
+  ```tsx
+  import { Badge } from '@mastra/playground-ui/components/Badge';
+
+  <div className="flex items-center gap-1">
+    <Badge variant="purple" emphasis="muted">Baseline</Badge>
+    <Badge variant="blue" emphasis="muted">Candidate</Badge>
+  </div>
+  <Badge variant="green" indicator="dot">Connected</Badge>
+  ```
+
+### Patch Changes
+
+- Improved trace search in Studio: when a span matches your search only through its metadata, attributes or error payload, its name in the timeline is now painted in a distinct color so you can see why the row is there without opening it. Spans matching by name keep the usual highlight. ([#22660](https://github.com/mastra-ai/mastra/pull/22660))
+
+- Improved the Studio traces list: combined the Date and Time columns into a single Created column, capped the Input column width so other columns stay visible, rendered trace status as a colored badge, and made the list shrink to the viewport instead of scrolling horizontally. Renamed the trace panel action to "Add full trace to dataset". ([#22682](https://github.com/mastra-ai/mastra/pull/22682))
+
+- Updated dependencies [[`a3606a0`](https://github.com/mastra-ai/mastra/commit/a3606a09f3deaeef17caf04b9c6a0d7cd6b80fe6), [`4095752`](https://github.com/mastra-ai/mastra/commit/40957529233d202446ebecab1f59c76e99910230), [`a3606a0`](https://github.com/mastra-ai/mastra/commit/a3606a09f3deaeef17caf04b9c6a0d7cd6b80fe6)]:
+  - @mastra/core@1.63.3-alpha.1
+  - @mastra/client-js@1.42.5-alpha.1
+  - @mastra/react@1.4.10-alpha.1
+
+## 51.3.2-alpha.0
+
+### Patch Changes
+
+- Updated dependencies [[`3910c77`](https://github.com/mastra-ai/mastra/commit/3910c77413a3058ab270c6dbc74a59bc3cdf67ea)]:
+  - @mastra/core@1.63.3-alpha.0
+  - @mastra/client-js@1.42.5-alpha.0
+  - @mastra/react@1.4.10-alpha.0
+
 ## 51.3.1
 
 ### Patch Changes

package/dist/Badge-DcllBqFg.cjs

@@ -0,0 +1,125 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const icons_Icon = require('./icons/Icon.cjs.js');
+const primitives_transitions = require('./primitives/transitions.cjs.js');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+
+const badgeToneStyles = {
+  neutral: {
+    default: "bg-neutral6/5 text-badge-neutral-fg",
+    muted: "bg-neutral6/[0.025] text-badge-neutral-fg",
+    indicator: "bg-neutral3"
+  },
+  green: {
+    default: "bg-badge-green/20 text-badge-green-fg",
+    muted: "bg-badge-green/10 text-badge-green-fg",
+    indicator: "bg-badge-green"
+  },
+  red: {
+    default: "bg-badge-red/20 text-badge-red-fg",
+    muted: "bg-badge-red/10 text-badge-red-fg",
+    indicator: "bg-badge-red"
+  },
+  blue: {
+    default: "bg-badge-blue/20 text-badge-blue-fg",
+    muted: "bg-badge-blue/10 text-badge-blue-fg",
+    indicator: "bg-badge-blue"
+  },
+  yellow: {
+    default: "bg-badge-yellow/20 text-badge-yellow-fg",
+    muted: "bg-badge-yellow/10 text-badge-yellow-fg",
+    indicator: "bg-badge-yellow"
+  },
+  purple: {
+    default: "bg-badge-purple/20 text-badge-purple-fg",
+    muted: "bg-badge-purple/10 text-badge-purple-fg",
+    indicator: "bg-badge-purple"
+  },
+  orange: {
+    default: "bg-badge-orange/20 text-badge-orange-fg",
+    muted: "bg-badge-orange/10 text-badge-orange-fg",
+    indicator: "bg-badge-orange"
+  },
+  cyan: {
+    default: "bg-badge-cyan/20 text-badge-cyan-fg",
+    muted: "bg-badge-cyan/10 text-badge-cyan-fg",
+    indicator: "bg-badge-cyan"
+  },
+  pink: {
+    default: "bg-badge-pink/20 text-badge-pink-fg",
+    muted: "bg-badge-pink/10 text-badge-pink-fg",
+    indicator: "bg-badge-pink"
+  }
+};
+const badgeSizeStyles = {
+  xs: {
+    badge: "h-[18px] gap-0.5 text-ui-xs",
+    withoutLeadingVisual: "px-1.5",
+    withLeadingVisual: "pl-1 pr-1.5",
+    indicator: "size-1"
+  },
+  sm: {
+    badge: "h-5 gap-1 text-ui-xs",
+    withoutLeadingVisual: "px-1.5",
+    withLeadingVisual: "px-1.5",
+    indicator: "size-1"
+  },
+  md: {
+    badge: "h-[22px] gap-1 text-ui-sm",
+    withoutLeadingVisual: "px-2",
+    withLeadingVisual: "pl-1.5 pr-2",
+    indicator: "size-1.5"
+  }
+};
+const Badge = ({
+  icon,
+  indicator,
+  variant = "neutral",
+  emphasis = "default",
+  size = "md",
+  className,
+  children,
+  ...props
+}) => {
+  const hasIcon = Boolean(icon);
+  const withLeadingVisual = hasIcon || indicator !== void 0;
+  const sizeStyles = badgeSizeStyles[size];
+  const paddingClass = withLeadingVisual ? sizeStyles.withLeadingVisual : sizeStyles.withoutLeadingVisual;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: utils_cn.cn(
+        "inline-flex w-fit max-w-full shrink-0 items-center rounded-[7px] font-medium",
+        "inset-ring-1 inset-ring-current/5",
+        "inset-shadow-xs inset-shadow-white/5 dark:inset-shadow-[0_3px_10px_-2px_white] dark:inset-shadow-white/7",
+        "dark:bg-linear-to-b dark:from-white/3 dark:to-white/0",
+        badgeToneStyles[variant][emphasis],
+        sizeStyles.badge,
+        paddingClass,
+        primitives_transitions.transitions.colors,
+        className
+      ),
+      ...props,
+      children: [
+        indicator !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: utils_cn.cn(
+              "shrink-0 rounded-full",
+              badgeToneStyles[variant].indicator,
+              sizeStyles.indicator,
+              indicator === "pulse" && "motion-safe:animate-pulse motion-reduce:animate-none"
+            )
+          }
+        ) : null,
+        hasIcon ? /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "sm", children: icon }) : null,
+        children
+      ]
+    }
+  );
+};
+
+exports.Badge = Badge;
+//# sourceMappingURL=Badge-DcllBqFg.cjs.map

package/dist/Badge-DcllBqFg.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-DcllBqFg.cjs","sources":["../src/ds/components/Badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type BadgeEmphasis = 'default' | 'muted';\nexport type BadgeIndicator = 'dot' | 'pulse';\n\ntype BadgeToneStyles = Record<BadgeEmphasis, string> & { indicator: string };\n\nconst badgeToneStyles = {\n  neutral: {\n    default: 'bg-neutral6/5 text-badge-neutral-fg',\n    muted: 'bg-neutral6/[0.025] text-badge-neutral-fg',\n    indicator: 'bg-neutral3',\n  },\n  green: {\n    default: 'bg-badge-green/20 text-badge-green-fg',\n    muted: 'bg-badge-green/10 text-badge-green-fg',\n    indicator: 'bg-badge-green',\n  },\n  red: {\n    default: 'bg-badge-red/20 text-badge-red-fg',\n    muted: 'bg-badge-red/10 text-badge-red-fg',\n    indicator: 'bg-badge-red',\n  },\n  blue: {\n    default: 'bg-badge-blue/20 text-badge-blue-fg',\n    muted: 'bg-badge-blue/10 text-badge-blue-fg',\n    indicator: 'bg-badge-blue',\n  },\n  yellow: {\n    default: 'bg-badge-yellow/20 text-badge-yellow-fg',\n    muted: 'bg-badge-yellow/10 text-badge-yellow-fg',\n    indicator: 'bg-badge-yellow',\n  },\n  purple: {\n    default: 'bg-badge-purple/20 text-badge-purple-fg',\n    muted: 'bg-badge-purple/10 text-badge-purple-fg',\n    indicator: 'bg-badge-purple',\n  },\n  orange: {\n    default: 'bg-badge-orange/20 text-badge-orange-fg',\n    muted: 'bg-badge-orange/10 text-badge-orange-fg',\n    indicator: 'bg-badge-orange',\n  },\n  cyan: {\n    default: 'bg-badge-cyan/20 text-badge-cyan-fg',\n    muted: 'bg-badge-cyan/10 text-badge-cyan-fg',\n    indicator: 'bg-badge-cyan',\n  },\n  pink: {\n    default: 'bg-badge-pink/20 text-badge-pink-fg',\n    muted: 'bg-badge-pink/10 text-badge-pink-fg',\n    indicator: 'bg-badge-pink',\n  },\n} satisfies Record<string, BadgeToneStyles>;\n\nexport type BadgeVariant = keyof typeof badgeToneStyles;\n\nconst badgeSizeStyles = {\n  xs: {\n    badge: 'h-[18px] gap-0.5 text-ui-xs',\n    withoutLeadingVisual: 'px-1.5',\n    withLeadingVisual: 'pl-1 pr-1.5',\n    indicator: 'size-1',\n  },\n  sm: {\n    badge: 'h-5 gap-1 text-ui-xs',\n    withoutLeadingVisual: 'px-1.5',\n    withLeadingVisual: 'px-1.5',\n    indicator: 'size-1',\n  },\n  md: {\n    badge: 'h-[22px] gap-1 text-ui-sm',\n    withoutLeadingVisual: 'px-2',\n    withLeadingVisual: 'pl-1.5 pr-2',\n    indicator: 'size-1.5',\n  },\n};\n\nexport type BadgeSize = keyof typeof badgeSizeStyles;\n\ntype BadgeLeadingVisual = { icon?: ReactNode; indicator?: never } | { icon?: never; indicator?: BadgeIndicator };\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> &\n  BadgeLeadingVisual & {\n    variant?: BadgeVariant;\n    emphasis?: BadgeEmphasis;\n    size?: BadgeSize;\n    children?: ReactNode;\n  };\n\nexport const Badge = ({\n  icon,\n  indicator,\n  variant = 'neutral',\n  emphasis = 'default',\n  size = 'md',\n  className,\n  children,\n  ...props\n}: BadgeProps) => {\n  const hasIcon = Boolean(icon);\n  const withLeadingVisual = hasIcon || indicator !== undefined;\n  const sizeStyles = badgeSizeStyles[size];\n  const paddingClass = withLeadingVisual ? sizeStyles.withLeadingVisual : sizeStyles.withoutLeadingVisual;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex w-fit max-w-full shrink-0 items-center rounded-[7px] font-medium',\n        'inset-ring-1 inset-ring-current/5',\n        'inset-shadow-xs inset-shadow-white/5 dark:inset-shadow-[0_3px_10px_-2px_white] dark:inset-shadow-white/7',\n        'dark:bg-linear-to-b dark:from-white/3 dark:to-white/0',\n        badgeToneStyles[variant][emphasis],\n        sizeStyles.badge,\n        paddingClass,\n        transitions.colors,\n        className,\n      )}\n      {...props}\n    >\n      {indicator !== undefined ? (\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            'shrink-0 rounded-full',\n            badgeToneStyles[variant].indicator,\n            sizeStyles.indicator,\n            indicator === 'pulse' && 'motion-safe:animate-pulse motion-reduce:animate-none',\n          )}\n        />\n      ) : null}\n      {hasIcon ? <Icon size=\"sm\">{icon}</Icon> : null}\n      {children}\n    </span>\n  );\n};\n"],"names":["jsxs","cn","transitions","jsx","Icon"],"mappings":"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"}

package/dist/Badge-uGehUtus.js

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from './icons/Icon.es.js';
+import { transitions } from './primitives/transitions.es.js';
+import { c as cn } from './cn-BakJzhuv.js';
+
+const badgeToneStyles = {
+  neutral: {
+    default: "bg-neutral6/5 text-badge-neutral-fg",
+    muted: "bg-neutral6/[0.025] text-badge-neutral-fg",
+    indicator: "bg-neutral3"
+  },
+  green: {
+    default: "bg-badge-green/20 text-badge-green-fg",
+    muted: "bg-badge-green/10 text-badge-green-fg",
+    indicator: "bg-badge-green"
+  },
+  red: {
+    default: "bg-badge-red/20 text-badge-red-fg",
+    muted: "bg-badge-red/10 text-badge-red-fg",
+    indicator: "bg-badge-red"
+  },
+  blue: {
+    default: "bg-badge-blue/20 text-badge-blue-fg",
+    muted: "bg-badge-blue/10 text-badge-blue-fg",
+    indicator: "bg-badge-blue"
+  },
+  yellow: {
+    default: "bg-badge-yellow/20 text-badge-yellow-fg",
+    muted: "bg-badge-yellow/10 text-badge-yellow-fg",
+    indicator: "bg-badge-yellow"
+  },
+  purple: {
+    default: "bg-badge-purple/20 text-badge-purple-fg",
+    muted: "bg-badge-purple/10 text-badge-purple-fg",
+    indicator: "bg-badge-purple"
+  },
+  orange: {
+    default: "bg-badge-orange/20 text-badge-orange-fg",
+    muted: "bg-badge-orange/10 text-badge-orange-fg",
+    indicator: "bg-badge-orange"
+  },
+  cyan: {
+    default: "bg-badge-cyan/20 text-badge-cyan-fg",
+    muted: "bg-badge-cyan/10 text-badge-cyan-fg",
+    indicator: "bg-badge-cyan"
+  },
+  pink: {
+    default: "bg-badge-pink/20 text-badge-pink-fg",
+    muted: "bg-badge-pink/10 text-badge-pink-fg",
+    indicator: "bg-badge-pink"
+  }
+};
+const badgeSizeStyles = {
+  xs: {
+    badge: "h-[18px] gap-0.5 text-ui-xs",
+    withoutLeadingVisual: "px-1.5",
+    withLeadingVisual: "pl-1 pr-1.5",
+    indicator: "size-1"
+  },
+  sm: {
+    badge: "h-5 gap-1 text-ui-xs",
+    withoutLeadingVisual: "px-1.5",
+    withLeadingVisual: "px-1.5",
+    indicator: "size-1"
+  },
+  md: {
+    badge: "h-[22px] gap-1 text-ui-sm",
+    withoutLeadingVisual: "px-2",
+    withLeadingVisual: "pl-1.5 pr-2",
+    indicator: "size-1.5"
+  }
+};
+const Badge = ({
+  icon,
+  indicator,
+  variant = "neutral",
+  emphasis = "default",
+  size = "md",
+  className,
+  children,
+  ...props
+}) => {
+  const hasIcon = Boolean(icon);
+  const withLeadingVisual = hasIcon || indicator !== void 0;
+  const sizeStyles = badgeSizeStyles[size];
+  const paddingClass = withLeadingVisual ? sizeStyles.withLeadingVisual : sizeStyles.withoutLeadingVisual;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex w-fit max-w-full shrink-0 items-center rounded-[7px] font-medium",
+        "inset-ring-1 inset-ring-current/5",
+        "inset-shadow-xs inset-shadow-white/5 dark:inset-shadow-[0_3px_10px_-2px_white] dark:inset-shadow-white/7",
+        "dark:bg-linear-to-b dark:from-white/3 dark:to-white/0",
+        badgeToneStyles[variant][emphasis],
+        sizeStyles.badge,
+        paddingClass,
+        transitions.colors,
+        className
+      ),
+      ...props,
+      children: [
+        indicator !== void 0 ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "shrink-0 rounded-full",
+              badgeToneStyles[variant].indicator,
+              sizeStyles.indicator,
+              indicator === "pulse" && "motion-safe:animate-pulse motion-reduce:animate-none"
+            )
+          }
+        ) : null,
+        hasIcon ? /* @__PURE__ */ jsx(Icon, { size: "sm", children: icon }) : null,
+        children
+      ]
+    }
+  );
+};
+
+export { Badge as B };
+//# sourceMappingURL=Badge-uGehUtus.js.map

package/dist/Badge-uGehUtus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-uGehUtus.js","sources":["../src/ds/components/Badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type BadgeEmphasis = 'default' | 'muted';\nexport type BadgeIndicator = 'dot' | 'pulse';\n\ntype BadgeToneStyles = Record<BadgeEmphasis, string> & { indicator: string };\n\nconst badgeToneStyles = {\n  neutral: {\n    default: 'bg-neutral6/5 text-badge-neutral-fg',\n    muted: 'bg-neutral6/[0.025] text-badge-neutral-fg',\n    indicator: 'bg-neutral3',\n  },\n  green: {\n    default: 'bg-badge-green/20 text-badge-green-fg',\n    muted: 'bg-badge-green/10 text-badge-green-fg',\n    indicator: 'bg-badge-green',\n  },\n  red: {\n    default: 'bg-badge-red/20 text-badge-red-fg',\n    muted: 'bg-badge-red/10 text-badge-red-fg',\n    indicator: 'bg-badge-red',\n  },\n  blue: {\n    default: 'bg-badge-blue/20 text-badge-blue-fg',\n    muted: 'bg-badge-blue/10 text-badge-blue-fg',\n    indicator: 'bg-badge-blue',\n  },\n  yellow: {\n    default: 'bg-badge-yellow/20 text-badge-yellow-fg',\n    muted: 'bg-badge-yellow/10 text-badge-yellow-fg',\n    indicator: 'bg-badge-yellow',\n  },\n  purple: {\n    default: 'bg-badge-purple/20 text-badge-purple-fg',\n    muted: 'bg-badge-purple/10 text-badge-purple-fg',\n    indicator: 'bg-badge-purple',\n  },\n  orange: {\n    default: 'bg-badge-orange/20 text-badge-orange-fg',\n    muted: 'bg-badge-orange/10 text-badge-orange-fg',\n    indicator: 'bg-badge-orange',\n  },\n  cyan: {\n    default: 'bg-badge-cyan/20 text-badge-cyan-fg',\n    muted: 'bg-badge-cyan/10 text-badge-cyan-fg',\n    indicator: 'bg-badge-cyan',\n  },\n  pink: {\n    default: 'bg-badge-pink/20 text-badge-pink-fg',\n    muted: 'bg-badge-pink/10 text-badge-pink-fg',\n    indicator: 'bg-badge-pink',\n  },\n} satisfies Record<string, BadgeToneStyles>;\n\nexport type BadgeVariant = keyof typeof badgeToneStyles;\n\nconst badgeSizeStyles = {\n  xs: {\n    badge: 'h-[18px] gap-0.5 text-ui-xs',\n    withoutLeadingVisual: 'px-1.5',\n    withLeadingVisual: 'pl-1 pr-1.5',\n    indicator: 'size-1',\n  },\n  sm: {\n    badge: 'h-5 gap-1 text-ui-xs',\n    withoutLeadingVisual: 'px-1.5',\n    withLeadingVisual: 'px-1.5',\n    indicator: 'size-1',\n  },\n  md: {\n    badge: 'h-[22px] gap-1 text-ui-sm',\n    withoutLeadingVisual: 'px-2',\n    withLeadingVisual: 'pl-1.5 pr-2',\n    indicator: 'size-1.5',\n  },\n};\n\nexport type BadgeSize = keyof typeof badgeSizeStyles;\n\ntype BadgeLeadingVisual = { icon?: ReactNode; indicator?: never } | { icon?: never; indicator?: BadgeIndicator };\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> &\n  BadgeLeadingVisual & {\n    variant?: BadgeVariant;\n    emphasis?: BadgeEmphasis;\n    size?: BadgeSize;\n    children?: ReactNode;\n  };\n\nexport const Badge = ({\n  icon,\n  indicator,\n  variant = 'neutral',\n  emphasis = 'default',\n  size = 'md',\n  className,\n  children,\n  ...props\n}: BadgeProps) => {\n  const hasIcon = Boolean(icon);\n  const withLeadingVisual = hasIcon || indicator !== undefined;\n  const sizeStyles = badgeSizeStyles[size];\n  const paddingClass = withLeadingVisual ? sizeStyles.withLeadingVisual : sizeStyles.withoutLeadingVisual;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex w-fit max-w-full shrink-0 items-center rounded-[7px] font-medium',\n        'inset-ring-1 inset-ring-current/5',\n        'inset-shadow-xs inset-shadow-white/5 dark:inset-shadow-[0_3px_10px_-2px_white] dark:inset-shadow-white/7',\n        'dark:bg-linear-to-b dark:from-white/3 dark:to-white/0',\n        badgeToneStyles[variant][emphasis],\n        sizeStyles.badge,\n        paddingClass,\n        transitions.colors,\n        className,\n      )}\n      {...props}\n    >\n      {indicator !== undefined ? (\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            'shrink-0 rounded-full',\n            badgeToneStyles[variant].indicator,\n            sizeStyles.indicator,\n            indicator === 'pulse' && 'motion-safe:animate-pulse motion-reduce:animate-none',\n          )}\n        />\n      ) : null}\n      {hasIcon ? <Icon size=\"sm\">{icon}</Icon> : null}\n      {children}\n    </span>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Badge.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const Badge = require('../Badge-BlJpI3fY.cjs');
+const Badge = require('../Badge-DcllBqFg.cjs');
 
 
 

package/dist/components/Badge.es.js

@@ -1,2 +1,2 @@
-export { B as Badge } from '../Badge-woV6OD8k.js';
+export { B as Badge } from '../Badge-uGehUtus.js';
 //# sourceMappingURL=Badge.es.js.map

package/dist/components/DataList.cjs.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const dataList = require('../data-list-CCacNODd.cjs');
-const dataListSkeleton = require('../data-list-skeleton-BHBSIQHN.cjs');
+const dataList = require('../data-list-CRDewYj9.cjs');
+const dataListSkeleton = require('../data-list-skeleton-CONfqzH2.cjs');
 const jsxRuntime = require('react/jsx-runtime');
-const dataListTopCell = require('../data-list-top-cell-BOXO5s7I.cjs');
+const dataListTopCell = require('../data-list-top-cell-DAztx3m8.cjs');
 const dateFns = require('date-fns');
-const tracesDataList = require('../traces-data-list-BLZgf-Es.cjs');
+const tracesDataList = require('../traces-data-list-COksp2d4.cjs');
 const useDataListKeyboard = require('../use-data-list-keyboard-k5D-WlNX.cjs');
 
 function toDate(value) {

package/dist/components/DataList.es.js

@@ -1,9 +1,9 @@
-export { D as DataList } from '../data-list-BOI8fRuk.js';
-export { D as DataListSkeleton } from '../data-list-skeleton-DDO_OE14.js';
+export { D as DataList } from '../data-list-C3tjx5Vb.js';
+export { D as DataListSkeleton } from '../data-list-skeleton-BCrkk6wG.js';
 import { jsx } from 'react/jsx-runtime';
-import { a as DataListCell, c as DataListNextPageLoading, g as DataListNoMatch, j as DataListRowButton, n as DataListTopCell, o as DataListTop, D as DataListRoot } from '../data-list-top-cell-CC5jjv5s.js';
+import { a as DataListCell, c as DataListNextPageLoading, g as DataListNoMatch, j as DataListRowButton, n as DataListTopCell, o as DataListTop, D as DataListRoot } from '../data-list-top-cell-hNkk6S-Q.js';
 import { format, isToday } from 'date-fns';
-export { T as TracesDataList } from '../traces-data-list-DmXGwe4Q.js';
+export { T as TracesDataList } from '../traces-data-list-c5I-8hwt.js';
 export { u as useDataListKeyboard } from '../use-data-list-keyboard-BzZmvqE_.js';
 
 function toDate(value) {

package/dist/components/EnvironmentVariablesEditor.cjs.js

@@ -10,7 +10,7 @@ const Button = require('../Button-DA5XLUon.cjs');
 const Notice = require('../Notice-BoT3Qi4U.cjs');
 const envFile = require('../env-file-BU2hStkm.cjs');
 const Txt = require('../Txt-I5lK8zy7.cjs');
-const dataList = require('../data-list-CCacNODd.cjs');
+const dataList = require('../data-list-CRDewYj9.cjs');
 const hooks_useCopyToClipboard = require('../hooks/use-copy-to-clipboard.cjs.js');
 const fieldBlock = require('../field-block-BcTR08I7.cjs');
 const inputGroup = require('../input-group-4EQi2l7H.cjs');

package/dist/components/EnvironmentVariablesEditor.es.js

@@ -6,7 +6,7 @@ import { B as Button } from '../Button-vr_I4iME.js';
 import { N as Notice } from '../Notice-XR_HdGMF.js';
 import { D as DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE } from '../env-file-BITYowCx.js';
 import { T as Txt } from '../Txt-Df42XG5p.js';
-import { D as DataList } from '../data-list-BOI8fRuk.js';
+import { D as DataList } from '../data-list-C3tjx5Vb.js';
 import { useCopyToClipboard } from '../hooks/use-copy-to-clipboard.es.js';
 import { F as FieldBlock } from '../field-block-B63CpA4d.js';
 import { I as InputGroup, c as InputGroupInput, a as InputGroupAddon, b as InputGroupButton } from '../input-group-U2f3A4Ya.js';

package/dist/components/ItemList.cjs.js

@@ -8,10 +8,10 @@ const dateFns = require('date-fns');
 const format = require('date-fns/format');
 const isToday = require('date-fns/isToday');
 const React = require('react');
+const tooltip = require('../tooltip-DMOZ2oaq.cjs');
 const primitives_transitions = require('../primitives/transitions.cjs.js');
 const lucideReact = require('lucide-react');
-const tooltip = require('../tooltip-DMOZ2oaq.cjs');
-const chip = require('../chip-9P9t0dvN.cjs');
+const Badge = require('../Badge-DcllBqFg.cjs');
 
 function ItemListCell({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("", className), children });
@@ -75,8 +75,8 @@ function ItemListLabelCell({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("label", { className: utils_cn.cn("flex h-full w-14 items-center justify-center rounded-lg hover:bg-surface5", className), children });
 }
 
-function ItemListLinkCell({ children, href, className, LinkComponent: Link }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+function ItemListLinkCell({ children, href, className, LinkComponent: Link, tooltip: tooltip$1 }) {
+  const link = /* @__PURE__ */ jsxRuntime.jsx(
     Link,
     {
       href,
@@ -90,6 +90,11 @@ function ItemListLinkCell({ children, href, className, LinkComponent: Link }) {
       children
     }
   );
+  if (tooltip$1 == null) return link;
+  return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { render: link }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: tooltip$1 })
+  ] });
 }
 
 function ItemListMessage({ children, message, className, type }) {
@@ -195,12 +200,13 @@ function ItemListRowButton({
   columns,
   className,
   disabled,
+  tooltip: tooltip$1,
   ...props
 }) {
   const handleClick = () => {
     onClick?.(item?.id);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const button = /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       ...props,
@@ -211,7 +217,6 @@ function ItemListRowButton({
         primitives_transitions.focusRing.visible,
         {
           "bg-surface4": isFeatured,
-          // hover effect only not for skeleton and featured
           "hover:bg-surface4": item && !isFeatured && !disabled
         },
         className
@@ -221,6 +226,11 @@ function ItemListRowButton({
       children
     }
   );
+  if (tooltip$1 == null) return button;
+  return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { render: button }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: tooltip$1 })
+  ] });
 }
 
 function capitalize(value) {
@@ -249,6 +259,44 @@ function ItemListTextCell({ children, isLoading, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("truncate  py-[0.6rem] text-ui-md text-neutral4", className), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 h-4 animate-pulse rounded-md text-transparent select-none" }) : children });
 }
 
+const ITEM_LIST_VERSION_STATUS_LABELS = {
+  latest: "Latest version",
+  deleted: "Deleted in this version"
+};
+function getItemListVersionStatusLabel({
+  isLatest,
+  isDeleted
+}) {
+  const labels = [];
+  if (isLatest) labels.push(ITEM_LIST_VERSION_STATUS_LABELS.latest);
+  if (isDeleted) labels.push(ITEM_LIST_VERSION_STATUS_LABELS.deleted);
+  return labels.length > 0 ? labels.join(" · ") : void 0;
+}
+function getToNextItemFn({ entries, id, update }) {
+  const currentIndex = entries.findIndex((entry) => entry.id === id);
+  const thereIsNextItem = currentIndex < entries.length - 1;
+  if (thereIsNextItem) {
+    return () => {
+      const nextItem = entries[currentIndex + 1];
+      if (!nextItem) return;
+      update(nextItem.id);
+    };
+  }
+  return void 0;
+}
+function getToPreviousItemFn({ entries, id, update }) {
+  const currentIndex = entries.findIndex((entry) => entry.id === id);
+  const thereIsPreviousItem = currentIndex > 0;
+  if (thereIsPreviousItem) {
+    return () => {
+      const previousItem = entries[currentIndex - 1];
+      if (!previousItem) return;
+      update(previousItem.id);
+    };
+  }
+  return void 0;
+}
+
 function ItemListVersionCell({ version, date, isLatest, isDeleted }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(ItemListCell, { className: utils_cn.cn("grid grid-cols-[1fr_auto] pl-1"), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -262,19 +310,13 @@ function ItemListVersionCell({ version, date, isLatest, isDeleted }) {
             "v. ",
             version
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("em", { className: "text-ui-sm text-neutral2 font-normal", children: date ? dateFns.format(new Date(date), "MMM d, yyyy HH:mm") : null })
+          /* @__PURE__ */ jsxRuntime.jsx("em", { className: utils_cn.cn("text-ui-sm", "font-normal", "text-neutral2"), children: date ? dateFns.format(new Date(date), "MMM d, yyyy HH:mm") : null })
         ]
       }
     ),
     (isLatest || isDeleted) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-      isLatest && /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(chip.Chip, { color: "blue", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClockIcon, {}) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Latest version" })
-      ] }),
-      isDeleted && /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(chip.Chip, { color: "red", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BanIcon, {}) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Deleted in this version" })
-      ] })
+      isLatest && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", role: "img", "aria-label": ITEM_LIST_VERSION_STATUS_LABELS.latest, children: /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { variant: "blue", size: "sm", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClockIcon, {}) }) }),
+      isDeleted && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", role: "img", "aria-label": ITEM_LIST_VERSION_STATUS_LABELS.deleted, children: /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { variant: "red", size: "sm", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BanIcon, {}) }) })
     ] })
   ] });
 }
@@ -325,34 +367,11 @@ function ItemListSkeleton({ columns, numberOfRows }) {
   ] });
 }
 
-function getToNextItemFn({ entries, id, update }) {
-  const currentIndex = entries.findIndex((entry) => entry.id === id);
-  const thereIsNextItem = currentIndex < entries.length - 1;
-  if (thereIsNextItem) {
-    return () => {
-      const nextItem = entries[currentIndex + 1];
-      if (!nextItem) return;
-      update(nextItem.id);
-    };
-  }
-  return void 0;
-}
-function getToPreviousItemFn({ entries, id, update }) {
-  const currentIndex = entries.findIndex((entry) => entry.id === id);
-  const thereIsPreviousItem = currentIndex > 0;
-  if (thereIsPreviousItem) {
-    return () => {
-      const previousItem = entries[currentIndex - 1];
-      if (!previousItem) return;
-      update(previousItem.id);
-    };
-  }
-  return void 0;
-}
-
+exports.ITEM_LIST_VERSION_STATUS_LABELS = ITEM_LIST_VERSION_STATUS_LABELS;
 exports.ItemList = ItemList;
 exports.ItemListSkeleton = ItemListSkeleton;
 exports.getItemListColumnTemplate = getItemListColumnTemplate;
+exports.getItemListVersionStatusLabel = getItemListVersionStatusLabel;
 exports.getToNextItemFn = getToNextItemFn;
 exports.getToPreviousItemFn = getToPreviousItemFn;
 //# sourceMappingURL=ItemList.cjs.js.map