@questpie/admin 3.0.2 → 3.0.4

package/dist/client/views/dashboard/dashboard-grid.mjs

@@ -6,10 +6,11 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card.mjs";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../components/ui/accordion.mjs";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/ui/tabs.mjs";
+import { AdminViewHeader } from "../layout/admin-view-layout.mjs";
 import { DashboardWidget } from "./dashboard-widget.mjs";
 import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/client/views/dashboard/dashboard-grid.tsx
 /**
@@ -25,34 +26,74 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 /**
 * Grid column classes for different column counts.
-* Uses CSS grid with auto rows — each widget takes its natural height.
+* Uses fixed auto rows so cards align like tile-based mobile widgets.
 */
 const gridClasses = {
 	1: "grid-cols-1",
-	2: "grid-cols-1 @xs:grid-cols-2",
-	3: "grid-cols-1 @xs:grid-cols-2 @md:grid-cols-3",
-	4: "grid-cols-1 @xs:grid-cols-2 @md:grid-cols-3 @lg:grid-cols-4",
-	5: "grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @md:grid-cols-4 @lg:grid-cols-5",
-	6: "grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @md:grid-cols-4 @lg:grid-cols-5 @xl:grid-cols-6",
-	12: "grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-4 @md:grid-cols-6 @lg:grid-cols-12"
+	2: "grid-cols-2",
+	3: "grid-cols-2 @md:grid-cols-3",
+	4: "grid-cols-2 @md:grid-cols-4",
+	5: "grid-cols-2 @sm:grid-cols-3 @md:grid-cols-4 @lg:grid-cols-5",
+	6: "grid-cols-2 @sm:grid-cols-3 @md:grid-cols-4 @lg:grid-cols-6",
+	7: "grid-cols-2 @xs:grid-cols-4 @md:grid-cols-6 @lg:grid-cols-7",
+	8: "grid-cols-2 @xs:grid-cols-4 @md:grid-cols-6 @lg:grid-cols-8",
+	9: "grid-cols-2 @xs:grid-cols-4 @md:grid-cols-6 @lg:grid-cols-9",
+	10: "grid-cols-2 @xs:grid-cols-4 @md:grid-cols-6 @lg:grid-cols-10",
+	11: "grid-cols-2 @xs:grid-cols-4 @md:grid-cols-6 @lg:grid-cols-11",
+	12: "grid-cols-2 @xs:grid-cols-4 @md:grid-cols-6 @lg:grid-cols-12"
 };
 /**
 * Span classes for widget column spanning.
 */
 const spanClasses = {
 	1: "col-span-1",
-	2: "col-span-full @sm:col-span-2",
-	3: "col-span-full @sm:col-span-2 @md:col-span-3",
-	4: "col-span-full @sm:col-span-2 @md:col-span-3 @lg:col-span-4",
-	5: "col-span-full @sm:col-span-2 @md:col-span-3 @lg:col-span-5",
-	6: "col-span-full @sm:col-span-2 @md:col-span-3 @lg:col-span-6",
+	2: "col-span-2",
+	3: "col-span-2 @md:col-span-3",
+	4: "col-span-2 @md:col-span-4",
+	5: "col-span-2 @md:col-span-4 @lg:col-span-5",
+	6: "col-span-2 @md:col-span-4 @lg:col-span-6",
+	7: "col-span-2 @xs:col-span-4 @md:col-span-6 @lg:col-span-7",
+	8: "col-span-2 @xs:col-span-4 @md:col-span-6 @lg:col-span-8",
+	9: "col-span-2 @xs:col-span-4 @md:col-span-6 @lg:col-span-9",
+	10: "col-span-2 @xs:col-span-4 @md:col-span-6 @lg:col-span-10",
+	11: "col-span-2 @xs:col-span-4 @md:col-span-6 @lg:col-span-11",
 	12: "col-span-full"
 };
+const DEFAULT_ROW_HEIGHT = "8.5rem";
+const sizeLayoutDefaults = {
+	small: {
+		span: 1,
+		rowSpan: 1
+	},
+	medium: {
+		span: 2,
+		rowSpan: 1
+	},
+	large: {
+		span: 2,
+		rowSpan: 2
+	},
+	full: {
+		span: 12,
+		rowSpan: 2
+	}
+};
+const widgetTypeRowDefaults = {
+	stats: 1,
+	value: 1,
+	progress: 1,
+	chart: 2,
+	quickActions: 2,
+	recentItems: 2,
+	table: 2,
+	timeline: 2,
+	custom: 2
+};
 /**
 * Get grid columns class based on column count
 */
 function getGridClass(columns) {
-	return gridClasses[columns] || gridClasses[4];
+	return gridClasses[Math.min(Math.max(columns, 1), 12)] || gridClasses[4];
 }
 /**
 * Get column span class for a widget.
@@ -62,8 +103,35 @@ function getGridClass(columns) {
 function getSpanClass(span) {
 	if (!span || span <= 1) return "col-span-1";
 	if (spanClasses[span]) return spanClasses[span];
-	if (span >= 7 && span <= 11) return `col-span-1 @xs:col-span-2 @md:col-span-3 @lg:col-span-${span}`;
-	return `col-span-${Math.min(span, 12)}`;
+	return spanClasses[Math.min(Math.max(span, 1), 12)] ?? "col-span-full";
+}
+function normalizeRowHeight(rowHeight) {
+	if (typeof rowHeight === "number") return `${rowHeight}px`;
+	if (rowHeight) return rowHeight;
+	return DEFAULT_ROW_HEIGHT;
+}
+function getGridStyle(rowHeight, gap) {
+	return {
+		gridAutoRows: normalizeRowHeight(rowHeight),
+		...gap ? { gap: `${gap * .25}rem` } : {}
+	};
+}
+function getStackStyle(gap) {
+	return gap ? { gap: `${gap * .25}rem` } : void 0;
+}
+function getWidgetSpan(item) {
+	const position = item.position;
+	const sizeDefault = item.size ? sizeLayoutDefaults[item.size] : void 0;
+	return Math.min(Math.max(position?.w ?? item.span ?? sizeDefault?.span ?? 1, 1), 12);
+}
+function getWidgetRowSpan(item) {
+	const position = item.position;
+	const sizeDefault = item.size ? sizeLayoutDefaults[item.size] : void 0;
+	const rowSpan = position?.h ?? item.rowSpan ?? sizeDefault?.rowSpan ?? widgetTypeRowDefaults[item.type] ?? 2;
+	return Math.min(Math.max(rowSpan, 1), 8);
+}
+function getWidgetStyle(rowSpan) {
+	return { gridRowEnd: `span ${rowSpan}` };
 }
 /**
 * Check if item is a widget config
@@ -88,12 +156,15 @@ function isTabsConfig(item) {
 */
 function getLayoutItemKey(item, index) {
 	if (isWidgetConfig(item)) return `widget-${item.id || item.type}-${index}`;
-	if (isSectionConfig(item)) return `section-${index}`;
-	if (isTabsConfig(item)) return `tabs-${item.tabs.map((t) => t.id).join("-") || index}`;
+	if (isSectionConfig(item)) return `section-${item.id || index}`;
+	if (isTabsConfig(item)) {
+		const tabIds = item.tabs.map((t) => t.id).join("-");
+		return `tabs-${item.id || tabIds || index}`;
+	}
 	return `item-${index}`;
 }
 function DashboardHeader(t0) {
-	const $ = c(15);
+	const $ = c(18);
 	const { title, description, actions, navigate, resolveText } = t0;
 	if (!title && !description && !actions?.length) return null;
 	let t1;
@@ -106,187 +177,334 @@ function DashboardHeader(t0) {
 		$[1] = t1;
 	} else t1 = $[1];
 	const handleActionClick = t1;
+	let T0;
 	let t2;
+	let t3;
+	let t4;
+	let t5;
 	if ($[2] !== actions || $[3] !== description || $[4] !== handleActionClick || $[5] !== resolveText || $[6] !== title) {
 		const primaryAction = actions?.find(_temp) || actions?.[0];
 		const secondaryActions = actions?.filter((a_0) => a_0 !== primaryAction) || [];
-		let t3;
-		if ($[8] !== title) {
-			t3 = title && /* @__PURE__ */ jsx("h1", {
-				className: "qa-dashboard__title text-2xl font-extrabold tracking-tight md:text-3xl",
-				children: title
-			});
-			$[8] = title;
-			$[9] = t3;
-		} else t3 = $[9];
-		let t4;
-		if ($[10] !== description) {
-			t4 = description && /* @__PURE__ */ jsx("p", {
-				className: "qa-dashboard__description text-muted-foreground mt-1",
-				children: description
-			});
-			$[10] = description;
-			$[11] = t4;
-		} else t4 = $[11];
-		let t5;
-		if ($[12] !== t3 || $[13] !== t4) {
-			t5 = /* @__PURE__ */ jsxs("div", {
-				className: "min-w-0 flex-1",
-				children: [t3, t4]
-			});
-			$[12] = t3;
-			$[13] = t4;
-			$[14] = t5;
-		} else t5 = $[14];
-		t2 = /* @__PURE__ */ jsxs("div", {
-			className: "qa-dashboard__header mb-8 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
-			children: [t5, actions && actions.length > 0 && /* @__PURE__ */ jsxs("div", {
-				className: "flex shrink-0 items-center gap-2",
-				children: [
-					primaryAction && /* @__PURE__ */ jsxs(Button, {
-						variant: primaryAction.variant === "primary" ? "default" : primaryAction.variant || "default",
-						onClick: () => handleActionClick(primaryAction),
-						children: [resolveIconElement(primaryAction.icon, { "data-icon": "inline-start" }), resolveText(primaryAction.label)]
-					}, primaryAction.id),
-					secondaryActions.map((action_0) => {
-						const iconElement = resolveIconElement(action_0.icon, { "data-icon": "inline-start" });
-						const variant = action_0.variant || "default";
-						return /* @__PURE__ */ jsxs(Button, {
-							variant: variant === "primary" ? "default" : variant,
-							onClick: () => handleActionClick(action_0),
-							className: "hidden md:inline-flex",
-							children: [iconElement, resolveText(action_0.label)]
-						}, action_0.id);
-					}),
-					secondaryActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button, {
-						variant: "outline",
-						size: "icon",
-						className: "md:hidden",
-						children: /* @__PURE__ */ jsx(Icon, {
-							icon: "ph:dots-three-vertical",
-							className: "size-4"
-						})
-					}) }), /* @__PURE__ */ jsx(DropdownMenuContent, {
-						align: "end",
-						children: secondaryActions.map((action_1) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
-							onClick: () => handleActionClick(action_1),
-							children: [resolveIconElement(action_1.icon, { className: "size-4 mr-2" }), resolveText(action_1.label)]
-						}, action_1.id))
-					})] })
-				]
-			})]
-		});
+		T0 = AdminViewHeader;
+		t2 = "qa-dashboard__header mb-4";
+		t3 = title;
+		t4 = description;
+		t5 = actions && actions.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			primaryAction && /* @__PURE__ */ jsxs(Button, {
+				variant: primaryAction.variant === "primary" ? "default" : primaryAction.variant || "default",
+				size: "sm",
+				onClick: () => handleActionClick(primaryAction),
+				children: [resolveIconElement(primaryAction.icon, { "data-icon": "inline-start" }), resolveText(primaryAction.label)]
+			}, primaryAction.id),
+			secondaryActions.map((action_0) => {
+				const iconElement = resolveIconElement(action_0.icon, { "data-icon": "inline-start" });
+				const variant = action_0.variant || "default";
+				return /* @__PURE__ */ jsxs(Button, {
+					variant: variant === "primary" ? "default" : variant,
+					size: "sm",
+					onClick: () => handleActionClick(action_0),
+					className: "hidden md:inline-flex",
+					children: [iconElement, resolveText(action_0.label)]
+				}, action_0.id);
+			}),
+			secondaryActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "icon-sm",
+				className: "md:hidden",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:dots-three-vertical",
+					className: "size-3.5"
+				})
+			}) }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+				align: "end",
+				children: secondaryActions.map((action_1) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: () => handleActionClick(action_1),
+					children: [resolveIconElement(action_1.icon, { className: "size-4 mr-2" }), resolveText(action_1.label)]
+				}, action_1.id))
+			})] })
+		] }) : void 0;
 		$[2] = actions;
 		$[3] = description;
 		$[4] = handleActionClick;
 		$[5] = resolveText;
 		$[6] = title;
-		$[7] = t2;
-	} else t2 = $[7];
-	return t2;
+		$[7] = T0;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else {
+		T0 = $[7];
+		t2 = $[8];
+		t3 = $[9];
+		t4 = $[10];
+		t5 = $[11];
+	}
+	let t6;
+	if ($[12] !== T0 || $[13] !== t2 || $[14] !== t3 || $[15] !== t4 || $[16] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			className: t2,
+			title: t3,
+			description: t4,
+			actions: t5
+		});
+		$[12] = T0;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	return t6;
 }
 function _temp(a) {
 	return a.variant === "primary";
 }
 function LayoutItemRenderer(t0) {
-	const $ = c(26);
-	const { item, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime } = t0;
+	const $ = c(32);
+	const { item, rowHeight, gap, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime } = t0;
 	if (isWidgetConfig(item)) {
 		let t1;
+		let t2;
 		let widgetConfig;
 		if ($[0] !== dashboardRealtime || $[1] !== item) {
-			const spanClass = getSpanClass(item.span);
+			const spanClass = getSpanClass(getWidgetSpan(item));
+			const rowSpan = getWidgetRowSpan(item);
 			widgetConfig = dashboardRealtime !== void 0 && item.realtime === void 0 ? {
 				...item,
 				realtime: dashboardRealtime
 			} : item;
-			t1 = cn(spanClass, item.className);
+			t1 = cn("qa-dashboard__tile h-full min-h-0 min-w-0", spanClass, item.className);
+			t2 = getWidgetStyle(rowSpan);
 			$[0] = dashboardRealtime;
 			$[1] = item;
 			$[2] = t1;
-			$[3] = widgetConfig;
+			$[3] = t2;
+			$[4] = widgetConfig;
 		} else {
 			t1 = $[2];
-			widgetConfig = $[3];
+			t2 = $[3];
+			widgetConfig = $[4];
 		}
-		let t2;
-		if ($[4] !== basePath || $[5] !== navigate || $[6] !== widgetConfig || $[7] !== widgetRegistry) {
-			t2 = /* @__PURE__ */ jsx(DashboardWidget, {
+		let t3;
+		if ($[5] !== basePath || $[6] !== navigate || $[7] !== widgetConfig || $[8] !== widgetRegistry) {
+			t3 = /* @__PURE__ */ jsx(DashboardWidget, {
 				config: widgetConfig,
 				basePath,
 				navigate,
 				widgetRegistry
 			});
-			$[4] = basePath;
-			$[5] = navigate;
-			$[6] = widgetConfig;
-			$[7] = widgetRegistry;
-			$[8] = t2;
-		} else t2 = $[8];
-		let t3;
-		if ($[9] !== t1 || $[10] !== t2) {
-			t3 = /* @__PURE__ */ jsx("div", {
+			$[5] = basePath;
+			$[6] = navigate;
+			$[7] = widgetConfig;
+			$[8] = widgetRegistry;
+			$[9] = t3;
+		} else t3 = $[9];
+		let t4;
+		if ($[10] !== t1 || $[11] !== t2 || $[12] !== t3) {
+			t4 = /* @__PURE__ */ jsx("div", {
 				className: t1,
-				children: t2
+				style: t2,
+				children: t3
 			});
-			$[9] = t1;
-			$[10] = t2;
-			$[11] = t3;
-		} else t3 = $[11];
-		return t3;
+			$[10] = t1;
+			$[11] = t2;
+			$[12] = t3;
+			$[13] = t4;
+		} else t4 = $[13];
+		return t4;
 	}
 	if (isSectionConfig(item)) {
 		let t1;
-		if ($[12] !== basePath || $[13] !== dashboardRealtime || $[14] !== item || $[15] !== navigate || $[16] !== resolveText || $[17] !== widgetRegistry) {
+		if ($[14] !== basePath || $[15] !== dashboardRealtime || $[16] !== gap || $[17] !== item || $[18] !== navigate || $[19] !== resolveText || $[20] !== rowHeight || $[21] !== widgetRegistry) {
 			t1 = /* @__PURE__ */ jsx(SectionRenderer, {
 				section: item,
 				basePath,
 				navigate,
 				widgetRegistry,
 				resolveText,
-				dashboardRealtime
+				dashboardRealtime,
+				rowHeight,
+				gap
 			});
-			$[12] = basePath;
-			$[13] = dashboardRealtime;
-			$[14] = item;
-			$[15] = navigate;
-			$[16] = resolveText;
-			$[17] = widgetRegistry;
-			$[18] = t1;
-		} else t1 = $[18];
+			$[14] = basePath;
+			$[15] = dashboardRealtime;
+			$[16] = gap;
+			$[17] = item;
+			$[18] = navigate;
+			$[19] = resolveText;
+			$[20] = rowHeight;
+			$[21] = widgetRegistry;
+			$[22] = t1;
+		} else t1 = $[22];
 		return t1;
 	}
 	if (isTabsConfig(item)) {
 		let t1;
-		if ($[19] !== basePath || $[20] !== dashboardRealtime || $[21] !== item || $[22] !== navigate || $[23] !== resolveText || $[24] !== widgetRegistry) {
+		if ($[23] !== basePath || $[24] !== dashboardRealtime || $[25] !== gap || $[26] !== item || $[27] !== navigate || $[28] !== resolveText || $[29] !== rowHeight || $[30] !== widgetRegistry) {
 			t1 = /* @__PURE__ */ jsx(TabsRenderer, {
 				tabs: item,
 				basePath,
 				navigate,
 				widgetRegistry,
 				resolveText,
-				dashboardRealtime
+				dashboardRealtime,
+				rowHeight,
+				gap
 			});
-			$[19] = basePath;
-			$[20] = dashboardRealtime;
-			$[21] = item;
-			$[22] = navigate;
-			$[23] = resolveText;
-			$[24] = widgetRegistry;
-			$[25] = t1;
-		} else t1 = $[25];
+			$[23] = basePath;
+			$[24] = dashboardRealtime;
+			$[25] = gap;
+			$[26] = item;
+			$[27] = navigate;
+			$[28] = resolveText;
+			$[29] = rowHeight;
+			$[30] = widgetRegistry;
+			$[31] = t1;
+		} else t1 = $[31];
 		return t1;
 	}
 	return null;
 }
+function WidgetGridGroup(t0) {
+	const $ = c(28);
+	const { items, columns, rowHeight, gap, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime } = t0;
+	let t1;
+	if ($[0] !== columns) {
+		t1 = cn("@container grid items-stretch gap-4", getGridClass(columns));
+		$[0] = columns;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== gap || $[3] !== rowHeight) {
+		t2 = getGridStyle(rowHeight, gap);
+		$[2] = gap;
+		$[3] = rowHeight;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== basePath || $[6] !== columns || $[7] !== dashboardRealtime || $[8] !== gap || $[9] !== items || $[10] !== navigate || $[11] !== resolveText || $[12] !== rowHeight || $[13] !== widgetRegistry) {
+		let t4$1;
+		if ($[15] !== basePath || $[16] !== columns || $[17] !== dashboardRealtime || $[18] !== gap || $[19] !== navigate || $[20] !== resolveText || $[21] !== rowHeight || $[22] !== widgetRegistry) {
+			t4$1 = (item, index) => /* @__PURE__ */ jsx(LayoutItemRenderer, {
+				item,
+				index,
+				columns,
+				basePath,
+				navigate,
+				widgetRegistry,
+				resolveText,
+				dashboardRealtime,
+				rowHeight,
+				gap
+			}, getLayoutItemKey(item, index));
+			$[15] = basePath;
+			$[16] = columns;
+			$[17] = dashboardRealtime;
+			$[18] = gap;
+			$[19] = navigate;
+			$[20] = resolveText;
+			$[21] = rowHeight;
+			$[22] = widgetRegistry;
+			$[23] = t4$1;
+		} else t4$1 = $[23];
+		t3 = items.map(t4$1);
+		$[5] = basePath;
+		$[6] = columns;
+		$[7] = dashboardRealtime;
+		$[8] = gap;
+		$[9] = items;
+		$[10] = navigate;
+		$[11] = resolveText;
+		$[12] = rowHeight;
+		$[13] = widgetRegistry;
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[24] !== t1 || $[25] !== t2 || $[26] !== t3) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			style: t2,
+			children: t3
+		});
+		$[24] = t1;
+		$[25] = t2;
+		$[26] = t3;
+		$[27] = t4;
+	} else t4 = $[27];
+	return t4;
+}
+function LayoutItemsRenderer(t0) {
+	const $ = c(10);
+	const { items, columns, rowHeight, gap, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime } = t0;
+	let t1;
+	if ($[0] !== basePath || $[1] !== columns || $[2] !== dashboardRealtime || $[3] !== gap || $[4] !== items || $[5] !== navigate || $[6] !== resolveText || $[7] !== rowHeight || $[8] !== widgetRegistry) {
+		const blocks = [];
+		let widgetGroup = [];
+		let widgetGroupStart = 0;
+		const flushWidgetGroup = () => {
+			if (widgetGroup.length === 0) return;
+			blocks.push(/* @__PURE__ */ jsx(WidgetGridGroup, {
+				items: widgetGroup,
+				columns,
+				rowHeight,
+				gap,
+				basePath,
+				navigate,
+				widgetRegistry,
+				resolveText,
+				dashboardRealtime
+			}, `widgets-${widgetGroupStart}`));
+			widgetGroup = [];
+		};
+		items.forEach((item, index) => {
+			if (isWidgetConfig(item)) {
+				if (widgetGroup.length === 0) widgetGroupStart = index;
+				widgetGroup.push(item);
+				return;
+			}
+			flushWidgetGroup();
+			blocks.push(/* @__PURE__ */ jsx(LayoutItemRenderer, {
+				item,
+				index,
+				columns,
+				basePath,
+				navigate,
+				widgetRegistry,
+				resolveText,
+				dashboardRealtime,
+				rowHeight,
+				gap
+			}, getLayoutItemKey(item, index)));
+		});
+		flushWidgetGroup();
+		t1 = /* @__PURE__ */ jsx("div", {
+			className: "qa-dashboard__stack flex flex-col gap-7",
+			children: blocks
+		});
+		$[0] = basePath;
+		$[1] = columns;
+		$[2] = dashboardRealtime;
+		$[3] = gap;
+		$[4] = items;
+		$[5] = navigate;
+		$[6] = resolveText;
+		$[7] = rowHeight;
+		$[8] = widgetRegistry;
+		$[9] = t1;
+	} else t1 = $[9];
+	return t1;
+}
 function SectionRenderer(t0) {
-	const $ = c(71);
-	const { section, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime } = t0;
-	const { label, description, wrapper: t1, defaultCollapsed: t2, layout: t3, columns: t4, gap, items, className } = section;
+	const $ = c(57);
+	const { section, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime, rowHeight: inheritedRowHeight, gap: inheritedGap } = t0;
+	const { label, description, wrapper: t1, defaultCollapsed: t2, layout: t3, columns: t4, gap: sectionGap, rowHeight: sectionRowHeight, items, className } = section;
 	const wrapper = t1 === void 0 ? "flat" : t1;
 	const defaultCollapsed = t2 === void 0 ? false : t2;
 	const layout = t3 === void 0 ? "grid" : t3;
 	const columns = t4 === void 0 ? 4 : t4;
+	const rowHeight = sectionRowHeight ?? inheritedRowHeight;
+	const gap = sectionGap ?? inheritedGap;
 	let t5;
 	if ($[0] !== label || $[1] !== resolveText) {
 		t5 = label ? resolveText(label) : void 0;
@@ -303,26 +521,22 @@ function SectionRenderer(t0) {
 		$[5] = t6;
 	} else t6 = $[5];
 	const sectionDescription = t6;
-	const t7 = layout === "grid" && "grid items-start gap-4";
-	let t8;
-	if ($[6] !== columns || $[7] !== layout || $[8] !== t7) {
-		t8 = cn("@container", t7, layout === "grid" && getGridClass(columns), layout === "stack" && "flex flex-col gap-4");
-		$[6] = columns;
-		$[7] = layout;
-		$[8] = t7;
-		$[9] = t8;
-	} else t8 = $[9];
-	let t9;
-	if ($[10] !== gap) {
-		t9 = gap ? { gap: `${gap * .25}rem` } : void 0;
-		$[10] = gap;
-		$[11] = t9;
-	} else t9 = $[11];
-	let t10;
-	if ($[12] !== basePath || $[13] !== columns || $[14] !== dashboardRealtime || $[15] !== items || $[16] !== navigate || $[17] !== resolveText || $[18] !== widgetRegistry) {
-		let t11$1;
-		if ($[20] !== basePath || $[21] !== columns || $[22] !== dashboardRealtime || $[23] !== navigate || $[24] !== resolveText || $[25] !== widgetRegistry) {
-			t11$1 = (item, index) => /* @__PURE__ */ jsx(LayoutItemRenderer, {
+	let t7;
+	if ($[6] !== basePath || $[7] !== columns || $[8] !== dashboardRealtime || $[9] !== gap || $[10] !== items || $[11] !== layout || $[12] !== navigate || $[13] !== resolveText || $[14] !== rowHeight || $[15] !== widgetRegistry) {
+		t7 = layout === "grid" ? /* @__PURE__ */ jsx(LayoutItemsRenderer, {
+			items,
+			columns,
+			basePath,
+			navigate,
+			widgetRegistry,
+			resolveText,
+			dashboardRealtime,
+			rowHeight,
+			gap
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "@container flex flex-col gap-4",
+			style: getStackStyle(gap),
+			children: items.map((item, index) => /* @__PURE__ */ jsx(LayoutItemRenderer, {
 				item,
 				index,
 				columns,
@@ -330,324 +544,311 @@ function SectionRenderer(t0) {
 				navigate,
 				widgetRegistry,
 				resolveText,
-				dashboardRealtime
-			}, getLayoutItemKey(item, index));
-			$[20] = basePath;
-			$[21] = columns;
-			$[22] = dashboardRealtime;
-			$[23] = navigate;
-			$[24] = resolveText;
-			$[25] = widgetRegistry;
-			$[26] = t11$1;
-		} else t11$1 = $[26];
-		t10 = items.map(t11$1);
-		$[12] = basePath;
-		$[13] = columns;
-		$[14] = dashboardRealtime;
-		$[15] = items;
-		$[16] = navigate;
-		$[17] = resolveText;
-		$[18] = widgetRegistry;
-		$[19] = t10;
-	} else t10 = $[19];
-	let t11;
-	if ($[27] !== t10 || $[28] !== t8 || $[29] !== t9) {
-		t11 = /* @__PURE__ */ jsx("div", {
-			className: t8,
-			style: t9,
-			children: t10
+				dashboardRealtime,
+				rowHeight,
+				gap
+			}, getLayoutItemKey(item, index)))
 		});
-		$[27] = t10;
-		$[28] = t8;
-		$[29] = t9;
-		$[30] = t11;
-	} else t11 = $[30];
-	const itemsContent = t11;
+		$[6] = basePath;
+		$[7] = columns;
+		$[8] = dashboardRealtime;
+		$[9] = gap;
+		$[10] = items;
+		$[11] = layout;
+		$[12] = navigate;
+		$[13] = resolveText;
+		$[14] = rowHeight;
+		$[15] = widgetRegistry;
+		$[16] = t7;
+	} else t7 = $[16];
+	const itemsContent = t7;
 	if (wrapper === "flat") {
-		let t12;
-		if ($[31] !== className) {
-			t12 = cn("col-span-full", className);
-			$[31] = className;
-			$[32] = t12;
-		} else t12 = $[32];
-		let t13;
-		if ($[33] !== sectionDescription || $[34] !== sectionLabel) {
-			t13 = (sectionLabel || sectionDescription) && /* @__PURE__ */ jsxs("div", {
+		let t8;
+		if ($[17] !== className) {
+			t8 = cn("min-w-0", className);
+			$[17] = className;
+			$[18] = t8;
+		} else t8 = $[18];
+		let t9;
+		if ($[19] !== sectionDescription || $[20] !== sectionLabel) {
+			t9 = (sectionLabel || sectionDescription) && /* @__PURE__ */ jsxs("div", {
 				className: "mb-4",
 				children: [sectionLabel && /* @__PURE__ */ jsx("h2", {
-					className: "text-lg font-semibold",
+					className: "text-base font-semibold text-balance",
 					children: sectionLabel
 				}), sectionDescription && /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground mt-1 text-sm",
+					className: "text-muted-foreground mt-1 text-sm text-pretty",
 					children: sectionDescription
 				})]
 			});
-			$[33] = sectionDescription;
-			$[34] = sectionLabel;
-			$[35] = t13;
-		} else t13 = $[35];
-		let t14;
-		if ($[36] !== itemsContent || $[37] !== t12 || $[38] !== t13) {
-			t14 = /* @__PURE__ */ jsxs("div", {
-				className: t12,
-				children: [t13, itemsContent]
+			$[19] = sectionDescription;
+			$[20] = sectionLabel;
+			$[21] = t9;
+		} else t9 = $[21];
+		let t10;
+		if ($[22] !== itemsContent || $[23] !== t8 || $[24] !== t9) {
+			t10 = /* @__PURE__ */ jsxs("section", {
+				className: t8,
+				children: [t9, itemsContent]
 			});
-			$[36] = itemsContent;
-			$[37] = t12;
-			$[38] = t13;
-			$[39] = t14;
-		} else t14 = $[39];
-		return t14;
+			$[22] = itemsContent;
+			$[23] = t8;
+			$[24] = t9;
+			$[25] = t10;
+		} else t10 = $[25];
+		return t10;
 	}
 	if (wrapper === "card") {
-		let t12;
-		if ($[40] !== className) {
-			t12 = cn("col-span-full", className);
-			$[40] = className;
-			$[41] = t12;
-		} else t12 = $[41];
-		let t13;
-		if ($[42] !== sectionDescription || $[43] !== sectionLabel) {
-			t13 = (sectionLabel || sectionDescription) && /* @__PURE__ */ jsxs(CardHeader, { children: [sectionLabel && /* @__PURE__ */ jsx(CardTitle, { children: sectionLabel }), sectionDescription && /* @__PURE__ */ jsx("p", {
+		let t8;
+		if ($[26] !== className) {
+			t8 = cn("min-w-0", className);
+			$[26] = className;
+			$[27] = t8;
+		} else t8 = $[27];
+		let t9;
+		if ($[28] !== sectionDescription || $[29] !== sectionLabel) {
+			t9 = (sectionLabel || sectionDescription) && /* @__PURE__ */ jsxs(CardHeader, { children: [sectionLabel && /* @__PURE__ */ jsx(CardTitle, { children: sectionLabel }), sectionDescription && /* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground text-sm",
 				children: sectionDescription
 			})] });
-			$[42] = sectionDescription;
-			$[43] = sectionLabel;
-			$[44] = t13;
-		} else t13 = $[44];
-		let t14;
-		if ($[45] !== itemsContent) {
-			t14 = /* @__PURE__ */ jsx(CardContent, { children: itemsContent });
-			$[45] = itemsContent;
-			$[46] = t14;
-		} else t14 = $[46];
-		let t15;
-		if ($[47] !== t12 || $[48] !== t13 || $[49] !== t14) {
-			t15 = /* @__PURE__ */ jsxs(Card, {
-				className: t12,
-				children: [t13, t14]
+			$[28] = sectionDescription;
+			$[29] = sectionLabel;
+			$[30] = t9;
+		} else t9 = $[30];
+		let t10;
+		if ($[31] !== itemsContent) {
+			t10 = /* @__PURE__ */ jsx(CardContent, {
+				className: "min-w-0",
+				children: itemsContent
 			});
-			$[47] = t12;
-			$[48] = t13;
-			$[49] = t14;
-			$[50] = t15;
-		} else t15 = $[50];
-		return t15;
+			$[31] = itemsContent;
+			$[32] = t10;
+		} else t10 = $[32];
+		let t11;
+		if ($[33] !== t10 || $[34] !== t8 || $[35] !== t9) {
+			t11 = /* @__PURE__ */ jsxs(Card, {
+				className: t8,
+				children: [t9, t10]
+			});
+			$[33] = t10;
+			$[34] = t8;
+			$[35] = t9;
+			$[36] = t11;
+		} else t11 = $[36];
+		return t11;
 	}
 	if (wrapper === "collapsible") {
-		let t12;
-		if ($[51] !== defaultCollapsed) {
-			t12 = defaultCollapsed ? [] : [0];
-			$[51] = defaultCollapsed;
-			$[52] = t12;
-		} else t12 = $[52];
-		let t13;
-		if ($[53] !== className) {
-			t13 = cn("col-span-full", className);
-			$[53] = className;
-			$[54] = t13;
-		} else t13 = $[54];
-		let t14;
-		if ($[55] !== sectionLabel) {
-			t14 = sectionLabel && /* @__PURE__ */ jsx("span", {
+		let t8;
+		if ($[37] !== defaultCollapsed) {
+			t8 = defaultCollapsed ? [] : [0];
+			$[37] = defaultCollapsed;
+			$[38] = t8;
+		} else t8 = $[38];
+		let t9;
+		if ($[39] !== className) {
+			t9 = cn("min-w-0", className);
+			$[39] = className;
+			$[40] = t9;
+		} else t9 = $[40];
+		let t10;
+		if ($[41] !== sectionLabel) {
+			t10 = sectionLabel && /* @__PURE__ */ jsx("span", {
 				className: "text-lg font-semibold",
 				children: sectionLabel
 			});
-			$[55] = sectionLabel;
-			$[56] = t14;
-		} else t14 = $[56];
-		let t15;
-		if ($[57] !== sectionDescription) {
-			t15 = sectionDescription && /* @__PURE__ */ jsx("p", {
+			$[41] = sectionLabel;
+			$[42] = t10;
+		} else t10 = $[42];
+		let t11;
+		if ($[43] !== sectionDescription) {
+			t11 = sectionDescription && /* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground text-sm font-normal",
 				children: sectionDescription
 			});
-			$[57] = sectionDescription;
-			$[58] = t15;
-		} else t15 = $[58];
-		let t16;
-		if ($[59] !== t14 || $[60] !== t15) {
-			t16 = /* @__PURE__ */ jsx(AccordionTrigger, {
+			$[43] = sectionDescription;
+			$[44] = t11;
+		} else t11 = $[44];
+		let t12;
+		if ($[45] !== t10 || $[46] !== t11) {
+			t12 = /* @__PURE__ */ jsx(AccordionTrigger, {
 				className: "py-2 hover:no-underline",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "text-left",
-					children: [t14, t15]
+					children: [t10, t11]
 				})
 			});
-			$[59] = t14;
-			$[60] = t15;
-			$[61] = t16;
-		} else t16 = $[61];
-		let t17;
-		if ($[62] !== itemsContent) {
-			t17 = /* @__PURE__ */ jsx(AccordionContent, {
+			$[45] = t10;
+			$[46] = t11;
+			$[47] = t12;
+		} else t12 = $[47];
+		let t13;
+		if ($[48] !== itemsContent) {
+			t13 = /* @__PURE__ */ jsx(AccordionContent, {
 				className: "pt-4",
 				children: itemsContent
 			});
-			$[62] = itemsContent;
-			$[63] = t17;
-		} else t17 = $[63];
-		let t18;
-		if ($[64] !== t16 || $[65] !== t17) {
-			t18 = /* @__PURE__ */ jsxs(AccordionItem, {
+			$[48] = itemsContent;
+			$[49] = t13;
+		} else t13 = $[49];
+		let t14;
+		if ($[50] !== t12 || $[51] !== t13) {
+			t14 = /* @__PURE__ */ jsxs(AccordionItem, {
 				className: "border-none",
-				children: [t16, t17]
+				children: [t12, t13]
 			});
-			$[64] = t16;
-			$[65] = t17;
-			$[66] = t18;
-		} else t18 = $[66];
-		let t19;
-		if ($[67] !== t12 || $[68] !== t13 || $[69] !== t18) {
-			t19 = /* @__PURE__ */ jsx(Accordion, {
-				defaultValue: t12,
-				className: t13,
-				children: t18
+			$[50] = t12;
+			$[51] = t13;
+			$[52] = t14;
+		} else t14 = $[52];
+		let t15;
+		if ($[53] !== t14 || $[54] !== t8 || $[55] !== t9) {
+			t15 = /* @__PURE__ */ jsx(Accordion, {
+				defaultValue: t8,
+				className: t9,
+				children: t14
 			});
-			$[67] = t12;
-			$[68] = t13;
-			$[69] = t18;
-			$[70] = t19;
-		} else t19 = $[70];
-		return t19;
+			$[53] = t14;
+			$[54] = t8;
+			$[55] = t9;
+			$[56] = t15;
+		} else t15 = $[56];
+		return t15;
 	}
 	return itemsContent;
 }
 function TabsRenderer(t0) {
-	const $ = c(25);
-	const { tabs, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime } = t0;
-	const { tabs: tabConfigs, defaultTab, variant: t1 } = tabs;
-	const variant = t1 === void 0 ? "default" : t1;
-	const defaultValue = defaultTab || tabConfigs[0]?.id;
-	const t2 = variant === "line" ? "line" : "default";
+	const $ = c(26);
+	const { tabs, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime, columns: t1, rowHeight, gap } = t0;
+	const columns = t1 === void 0 ? 4 : t1;
+	const { tabs: tabConfigs, defaultTab } = tabs;
+	let t2;
 	let t3;
-	if ($[0] !== resolveText || $[1] !== tabConfigs) {
-		let t4$1;
-		if ($[3] !== resolveText) {
-			t4$1 = (tab) => /* @__PURE__ */ jsxs(TabsTrigger, {
-				value: tab.id,
-				children: [
-					resolveIconElement(tab.icon, { className: "h-4 w-4 mr-2" }),
-					resolveText(tab.label),
-					tab.badge !== void 0 && /* @__PURE__ */ jsx("span", {
-						className: "bg-muted ml-2 rounded-full px-2 py-0.5 text-xs",
-						children: tab.badge
+	if ($[0] !== basePath || $[1] !== columns || $[2] !== dashboardRealtime || $[3] !== defaultTab || $[4] !== gap || $[5] !== navigate || $[6] !== resolveText || $[7] !== rowHeight || $[8] !== tabConfigs || $[9] !== tabs.className || $[10] !== widgetRegistry) {
+		t3 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const visibleTabs = tabConfigs.filter(_temp2);
+			if (visibleTabs.length === 0) {
+				t3 = null;
+				break bb0;
+			}
+			const defaultValue = visibleTabs.some((tab_0) => tab_0.id === defaultTab) ? defaultTab : visibleTabs[0]?.id;
+			let t4;
+			if ($[13] !== tabs.className) {
+				t4 = cn("min-w-0", tabs.className);
+				$[13] = tabs.className;
+				$[14] = t4;
+			} else t4 = $[14];
+			let t5;
+			if ($[15] !== resolveText) {
+				t5 = (tab_1) => /* @__PURE__ */ jsxs(TabsTrigger, {
+					value: tab_1.id,
+					className: "flex-1",
+					children: [
+						resolveIconElement(tab_1.icon, { className: "size-3.5" }),
+						resolveText(tab_1.label),
+						tab_1.badge !== void 0 && /* @__PURE__ */ jsx("span", {
+							className: "bg-foreground text-background ml-1.5 rounded-full px-1.5 py-0.5 text-xs tabular-nums",
+							children: tab_1.badge
+						})
+					]
+				}, tab_1.id);
+				$[15] = resolveText;
+				$[16] = t5;
+			} else t5 = $[16];
+			let t6;
+			if ($[17] !== basePath || $[18] !== columns || $[19] !== dashboardRealtime || $[20] !== gap || $[21] !== navigate || $[22] !== resolveText || $[23] !== rowHeight || $[24] !== widgetRegistry) {
+				t6 = (tab_2) => /* @__PURE__ */ jsx(TabsContent, {
+					value: tab_2.id,
+					className: "min-w-0",
+					children: /* @__PURE__ */ jsx(TabContentRenderer, {
+						tab: tab_2,
+						columns,
+						basePath,
+						navigate,
+						widgetRegistry,
+						resolveText,
+						dashboardRealtime,
+						rowHeight,
+						gap
 					})
-				]
-			}, tab.id);
-			$[3] = resolveText;
-			$[4] = t4$1;
-		} else t4$1 = $[4];
-		t3 = tabConfigs.map(t4$1);
-		$[0] = resolveText;
-		$[1] = tabConfigs;
-		$[2] = t3;
-	} else t3 = $[2];
-	let t4;
-	if ($[5] !== t2 || $[6] !== t3) {
-		t4 = /* @__PURE__ */ jsx(TabsList, {
-			variant: t2,
-			className: "mb-4",
-			children: t3
-		});
-		$[5] = t2;
-		$[6] = t3;
-		$[7] = t4;
-	} else t4 = $[7];
-	let t5;
-	if ($[8] !== basePath || $[9] !== dashboardRealtime || $[10] !== navigate || $[11] !== resolveText || $[12] !== tabConfigs || $[13] !== widgetRegistry) {
-		let t6$1;
-		if ($[15] !== basePath || $[16] !== dashboardRealtime || $[17] !== navigate || $[18] !== resolveText || $[19] !== widgetRegistry) {
-			t6$1 = (tab_0) => /* @__PURE__ */ jsx(TabsContent, {
-				value: tab_0.id,
-				children: /* @__PURE__ */ jsx(TabContentRenderer, {
-					tab: tab_0,
-					basePath,
-					navigate,
-					widgetRegistry,
-					resolveText,
-					dashboardRealtime
-				})
-			}, tab_0.id);
-			$[15] = basePath;
-			$[16] = dashboardRealtime;
-			$[17] = navigate;
-			$[18] = resolveText;
-			$[19] = widgetRegistry;
-			$[20] = t6$1;
-		} else t6$1 = $[20];
-		t5 = tabConfigs.map(t6$1);
-		$[8] = basePath;
-		$[9] = dashboardRealtime;
-		$[10] = navigate;
-		$[11] = resolveText;
-		$[12] = tabConfigs;
-		$[13] = widgetRegistry;
-		$[14] = t5;
-	} else t5 = $[14];
-	let t6;
-	if ($[21] !== defaultValue || $[22] !== t4 || $[23] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(Tabs, {
-			defaultValue,
-			className: "col-span-full",
-			children: [t4, t5]
-		});
-		$[21] = defaultValue;
-		$[22] = t4;
-		$[23] = t5;
-		$[24] = t6;
-	} else t6 = $[24];
-	return t6;
+				}, tab_2.id);
+				$[17] = basePath;
+				$[18] = columns;
+				$[19] = dashboardRealtime;
+				$[20] = gap;
+				$[21] = navigate;
+				$[22] = resolveText;
+				$[23] = rowHeight;
+				$[24] = widgetRegistry;
+				$[25] = t6;
+			} else t6 = $[25];
+			t2 = /* @__PURE__ */ jsxs(Tabs, {
+				defaultValue,
+				className: t4,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "mb-4 max-w-full overflow-x-auto",
+					children: /* @__PURE__ */ jsx(TabsList, {
+						className: "w-full min-w-max",
+						children: visibleTabs.map(t5)
+					})
+				}), visibleTabs.map(t6)]
+			});
+		}
+		$[0] = basePath;
+		$[1] = columns;
+		$[2] = dashboardRealtime;
+		$[3] = defaultTab;
+		$[4] = gap;
+		$[5] = navigate;
+		$[6] = resolveText;
+		$[7] = rowHeight;
+		$[8] = tabConfigs;
+		$[9] = tabs.className;
+		$[10] = widgetRegistry;
+		$[11] = t2;
+		$[12] = t3;
+	} else {
+		t2 = $[11];
+		t3 = $[12];
+	}
+	if (t3 !== Symbol.for("react.early_return_sentinel")) return t3;
+	return t2;
+}
+function _temp2(tab) {
+	return tab.items.length > 0;
 }
 function TabContentRenderer(t0) {
-	const $ = c(16);
-	const { tab, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime } = t0;
-	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = cn("@container grid items-start gap-4", getGridClass(4));
-		$[0] = t1;
-	} else t1 = $[0];
+	const $ = c(10);
+	const { tab, columns: t1, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime, rowHeight: inheritedRowHeight, gap: inheritedGap } = t0;
+	const inheritedColumns = t1 === void 0 ? 4 : t1;
+	const columns = tab.columns ?? inheritedColumns;
+	const rowHeight = tab.rowHeight ?? inheritedRowHeight;
+	const gap = tab.gap ?? inheritedGap;
 	let t2;
-	if ($[1] !== basePath || $[2] !== dashboardRealtime || $[3] !== navigate || $[4] !== resolveText || $[5] !== tab.items || $[6] !== widgetRegistry) {
-		let t3$1;
-		if ($[8] !== basePath || $[9] !== dashboardRealtime || $[10] !== navigate || $[11] !== resolveText || $[12] !== widgetRegistry) {
-			t3$1 = (item, index) => /* @__PURE__ */ jsx(LayoutItemRenderer, {
-				item,
-				index,
-				columns: 4,
-				basePath,
-				navigate,
-				widgetRegistry,
-				resolveText,
-				dashboardRealtime
-			}, getLayoutItemKey(item, index));
-			$[8] = basePath;
-			$[9] = dashboardRealtime;
-			$[10] = navigate;
-			$[11] = resolveText;
-			$[12] = widgetRegistry;
-			$[13] = t3$1;
-		} else t3$1 = $[13];
-		t2 = tab.items.map(t3$1);
-		$[1] = basePath;
-		$[2] = dashboardRealtime;
-		$[3] = navigate;
-		$[4] = resolveText;
-		$[5] = tab.items;
-		$[6] = widgetRegistry;
-		$[7] = t2;
-	} else t2 = $[7];
-	let t3;
-	if ($[14] !== t2) {
-		t3 = /* @__PURE__ */ jsx("div", {
-			className: t1,
-			children: t2
+	if ($[0] !== basePath || $[1] !== columns || $[2] !== dashboardRealtime || $[3] !== gap || $[4] !== navigate || $[5] !== resolveText || $[6] !== rowHeight || $[7] !== tab.items || $[8] !== widgetRegistry) {
+		t2 = /* @__PURE__ */ jsx(LayoutItemsRenderer, {
+			items: tab.items,
+			columns,
+			basePath,
+			navigate,
+			widgetRegistry,
+			resolveText,
+			dashboardRealtime,
+			rowHeight,
+			gap
 		});
-		$[14] = t2;
-		$[15] = t3;
-	} else t3 = $[15];
-	return t3;
+		$[0] = basePath;
+		$[1] = columns;
+		$[2] = dashboardRealtime;
+		$[3] = gap;
+		$[4] = navigate;
+		$[5] = resolveText;
+		$[6] = rowHeight;
+		$[7] = tab.items;
+		$[8] = widgetRegistry;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
 }
 /**
 * DashboardGrid - Renders a configurable grid of dashboard widgets
@@ -683,12 +884,12 @@ function TabContentRenderer(t0) {
 * ```
 */
 function DashboardGrid(t0) {
-	const $ = c(64);
+	const $ = c(54);
 	const { config, basePath: t1, navigate, widgetRegistry, className } = t0;
 	const basePath = t1 === void 0 ? "/admin" : t1;
 	const resolveText = useResolveText();
 	const { t } = useTranslation();
-	const { title, description, columns: t2, realtime: dashboardRealtime } = config;
+	const { title, description, columns: t2, rowHeight, gap, realtime: dashboardRealtime } = config;
 	const columns = t2 === void 0 ? 4 : t2;
 	let t3;
 	if ($[0] !== config.items || $[1] !== config.widgets) {
@@ -752,31 +953,31 @@ function DashboardGrid(t0) {
 			$[19] = t8$1;
 			$[20] = t9$1;
 		} else t9$1 = $[20];
-		let t10$1;
+		let t10;
 		if ($[21] !== t) {
-			t10$1 = t("dashboard.noWidgetsDescription");
+			t10 = t("dashboard.noWidgetsDescription");
 			$[21] = t;
-			$[22] = t10$1;
-		} else t10$1 = $[22];
-		let t11$1;
-		if ($[23] !== t10$1) {
-			t11$1 = /* @__PURE__ */ jsx("p", {
+			$[22] = t10;
+		} else t10 = $[22];
+		let t11;
+		if ($[23] !== t10) {
+			t11 = /* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground mt-1 text-sm",
-				children: t10$1
+				children: t10
 			});
-			$[23] = t10$1;
-			$[24] = t11$1;
-		} else t11$1 = $[24];
+			$[23] = t10;
+			$[24] = t11;
+		} else t11 = $[24];
 		let t12;
-		if ($[25] !== t11$1 || $[26] !== t9$1) {
+		if ($[25] !== t11 || $[26] !== t9$1) {
 			t12 = /* @__PURE__ */ jsx("div", {
-				className: "border-border bg-card flex h-64 items-center justify-center rounded-lg border border-dashed",
+				className: "flex h-48 items-center justify-center",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "text-center",
-					children: [t9$1, t11$1]
+					children: [t9$1, t11]
 				})
 			});
-			$[25] = t11$1;
+			$[25] = t11;
 			$[26] = t9$1;
 			$[27] = t12;
 		} else t12 = $[27];
@@ -816,65 +1017,41 @@ function DashboardGrid(t0) {
 		$[39] = t7;
 	} else t7 = $[39];
 	let t8;
-	if ($[40] !== columns) {
-		t8 = cn("qa-dashboard__grid grid items-start gap-4", getGridClass(columns));
-		$[40] = columns;
-		$[41] = t8;
-	} else t8 = $[41];
-	let t9;
-	if ($[42] !== basePath || $[43] !== columns || $[44] !== dashboardRealtime || $[45] !== layoutItems || $[46] !== navigate || $[47] !== resolveText || $[48] !== widgetRegistry) {
-		let t10$1;
-		if ($[50] !== basePath || $[51] !== columns || $[52] !== dashboardRealtime || $[53] !== navigate || $[54] !== resolveText || $[55] !== widgetRegistry) {
-			t10$1 = (item, index) => /* @__PURE__ */ jsx(LayoutItemRenderer, {
-				item,
-				index,
-				columns,
-				basePath,
-				navigate,
-				widgetRegistry,
-				resolveText,
-				dashboardRealtime
-			}, getLayoutItemKey(item, index));
-			$[50] = basePath;
-			$[51] = columns;
-			$[52] = dashboardRealtime;
-			$[53] = navigate;
-			$[54] = resolveText;
-			$[55] = widgetRegistry;
-			$[56] = t10$1;
-		} else t10$1 = $[56];
-		t9 = layoutItems.map(t10$1);
-		$[42] = basePath;
-		$[43] = columns;
-		$[44] = dashboardRealtime;
-		$[45] = layoutItems;
-		$[46] = navigate;
-		$[47] = resolveText;
-		$[48] = widgetRegistry;
-		$[49] = t9;
-	} else t9 = $[49];
-	let t10;
-	if ($[57] !== t8 || $[58] !== t9) {
-		t10 = /* @__PURE__ */ jsx("div", {
-			className: t8,
-			children: t9
+	if ($[40] !== basePath || $[41] !== columns || $[42] !== dashboardRealtime || $[43] !== gap || $[44] !== layoutItems || $[45] !== navigate || $[46] !== resolveText || $[47] !== rowHeight || $[48] !== widgetRegistry) {
+		t8 = /* @__PURE__ */ jsx(LayoutItemsRenderer, {
+			items: layoutItems,
+			columns,
+			rowHeight,
+			gap,
+			basePath,
+			navigate,
+			widgetRegistry,
+			resolveText,
+			dashboardRealtime
 		});
-		$[57] = t8;
-		$[58] = t9;
-		$[59] = t10;
-	} else t10 = $[59];
-	let t11;
-	if ($[60] !== t10 || $[61] !== t6 || $[62] !== t7) {
-		t11 = /* @__PURE__ */ jsxs("div", {
+		$[40] = basePath;
+		$[41] = columns;
+		$[42] = dashboardRealtime;
+		$[43] = gap;
+		$[44] = layoutItems;
+		$[45] = navigate;
+		$[46] = resolveText;
+		$[47] = rowHeight;
+		$[48] = widgetRegistry;
+		$[49] = t8;
+	} else t8 = $[49];
+	let t9;
+	if ($[50] !== t6 || $[51] !== t7 || $[52] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
 			className: t6,
-			children: [t7, t10]
+			children: [t7, t8]
 		});
-		$[60] = t10;
-		$[61] = t6;
-		$[62] = t7;
-		$[63] = t11;
-	} else t11 = $[63];
-	return t11;
+		$[50] = t6;
+		$[51] = t7;
+		$[52] = t8;
+		$[53] = t9;
+	} else t9 = $[53];
+	return t9;
 }
 
 //#endregion