@mastra/playground-ui 30.0.0 → 30.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +67 -0
  2. package/dist/index.cjs.js +28 -261
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.css +9 -17
  5. package/dist/index.es.js +29 -259
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/src/ds/components/DataList/{data-list-row.d.ts → data-list-row-wrapper.d.ts} +2 -2
  8. package/dist/src/ds/components/DataList/data-list.d.ts +1 -1
  9. package/dist/src/ds/components/DataList/shared.d.ts +3 -3
  10. package/dist/src/ds/components/LogsDataList/logs-data-list.d.ts +1 -1
  11. package/dist/src/index.d.ts +0 -2
  12. package/package.json +7 -7
  13. package/dist/src/ds/components/EntityList/entity-list-cells.d.ts +0 -9
  14. package/dist/src/ds/components/EntityList/entity-list-no-match.d.ts +0 -5
  15. package/dist/src/ds/components/EntityList/entity-list-pagination.d.ts +0 -7
  16. package/dist/src/ds/components/EntityList/entity-list-root.d.ts +0 -7
  17. package/dist/src/ds/components/EntityList/entity-list-row-link.d.ts +0 -9
  18. package/dist/src/ds/components/EntityList/entity-list-row.d.ts +0 -8
  19. package/dist/src/ds/components/EntityList/entity-list-rows.d.ts +0 -6
  20. package/dist/src/ds/components/EntityList/entity-list-skeleton.d.ts +0 -5
  21. package/dist/src/ds/components/EntityList/entity-list-top-cell.d.ts +0 -20
  22. package/dist/src/ds/components/EntityList/entity-list-top.d.ts +0 -6
  23. package/dist/src/ds/components/EntityList/entity-list.d.ts +0 -24
  24. package/dist/src/ds/components/EntityList/index.d.ts +0 -2
  25. package/dist/src/ds/components/EntityListPageLayout/entity-list-page-layout-root.d.ts +0 -5
  26. package/dist/src/ds/components/EntityListPageLayout/entity-list-page-layout-top.d.ts +0 -5
  27. package/dist/src/ds/components/EntityListPageLayout/entity-list-page-layout.d.ts +0 -5
  28. package/dist/src/ds/components/EntityListPageLayout/index.d.ts +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,72 @@
1
1
  # @mastra/playground-ui
2
2
 
3
+ ## 30.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Renamed `DataList.Row` (the non-interactive grid wrapper) to `DataList.RowWrapper` for clarity, since the name `Row` was easy to confuse with the interactive row primitives (`.RowButton`, `.RowLink`, `.RowStatic`). The corresponding exported component is now `DataListRowWrapper` (was `DataListRow`). ([#17123](https://github.com/mastra-ai/mastra/pull/17123))
8
+
9
+ **Migration**
10
+
11
+ ```tsx
12
+ // Before
13
+ <DataList.Row>
14
+ <DataList.SelectCell ... />
15
+ <DataList.RowButton ...>...</DataList.RowButton>
16
+ </DataList.Row>
17
+
18
+ // After
19
+ <DataList.RowWrapper>
20
+ <DataList.SelectCell ... />
21
+ <DataList.RowButton ...>...</DataList.RowButton>
22
+ </DataList.RowWrapper>
23
+ ```
24
+
25
+ The `.RowButton`, `.RowLink`, and `.RowStatic` primitives are unchanged.
26
+
27
+ - `ContextMenu` Positioner and popup raised from `z-50` to `z-1000` with `isolate`, so the menu sits above app chrome that uses higher stacking contexts (e.g. sticky headers with `z-500`). Previously the menu would render behind such elements when opened on triggers near them. ([#17133](https://github.com/mastra-ai/mastra/pull/17133))
28
+
29
+ - 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))
30
+
31
+ **Migration**
32
+
33
+ If you were importing EntityList or EntityListPageLayout from `@mastra/playground-ui`, switch to DataList — its API is a strict superset:
34
+
35
+ ```tsx
36
+ // Before
37
+ import { EntityList, EntityListSkeleton } from '@mastra/playground-ui';
38
+
39
+ // After
40
+ import { DataList, DataListSkeleton } from '@mastra/playground-ui';
41
+ ```
42
+
43
+ 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.
44
+
45
+ - Updated dependencies [[`21db1a4`](https://github.com/mastra-ai/mastra/commit/21db1a4b8ac058d5a4fbe38b516cc1b81e526915)]:
46
+ - @mastra/core@1.37.1
47
+ - @mastra/client-js@1.21.1
48
+ - @mastra/react@0.4.2
49
+
50
+ ## 30.0.1-alpha.0
51
+
52
+ ### Patch Changes
53
+
54
+ - 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))
55
+
56
+ **Migration**
57
+
58
+ If you were importing EntityList or EntityListPageLayout from `@mastra/playground-ui`, switch to DataList — its API is a strict superset:
59
+
60
+ ```tsx
61
+ // Before
62
+ import { EntityList, EntityListSkeleton } from '@mastra/playground-ui';
63
+
64
+ // After
65
+ import { DataList, DataListSkeleton } from '@mastra/playground-ui';
66
+ ```
67
+
68
+ 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.
69
+
3
70
  ## 30.0.0
4
71
 
5
72
  ### Minor Changes
package/dist/index.cjs.js CHANGED
@@ -6719,7 +6719,7 @@ const itemClass$1 = cn(
6719
6719
  "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-60 [&:hover>svg]:opacity-100"
6720
6720
  );
6721
6721
  const popupClass$1 = cn(
6722
- "bg-surface3 text-neutral4 z-50 min-w-44 max-h-[min(20rem,var(--available-height))] overflow-x-hidden overflow-y-auto rounded-xl border border-border1 p-1 shadow-dialog origin-[var(--transform-origin)] outline-none",
6722
+ "bg-surface3 text-neutral4 z-1000 min-w-44 max-h-[min(20rem,var(--available-height))] overflow-x-hidden overflow-y-auto rounded-xl border border-border1 p-1 shadow-dialog origin-[var(--transform-origin)] outline-none",
6723
6723
  "data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95",
6724
6724
  "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1"
6725
6725
  );
@@ -6732,7 +6732,7 @@ const ContextMenuContent = React__namespace.forwardRef(
6732
6732
  alignOffset,
6733
6733
  side,
6734
6734
  sideOffset,
6735
- className: "z-50 outline-none",
6735
+ className: "isolate z-1000 outline-none",
6736
6736
  children: /* @__PURE__ */ jsxRuntime.jsx(
6737
6737
  contextMenu.ContextMenu.Popup,
6738
6738
  {
@@ -6853,7 +6853,7 @@ const ContextMenuSubContent = React__namespace.forwardRef(
6853
6853
  alignOffset,
6854
6854
  side,
6855
6855
  sideOffset,
6856
- className: "z-50 outline-none",
6856
+ className: "isolate z-1000 outline-none",
6857
6857
  children: /* @__PURE__ */ jsxRuntime.jsx(
6858
6858
  contextMenu.ContextMenu.Popup,
6859
6859
  {
@@ -12837,11 +12837,11 @@ const ItemList = Object.assign(ItemListRoot, {
12837
12837
  LabelCell: ItemListLabelCell
12838
12838
  });
12839
12839
 
12840
- const widths$2 = ["75%", "50%", "65%", "90%", "60%", "80%"];
12840
+ const widths$1 = ["75%", "50%", "65%", "90%", "60%", "80%"];
12841
12841
  function ItemListItemsSkeleton({ columns, numberOfRows = 3 }) {
12842
12842
  const getPseudoRandomWidth = (rowIdx, colIdx) => {
12843
- const index = (rowIdx + colIdx + (columns?.length || 0) + (numberOfRows || 0)) % widths$2.length;
12844
- return widths$2[index];
12843
+ const index = (rowIdx + colIdx + (columns?.length || 0) + (numberOfRows || 0)) % widths$1.length;
12844
+ return widths$1[index];
12845
12845
  };
12846
12846
  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) => {
12847
12847
  const key = `${col.name}-${colIdx}`;
@@ -13516,11 +13516,6 @@ const dataListRowStyles = [
13516
13516
  ...dataListRowOuterStyles
13517
13517
  ];
13518
13518
 
13519
- const DataListRow = React.forwardRef(({ children, className, ...rest }, ref) => {
13520
- return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("grid grid-cols-subgrid gap-0 mx-1", ...dataListRowOuterStyles, className), ...rest, children });
13521
- });
13522
- DataListRow.displayName = "DataListRow";
13523
-
13524
13519
  const DataListRowButton = React.forwardRef(
13525
13520
  ({ children, className, type = "button", flushLeft, flushRight, colStart, colEnd, featured, style, ...rest }, ref) => {
13526
13521
  const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
@@ -13603,6 +13598,21 @@ const DataListRowStatic = React.forwardRef(
13603
13598
  );
13604
13599
  DataListRowStatic.displayName = "DataListRowStatic";
13605
13600
 
13601
+ const DataListRowWrapper = React.forwardRef(
13602
+ ({ children, className, ...rest }, ref) => {
13603
+ return /* @__PURE__ */ jsxRuntime.jsx(
13604
+ "div",
13605
+ {
13606
+ ref,
13607
+ className: cn("grid grid-cols-subgrid gap-0 mx-1", ...dataListRowOuterStyles, className),
13608
+ ...rest,
13609
+ children
13610
+ }
13611
+ );
13612
+ }
13613
+ );
13614
+ DataListRowWrapper.displayName = "DataListRowWrapper";
13615
+
13606
13616
  function DataListSpacer({ height }) {
13607
13617
  if (height <= 0) return null;
13608
13618
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full", style: { height } });
@@ -13668,7 +13678,7 @@ function DataListTopCellWithTooltip({ children, tooltip, className }) {
13668
13678
  /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltip })
13669
13679
  ] });
13670
13680
  }
13671
- const breakpointClasses$1 = {
13681
+ const breakpointClasses = {
13672
13682
  sm: { show: "hidden sm:inline-flex", hide: "inline-flex sm:hidden" },
13673
13683
  md: { show: "hidden md:inline-flex", hide: "inline-flex md:hidden" },
13674
13684
  lg: { show: "hidden lg:inline-flex", hide: "inline-flex lg:hidden" },
@@ -13683,7 +13693,7 @@ function DataListTopCellSmart({
13683
13693
  className
13684
13694
  }) {
13685
13695
  const tooltipText = tooltip ?? (typeof long === "string" ? long : void 0);
13686
- const bp = breakpointClasses$1[breakpoint];
13696
+ const bp = breakpointClasses[breakpoint];
13687
13697
  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
13688
13698
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("items-center gap-1", bp.show), children: long }),
13689
13699
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("items-center gap-1", bp.hide), children: short })
@@ -13734,7 +13744,7 @@ const DataList = Object.assign(DataListRoot, {
13734
13744
  TopCell: DataListTopCell,
13735
13745
  TopCellWithTooltip: DataListTopCellWithTooltip,
13736
13746
  TopCellSmart: DataListTopCellSmart,
13737
- Row: DataListRow,
13747
+ RowWrapper: DataListRowWrapper,
13738
13748
  RowButton: DataListRowButton,
13739
13749
  RowLink: DataListRowLink,
13740
13750
  RowStatic: DataListRowStatic,
@@ -13756,14 +13766,14 @@ const DataList = Object.assign(DataListRoot, {
13756
13766
  Pagination: DataListPagination
13757
13767
  });
13758
13768
 
13759
- const widths$1 = ["75%", "50%", "65%", "90%", "60%", "80%"];
13769
+ const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
13760
13770
  function DataListSkeleton({ columns = "auto 1fr auto auto", numberOfRows = 3 }) {
13761
13771
  const columnParts = columns.trim().split(/\s+/);
13762
13772
  const columnCount = columnParts.length;
13763
13773
  const skeletonColumns = columnParts.map((col) => col === "auto" ? "minmax(6rem, auto)" : col).join(" ");
13764
13774
  const getPseudoRandomWidth = (rowIdx, colIdx) => {
13765
- const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths$1.length;
13766
- return widths$1[index];
13775
+ const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;
13776
+ return widths[index];
13767
13777
  };
13768
13778
  return /* @__PURE__ */ jsxRuntime.jsx(DataListRoot, { columns: skeletonColumns, children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(
13769
13779
  "div",
@@ -13889,221 +13899,6 @@ const TracesDataList = Object.assign(TracesDataListRoot, {
13889
13899
  NextPageLoading: DataListNextPageLoading
13890
13900
  });
13891
13901
 
13892
- function EntityListCell({ children, className }) {
13893
- return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("relative py-4 grid items-center text-ui-md whitespace-nowrap text-neutral3", className), children });
13894
- }
13895
- function EntityListTextCell({ children, className }) {
13896
- return /* @__PURE__ */ jsxRuntime.jsx(EntityListCell, { className, children });
13897
- }
13898
- function EntityListNameCell({ children, className }) {
13899
- return /* @__PURE__ */ jsxRuntime.jsx(EntityListCell, { className: cn("text-left text-neutral4", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children }) });
13900
- }
13901
- function EntityListDescriptionCell({ children, className }) {
13902
- return /* @__PURE__ */ jsxRuntime.jsx(EntityListCell, { className: cn("text-neutral2", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children }) });
13903
- }
13904
-
13905
- function EntityListNoMatch({ message = "Nothing matches your search", className }) {
13906
- 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 }) });
13907
- }
13908
-
13909
- function EntityListPagination({ currentPage, hasMore, onNextPage, onPrevPage }) {
13910
- const showNavigation = typeof currentPage === "number" && currentPage > 0 || hasMore;
13911
- 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: [
13912
- /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
13913
- "Page ",
13914
- /* @__PURE__ */ jsxRuntime.jsx("b", { children: currentPage ? currentPage + 1 : "1" })
13915
- ] }),
13916
- showNavigation && /* @__PURE__ */ jsxRuntime.jsxs(
13917
- "div",
13918
- {
13919
- className: cn(
13920
- "flex gap-4",
13921
- "[&>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",
13922
- "[&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:text-neutral3"
13923
- ),
13924
- children: [
13925
- typeof currentPage === "number" && currentPage > 0 && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: onPrevPage, children: [
13926
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, {}),
13927
- "Previous"
13928
- ] }),
13929
- hasMore && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: onNextPage, children: [
13930
- "Next",
13931
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {})
13932
- ] })
13933
- ]
13934
- }
13935
- )
13936
- ] });
13937
- }
13938
-
13939
- function EntityListRoot({ children, columns, className }) {
13940
- return /* @__PURE__ */ jsxRuntime.jsx(
13941
- "div",
13942
- {
13943
- className: cn(
13944
- "grid bg-surface2 border h-full border-border1 rounded-xl overflow-y-auto content-start",
13945
- className
13946
- ),
13947
- style: { gridTemplateColumns: columns },
13948
- children
13949
- }
13950
- );
13951
- }
13952
-
13953
- function EntityListRow({ children, className, onClick, selected }) {
13954
- return /* @__PURE__ */ jsxRuntime.jsx(
13955
- "div",
13956
- {
13957
- role: onClick ? "button" : void 0,
13958
- tabIndex: onClick ? 0 : void 0,
13959
- onClick,
13960
- onKeyDown: onClick ? (e) => {
13961
- if (e.currentTarget !== e.target) return;
13962
- if (e.key === "Enter" || e.key === " ") {
13963
- e.preventDefault();
13964
- onClick();
13965
- }
13966
- } : void 0,
13967
- className: cn(
13968
- "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",
13969
- "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",
13970
- "[.entity-list-row:hover+&]:border-t-transparent [.entity-list-row:focus-within+&]:border-t-transparent",
13971
- "transition-colors duration-200 rounded-lg",
13972
- selected && "bg-surface4 border-transparent",
13973
- className
13974
- ),
13975
- children
13976
- }
13977
- );
13978
- }
13979
-
13980
- function EntityListRowLink({ children, to, className, LinkComponent: Link }) {
13981
- return /* @__PURE__ */ jsxRuntime.jsx(
13982
- Link,
13983
- {
13984
- href: to,
13985
- className: cn(
13986
- "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",
13987
- "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",
13988
- "[.entity-list-row:hover+&]:border-t-transparent [.entity-list-row:focus-within+&]:border-t-transparent",
13989
- "transition-colors duration-200 rounded-lg",
13990
- className
13991
- ),
13992
- children
13993
- }
13994
- );
13995
- }
13996
-
13997
- function EntityListRows({ children, className }) {
13998
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-subgrid col-span-full overflow-y-auto p-1", className), children });
13999
- }
14000
-
14001
- function EntityListTop({ children, className }) {
14002
- return /* @__PURE__ */ jsxRuntime.jsx(
14003
- "div",
14004
- {
14005
- className: cn(
14006
- "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",
14007
- className
14008
- ),
14009
- children
14010
- }
14011
- );
14012
- }
14013
-
14014
- const EntityListTopCell = React.forwardRef(({ children, className }, ref) => {
14015
- return /* @__PURE__ */ jsxRuntime.jsx(
14016
- "span",
14017
- {
14018
- ref,
14019
- className: cn(
14020
- "h-8 py-1 flex items-center uppercase whitespace-nowrap text-neutral2 tracking-widest text-ui-xs",
14021
- className
14022
- ),
14023
- children
14024
- }
14025
- );
14026
- });
14027
- function EntityListTopCellWithTooltip({ children, tooltip, className }) {
14028
- return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
14029
- /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(EntityListTopCell, { className, children }) }),
14030
- /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltip })
14031
- ] });
14032
- }
14033
- const breakpointClasses = {
14034
- sm: { show: "hidden sm:inline-flex", hide: "inline-flex sm:hidden" },
14035
- md: { show: "hidden md:inline-flex", hide: "inline-flex md:hidden" },
14036
- lg: { show: "hidden lg:inline-flex", hide: "inline-flex lg:hidden" },
14037
- xl: { show: "hidden xl:inline-flex", hide: "inline-flex xl:hidden" },
14038
- "2xl": { show: "hidden 2xl:inline-flex", hide: "inline-flex 2xl:hidden" }
14039
- };
14040
- function EntityListTopCellSmart({
14041
- long,
14042
- short,
14043
- tooltip,
14044
- breakpoint = "2xl",
14045
- className
14046
- }) {
14047
- const tooltipText = tooltip ?? (typeof long === "string" ? long : void 0);
14048
- const bp = breakpointClasses[breakpoint];
14049
- const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
14050
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("items-center gap-1", bp.show), children: long }),
14051
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("items-center gap-1", bp.hide), children: short })
14052
- ] });
14053
- if (tooltipText) {
14054
- return /* @__PURE__ */ jsxRuntime.jsx(
14055
- EntityListTopCellWithTooltip,
14056
- {
14057
- tooltip: tooltipText,
14058
- className: cn("flex [&_svg]:w-[1.3em] [&_svg]:h-[1.3em]", className),
14059
- children: content
14060
- }
14061
- );
14062
- }
14063
- return /* @__PURE__ */ jsxRuntime.jsx(EntityListTopCell, { className: cn("flex [&_svg]:w-[1.3em] [&_svg]:h-[1.3em]", className), children: content });
14064
- }
14065
-
14066
- const EntityList = Object.assign(EntityListRoot, {
14067
- Top: EntityListTop,
14068
- TopCell: EntityListTopCell,
14069
- TopCellWithTooltip: EntityListTopCellWithTooltip,
14070
- TopCellSmart: EntityListTopCellSmart,
14071
- Rows: EntityListRows,
14072
- Row: EntityListRow,
14073
- RowLink: EntityListRowLink,
14074
- Cell: EntityListCell,
14075
- TextCell: EntityListTextCell,
14076
- NameCell: EntityListNameCell,
14077
- DescriptionCell: EntityListDescriptionCell,
14078
- NoMatch: EntityListNoMatch,
14079
- Pagination: EntityListPagination
14080
- });
14081
-
14082
- const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
14083
- function EntityListSkeleton({ columns, numberOfRows = 3 }) {
14084
- const columnParts = columns.trim().split(/\s+/);
14085
- const columnCount = columnParts.length;
14086
- const skeletonColumns = columnParts.map((col) => col === "auto" ? "minmax(6rem, auto)" : col).join(" ");
14087
- const getPseudoRandomWidth = (rowIdx, colIdx) => {
14088
- const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;
14089
- return widths[index];
14090
- };
14091
- return /* @__PURE__ */ jsxRuntime.jsx(EntityListRoot, { columns: skeletonColumns, children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(
14092
- "div",
14093
- {
14094
- 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",
14095
- children: Array.from({ length: columnCount }).map((_2, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(EntityListCell, { children: /* @__PURE__ */ jsxRuntime.jsx(
14096
- "div",
14097
- {
14098
- className: "bg-surface4 rounded-md animate-pulse text-transparent h-4 select-none",
14099
- style: { width: getPseudoRandomWidth(rowIdx, colIdx) }
14100
- }
14101
- ) }, colIdx))
14102
- },
14103
- rowIdx
14104
- )) });
14105
- }
14106
-
14107
13902
  const LEVEL_CONFIG = {
14108
13903
  debug: { label: "DEBUG", color: "#71717a" },
14109
13904
  info: { label: "INFO", color: "#60a5fa" },
@@ -14158,7 +13953,7 @@ const LogsDataList = Object.assign(DataListRoot, {
14158
13953
  TopCell: DataListTopCell,
14159
13954
  TopCellWithTooltip: DataListTopCellWithTooltip,
14160
13955
  TopCellSmart: DataListTopCellSmart,
14161
- Row: DataListRow,
13956
+ RowWrapper: DataListRowWrapper,
14162
13957
  RowButton: DataListRowButton,
14163
13958
  RowLink: DataListRowLink,
14164
13959
  Spacer: DataListSpacer,
@@ -14172,31 +13967,6 @@ const LogsDataList = Object.assign(DataListRoot, {
14172
13967
  NextPageLoading: DataListNextPageLoading
14173
13968
  });
14174
13969
 
14175
- function EntityListPageLayoutRoot({ children, className }) {
14176
- const pageHeading = usePageHeading();
14177
- return /* @__PURE__ */ jsxRuntime.jsxs(
14178
- "main",
14179
- {
14180
- className: cn(
14181
- "w-full h-full overflow-hidden grid grid-rows-[auto_auto] max-w-[110rem] px-10 mx-auto gap-4 py-6 content-start",
14182
- className
14183
- ),
14184
- children: [
14185
- pageHeading && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "sr-only", children: pageHeading }),
14186
- children
14187
- ]
14188
- }
14189
- );
14190
- }
14191
-
14192
- function EntityListPageLayoutTop({ children, className }) {
14193
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-4", className), children });
14194
- }
14195
-
14196
- const EntityListPageLayout = Object.assign(EntityListPageLayoutRoot, {
14197
- Top: EntityListPageLayoutTop
14198
- });
14199
-
14200
13970
  function PageLayoutColumn({ children, className }) {
14201
13971
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid content-start", className), children });
14202
13972
  }
@@ -22473,9 +22243,6 @@ exports.EntityContent = EntityContent;
22473
22243
  exports.EntityDescription = EntityDescription;
22474
22244
  exports.EntityHeader = EntityHeader;
22475
22245
  exports.EntityIcon = EntityIcon;
22476
- exports.EntityList = EntityList;
22477
- exports.EntityListPageLayout = EntityListPageLayout;
22478
- exports.EntityListSkeleton = EntityListSkeleton;
22479
22246
  exports.EntityName = EntityName;
22480
22247
  exports.Entry = Entry;
22481
22248
  exports.EntryCell = EntryCell;