@mastra/playground-ui 30.0.0 → 30.0.1-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @mastra/playground-ui
 
+## 30.0.1-alpha.0
+
+### Patch Changes
+
+- Removed the EntityList and EntityListPageLayout components — they were superseded by DataList. The 9 Studio root list pages (Agents, Datasets, Experiments, MCPs, Processors, Prompts, Scorers, Tools, Workflows) now build on DataList, matching the condensed layout shared across the rest of Studio. ([#17058](https://github.com/mastra-ai/mastra/pull/17058))
+
+  **Migration**
+
+  If you were importing EntityList or EntityListPageLayout from `@mastra/playground-ui`, switch to DataList — its API is a strict superset:
+
+  ```tsx
+  // Before
+  import { EntityList, EntityListSkeleton } from '@mastra/playground-ui';
+
+  // After
+  import { DataList, DataListSkeleton } from '@mastra/playground-ui';
+  ```
+
+  The primitive names match (`.Top`, `.TopCell`, `.TopCellSmart`, `.RowLink`, `.Cell`, `.TextCell`, `.NameCell`, `.DescriptionCell`, `.NoMatch`, `.Pagination`). DataList additionally exposes `.Row`, `.RowButton`, `.RowStatic`, `.IdCell`, `.MonoCell`, `.SelectCell`, `.NextPageLoading`, and more — useful when you need selection rows or action cells outside a RowLink.
+
 ## 30.0.0
 
 ### Minor Changes

package/dist/index.cjs.js

@@ -12837,11 +12837,11 @@ const ItemList = Object.assign(ItemListRoot, {
   LabelCell: ItemListLabelCell
 });
 
-const widths$2 = ["75%", "50%", "65%", "90%", "60%", "80%"];
+const widths$1 = ["75%", "50%", "65%", "90%", "60%", "80%"];
 function ItemListItemsSkeleton({ columns, numberOfRows = 3 }) {
   const getPseudoRandomWidth = (rowIdx, colIdx) => {
-    const index = (rowIdx + colIdx + (columns?.length || 0) + (numberOfRows || 0)) % widths$2.length;
-    return widths$2[index];
+    const index = (rowIdx + colIdx + (columns?.length || 0) + (numberOfRows || 0)) % widths$1.length;
+    return widths$1[index];
   };
   return /* @__PURE__ */ jsxRuntime.jsx(ItemListItems, { children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(ItemListRow, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemListRowButton, { columns, children: (columns || []).map((col, colIdx) => {
     const key = `${col.name}-${colIdx}`;
@@ -13668,7 +13668,7 @@ function DataListTopCellWithTooltip({ children, tooltip, className }) {
     /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltip })
   ] });
 }
-const breakpointClasses$1 = {
+const breakpointClasses = {
   sm: { show: "hidden sm:inline-flex", hide: "inline-flex sm:hidden" },
   md: { show: "hidden md:inline-flex", hide: "inline-flex md:hidden" },
   lg: { show: "hidden lg:inline-flex", hide: "inline-flex lg:hidden" },
@@ -13683,7 +13683,7 @@ function DataListTopCellSmart({
   className
 }) {
   const tooltipText = tooltip ?? (typeof long === "string" ? long : void 0);
-  const bp = breakpointClasses$1[breakpoint];
+  const bp = breakpointClasses[breakpoint];
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("items-center gap-1", bp.show), children: long }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("items-center gap-1", bp.hide), children: short })
@@ -13756,14 +13756,14 @@ const DataList = Object.assign(DataListRoot, {
   Pagination: DataListPagination
 });
 
-const widths$1 = ["75%", "50%", "65%", "90%", "60%", "80%"];
+const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
 function DataListSkeleton({ columns = "auto 1fr auto auto", numberOfRows = 3 }) {
   const columnParts = columns.trim().split(/\s+/);
   const columnCount = columnParts.length;
   const skeletonColumns = columnParts.map((col) => col === "auto" ? "minmax(6rem, auto)" : col).join(" ");
   const getPseudoRandomWidth = (rowIdx, colIdx) => {
-    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths$1.length;
-    return widths$1[index];
+    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;
+    return widths[index];
   };
   return /* @__PURE__ */ jsxRuntime.jsx(DataListRoot, { columns: skeletonColumns, children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -13889,221 +13889,6 @@ const TracesDataList = Object.assign(TracesDataListRoot, {
   NextPageLoading: DataListNextPageLoading
 });
 
-function EntityListCell({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("relative py-4 grid items-center text-ui-md whitespace-nowrap text-neutral3", className), children });
-}
-function EntityListTextCell({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(EntityListCell, { className, children });
-}
-function EntityListNameCell({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(EntityListCell, { className: cn("text-left text-neutral4", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children }) });
-}
-function EntityListDescriptionCell({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(EntityListCell, { className: cn("text-neutral2", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children }) });
-}
-
-function EntityListNoMatch({ message = "Nothing matches your search", className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("col-span-full flex flex-col items-center justify-center gap-2 py-12 text-neutral3", className), children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md", children: message }) });
-}
-
-function EntityListPagination({ currentPage, hasMore, onNextPage, onPrevPage }) {
-  const showNavigation = typeof currentPage === "number" && currentPage > 0 || hasMore;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("col-span-full flex items-center justify-center gap-8 pt-6 pb-4 text-ui-md text-neutral3"), 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", { type: "button", onClick: onPrevPage, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, {}),
-            "Previous"
-          ] }),
-          hasMore && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: onNextPage, children: [
-            "Next",
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {})
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-
-function EntityListRoot({ children, columns, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(
-        "grid bg-surface2 border h-full border-border1 rounded-xl overflow-y-auto content-start",
-        className
-      ),
-      style: { gridTemplateColumns: columns },
-      children
-    }
-  );
-}
-
-function EntityListRow({ children, className, onClick, selected }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: onClick ? "button" : void 0,
-      tabIndex: onClick ? 0 : void 0,
-      onClick,
-      onKeyDown: onClick ? (e) => {
-        if (e.currentTarget !== e.target) return;
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick();
-        }
-      } : void 0,
-      className: cn(
-        "entity-list-row grid grid-cols-subgrid gap-6 lg:gap-8 xl:gap-10 2xl:gap-12 3xl:gap-14 col-span-full cursor-pointer border-y border-b-border1 border-t-transparent px-5",
-        "hover:bg-surface4 hover:border-transparent focus-within:bg-surface4 focus-within:border-transparent focus-within:ring-1 focus-within:ring-inset focus-within:ring-accent1",
-        "[.entity-list-row:hover+&]:border-t-transparent [.entity-list-row:focus-within+&]:border-t-transparent",
-        "transition-colors duration-200 rounded-lg",
-        selected && "bg-surface4 border-transparent",
-        className
-      ),
-      children
-    }
-  );
-}
-
-function EntityListRowLink({ children, to, className, LinkComponent: Link }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Link,
-    {
-      href: to,
-      className: cn(
-        "entity-list-row grid grid-cols-subgrid gap-6 lg:gap-8 xl:gap-10 2xl:gap-12 3xl:gap-14 col-span-full px-5 outline-hidden cursor-pointer border-y border-b-border1 border-t-transparent",
-        "hover:bg-surface4 hover:border-transparent focus-within:bg-surface4 focus-within:border-transparent focus-within:ring-1 focus-within:ring-inset focus-within:ring-accent1",
-        "[.entity-list-row:hover+&]:border-t-transparent [.entity-list-row:focus-within+&]:border-t-transparent",
-        "transition-colors duration-200 rounded-lg",
-        className
-      ),
-      children
-    }
-  );
-}
-
-function EntityListRows({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-subgrid col-span-full overflow-y-auto p-1", className), children });
-}
-
-function EntityListTop({ children, className }) {
-  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",
-        className
-      ),
-      children
-    }
-  );
-}
-
-const EntityListTopCell = 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
-    }
-  );
-});
-function EntityListTopCellWithTooltip({ children, tooltip, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(EntityListTopCell, { className, children }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltip })
-  ] });
-}
-const breakpointClasses = {
-  sm: { show: "hidden sm:inline-flex", hide: "inline-flex sm:hidden" },
-  md: { show: "hidden md:inline-flex", hide: "inline-flex md:hidden" },
-  lg: { show: "hidden lg:inline-flex", hide: "inline-flex lg:hidden" },
-  xl: { show: "hidden xl:inline-flex", hide: "inline-flex xl:hidden" },
-  "2xl": { show: "hidden 2xl:inline-flex", hide: "inline-flex 2xl:hidden" }
-};
-function EntityListTopCellSmart({
-  long,
-  short,
-  tooltip,
-  breakpoint = "2xl",
-  className
-}) {
-  const tooltipText = tooltip ?? (typeof long === "string" ? long : void 0);
-  const bp = breakpointClasses[breakpoint];
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("items-center gap-1", bp.show), children: long }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("items-center gap-1", bp.hide), children: short })
-  ] });
-  if (tooltipText) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      EntityListTopCellWithTooltip,
-      {
-        tooltip: tooltipText,
-        className: cn("flex [&_svg]:w-[1.3em] [&_svg]:h-[1.3em]", className),
-        children: content
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(EntityListTopCell, { className: cn("flex [&_svg]:w-[1.3em] [&_svg]:h-[1.3em]", className), children: content });
-}
-
-const EntityList = Object.assign(EntityListRoot, {
-  Top: EntityListTop,
-  TopCell: EntityListTopCell,
-  TopCellWithTooltip: EntityListTopCellWithTooltip,
-  TopCellSmart: EntityListTopCellSmart,
-  Rows: EntityListRows,
-  Row: EntityListRow,
-  RowLink: EntityListRowLink,
-  Cell: EntityListCell,
-  TextCell: EntityListTextCell,
-  NameCell: EntityListNameCell,
-  DescriptionCell: EntityListDescriptionCell,
-  NoMatch: EntityListNoMatch,
-  Pagination: EntityListPagination
-});
-
-const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
-function EntityListSkeleton({ columns, numberOfRows = 3 }) {
-  const columnParts = columns.trim().split(/\s+/);
-  const columnCount = columnParts.length;
-  const skeletonColumns = columnParts.map((col) => col === "auto" ? "minmax(6rem, auto)" : col).join(" ");
-  const getPseudoRandomWidth = (rowIdx, colIdx) => {
-    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;
-    return widths[index];
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(EntityListRoot, { columns: skeletonColumns, children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "entity-list-row grid grid-cols-subgrid gap-6 lg:gap-8 xl:gap-10 2xl:gap-12 3xl:gap-14 col-span-full px-5 border-y border-b-border1 border-t-transparent transition-colors duration-200 rounded-lg",
-      children: Array.from({ length: columnCount }).map((_2, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(EntityListCell, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "bg-surface4 rounded-md animate-pulse text-transparent h-4 select-none",
-          style: { width: getPseudoRandomWidth(rowIdx, colIdx) }
-        }
-      ) }, colIdx))
-    },
-    rowIdx
-  )) });
-}
-
 const LEVEL_CONFIG = {
   debug: { label: "DEBUG", color: "#71717a" },
   info: { label: "INFO", color: "#60a5fa" },
@@ -14172,31 +13957,6 @@ const LogsDataList = Object.assign(DataListRoot, {
   NextPageLoading: DataListNextPageLoading
 });
 
-function EntityListPageLayoutRoot({ children, className }) {
-  const pageHeading = usePageHeading();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "main",
-    {
-      className: cn(
-        "w-full h-full overflow-hidden grid grid-rows-[auto_auto] max-w-[110rem] px-10 mx-auto gap-4 py-6 content-start",
-        className
-      ),
-      children: [
-        pageHeading && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "sr-only", children: pageHeading }),
-        children
-      ]
-    }
-  );
-}
-
-function EntityListPageLayoutTop({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-4", className), children });
-}
-
-const EntityListPageLayout = Object.assign(EntityListPageLayoutRoot, {
-  Top: EntityListPageLayoutTop
-});
-
 function PageLayoutColumn({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid content-start", className), children });
 }
@@ -22473,9 +22233,6 @@ exports.EntityContent = EntityContent;
 exports.EntityDescription = EntityDescription;
 exports.EntityHeader = EntityHeader;
 exports.EntityIcon = EntityIcon;
-exports.EntityList = EntityList;
-exports.EntityListPageLayout = EntityListPageLayout;
-exports.EntityListSkeleton = EntityListSkeleton;
 exports.EntityName = EntityName;
 exports.Entry = Entry;
 exports.EntryCell = EntryCell;