@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/data-list-072hHK9L.cjs

@@ -0,0 +1,1003 @@
+const require_primitives_transitions = require("./primitives/transitions.cjs.js");
+const require_components_Checkbox = require("./components/Checkbox.cjs.js");
+const require_utils = require("./utils-uDc1ofX1.cjs");
+const require_utils_date_format = require("./utils/date-format.cjs.js");
+const require_utils_id = require("./utils/id.cjs.js");
+const require_Txt = require("./Txt-_00wWxTd.cjs");
+const require_Button = require("./Button-BfICfyxD.cjs");
+const require_scroll_area = require("./scroll-area-BU_TorPW.cjs");
+const require_primitives_raised_surface = require("./primitives/raised-surface.cjs.js");
+const require_hooks_use_local_storage_state = require("./hooks/use-local-storage-state.cjs.js");
+const require_tooltip = require("./tooltip-BsExuMO8.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let _base_ui_react_scroll_area = require("@base-ui/react/scroll-area");
+let zod_v4 = require("zod/v4");
+// src/ds/components/DataList/shared.ts
+/**
+* Row-level styling for the element that participates in the row sibling
+* chain — applied to `DataList.RowButton` / `DataList.RowLink` when used
+* standalone, and to `DataList.RowWrapper` when used as a shell around them.
+*
+* Carries the `.data-list-row` marker class the root styles target.
+*/
+var dataListRowOuterStyles = ["group/data-list-row data-list-row col-span-full relative min-h-9", "before:absolute before:inset-0 before:-z-2 before:rounded-[inherit] before:bg-background before:content-['']"];
+/**
+* Interactive state fills for the outer row element. Applied to standalone
+* `RowButton` / `RowLink` and to `RowWrapper`. The `has-*` forms let a wrapper
+* mirror the tone of the interactive row nested inside it.
+*
+* Hover lights an `after` layer between the row surface and its content, and
+* switches instantly. Rows are sunken wells (`--background`) inside
+* the card panel, whose material also shows through the 1px gaps between them,
+* so a resting tone steps to `--surface-panel` — the opaque twin of a `--fill`
+* rung over the well — rather than to `--card`, which would make a selected row
+* the exact colour of the separators around it. Pressed rises a full `--fill`
+* rung, the same rung a resting control carries, and error sits on the row
+* element itself so it reads on top of the hover layer.
+*/
+var dataListRowStateStyles = [
+	"data-list-row-interactive after:pointer-events-none after:absolute after:inset-0 after:-z-1 after:rounded-[inherit] after:content-['']",
+	"not-disabled:hover:after:bg-fill-subtle",
+	"active:bg-fill",
+	"focus-visible:bg-surface-panel has-focus-visible:bg-surface-panel",
+	"data-featured:before:bg-surface-panel has-data-featured:before:bg-surface-panel has-data-selected:before:bg-surface-panel",
+	"data-[variant=error]:bg-destructive-subtle has-data-[variant=error]:bg-destructive-subtle data-[variant=error]:active:bg-destructive-subtle-active has-data-[variant=error]:active:bg-destructive-subtle-active",
+	"data-[variant=info]:bg-info-subtle/50 has-data-[variant=info]:bg-info-subtle/50"
+];
+/**
+* Layout and focus for the interactive element. The background lives on the
+* outer row element so it sits inside the root surface.
+*/
+var dataListRowInteractiveStyles = ["grid grid-cols-subgrid gap-4 px-3 cursor-pointer", require_primitives_transitions.focusRingInset];
+var dataListRowStyles = [
+	...dataListRowInteractiveStyles,
+	...dataListRowOuterStyles,
+	...dataListRowStateStyles
+];
+var dataListRowStaticStyles = ["grid grid-cols-subgrid gap-4 px-3", ...dataListRowOuterStyles];
+/**
+* Row actions that stay out of the way until the row is hovered or focused.
+* Opacity, not display, so the column keeps its width and nothing shifts. A
+* coarse pointer never hovers, so there they stay visible — hidden controls
+* that still take taps would be worse than no reveal at all.
+*/
+var dataListRowActionRevealStyles = "opacity-0 pointer-coarse:opacity-100 group-focus-within/data-list-row:opacity-100 group-hover/data-list-row:opacity-100";
+var dataListStickyStartStyles = ["data-list-sticky-start sticky left-0 z-10 isolate self-stretch overflow-visible"];
+/** Split a grid-template-columns string on top-level whitespace only, so `minmax(0, 10rem)` stays one track. */
+function splitColumns(columns) {
+	const parts = [];
+	let depth = 0;
+	let current = "";
+	for (const char of columns) {
+		if (char === "(") depth++;
+		if (char === ")") depth--;
+		if (/\s/.test(char) && depth === 0) {
+			if (current) parts.push(current);
+			current = "";
+		} else current += char;
+	}
+	if (current) parts.push(current);
+	return parts;
+}
+// src/ds/components/DataList/data-list-cells.tsx
+function DataListCell({ children, className, as, sticky, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as || "span", {
+		className: require_utils.cn("relative grid max-w-full min-w-0 items-center overflow-hidden text-body-sm whitespace-nowrap text-muted-foreground empty:before:text-placeholder empty:before:content-[\"—\"]", sticky === "start" && dataListStickyStartStyles, className),
+		...rest,
+		children
+	});
+}
+/**
+* Trailing cell for row actions, revealed on row hover or keyboard focus.
+* Sits beside a `DataList.RowButton` inside a `DataList.RowWrapper`.
+*/
+function DataListActionsCell({ children, className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListCell, {
+		className,
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_utils.cn("flex w-full items-center justify-end gap-1 pr-3 transition-opacity duration-200", dataListRowActionRevealStyles),
+			children
+		})
+	});
+}
+var dataListTruncateContentStyles = "block min-w-0 max-w-full truncate empty:before:content-[\"—\"] empty:before:text-placeholder [&>*]:min-w-0 [&>*]:max-w-full [&>*]:overflow-hidden [&>*]:text-ellipsis [&>*]:whitespace-nowrap";
+var dataListInlineTextTruncateStyles = "min-w-0 flex-1 truncate";
+function DataListInlineText({ children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: dataListInlineTextTruncateStyles,
+		children
+	});
+}
+function DataListTruncatedTextNodes({ children }) {
+	return react.Children.map(children, (child) => {
+		if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListInlineText, { children: child });
+		return child;
+	});
+}
+function DataListTruncatedCellContent({ children }) {
+	return react.Children.map(children, (child) => {
+		if (!(0, react.isValidElement)(child) || typeof child.type !== "string") return child;
+		return (0, react.cloneElement)(child, {
+			className: require_utils.cn("max-w-full min-w-0 overflow-hidden", child.props.className),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListTruncatedTextNodes, { children: child.props.children })
+		});
+	});
+}
+function DataListTextCell({ children, className, font = "sans", ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListCell, {
+		className: require_utils.cn(font === "mono" && "font-mono text-body-sm", className),
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: dataListTruncateContentStyles,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListTruncatedCellContent, { children })
+		})
+	});
+}
+function DataListNameCell({ children, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListCell, {
+		className: require_utils.cn("text-left text-label text-foreground", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: dataListTruncateContentStyles,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListTruncatedCellContent, { children })
+		})
+	});
+}
+function DataListDescriptionCell({ children, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListCell, {
+		className: require_utils.cn("text-muted-foreground", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: dataListTruncateContentStyles,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListTruncatedCellContent, { children })
+		})
+	});
+}
+function DataListRowHeaderCell({ children, className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListCell, {
+		sticky: "start",
+		className: require_utils.cn("data-list-row-header -mx-3 w-auto max-w-none px-3 text-left text-label text-foreground", className),
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_utils.cn(dataListTruncateContentStyles, "relative z-10 w-full"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListTruncatedCellContent, { children })
+		})
+	});
+}
+/**
+* Right-aligned numeric cell with tabular figures, for metric and summary
+* tables. Pass `highlight` for the emphasized column.
+*/
+function DataListNumberCell({ children, className, highlight, font = "sans", ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListCell, {
+		className: require_utils.cn("justify-items-end text-right text-muted-foreground tabular-nums", highlight && "text-label text-foreground", font === "mono" && "font-mono", className),
+		...rest,
+		children
+	});
+}
+function DataListIdCell({ id }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListCell, {
+		className: "tracking-wide text-muted-foreground",
+		children: require_utils_id.getShortId(id)
+	});
+}
+function DataListSelectCell({ checked, onToggle, disabled, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListCell, {
+		as: "label",
+		className: require_utils.cn("size-8 justify-items-center self-center overflow-visible px-0", disabled ? "cursor-not-allowed" : "cursor-pointer"),
+		onClick: (e) => e.stopPropagation(),
+		"data-selected": checked || void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Checkbox.Checkbox, {
+			checked,
+			disabled,
+			onCheckedChange: () => {},
+			onClick: (e) => onToggle(e.shiftKey),
+			"aria-label": rest["aria-label"]
+		})
+	});
+}
+/** Compact date cell — `Today`, `May 19` or `May 19, 2025`. */
+function DataListDateCell({ timestamp }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListCell, {
+		className: "text-muted-foreground",
+		children: require_utils_date_format.formatDate(timestamp, "date")
+	});
+}
+/** Locale-aware date and time cell with second precision. */
+function DataListCreatedCell({ timestamp, preset = "date-time-seconds" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListCell, {
+		className: "text-muted-foreground tabular-nums",
+		title: require_utils_date_format.formatDate(timestamp, "date-time-seconds"),
+		children: require_utils_date_format.formatDate(timestamp, preset)
+	});
+}
+function DataListTimeCell({ timestamp }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListCell, {
+		className: "flex text-muted-foreground tabular-nums",
+		children: require_utils_date_format.formatTimestampPrecise(timestamp, { withDate: false })
+	});
+}
+// src/ds/components/DataList/data-list-group.tsx
+/** Rows sharing the list's columns. */
+var DataListGroup = (0, react.forwardRef)(({ className, ...rest }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+		ref,
+		className: require_utils.cn("col-span-full grid grid-cols-subgrid gap-y-px [&>:not(.data-list-row)]:col-span-full", className),
+		...rest
+	});
+});
+DataListGroup.displayName = "DataListGroup";
+// src/ds/components/DataList/data-list-next-page-loading.tsx
+function DataListNextPageLoading({ isLoading, setEndOfListElement, hasMore, loadingText = "Loading more data..." }) {
+	if (!setEndOfListElement) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: setEndOfListElement,
+		className: require_utils.cn("col-span-full -mt-px flex justify-center text-body text-muted-foreground opacity-50", { "py-4": isLoading }),
+		children: isLoading && loadingText
+	});
+}
+// src/ds/components/DataList/data-list-no-match.tsx
+function DataListNoMatch({ message = "Nothing matches your search", className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("col-span-full flex flex-col items-center justify-center gap-2 rounded-lg bg-background py-8 text-muted-foreground", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, { children: message })
+	});
+}
+// src/ds/components/DataList/data-list-pagination.tsx
+function DataListPagination({ currentPage, hasMore, onNextPage, onPrevPage }) {
+	const showNavigation = typeof currentPage === "number" && currentPage > 0 || hasMore;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "col-span-full flex items-center justify-center gap-4 py-3 text-body text-muted-foreground",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["Page ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: currentPage ? currentPage + 1 : "1" })] }), showNavigation && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex gap-4",
+			children: [typeof currentPage === "number" && currentPage > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+				type: "button",
+				size: "sm",
+				onClick: onPrevPage,
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowLeftIcon, {}),
+				children: "Previous"
+			}), hasMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+				type: "button",
+				size: "sm",
+				onClick: onNextPage,
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowRightIcon, {}),
+				children: "Next"
+			})]
+		})]
+	});
+}
+// src/ds/components/DataList/data-list-column-order.ts
+var columnOrderSchema = zod_v4.z.array(zod_v4.z.number().int().nonnegative());
+var getColumnOrderStorageKey = (id) => `mastra:data-list:column-order:${id}`;
+/** Tracks of a grid template, or `null` when it uses `repeat()` (track count unknown). */
+function splitGridTracks(columns) {
+	const tracks = splitColumns(columns);
+	return tracks.some((track) => track.startsWith("repeat(")) ? null : tracks;
+}
+var identityOrder = (count) => Array.from({ length: count }, (_, i) => i);
+/** Returns `stored` when it is a permutation of `0..count-1`, otherwise the identity order. */
+function normalizeOrder(stored, count) {
+	if (!stored || stored.length !== count) return identityOrder(count);
+	if (new Set(stored).size !== count || stored.some((i) => i >= count)) return identityOrder(count);
+	return stored;
+}
+var keyedColumnOrderSchema = zod_v4.z.array(zod_v4.z.string());
+/**
+* Maps a stored key order onto the current columns. Stored keys that are not
+* rendered are skipped; columns missing from the stored order (newly added)
+* are inserted at their default position. Returns column indexes in visual order.
+*/
+function resolveKeyedOrder(stored, keys) {
+	const current = new Set(keys);
+	const visual = (stored ?? []).filter((key, i, all) => current.has(key) && all.indexOf(key) === i);
+	const placed = new Set(visual);
+	keys.forEach((key, index) => {
+		if (!placed.has(key)) visual.splice(Math.min(index, visual.length), 0, key);
+	});
+	return visual.map((key) => keys.indexOf(key));
+}
+/**
+* Moves a visible column and returns the next stored key order. Keys of columns
+* that are not rendered right now are kept at the end so they are not forgotten.
+*/
+function moveKeyedOrder(stored, keys, from, to) {
+	const visual = moveIndex(resolveKeyedOrder(stored, keys), from, to).map((i) => keys[i] ?? "");
+	const visible = new Set(keys);
+	return [...visual, ...(stored ?? []).filter((key) => !visible.has(key))];
+}
+/** Moves the item at visual position `from` to visual position `to`. */
+function moveIndex(order, from, to) {
+	if (from === to || from < 0 || to < 0 || from >= order.length || to >= order.length) return order;
+	const next = [...order];
+	next.splice(to, 0, ...next.splice(from, 1));
+	return next;
+}
+// src/ds/components/DataList/data-list-reorder-context.ts
+var DataListReorderContext = (0, react.createContext)({
+	reorderable: false,
+	order: [],
+	move: () => {}
+});
+var useDataListReorder = () => (0, react.useContext)(DataListReorderContext);
+// src/ds/components/DataList/data-list-root.tsx
+function getDataListMask(mask) {
+	if (mask === void 0) return { top: false };
+	if (mask === true || mask === false) return mask;
+	return {
+		top: false,
+		...mask
+	};
+}
+/**
+* The root owns the unified table treatment so standalone and wrapped rows look
+* identical without requiring a per-row index. The ScrollArea provides the
+* fixed frame; this grid paints the sticky header and separators. The root is
+* the only element that defines a color: sticky parts read the background
+* through `--data-list-background` so they stay opaque while scrolling, and
+* rows/header draw no separators, borders or rings of their own.
+*/
+var dataListGridStyles = [
+	"gap-y-px",
+	"[&_.data-list-row:not(.data-list-row~.data-list-row)]:rounded-t-lg",
+	"[&_.data-list-row:not(:has(~.data-list-row))]:rounded-b-lg",
+	"[&_.data-list-row:not(.data-list-row~.data-list-row)>.data-list-sticky-start]:rounded-tl-lg",
+	"[&_.data-list-row:not(:has(~.data-list-row))>.data-list-sticky-start]:rounded-bl-lg",
+	"[&_.data-list-subheader+.data-list-row]:rounded-t-lg",
+	"[&_.data-list-row:has(+.data-list-subheader)]:rounded-b-lg",
+	"[&_.data-list-subheader+.data-list-row>.data-list-sticky-start]:rounded-tl-lg",
+	"[&_.data-list-row:has(+.data-list-subheader)>.data-list-sticky-start]:rounded-bl-lg",
+	"[&_.data-list-top]:bg-(--data-list-background)",
+	"[&_.data-list-row>.data-list-sticky-start]:bg-background",
+	"[&_.data-list-row-interactive:not(:disabled):hover>.data-list-sticky-start]:bg-surface-panel",
+	"[&_.data-list-row>.data-list-sticky-start]:after:right-0",
+	"[&_.data-list-top>.data-list-sticky-start]:after:right-0"
+];
+var dataListVariantClasses = {
+	default: require_primitives_raised_surface.raisedSurfaceStyle,
+	light: ""
+};
+var dataListVariantBackground = {
+	default: "var(--card)",
+	light: "var(--background)"
+};
+var dataListFitClasses = {
+	content: "w-max max-w-none min-w-full",
+	container: "w-full max-w-full"
+};
+var disabledReorder = {
+	reorderable: false,
+	order: [],
+	move: () => {}
+};
+function DataListRoot({ reorderable, id, columns, columnKeys, ...props }) {
+	const tracks = reorderable && id ? splitGridTracks(columns) : null;
+	if (id && tracks && columnKeys && columnKeys.length === tracks.length) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListKeyedReorderableRoot, {
+		storageId: id,
+		tracks,
+		columnKeys,
+		id,
+		columns,
+		...props
+	}, id);
+	if (id && tracks) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListReorderableRoot, {
+		storageId: id,
+		tracks,
+		id,
+		columns,
+		...props
+	}, id);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListBase, {
+		id,
+		columns,
+		reorder: disabledReorder,
+		...props
+	});
+}
+function DataListKeyedReorderableRoot({ storageId, tracks, columnKeys, ...props }) {
+	const [stored, setStored] = require_hooks_use_local_storage_state.useLocalStorageState({
+		initialKey: getColumnOrderStorageKey(storageId),
+		defaultValue: columnKeys,
+		schema: keyedColumnOrderSchema
+	});
+	const keysSignature = columnKeys.join("\0");
+	const order = (0, react.useMemo)(() => resolveKeyedOrder(stored, columnKeys), [stored, keysSignature]);
+	const reorder = (0, react.useMemo)(() => ({
+		reorderable: true,
+		order,
+		move: (from, to) => setStored((current) => moveKeyedOrder(current, columnKeys, from, to))
+	}), [
+		order,
+		keysSignature,
+		setStored
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListBase, {
+		...props,
+		columns: order.map((i) => tracks[i]).join(" "),
+		reorder
+	});
+}
+function DataListReorderableRoot({ storageId, tracks, ...props }) {
+	const count = tracks.length;
+	const [stored, setStored] = require_hooks_use_local_storage_state.useLocalStorageState({
+		initialKey: getColumnOrderStorageKey(storageId),
+		defaultValue: identityOrder(count),
+		schema: columnOrderSchema
+	});
+	const order = normalizeOrder(stored, count);
+	const reorder = (0, react.useMemo)(() => ({
+		reorderable: true,
+		order,
+		move: (from, to) => setStored((current) => moveIndex(normalizeOrder(current, count), from, to))
+	}), [
+		order,
+		count,
+		setStored
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListBase, {
+		...props,
+		columns: order.map((i) => tracks[i]).join(" "),
+		reorder
+	});
+}
+function DataListBase({ children, columns, className, fit = "content", variant = "default", scrollable = true, mask, scrollRef, reorder, maxHeight, autoScroll, scrollButtons, revealScrollbarOnHover, ...props }) {
+	const scopeId = (0, react.useId)();
+	const gridStyle = {
+		"--data-list-background": dataListVariantBackground[variant],
+		gridTemplateColumns: columns
+	};
+	const orderRules = reorder.reorderable ? reorder.order.map((original, visual) => `[data-data-list="${scopeId}"] .data-list-cells > :nth-child(${original + 1}) { order: ${visual}; }`).join("\n") : null;
+	const grid = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.cn("relative isolate grid content-start", ...dataListGridStyles, dataListFitClasses[fit]),
+		style: gridStyle,
+		"data-data-list": reorder.reorderable ? scopeId : void 0,
+		children: [orderRules && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: orderRules }), children]
+	});
+	if (!scrollable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_scroll_area.ScrollArea.Root, {
+		...props,
+		className: require_utils.cn("w-full rounded-xl p-1", dataListVariantClasses[variant], className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListReorderContext.Provider, {
+			value: reorder,
+			children: grid
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_scroll_area.ScrollArea, {
+		...props,
+		maxHeight,
+		autoScroll,
+		scrollButtons,
+		revealScrollbarOnHover,
+		orientation: "both",
+		mask: getDataListMask(mask),
+		className: require_utils.cn("flex max-h-full w-full flex-col self-start rounded-xl p-1", dataListVariantClasses[variant], className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_scroll_area.ScrollAreaViewport, {
+			ref: scrollRef,
+			className: "min-h-0 flex-1 basis-auto",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListReorderContext.Provider, {
+				value: reorder,
+				children: grid
+			})
+		})
+	});
+}
+// src/ds/components/DataList/data-list-row-wrapper-context.ts
+var DataListRowWrapperContext = (0, react.createContext)(false);
+function useDataListRowWrapperContext() {
+	return (0, react.useContext)(DataListRowWrapperContext);
+}
+// src/ds/components/DataList/data-list-row-button.tsx
+/**
+* Forwarded ref + spread props so virtualizers (`useVirtualizer.measureElement`)
+* can attach a ref and `data-index` to each rendered row.
+*/
+var DataListRowButton = (0, react.forwardRef)(({ children, className, type = "button", colStart, colEnd, featured, variant, style, ...rest }, ref) => {
+	const isWrapped = useDataListRowWrapperContext();
+	const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
+	const cellsClass = hasColumnOverride ? void 0 : "data-list-cells";
+	const resolvedStyle = hasColumnOverride ? {
+		...style,
+		gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}`
+	} : style;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		ref,
+		type,
+		className: require_utils.cn(...isWrapped ? dataListRowInteractiveStyles : dataListRowStyles, cellsClass, "text-left", className),
+		style: resolvedStyle,
+		"data-featured": featured || void 0,
+		"data-variant": variant ?? "default",
+		...rest,
+		children
+	});
+});
+DataListRowButton.displayName = "DataListRowButton";
+// src/ds/components/DataList/data-list-row-link.tsx
+var DataListRowLink = (0, react.forwardRef)(({ children, to, className, style, LinkComponent: Link = "a", colStart, colEnd, featured, variant, ...rest }, ref) => {
+	const isWrapped = useDataListRowWrapperContext();
+	const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
+	const cellsClass = hasColumnOverride ? void 0 : "data-list-cells";
+	const resolvedStyle = hasColumnOverride ? {
+		...style,
+		gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}`
+	} : style;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Link, {
+		ref,
+		href: to,
+		className: require_utils.cn(...isWrapped ? dataListRowInteractiveStyles : dataListRowStyles, cellsClass, className),
+		style: resolvedStyle,
+		"data-featured": featured || void 0,
+		"data-variant": variant ?? "default",
+		...rest,
+		children
+	});
+});
+DataListRowLink.displayName = "DataListRowLink";
+// src/ds/components/DataList/data-list-row-static.tsx
+/**
+* Non-interactive row. Use when a row should *display* like a regular row but
+* has no link target or click handler
+*/
+var DataListRowStatic = (0, react.forwardRef)(({ children, className, colStart, colEnd, featured, variant, style, ...rest }, ref) => {
+	const isWrapped = useDataListRowWrapperContext();
+	const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
+	const cellsClass = hasColumnOverride ? void 0 : "data-list-cells";
+	const resolvedStyle = hasColumnOverride ? {
+		...style,
+		gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}`
+	} : style;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: require_utils.cn(isWrapped ? "grid grid-cols-subgrid gap-4 px-3" : dataListRowStaticStyles, cellsClass, className),
+		style: resolvedStyle,
+		"data-featured": featured || void 0,
+		"data-variant": variant ?? "default",
+		...rest,
+		children
+	});
+});
+DataListRowStatic.displayName = "DataListRowStatic";
+// src/ds/components/DataList/data-list-row-wrapper.tsx
+/**
+* Grid wrapper used to host a leading or trailing cell (e.g. a selection
+* checkbox or row actions) alongside a `DataList.RowButton` / `RowLink`.
+*
+* Without `onSelectRow` it is non-interactive: hover/focus/click only apply to
+* the nested row primitive. With `onSelectRow` the wrapper itself becomes the
+* click / Enter target so the entire row (including trailing cells) activates.
+* For standalone interactive rows, use `DataList.RowButton` directly.
+*
+* Carries the `.data-list-row` marker so root-level row styling behaves the
+* same in wrapped and standalone rows.
+*/
+var DataListRowWrapper = (0, react.forwardRef)(({ children, className, onSelectRow, onClick, onKeyDown, tabIndex, ...rest }, ref) => {
+	const isSelectable = onSelectRow !== void 0;
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (!isSelectable || event.defaultPrevented) return;
+		onSelectRow();
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (!isSelectable || event.defaultPrevented) return;
+		if (event.key === "Enter" && event.target === event.currentTarget) {
+			event.preventDefault();
+			onSelectRow();
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListRowWrapperContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref,
+			tabIndex: tabIndex ?? (isSelectable ? 0 : void 0),
+			className: require_utils.cn("grid grid-cols-subgrid gap-0", ...dataListRowOuterStyles, ...dataListRowStateStyles, isSelectable && require_utils.cn("cursor-pointer", "focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus focus-visible:-outline-offset-1"), className),
+			onClick: handleClick,
+			onKeyDown: handleKeyDown,
+			...rest,
+			children
+		})
+	});
+});
+DataListRowWrapper.displayName = "DataListRowWrapper";
+// src/ds/components/DataList/data-list-top-cell.tsx
+var DataListTopCell = (0, react.forwardRef)(({ children, className, as, sticky, ...rest }, ref) => {
+	const Component = as || "span";
+	const isText = typeof children === "string" || typeof children === "number";
+	const { reorderable, order, move } = useDataListReorder();
+	const [isDropTarget, setIsDropTarget] = (0, react.useState)(false);
+	const canReorder = reorderable && !sticky;
+	const reorderProps = canReorder ? {
+		draggable: true,
+		tabIndex: 0,
+		"aria-roledescription": "draggable column",
+		"data-drop-target": isDropTarget || void 0,
+		onDragStart: (event) => {
+			const from = getVisualPosition(event.currentTarget, order);
+			if (from === null) return event.preventDefault();
+			event.dataTransfer.effectAllowed = "move";
+			event.dataTransfer.setData(DRAG_TYPE, String(from));
+		},
+		onDragOver: (event) => {
+			if (!event.dataTransfer.types.includes(DRAG_TYPE)) return;
+			event.preventDefault();
+			event.dataTransfer.dropEffect = "move";
+			setIsDropTarget(true);
+		},
+		onDragLeave: () => setIsDropTarget(false),
+		onDrop: (event) => {
+			setIsDropTarget(false);
+			const from = Number(event.dataTransfer.getData(DRAG_TYPE));
+			const to = getVisualPosition(event.currentTarget, order);
+			if (to === null || Number.isNaN(from)) return;
+			event.preventDefault();
+			move(from, to);
+		},
+		onKeyDown: (event) => {
+			if (!event.altKey || event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+			const from = getVisualPosition(event.currentTarget, order);
+			if (from === null) return;
+			const to = from + (event.key === "ArrowLeft" ? -1 : 1);
+			if (isStickyAt(event.currentTarget, order, to)) return;
+			event.preventDefault();
+			move(from, to);
+		}
+	} : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		ref,
+		className: require_utils.cn("flex h-10 max-w-full min-w-0 items-center overflow-hidden py-1 text-column whitespace-nowrap text-muted-foreground", sticky === "start" && dataListStickyStartStyles, sticky === "start" && "-mx-3 w-auto max-w-none px-3", sticky === "start" && "z-20", canReorder && "cursor-grab active:cursor-grabbing data-drop-target:shadow-[inset_2px_0_0_var(--border-focus)]", canReorder && "focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus focus-visible:-outline-offset-1", className),
+		...reorderProps,
+		...rest,
+		children: isText ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "min-w-0 truncate",
+			children
+		}) : children
+	});
+});
+var DRAG_TYPE = "application/x-mastra-data-list-column";
+/** Visual position of a header cell, or `null` when it is not in a full-width cells container. */
+function getVisualPosition(cell, order) {
+	const parent = cell.parentElement;
+	if (!parent?.classList.contains("data-list-cells")) return null;
+	const visual = order.indexOf(Array.from(parent.children).indexOf(cell));
+	return visual === -1 ? null : visual;
+}
+/** Whether the header cell at `visual` is pinned (so nothing may move into its slot). */
+function isStickyAt(cell, order, visual) {
+	const original = order[visual];
+	if (original === void 0) return true;
+	return cell.parentElement?.children[original]?.classList.contains("data-list-sticky-start") ?? true;
+}
+function DataListTopCellWithTooltip({ children, tooltip, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_tooltip.Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.TooltipTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListTopCell, {
+		className,
+		children
+	}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.TooltipContent, { children: tooltip })] });
+}
+var 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 DataListTopCellSmart({ long, short, tooltip, breakpoint = "2xl", className }) {
+	const tooltipText = tooltip ?? (typeof long === "string" ? long : void 0);
+	const bp = breakpointClasses[breakpoint];
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_utils.cn("items-center gap-1", bp.show),
+		children: long
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_utils.cn("items-center gap-1", bp.hide),
+		children: short
+	})] });
+	if (tooltipText) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListTopCellWithTooltip, {
+		tooltip: tooltipText,
+		className: require_utils.cn("flex [&_svg]:size-[1.3em]", className),
+		children: content
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListTopCell, {
+		className: require_utils.cn("flex [&_svg]:size-[1.3em]", className),
+		children: content
+	});
+}
+function DataListTopSelectCell({ checked, onToggle, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListTopCell, {
+		as: "label",
+		className: "w-8 cursor-pointer justify-center overflow-visible px-0 py-0!",
+		onClick: (e) => e.stopPropagation(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Checkbox.Checkbox, {
+			checked,
+			onCheckedChange: () => onToggle(),
+			"aria-label": rest["aria-label"]
+		})
+	});
+}
+// src/ds/components/DataList/data-list-sortable-top-cell.tsx
+var sortIcons = {
+	asc: lucide_react.ArrowUp,
+	desc: lucide_react.ArrowDown,
+	none: lucide_react.ArrowUpDown
+};
+var sortLabels = {
+	asc: "ascending",
+	desc: "descending"
+};
+var sortAnimations = {
+	asc: "animate-sort-arrow-up",
+	desc: "animate-sort-arrow-down"
+};
+var sortTooltips = {
+	asc: "Asc",
+	desc: "Desc",
+	none: "Sort"
+};
+function DataListSortableTopCell({ children, sortKey, sort, onSortChange, align = "start", label = typeof children === "string" ? children : sortKey, className, ...props }) {
+	const next = sort === "asc" ? "desc" : "asc";
+	const SortIcon = sortIcons[sort ?? "none"];
+	const current = sort ? `sorted ${sortLabels[sort]}` : "not sorted";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DataListTopCell, {
+		"data-sort": sort ?? "none",
+		className: require_utils.cn("gap-1 overflow-visible", align === "end" && "justify-end", className),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "min-w-0 truncate",
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+			variant: "ghost",
+			size: "icon-sm",
+			"aria-label": `${label}, ${current}, sort ${sortLabels[next]}`,
+			tooltip: sortTooltips[sort ?? "none"],
+			onClick: () => onSortChange(next, sortKey),
+			className: require_utils.cn("shrink-0", sort ? "text-foreground" : "text-muted-foreground"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortIcon, { className: sort && sortAnimations[sort] }, sort ?? "none")
+		})]
+	});
+}
+// src/ds/components/DataList/data-list-spacer.tsx
+/**
+* Pads top/bottom of the visible window when virtualizing — preserves the
+* grid's total scroll height for the rows that aren't currently rendered.
+* Spans the full grid width so it doesn't disturb column layout.
+*/
+function DataListSpacer({ height }) {
+	if (height <= 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "col-span-full",
+		style: { height }
+	});
+}
+// src/ds/components/DataList/data-list-subheader.tsx
+var DataListSubheader = (0, react.forwardRef)(({ children, className, ...rest }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: require_utils.cn("data-list-subheader relative isolate col-span-full px-3 py-2 text-subheading text-muted-foreground", "bg-(--data-list-background)", className),
+		...rest,
+		children
+	});
+});
+DataListSubheader.displayName = "DataListSubheader";
+// src/ds/components/DataList/data-list-subheading.tsx
+function DataListSubHeading({ children, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+		as: "span",
+		variant: "caption",
+		tone: "faint",
+		className,
+		children
+	});
+}
+// src/ds/components/DataList/data-list-top.tsx
+function DataListTop({ children, className, hasLeadingCell, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("group/data-list-top data-list-top sticky top-0 z-20 col-span-full grid grid-cols-subgrid gap-4 px-3", hasLeadingCell ? "gap-0 pl-0!" : "data-list-cells", className),
+		...props,
+		children
+	});
+}
+// src/ds/components/DataList/data-list-top-cells.tsx
+/**
+* Non-interactive header equivalent of `DataList.RowButton`. Groups a set of
+* `DataList.TopCell`s with the same horizontal layout (gap, mx, px) as
+* `RowButton`, so columns inside a wrapped `Top` line up cell-for-cell with the
+* columns inside a wrapped `Row`.
+*/
+var DataListTopCells = (0, react.forwardRef)(({ children, className, flushLeft, colStart, style, ...rest }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: require_utils.cn("pointer-events-none grid grid-cols-subgrid gap-4 px-3 [&>*]:pointer-events-auto", !colStart && "data-list-cells col-span-full", flushLeft && "pl-0!", className),
+		style: colStart ? {
+			...style,
+			gridColumn: `${colStart} / -1`
+		} : style,
+		...rest,
+		children
+	});
+});
+DataListTopCells.displayName = "DataListTopCells";
+// src/ds/components/DataList/data-list.tsx
+var DataList = Object.assign(DataListRoot, {
+	Top: DataListTop,
+	TopCells: DataListTopCells,
+	TopCell: DataListTopCell,
+	SortableTopCell: DataListSortableTopCell,
+	TopCellWithTooltip: DataListTopCellWithTooltip,
+	TopCellSmart: DataListTopCellSmart,
+	RowWrapper: DataListRowWrapper,
+	RowButton: DataListRowButton,
+	RowLink: DataListRowLink,
+	RowStatic: DataListRowStatic,
+	Cell: DataListCell,
+	ActionsCell: DataListActionsCell,
+	TextCell: DataListTextCell,
+	NameCell: DataListNameCell,
+	DescriptionCell: DataListDescriptionCell,
+	IdCell: DataListIdCell,
+	RowHeaderCell: DataListRowHeaderCell,
+	NumberCell: DataListNumberCell,
+	DateCell: DataListDateCell,
+	CreatedCell: DataListCreatedCell,
+	TimeCell: DataListTimeCell,
+	SelectCell: DataListSelectCell,
+	TopSelectCell: DataListTopSelectCell,
+	NoMatch: DataListNoMatch,
+	Group: DataListGroup,
+	Subheader: DataListSubheader,
+	SubHeading: DataListSubHeading,
+	Spacer: DataListSpacer,
+	NextPageLoading: DataListNextPageLoading,
+	Pagination: DataListPagination
+});
+Object.defineProperty(exports, "DataList", {
+	enumerable: true,
+	get: function() {
+		return DataList;
+	}
+});
+Object.defineProperty(exports, "DataListCell", {
+	enumerable: true,
+	get: function() {
+		return DataListCell;
+	}
+});
+Object.defineProperty(exports, "DataListCreatedCell", {
+	enumerable: true,
+	get: function() {
+		return DataListCreatedCell;
+	}
+});
+Object.defineProperty(exports, "DataListDateCell", {
+	enumerable: true,
+	get: function() {
+		return DataListDateCell;
+	}
+});
+Object.defineProperty(exports, "DataListIdCell", {
+	enumerable: true,
+	get: function() {
+		return DataListIdCell;
+	}
+});
+Object.defineProperty(exports, "DataListNextPageLoading", {
+	enumerable: true,
+	get: function() {
+		return DataListNextPageLoading;
+	}
+});
+Object.defineProperty(exports, "DataListNoMatch", {
+	enumerable: true,
+	get: function() {
+		return DataListNoMatch;
+	}
+});
+Object.defineProperty(exports, "DataListRoot", {
+	enumerable: true,
+	get: function() {
+		return DataListRoot;
+	}
+});
+Object.defineProperty(exports, "DataListRowButton", {
+	enumerable: true,
+	get: function() {
+		return DataListRowButton;
+	}
+});
+Object.defineProperty(exports, "DataListRowLink", {
+	enumerable: true,
+	get: function() {
+		return DataListRowLink;
+	}
+});
+Object.defineProperty(exports, "DataListRowWrapper", {
+	enumerable: true,
+	get: function() {
+		return DataListRowWrapper;
+	}
+});
+Object.defineProperty(exports, "DataListSortableTopCell", {
+	enumerable: true,
+	get: function() {
+		return DataListSortableTopCell;
+	}
+});
+Object.defineProperty(exports, "DataListSpacer", {
+	enumerable: true,
+	get: function() {
+		return DataListSpacer;
+	}
+});
+Object.defineProperty(exports, "DataListSubHeading", {
+	enumerable: true,
+	get: function() {
+		return DataListSubHeading;
+	}
+});
+Object.defineProperty(exports, "DataListSubheader", {
+	enumerable: true,
+	get: function() {
+		return DataListSubheader;
+	}
+});
+Object.defineProperty(exports, "DataListTextCell", {
+	enumerable: true,
+	get: function() {
+		return DataListTextCell;
+	}
+});
+Object.defineProperty(exports, "DataListTimeCell", {
+	enumerable: true,
+	get: function() {
+		return DataListTimeCell;
+	}
+});
+Object.defineProperty(exports, "DataListTop", {
+	enumerable: true,
+	get: function() {
+		return DataListTop;
+	}
+});
+Object.defineProperty(exports, "DataListTopCell", {
+	enumerable: true,
+	get: function() {
+		return DataListTopCell;
+	}
+});
+Object.defineProperty(exports, "DataListTopCellSmart", {
+	enumerable: true,
+	get: function() {
+		return DataListTopCellSmart;
+	}
+});
+Object.defineProperty(exports, "DataListTopCellWithTooltip", {
+	enumerable: true,
+	get: function() {
+		return DataListTopCellWithTooltip;
+	}
+});
+Object.defineProperty(exports, "dataListRowOuterStyles", {
+	enumerable: true,
+	get: function() {
+		return dataListRowOuterStyles;
+	}
+});
+Object.defineProperty(exports, "splitColumns", {
+	enumerable: true,
+	get: function() {
+		return splitColumns;
+	}
+});
+
+//# sourceMappingURL=data-list-072hHK9L.cjs.map