@mastra/playground-ui 29.0.0 → 30.0.0-alpha.1

package/dist/index.cjs.js

@@ -20,7 +20,7 @@ const lucideReact = require('lucide-react');
 const sonner = require('sonner');
 const react = require('@mastra/react');
 const alertDialog = require('@base-ui/react/alert-dialog');
-const CheckboxPrimitive = require('@radix-ui/react-checkbox');
+const checkbox = require('@base-ui/react/checkbox');
 const collapsible = require('@base-ui/react/collapsible');
 const combobox = require('@base-ui/react/combobox');
 const cmdk = require('cmdk');
@@ -29,15 +29,15 @@ const SelectPrimitive = require('@radix-ui/react-select');
 const tabs = require('@base-ui/react/tabs');
 const menu = require('@base-ui/react/menu');
 const VisuallyHidden = require('@radix-ui/react-visually-hidden');
-const LabelPrimitive = require('@radix-ui/react-label');
 const Markdown = require('react-markdown');
 const remarkGfm = require('remark-gfm');
 const popover = require('@base-ui/react/popover');
-const RadioGroupPrimitive = require('@radix-ui/react-radio-group');
+const radio = require('@base-ui/react/radio');
+const radioGroup = require('@base-ui/react/radio-group');
 const scrollArea = require('@base-ui/react/scroll-area');
 const useDebounce = require('use-debounce');
 const slider = require('@base-ui/react/slider');
-const SwitchPrimitives = require('@radix-ui/react-switch');
+const _switch = require('@base-ui/react/switch');
 const dateFns = require('date-fns');
 const reactDayPicker = require('react-day-picker');
 const HoverCard = require('@radix-ui/react-hover-card');
@@ -74,12 +74,8 @@ function _interopNamespaceDefault(e) {
 }
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-const CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CheckboxPrimitive);
 const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
 const VisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(VisuallyHidden);
-const LabelPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(LabelPrimitive);
-const RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(RadioGroupPrimitive);
-const SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespaceDefault(SwitchPrimitives);
 const HoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(HoverCard);
 const Dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(Dialog$1);
 
@@ -6152,35 +6148,52 @@ AlertDialog.Description = AlertDialogDescription;
 AlertDialog.Action = AlertDialogAction;
 AlertDialog.Cancel = AlertDialogCancel;
 
-const Checkbox = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  CheckboxPrimitive__namespace.Root,
-  {
-    ref,
-    className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-neutral3",
-      "shadow-sm",
-      transitions.all,
-      "hover:border-neutral5 hover:shadow-md",
-      formElementFocus,
-      "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-neutral3 disabled:hover:shadow-sm",
-      "data-[state=checked]:bg-accent1 data-[state=checked]:border-accent1 data-[state=checked]:text-surface1",
-      "data-[state=checked]:shadow-glow-accent1",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      CheckboxPrimitive__namespace.Indicator,
+const Checkbox = React__namespace.forwardRef(
+  ({ className, checked, indeterminate, ...props }, ref) => {
+    const isCheckedIndeterminate = checked === "indeterminate";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      checkbox.Checkbox.Root,
       {
+        ref,
+        checked: isCheckedIndeterminate ? false : checked,
+        indeterminate: indeterminate ?? isCheckedIndeterminate,
         className: cn(
-          "flex items-center justify-center text-current",
-          "data-[state=checked]:animate-in data-[state=checked]:zoom-in-50 data-[state=checked]:duration-150"
+          "peer h-4 w-4 shrink-0 rounded-sm border border-neutral3",
+          "flex items-center justify-center",
+          "shadow-sm",
+          transitions.all,
+          "hover:border-neutral5 hover:shadow-md",
+          formElementFocus,
+          // Base UI's Checkbox.Root is a `<span>`, so `:disabled` never matches — target `data-disabled`.
+          "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:border-neutral3 data-[disabled]:hover:shadow-sm",
+          "data-[checked]:bg-accent1 data-[checked]:border-accent1 data-[checked]:text-surface1",
+          "data-[indeterminate]:bg-accent1 data-[indeterminate]:border-accent1 data-[indeterminate]:text-surface1",
+          "data-[checked]:shadow-glow-accent1 data-[indeterminate]:shadow-glow-accent1",
+          className
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 stroke-3" })
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          checkbox.Checkbox.Indicator,
+          {
+            className: cn(
+              "group/checkbox-indicator flex items-center justify-center text-current",
+              "data-[checked]:animate-in data-[checked]:zoom-in-50 data-[checked]:duration-150",
+              "data-[indeterminate]:animate-in data-[indeterminate]:zoom-in-50 data-[indeterminate]:duration-150"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxIndicatorIcon, {})
+          }
+        )
       }
-    )
+    );
   }
-));
-Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
+);
+Checkbox.displayName = "Checkbox";
+function CheckboxIndicatorIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 stroke-3 group-data-[indeterminate]/checkbox-indicator:hidden" }),
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "hidden h-3.5 w-3.5 stroke-3 group-data-[indeterminate]/checkbox-indicator:block" })
+  ] });
+}
 
 const Collapsible = collapsible.Collapsible.Root;
 const CollapsibleTrigger = React.forwardRef(
@@ -7693,8 +7706,10 @@ const Kbd = ({ children, theme = "dark", className }) => {
 };
 
 const labelVariants = cva("text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-const Label = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(LabelPrimitive__namespace.Root, { ref, className: cn(labelVariants(), className), ...props }));
-Label.displayName = LabelPrimitive__namespace.Root.displayName;
+const Label = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("label", { ref, className: cn(labelVariants(), className), ...props })
+);
+Label.displayName = "Label";
 
 function MarkdownRenderer({ children }) {
   const processedText = children.replace(/\\n/g, "\n");
@@ -8208,31 +8223,37 @@ const ButtonsGroupText = React__namespace.forwardRef(
 ButtonsGroupText.displayName = "ButtonsGroupText";
 
 const RadioGroup = React__namespace.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Root, { className: cn("grid gap-2", className), ...props, ref });
+  return /* @__PURE__ */ jsxRuntime.jsx(radioGroup.RadioGroup, { ref, className: cn("grid gap-2", className), ...props });
 });
-RadioGroup.displayName = RadioGroupPrimitive__namespace.Root.displayName;
+RadioGroup.displayName = "RadioGroup";
 const RadioGroupItem = React__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    RadioGroupPrimitive__namespace.Item,
+    radio.Radio.Root,
     {
       ref,
       className: cn(
+        // Base UI's Radio.Root renders a `<span>` (inline) — unlike Radix's
+        // `<button>`. `flex` + `shrink-0` make the sizing/centering classes
+        // take effect and keep the control square inside flex rows.
+        "flex shrink-0 items-center justify-center",
         "aspect-square h-4 w-4 rounded-full border border-neutral3 text-neutral6",
         "shadow-sm",
         transitions.all,
         "hover:border-neutral5 hover:shadow-md",
         formElementFocus,
-        "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-neutral3 disabled:hover:shadow-sm",
-        "data-[state=checked]:border-accent1 data-[state=checked]:shadow-glow-accent1",
+        // Base UI's Radio.Root is a `<span>`, so `:disabled` never matches — target `data-disabled`.
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:border-neutral3 data-[disabled]:hover:shadow-sm",
+        // Base UI exposes `data-checked`/`data-unchecked` instead of Radix's `data-state`.
+        "data-[checked]:border-accent1 data-[checked]:shadow-glow-accent1",
         className
       ),
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        RadioGroupPrimitive__namespace.Indicator,
+        radio.Radio.Indicator,
         {
           className: cn(
             "flex items-center justify-center",
-            "data-[state=checked]:animate-in data-[state=checked]:zoom-in-50 data-[state=checked]:duration-150"
+            "data-[checked]:animate-in data-[checked]:zoom-in-50 data-[checked]:duration-150"
           ),
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2 w-2 fill-accent1 text-accent1" })
         }
@@ -8240,7 +8261,7 @@ const RadioGroupItem = React__namespace.forwardRef(({ className, ...props }, ref
     }
   );
 });
-RadioGroupItem.displayName = RadioGroupPrimitive__namespace.Item.displayName;
+RadioGroupItem.displayName = "RadioGroupItem";
 
 function PickMultiPanel({ field, tokens, onChange }) {
   const [query, setQuery] = React.useState("");
@@ -9249,35 +9270,43 @@ function BrandLoader({ className, size = "md", "aria-label": ariaLabel = "Loadin
   );
 }
 
-const Switch = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  SwitchPrimitives__namespace.Root,
-  {
-    className: cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
-      transitions.all,
-      formElementFocus,
-      "hover:brightness-110",
-      "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:brightness-100",
-      "data-[state=checked]:bg-accent1 data-[state=checked]:shadow-glow-accent1",
-      "data-[state=unchecked]:bg-neutral2",
-      className
-    ),
-    ...props,
-    ref,
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      SwitchPrimitives__namespace.Thumb,
-      {
-        className: cn(
-          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-md",
-          "transition-all duration-normal ease-out-custom",
-          "data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
-          "data-[state=checked]:shadow-lg"
+const Switch = React__namespace.forwardRef(({ className, asChild, children, ...props }, ref) => {
+  const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : { render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }), nativeButton: true };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    _switch.Switch.Root,
+    {
+      ref,
+      "data-slot": "switch",
+      className: cn(
+        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
+        transitions.all,
+        formElementFocus,
+        "hover:brightness-110",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:brightness-100",
+        "data-[checked]:bg-accent1 data-[checked]:shadow-glow-accent1",
+        "data-[unchecked]:bg-neutral2",
+        className
+      ),
+      ...renderProps,
+      ...props,
+      children: [
+        asChild ? void 0 : children,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          _switch.Switch.Thumb,
+          {
+            className: cn(
+              "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-md",
+              "transition-all duration-normal ease-out-custom",
+              "data-[checked]:translate-x-4 data-[unchecked]:translate-x-0",
+              "data-[checked]:shadow-lg"
+            )
+          }
         )
-      }
-    )
-  }
-));
-Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
+      ]
+    }
+  );
+});
+Switch.displayName = "Switch";
 
 const DEFAULT_OPTIONS = [
   { value: "system", label: "System", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, {}) },
@@ -9308,12 +9337,11 @@ const ThemeToggle = ({
   );
   const indicatorOffset = activeIndex * (ITEM_WIDTH + ITEM_GAP);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    RadioGroupPrimitive__namespace.Root,
+    radioGroup.RadioGroup,
     {
       ...rest,
       value: effectiveCurrent,
       onValueChange: handleChange,
-      orientation: "horizontal",
       "aria-label": ariaLabel,
       className: cn(
         "relative inline-flex w-fit items-center gap-0.5 rounded-full border border-border1 bg-surface3 p-0.5",
@@ -9332,14 +9360,15 @@ const ThemeToggle = ({
           }
         ),
         options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-          RadioGroupPrimitive__namespace.Item,
+          radio.Radio.Root,
           {
             value: option.value,
             "aria-label": option.label,
             style: { width: ITEM_WIDTH },
             className: cn(
               "relative inline-flex h-6 cursor-pointer items-center justify-center rounded-full",
-              "[&_svg]:size-3.5 text-icon3 hover:text-icon6 data-[state=checked]:text-icon6",
+              // Base UI exposes `data-checked` instead of Radix's `data-state="checked"`.
+              "[&_svg]:size-3.5 text-icon3 hover:text-icon6 data-[checked]:text-icon6",
               "focus-visible:outline-hidden",
               "active:scale-90 motion-reduce:transition-none",
               transitions.colors,
@@ -9896,221 +9925,6 @@ const DefaultTrigger = React__namespace.forwardRef(
   }
 );
 
-function EntryListEntries({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "grid bg-surface3 overflow-y-auto", children });
-}
-
-function getColumnTemplate(columns) {
-  if (!columns || columns.length === 0) {
-    return "";
-  }
-  return columns?.map((column) => {
-    return column.size;
-  }).join(" ");
-}
-
-function EntryListEntry({ entry, isSelected, onClick, children, columns }) {
-  const handleClick = () => {
-    onClick?.(entry?.id);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "li",
-    {
-      className: cn(
-        "border-t text-neutral5 border-border1 last:border-b-0 text-ui-md",
-        "[&:last-child>button]:rounded-b-lg",
-        transitions.colors,
-        {
-          "bg-accent1Dark": isSelected
-        }
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: handleClick,
-          className: cn("grid w-full px-6 gap-6 text-left items-center min-h-12", transitions.colors, focusRing.visible, {
-            // hover effect only not for skeleton and selected
-            "hover:bg-surface4": entry && !isSelected
-          }),
-          style: { gridTemplateColumns: getColumnTemplate(columns) },
-          disabled: !entry,
-          children
-        }
-      )
-    }
-  );
-}
-
-function EntryListEntryTextCol({ children, isLoading }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral4 text-ui-md truncate ", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 rounded-md animate-pulse text-transparent h-4 select-none" }) : children });
-}
-function EntryListEntryStatusCol({ status }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex justify-center items-center w-full relative"), children: [
-    status ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn("w-[0.6rem] h-[0.6rem] rounded-full", {
-          "bg-green-600": status === "success",
-          "bg-red-700": status === "failed"
-        })
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral2 text-ui-sm leading-none", children: "-" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(VisuallyHidden.VisuallyHidden, { children: [
-      "Status: ",
-      status ? status : "not provided"
-    ] })
-  ] });
-}
-
-function EntryListHeader({ columns }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("sticky top-0 bg-surface4 z-10 rounded-t-lg px-6"), children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn("grid gap-6 text-left uppercase py-3 text-neutral3 text-ui-sm"),
-      style: { gridTemplateColumns: getColumnTemplate(columns) },
-      children: columns?.map((col) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: col.label || col.name }, col.name))
-    }
-  ) });
-}
-
-function EntryListMessage({ children, message, className, type }) {
-  if (!children && !message) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid border-t border-border1", className), children: message ? /* @__PURE__ */ jsxRuntime.jsxs(
-    "p",
-    {
-      className: cn(
-        "text-neutral3 text-ui-md text-center grid p-8 justify-center justify-items-center gap-2",
-        "[&>svg]:w-[1.5em] [&>svg]:h-[1.5em] [&>svg]:opacity-75",
-        {
-          "[&>svg]:text-red-500": type === "error"
-        }
-      ),
-      children: [
-        type === "error" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlertIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, {}),
-        " ",
-        message
-      ]
-    }
-  ) : children });
-}
-
-function EntryListNextPageLoading({
-  isLoading,
-  hasMore,
-  setEndOfListElement,
-  loadingText = "Loading more data...",
-  noMoreDataText = "No more data to load"
-}) {
-  if (!setEndOfListElement) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setEndOfListElement, className: "text-ui-md text-neutral3 opacity-50 flex mt-8 justify-center", children: [
-    isLoading && loadingText,
-    !hasMore && !isLoading && noMoreDataText
-  ] });
-}
-
-function EntryListPagination({ currentPage, hasMore, onNextPage, onPrevPage }) {
-  const showNavigation = typeof currentPage === "number" && currentPage > 0 || hasMore;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex pt-6 items-center justify-center text-neutral3 text-ui-md gap-8"), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      "Page ",
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: currentPage ? currentPage + 1 : "1" })
-    ] }),
-    showNavigation && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn(
-          "flex gap-4",
-          "[&>button]:flex [&>button]:items-center [&>button]:gap-2 [&>button]:text-neutral4 [&>button:hover]:text-neutral5 [&>button]:transition-colors [&>button]:border [&>button]:border-border1 [&>button]:p-1 [&>button]:px-2 [&>button]:rounded-md",
-          "[&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:text-neutral3"
-        ),
-        children: [
-          typeof currentPage === "number" && currentPage > 0 && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: onPrevPage, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, {}),
-            "Previous"
-          ] }),
-          hasMore && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: onNextPage, children: [
-            "Next",
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {})
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-
-function EntryListRoot({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid", children });
-}
-
-function EntryListTrim({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-lg border border-border1 overflow-clip"), children });
-}
-
-const EntryList = Object.assign(EntryListRoot, {
-  Header: EntryListHeader,
-  Trim: EntryListTrim,
-  Entries: EntryListEntries,
-  Entry: EntryListEntry,
-  Message: EntryListMessage,
-  NextPageLoading: EntryListNextPageLoading,
-  Pagination: EntryListPagination,
-  EntryText: EntryListEntryTextCol,
-  EntryStatus: EntryListEntryStatusCol
-});
-
-const widths$3 = ["75%", "50%", "65%", "90%", "60%", "80%"];
-function EntryListEntriesSkeleton({ columns, numberOfRows = 3 }) {
-  const getPseudoRandomWidth = (rowIdx, colIdx) => {
-    const index = (rowIdx + colIdx + (columns?.length || 0) + (numberOfRows || 0)) % widths$3.length;
-    return widths$3[index];
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(EntryListEntries, { children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(EntryListEntry, { columns, children: (columns || []).map((col, colIdx) => {
-    const key = `${col.name}-${colIdx}`;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "bg-surface4 rounded-md animate-pulse text-transparent h-4 select-none",
-        style: { width: `${getPseudoRandomWidth(rowIdx, colIdx)}` }
-      },
-      key
-    );
-  }) }, rowIdx)) });
-}
-
-function EntryListSkeleton({ columns, numberOfRows }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(EntryList, { children: /* @__PURE__ */ jsxRuntime.jsxs(EntryListTrim, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(EntryListHeader, { columns }),
-    /* @__PURE__ */ jsxRuntime.jsx(EntryListEntriesSkeleton, { columns, numberOfRows })
-  ] }) });
-}
-
-function getToNextEntryFn({ 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];
-      update(nextItem.id);
-    };
-  }
-  return void 0;
-}
-function getToPreviousEntryFn({ entries, id, update }) {
-  const currentIndex = entries.findIndex((entry) => entry.id === id);
-  const thereIsPreviousItem = currentIndex > 0;
-  if (thereIsPreviousItem) {
-    return () => {
-      const previousItem = entries[currentIndex - 1];
-      update(previousItem.id);
-    };
-  }
-  return void 0;
-}
-
 const JSONSchemaFormContext = React__namespace.createContext(null);
 function JSONSchemaFormProvider({
   children,
@@ -13149,15 +12963,17 @@ function SelectDataFilter({
   ] });
 }
 
-function DataListCell({ children, className, height = "default" }) {
+function DataListCell({ children, className, height = "default", as, ...rest }) {
+  const Component = as || "span";
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
+    Component,
     {
       className: cn(
         "relative grid items-center text-ui-md whitespace-nowrap text-neutral3",
-        height === "compact" ? "py-2" : "py-4",
+        height === "compact" ? "py-2" : "py-3",
         className
       ),
+      ...rest,
       children
     }
   );
@@ -13171,6 +12987,58 @@ function DataListNameCell({ children, className }) {
 function DataListDescriptionCell({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { className: cn("text-neutral2", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children }) });
 }
+function getShortId(id) {
+  if (!id) return "";
+  return id.length > 8 ? id.slice(0, 8) : id;
+}
+function DataListIdCell({ id }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3", children: getShortId(id) });
+}
+function DataListSelectCell({ checked, onToggle, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DataListCell,
+    {
+      as: "label",
+      height: "compact",
+      className: "cursor-pointer justify-items-center rounded-lg transition-colors duration-200 hover:bg-surface4 px-4",
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Checkbox,
+        {
+          checked,
+          onCheckedChange: () => {
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+            onToggle(e.shiftKey);
+          },
+          "aria-label": rest["aria-label"]
+        }
+      )
+    }
+  );
+}
+function DataListMonoCell({ children, className, height = "compact" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height, className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("block text-ui-smd font-mono text-neutral3 truncate", className), children }) });
+}
+function toDate$2(value) {
+  const date = value instanceof Date ? value : new Date(value);
+  return isNaN(date.getTime()) ? null : date;
+}
+function DataListDateCell({ timestamp }) {
+  const date = toDate$2(timestamp);
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? dateFns.isToday(date) ? "Today" : dateFns.format(date, "MMM dd") : "-" });
+}
+function DataListTimeCell({ timestamp }) {
+  const date = toDate$2(timestamp);
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3 flex", children: date ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    dateFns.format(date, "HH:mm:ss"),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2", children: [
+      ".",
+      String(date.getMilliseconds()).padStart(3, "0")
+    ] })
+  ] }) : "-" });
+}
 
 function DataListNextPageLoading({
   isLoading,
@@ -13243,30 +13111,80 @@ function DataListRoot({ children, columns, className, scrollRef }) {
   );
 }
 
-const dataListRowStyles = [
-  "mx-1 data-list-row grid grid-cols-subgrid gap-10 col-span-full px-5 outline-none cursor-pointer border-y border-b-border1 border-t-transparent",
-  "hover:bg-surface4 hover:border-transparent focus-visible:bg-surface4 focus-visible:border-transparent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1",
+const dataListRowOuterStyles = [
+  "data-list-row col-span-full border-y border-b-border1 border-t-transparent",
   "[.data-list-row:hover+&]:border-t-transparent [.data-list-row:focus-visible+&]:border-t-transparent",
   "[.data-list-subheader+&]:border-t-transparent",
   "[&:has(+.data-list-subheader)]:border-b-transparent",
   "[&:not(:has(~.data-list-row))]:border-b-transparent",
   "transition-colors duration-200 rounded-lg"
 ];
+const dataListRowStyles = [
+  "mx-1 grid grid-cols-subgrid gap-8 px-5 outline-none cursor-pointer",
+  "hover:bg-surface4 hover:border-transparent focus-visible:bg-surface4 focus-visible:border-transparent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1",
+  ...dataListRowOuterStyles
+];
 
 const DataListRow = React.forwardRef(({ children, className, ...rest }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn(...dataListRowStyles, className), ...rest, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("grid grid-cols-subgrid gap-0 mx-1", ...dataListRowOuterStyles, className), ...rest, children });
 });
 DataListRow.displayName = "DataListRow";
 
 const DataListRowButton = React.forwardRef(
-  ({ children, className, type = "button", ...rest }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("button", { ref, type, className: cn(...dataListRowStyles, "text-left", className), ...rest, children });
+  ({ children, className, type = "button", flushLeft, flushRight, colStart, colEnd, featured, style, ...rest }, ref) => {
+    const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
+    const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type,
+        className: cn(
+          ...dataListRowStyles,
+          "text-left",
+          flushLeft && "ml-0!",
+          flushRight && "mr-0!",
+          featured && "bg-surface4",
+          className
+        ),
+        style: resolvedStyle,
+        ...rest,
+        children
+      }
+    );
   }
 );
 DataListRowButton.displayName = "DataListRowButton";
 
-function DataListRowLink({ children, to, className, LinkComponent: Link }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Link, { href: to, className: cn(...dataListRowStyles, className), children });
+function DataListRowLink({
+  children,
+  to,
+  className,
+  style,
+  LinkComponent: Link,
+  flushLeft,
+  flushRight,
+  colStart,
+  colEnd,
+  featured
+}) {
+  const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
+  const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Link,
+    {
+      href: to,
+      className: cn(
+        ...dataListRowStyles,
+        flushLeft && "ml-0!",
+        flushRight && "mr-0!",
+        featured && "bg-surface4",
+        className
+      ),
+      style: resolvedStyle,
+      children
+    }
+  );
 }
 
 function DataListSpacer({ height }) {
@@ -13297,12 +13215,13 @@ function DataListSubHeading({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-ui-sm text-neutral2 font-normal", className), children });
 }
 
-function DataListTop({ children, className }) {
+function DataListTop({ children, className, hasLeadingCell }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
-        "grid grid-cols-subgrid gap-6 lg:gap-8 xl:gap-10 2xl:gap-12 3xl:gap-14 col-span-full border-b border-border1 px-4 bg-surface2 sticky top-0 z-10",
+        "mx-1 grid grid-cols-subgrid gap-8 col-span-full border-b border-border1 px-5 bg-surface2 sticky top-0 z-10",
+        hasLeadingCell && "gap-0 pl-0!",
         className
       ),
       children
@@ -13310,19 +13229,23 @@ function DataListTop({ children, className }) {
   );
 }
 
-const DataListTopCell = React.forwardRef(({ children, className }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      ref,
-      className: cn(
-        "h-8 py-1 flex items-center uppercase whitespace-nowrap text-neutral2 tracking-widest text-ui-xs",
-        className
-      ),
-      children
-    }
-  );
-});
+const DataListTopCell = React.forwardRef(
+  ({ children, className, as, ...rest }, ref) => {
+    const Component = as || "span";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className: cn(
+          "h-8 py-1 flex items-center uppercase whitespace-nowrap text-neutral2 tracking-widest text-ui-xs",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
 function DataListTopCellWithTooltip({ children, tooltip, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(DataListTopCell, { className, children }) }),
@@ -13361,9 +13284,37 @@ function DataListTopCellSmart({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(DataListTopCell, { className: cn("flex [&_svg]:w-[1.3em] [&_svg]:h-[1.3em]", className), children: content });
 }
+function DataListTopSelectCell({ checked, onToggle, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DataListTopCell,
+    {
+      as: "label",
+      className: "cursor-pointer justify-center rounded-lg transition-colors duration-200 hover:bg-surface4 px-4",
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked, onCheckedChange: () => onToggle(), "aria-label": rest["aria-label"] })
+    }
+  );
+}
+
+const DataListTopCells = React.forwardRef(
+  ({ children, className, flushLeft, colStart, style, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("grid grid-cols-subgrid gap-8 col-span-full px-5", flushLeft && "pl-0!", className),
+        style: colStart ? { ...style, gridColumn: `${colStart} / -1` } : style,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListTopCells.displayName = "DataListTopCells";
 
 const DataList = Object.assign(DataListRoot, {
   Top: DataListTop,
+  TopCells: DataListTopCells,
   TopCell: DataListTopCell,
   TopCellWithTooltip: DataListTopCellWithTooltip,
   TopCellSmart: DataListTopCellSmart,
@@ -13374,6 +13325,12 @@ const DataList = Object.assign(DataListRoot, {
   TextCell: DataListTextCell,
   NameCell: DataListNameCell,
   DescriptionCell: DataListDescriptionCell,
+  IdCell: DataListIdCell,
+  MonoCell: DataListMonoCell,
+  DateCell: DataListDateCell,
+  TimeCell: DataListTimeCell,
+  SelectCell: DataListSelectCell,
+  TopSelectCell: DataListTopSelectCell,
   NoMatch: DataListNoMatch,
   Subheader: DataListSubheader,
   SubHeading: DataListSubHeading,
@@ -13407,16 +13364,16 @@ function DataListSkeleton({ columns = "auto 1fr auto auto", numberOfRows = 3 })
   )) });
 }
 
-function toDate$3(value) {
+function toDate$1(value) {
   const date = value instanceof Date ? value : new Date(value);
   return isNaN(date.getTime()) ? null : date;
 }
 function ScoresDataListDateCell({ timestamp }) {
-  const date = toDate$3(timestamp);
+  const date = toDate$1(timestamp);
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? dateFns.isToday(date) ? "Today" : dateFns.format(date, "MMM dd") : "-" });
 }
 function ScoresDataListTimeCell({ timestamp }) {
-  const date = toDate$3(timestamp);
+  const date = toDate$1(timestamp);
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral3", children: date ? dateFns.format(date, "h:mm:ss aaa") : "-" });
 }
 function ScoresDataListInputCell({ input }) {
@@ -13446,31 +13403,6 @@ const ScoresDataList = Object.assign(ScoresDataListRoot, {
   ScoreCell: ScoresDataListScoreCell
 });
 
-function toDate$2(value) {
-  const date = value instanceof Date ? value : new Date(value);
-  return isNaN(date.getTime()) ? null : date;
-}
-function getShortId(id) {
-  if (!id) return "";
-  return id.length > 8 ? id.slice(0, 8) : id;
-}
-function TracesDataListIdCell({ traceId }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3", children: getShortId(traceId) });
-}
-function TracesDataListDateCell({ timestamp }) {
-  const date = toDate$2(timestamp);
-  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? dateFns.isToday(date) ? "Today" : dateFns.format(date, "MMM dd") : "-" });
-}
-function TracesDataListTimeCell({ timestamp }) {
-  const date = toDate$2(timestamp);
-  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3 flex", children: date ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    dateFns.format(date, "HH:mm:ss"),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2", children: [
-      ".",
-      String(date.getMilliseconds()).padStart(3, "0")
-    ] })
-  ] }) : "-" });
-}
 function TracesDataListNameCell({ name, parentSpanId, showLevelTooltip }) {
   const isRoot = parentSpanId == null;
   const Icon = isRoot ? lucideReact.ListTreeIcon : lucideReact.CornerDownRightIcon;
@@ -13485,7 +13417,7 @@ function TracesDataListNameCell({ name, parentSpanId, showLevelTooltip }) {
   ] });
 }
 function TracesDataListInputCell({ input }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-neutral3 text-ui-smd font-mono truncate", children: input || "-" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListMonoCell, { children: input || "-" });
 }
 function EntityTypeIcon$1({ entityType, className }) {
   const iconClass = cn("size-3.5 shrink-0 text-neutral2", className);
@@ -13530,9 +13462,9 @@ const TracesDataList = Object.assign(TracesDataListRoot, {
   Subheader: DataListSubheader,
   SubHeading: DataListSubHeading,
   Spacer: DataListSpacer,
-  IdCell: TracesDataListIdCell,
-  DateCell: TracesDataListDateCell,
-  TimeCell: TracesDataListTimeCell,
+  IdCell: DataListIdCell,
+  DateCell: DataListDateCell,
+  TimeCell: DataListTimeCell,
   NameCell: TracesDataListNameCell,
   InputCell: TracesDataListInputCell,
   EntityCell: TracesDataListEntityCell,
@@ -13755,10 +13687,6 @@ function EntityListSkeleton({ columns, numberOfRows = 3 }) {
   )) });
 }
 
-function toDate$1(value) {
-  const date = value instanceof Date ? value : new Date(value);
-  return isNaN(date.getTime()) ? null : date;
-}
 const LEVEL_CONFIG = {
   debug: { label: "DEBUG", color: "#71717a" },
   info: { label: "INFO", color: "#60a5fa" },
@@ -13770,20 +13698,6 @@ function LogsDataListLevelCell({ level }) {
   const config = LEVEL_CONFIG[level];
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "uppercase text-ui-sm font-semibold", style: { color: config.color }, children: config.label }) });
 }
-function LogsDataListDateCell({ timestamp }) {
-  const date = toDate$1(timestamp);
-  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? dateFns.isToday(date) ? "Today" : dateFns.format(date, "MMM dd") : "-" });
-}
-function LogsDataListTimeCell({ timestamp }) {
-  const date = toDate$1(timestamp);
-  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3 flex", children: date ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    dateFns.format(date, "HH:mm:ss"),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2", children: [
-      ".",
-      String(date.getMilliseconds()).padStart(3, "0")
-    ] })
-  ] }) : "-" });
-}
 function EntityTypeIcon({ entityType, className }) {
   const iconClass = cn("size-3.5 shrink-0 text-neutral2", className);
   switch (entityType) {
@@ -13819,7 +13733,7 @@ function LogsDataListDataCell({ data }) {
       return `${k}: <unserializable>`;
     }
   }).join(", ");
-  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-neutral3 text-ui-smd font-mono truncate", children: summary }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListMonoCell, { children: summary });
 }
 
 const LogsDataList = Object.assign(DataListRoot, {
@@ -13832,8 +13746,8 @@ const LogsDataList = Object.assign(DataListRoot, {
   RowLink: DataListRowLink,
   Spacer: DataListSpacer,
   NoMatch: DataListNoMatch,
-  DateCell: LogsDataListDateCell,
-  TimeCell: LogsDataListTimeCell,
+  DateCell: DataListDateCell,
+  TimeCell: DataListTimeCell,
   LevelCell: LogsDataListLevelCell,
   EntityCell: LogsDataListEntityCell,
   MessageCell: LogsDataListMessageCell,
@@ -15192,8 +15106,8 @@ function MetricsDataTable({
           "span",
           {
             className: cn(
-              "h-9 py-1 flex items-center border-b border-surface5 uppercase whitespace-nowrap text-neutral2 tracking-widest text-ui-xs sticky top-0 z-10 bg-surface2",
-              i === 0 ? "text-left sticky left-0 z-20 bg-surface2 pr-4 after:absolute after:right-1 after:top-1/2 after:-translate-y-1/2 after:h-3/5 after:w-px after:bg-surface5" : "px-4 text-right"
+              "h-9 py-1 flex items-center border-b border-surface5 uppercase whitespace-nowrap text-neutral2 tracking-widest text-ui-xs sticky top-0 z-10 bg-surface3",
+              i === 0 ? "text-left sticky left-0 z-20 bg-surface3 pr-4 after:absolute after:right-1 after:top-1/2 after:-translate-y-1/2 after:h-3/5 after:w-px after:bg-surface5" : "px-4 text-right"
             ),
             children: col.label
           },
@@ -15210,7 +15124,7 @@ function MetricsDataTable({
             const cellClasses = cn(
               "h-10 flex items-center text-ui-sm whitespace-nowrap border-t border-surface5",
               rowIndex === 0 && "border-t-transparent",
-              i === 0 ? "text-left text-neutral3 sticky left-0 z-10 bg-surface2 pr-4 after:absolute after:right-1 after:top-1/2 after:-translate-y-1/2 after:h-3/5 after:w-px after:bg-surface5" : cn(
+              i === 0 ? "text-left text-neutral3 sticky left-0 z-10 bg-surface3 pr-4 after:absolute after:right-1 after:top-1/2 after:-translate-y-1/2 after:h-3/5 after:w-px after:bg-surface5" : cn(
                 "px-4 text-right tabular-nums",
                 col.highlight ? "text-neutral4 font-semibold" : "text-neutral3"
               ),
@@ -20358,7 +20272,8 @@ function TracesListView({
             ref: virtualizer.measureElement,
             "data-index": vi.index,
             onClick: () => onTraceClick(trace),
-            className: cn(isFeatured && "bg-surface4", isRecentlyAdded && "animate-row-highlight"),
+            featured: isFeatured,
+            className: cn(isRecentlyAdded && "animate-row-highlight"),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.DateCell, { timestamp: displayDate }),
               /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TimeCell, { timestamp: displayDate }),
@@ -21526,7 +21441,7 @@ function LogsListView({
             ref: virtualizer.measureElement,
             "data-index": vi.index,
             onClick: () => onLogClick(log),
-            className: cn(isFeatured && "bg-surface4"),
+            featured: isFeatured,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.DateCell, { timestamp: log.timestamp }),
               /* @__PURE__ */ jsxRuntime.jsx(LogsDataList.TimeCell, { timestamp: log.timestamp }),
@@ -22138,8 +22053,6 @@ exports.EntityListSkeleton = EntityListSkeleton;
 exports.EntityName = EntityName;
 exports.Entry = Entry;
 exports.EntryCell = EntryCell;
-exports.EntryList = EntryList;
-exports.EntryListSkeleton = EntryListSkeleton;
 exports.EnvIcon = EnvIcon;
 exports.ErrorBoundary = ErrorBoundary;
 exports.ErrorState = ErrorState;
@@ -22417,7 +22330,6 @@ exports.formatJSON = formatJSON;
 exports.generateDefaultValues = generateDefaultValues;
 exports.getAllSpanIds = getAllSpanIds;
 exports.getChildFieldOptions = getChildFieldOptions;
-exports.getColumnTemplate = getColumnTemplate;
 exports.getFieldOptionAtPath = getFieldOptionAtPath;
 exports.getFieldOptionsFromSchema = getFieldOptionsFromSchema;
 exports.getFileContentType = getFileContentType;
@@ -22433,9 +22345,7 @@ exports.getShortId = getShortId$1;
 exports.getSpanDescendantIds = getSpanDescendantIds;
 exports.getSpanTypeUi = getSpanTypeUi;
 exports.getStatusIcon = getStatusIcon;
-exports.getToNextEntryFn = getToNextEntryFn;
 exports.getToNextItemFn = getToNextItemFn;
-exports.getToPreviousEntryFn = getToPreviousEntryFn;
 exports.getToPreviousItemFn = getToPreviousItemFn;
 exports.getTokenLimitMessage = getTokenLimitMessage;
 exports.getTracePropertyFilterTokens = getTracePropertyFilterTokens;