@burdenoff/microfe-bigconsole 2026.1011.10 → 2026.1012.2

package/dist/bigconsole/components/dashboard/CreateDashboardDialog.js

@@ -3,32 +3,32 @@ import "../common/index.js";
 import t from "./StoreTemplatePicker.js";
 import { TemplateInstallOptions as n } from "./TemplateInstallOptions.js";
 import { TemplateLayoutPreview as r } from "./TemplateLayoutPreview.js";
-import { templateInputDefaults as ee, templateInputError as te } from "../../utils/templateInstallInputs.js";
-import ne from "../../hooks/useStoreDashboardTemplates.js";
-import { memo as i, useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
-import { Copy as re, LayoutDashboard as ie, Plus as l, Tag as ae, X as oe } from "lucide-react";
-import { Badge as se, Button as u, Dialog as ce, DialogContent as le, DialogDescription as ue, DialogFooter as de, DialogHeader as fe, DialogTitle as d, Input as f, Spinner as p, Textarea as pe } from "@burdenoff/fe-libs/ui";
+import { templateInputDefaults as i, templateInputError as ee } from "../../utils/templateInstallInputs.js";
+import te from "../../hooks/useStoreDashboardTemplates.js";
+import { memo as a, useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
+import { Copy as ne, LayoutDashboard as re, Plus as u, Tag as ie, X as ae } from "lucide-react";
+import { Badge as oe, Button as d, Dialog as se, DialogContent as ce, DialogDescription as le, DialogFooter as ue, DialogHeader as de, DialogTitle as f, Input as p, Spinner as m, Textarea as fe } from "@burdenoff/fe-libs/ui";
+import { Fragment as pe, jsx as h, jsxs as g } from "react/jsx-runtime";
 import { useI18n as me } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 import { useActiveContext as he } from "@burdenoff/fe-libs/shared/providers/shell/ActiveContextProvider";
 //#region src/bigconsole/components/dashboard/CreateDashboardDialog.tsx
-var _ = i(function({ isOpen: i, isCreating: _ = !1, onClose: v, onCreate: y, showTemplates: b = !0, onTemplateInstalled: x }) {
-	let { t: S } = me(), { templates: ge, loading: _e, error: C, fetchTemplateContent: w, installTemplate: T } = ne({ autoLoad: b }), [E, D] = c(!1), { workspaceId: O } = he(), k = s(O);
+var _ = a(function({ isOpen: a, isCreating: _ = !1, onClose: v, onCreate: y, showTemplates: b = !0, onTemplateInstalled: x }) {
+	let { t: S } = me(), { templates: ge, loading: _e, error: C, fetchTemplateContent: w, installTemplate: T } = te({ autoLoad: b }), [E, D] = l(!1), { workspaceId: O } = he(), k = c(O);
 	k.current = O;
-	let [ve, A] = c(null), [ye, be] = c(null), [j, M] = c(!1), [N, P] = c({}), [F, I] = c({}), [L, R] = c("blank"), [z, B] = c(""), [V, H] = c(""), [U, W] = c([]), [G, K] = c(""), [q, J] = c(null), [Y, X] = c(null), Z = s(null), Q = ye === `${q?.id}:${O}` ? ve : null;
-	o(() => {
-		i && (R("blank"), B(""), H(""), W([]), K(""), J(null), X(null), setTimeout(() => {
+	let [ve, A] = l(null), [ye, be] = l(null), [j, M] = l(!1), [N, P] = l({}), [F, I] = l({}), [L, R] = l("blank"), [z, B] = l(""), [V, H] = l(""), [U, W] = l([]), [G, K] = l(""), [q, J] = l(null), [Y, X] = l(null), Z = c(null), Q = ye === `${q?.id}:${O}` ? ve : null;
+	s(() => {
+		a && (R("blank"), B(""), H(""), W([]), K(""), J(null), X(null), setTimeout(() => {
 			Z.current?.focus();
 		}, 100));
-	}, [i]);
-	let $ = a(() => {
+	}, [a]);
+	let $ = o(() => {
 		let e = G.trim().toLowerCase();
 		e && !U.includes(e) && U.length < 10 && (W((t) => [...t, e]), K(""));
 	}, [G, U]);
-	o(() => {
+	s(() => {
 		let e = !1;
-		if (A(null), P({}), I({}), M(!!q), !(!q || !i)) return w(q.id).then((t) => {
-			e || (A(t), be(`${q.id}:${O}`), M(!1), I(t ? ee(t.requiredInputs) : {}), t || X(S("bigconsole.dashboards.createDialog.error.noDefinition", "This template has no dashboard definition attached and cannot be installed.")));
+		if (A(null), P({}), I({}), M(!!q), !(!q || !a)) return w(q.id).then((t) => {
+			e || (A(t), be(`${q.id}:${O}`), M(!1), I(t ? i(t.requiredInputs) : {}), t || X(S("bigconsole.dashboards.createDialog.error.noDefinition", "This template has no dashboard definition attached and cannot be installed.")));
 		}), () => {
 			e = !0;
 		};
@@ -36,20 +36,20 @@ var _ = i(function({ isOpen: i, isCreating: _ = !1, onClose: v, onCreate: y, sho
 		q,
 		w,
 		O,
-		i,
+		a,
 		S
 	]);
-	let xe = a((e) => {
+	let xe = o((e) => {
 		W((t) => t.filter((t) => t !== e));
-	}, []), Se = a((e) => {
+	}, []), Se = o((e) => {
 		e.key === "Enter" ? (e.preventDefault(), $()) : e.key === "Backspace" && !G && U.length > 0 && W((e) => e.slice(0, -1));
 	}, [
 		$,
 		G,
 		U.length
-	]), Ce = a((e) => {
+	]), Ce = o((e) => {
 		J(e), X(null), B(e.name), H(e.description || "");
-	}, []), we = a(async (e) => {
+	}, []), we = o(async (e) => {
 		if (e.preventDefault(), L === "template" && !q) {
 			X(S("bigconsole.dashboards.createDialog.error.selectTemplate", "Please select a template"));
 			return;
@@ -79,7 +79,7 @@ var _ = i(function({ isOpen: i, isCreating: _ = !1, onClose: v, onCreate: y, sho
 					X(S("bigconsole.dashboards.createDialog.error.noDefinition", "This template has no dashboard definition attached and cannot be installed."));
 					return;
 				}
-				let n = te(e.requiredInputs, F, S);
+				let n = ee(e.requiredInputs, F, S);
 				if (n) {
 					X(n);
 					return;
@@ -138,17 +138,24 @@ var _ = i(function({ isOpen: i, isCreating: _ = !1, onClose: v, onCreate: y, sho
 		x,
 		S
 	]);
-	return /* @__PURE__ */ h(ce, {
-		open: i,
+	return /* @__PURE__ */ h(se, {
+		open: a,
 		onOpenChange: (e) => !e && !_ && !E && v(),
-		children: /* @__PURE__ */ g(le, {
+		children: /* @__PURE__ */ g(ce, {
 			style: {
 				maxWidth: L === "template" ? "900px" : "480px",
-				width: "100%",
+				width: "calc(100vw - 2 * var(--space-pagePadding))",
+				maxHeight: "calc(100dvh - 2 * var(--space-pagePadding))",
+				display: "flex",
+				flexDirection: "column",
+				overflow: "hidden",
 				padding: 0
 			},
-			children: [/* @__PURE__ */ h(fe, {
-				style: { padding: "var(--space-pagePadding) var(--space-pagePadding) 0" },
+			children: [/* @__PURE__ */ h(de, {
+				style: {
+					padding: "var(--space-pagePadding) var(--space-pagePadding) 0",
+					flexShrink: 0
+				},
 				children: /* @__PURE__ */ g("div", {
 					style: {
 						display: "flex",
@@ -166,7 +173,7 @@ var _ = i(function({ isOpen: i, isCreating: _ = !1, onClose: v, onCreate: y, sho
 							borderRadius: "var(--radius-card)",
 							backgroundColor: "var(--color-bg-accentSubtle)"
 						},
-						children: /* @__PURE__ */ h(ie, {
+						children: /* @__PURE__ */ h(re, {
 							"aria-hidden": "true",
 							style: {
 								height: "var(--size-icon-lg)",
@@ -174,7 +181,7 @@ var _ = i(function({ isOpen: i, isCreating: _ = !1, onClose: v, onCreate: y, sho
 								color: "var(--color-action-primary-bg)"
 							}
 						})
-					}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h(d, {
+					}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h(f, {
 						style: {
 							fontSize: "var(--font-size-heading-h4)",
 							fontWeight: "var(--font-weight-bold)",
@@ -182,7 +189,7 @@ var _ = i(function({ isOpen: i, isCreating: _ = !1, onClose: v, onCreate: y, sho
 							margin: 0
 						},
 						children: S("bigconsole.dashboards.createDialog.title", "Create New Dashboard")
-					}), /* @__PURE__ */ h(ue, {
+					}), /* @__PURE__ */ h(le, {
 						style: {
 							fontSize: "var(--font-size-body-sm)",
 							color: "var(--color-text-secondary)",
@@ -193,121 +200,179 @@ var _ = i(function({ isOpen: i, isCreating: _ = !1, onClose: v, onCreate: y, sho
 				})
 			}), /* @__PURE__ */ g("form", {
 				onSubmit: we,
-				children: [
-					b && /* @__PURE__ */ h("div", {
-						style: { padding: "var(--space-pagePadding) var(--space-pagePadding) 0" },
-						children: /* @__PURE__ */ g("div", {
-							role: "group",
-							"aria-label": "How to start",
-							style: {
-								display: "flex",
-								flexWrap: "wrap",
-								gap: "var(--space-controlGap)",
-								padding: "var(--space-controlGap)",
-								backgroundColor: "var(--color-bg-sunken)",
-								borderRadius: "var(--radius-button)"
-							},
-							children: [/* @__PURE__ */ g("button", {
-								type: "button",
-								disabled: _ || E,
-								onClick: () => {
-									R("blank"), J(null);
-								},
-								style: {
-									flex: 1,
-									display: "flex",
-									alignItems: "center",
-									justifyContent: "center",
-									gap: "var(--space-iconGap)",
-									padding: "var(--space-controlGap) var(--space-formGap)",
-									borderRadius: "var(--radius-button)",
-									border: "none",
-									backgroundColor: L === "blank" ? "var(--color-bg-surface)" : "transparent",
-									color: L === "blank" ? "var(--color-text-primary)" : "var(--color-text-secondary)",
-									fontWeight: L === "blank" ? "var(--font-weight-semibold)" : "var(--font-weight-regular)",
-									fontSize: "var(--font-size-body-sm)",
-									cursor: "pointer",
-									boxShadow: L === "blank" ? "var(--shadow-elevation-1)" : "none",
-									transition: "all 0.15s ease"
-								},
-								children: [/* @__PURE__ */ h(l, { style: {
-									height: "var(--size-icon-sm)",
-									width: "var(--size-icon-sm)"
-								} }), S("bigconsole.dashboards.createDialog.tab.blank", "Blank Dashboard")]
-							}), /* @__PURE__ */ g("button", {
-								type: "button",
-								disabled: _ || E,
-								onClick: () => R("template"),
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					minHeight: 0,
+					flex: "1 1 auto"
+				},
+				children: [/* @__PURE__ */ g("div", {
+					style: {
+						overflowY: "auto",
+						minHeight: 0,
+						flex: "1 1 auto"
+					},
+					children: [
+						b && /* @__PURE__ */ h("div", {
+							style: { padding: "var(--space-pagePadding) var(--space-pagePadding) 0" },
+							children: /* @__PURE__ */ g("div", {
+								role: "group",
+								"aria-label": "How to start",
 								style: {
-									flex: 1,
 									display: "flex",
-									alignItems: "center",
-									justifyContent: "center",
-									gap: "var(--space-iconGap)",
-									padding: "var(--space-controlGap) var(--space-formGap)",
-									borderRadius: "var(--radius-button)",
-									border: "none",
-									backgroundColor: L === "template" ? "var(--color-bg-surface)" : "transparent",
-									color: L === "template" ? "var(--color-text-primary)" : "var(--color-text-secondary)",
-									fontWeight: L === "template" ? "var(--font-weight-semibold)" : "var(--font-weight-regular)",
-									fontSize: "var(--font-size-body-sm)",
-									cursor: "pointer",
-									boxShadow: L === "template" ? "var(--shadow-elevation-1)" : "none",
-									transition: "all 0.15s ease"
+									flexWrap: "wrap",
+									gap: "var(--space-controlGap)",
+									padding: "var(--space-controlGap)",
+									backgroundColor: "var(--color-bg-sunken)",
+									borderRadius: "var(--radius-button)"
 								},
-								children: [/* @__PURE__ */ h(re, { style: {
-									height: "var(--size-icon-sm)",
-									width: "var(--size-icon-sm)"
-								} }), S("bigconsole.dashboards.createDialog.tab.template", "From Template")]
-							})]
-						})
-					}),
-					L === "template" && /* @__PURE__ */ h("div", {
-						style: {
-							padding: "var(--space-pagePadding)",
-							maxHeight: "400px",
-							overflowY: "auto"
-						},
-						children: /* @__PURE__ */ h(t, {
-							templates: ge,
-							loading: _e,
-							error: C,
-							selectedTemplateId: q?.id,
-							onSelect: Ce
-						})
-					}),
-					L === "template" && q && /* @__PURE__ */ g("div", {
-						style: { padding: "var(--space-pagePadding)" },
-						children: [j && /* @__PURE__ */ h(p, {}), Q && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(r, { content: Q }), /* @__PURE__ */ h(n, {
-							content: Q,
-							bindings: N,
-							onBindingChange: (e, t) => P((n) => ({
-								...n,
-								[e]: t
-							})),
-							inputValues: F,
-							onInputChange: (e, t) => I((n) => ({
-								...n,
-								[e]: t
-							})),
-							disabled: _ || E
-						})] })]
-					}),
-					/* @__PURE__ */ h("div", {
-						style: { padding: "var(--space-pagePadding)" },
-						children: /* @__PURE__ */ g(e, {
-							headingLevel: 3,
-							emphasis: "bare",
-							padding: "none",
-							title: "Dashboard details",
-							description: "Name it now — everything else can change later.",
-							"data-testid": "create-dashboard-details",
-							children: [
-								/* @__PURE__ */ g("div", {
-									style: { marginBottom: "var(--space-formGap)" },
-									children: [
-										/* @__PURE__ */ g("label", {
-											htmlFor: "dashboard-name",
+								children: [/* @__PURE__ */ g("button", {
+									type: "button",
+									disabled: _ || E,
+									onClick: () => {
+										R("blank"), J(null);
+									},
+									style: {
+										flex: 1,
+										display: "flex",
+										alignItems: "center",
+										justifyContent: "center",
+										gap: "var(--space-iconGap)",
+										padding: "var(--space-controlGap) var(--space-formGap)",
+										borderRadius: "var(--radius-button)",
+										border: "none",
+										backgroundColor: L === "blank" ? "var(--color-bg-surface)" : "transparent",
+										color: L === "blank" ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+										fontWeight: L === "blank" ? "var(--font-weight-semibold)" : "var(--font-weight-regular)",
+										fontSize: "var(--font-size-body-sm)",
+										cursor: "pointer",
+										boxShadow: L === "blank" ? "var(--shadow-elevation-1)" : "none",
+										transition: "all 0.15s ease"
+									},
+									children: [/* @__PURE__ */ h(u, { style: {
+										height: "var(--size-icon-sm)",
+										width: "var(--size-icon-sm)"
+									} }), S("bigconsole.dashboards.createDialog.tab.blank", "Blank Dashboard")]
+								}), /* @__PURE__ */ g("button", {
+									type: "button",
+									disabled: _ || E,
+									onClick: () => R("template"),
+									style: {
+										flex: 1,
+										display: "flex",
+										alignItems: "center",
+										justifyContent: "center",
+										gap: "var(--space-iconGap)",
+										padding: "var(--space-controlGap) var(--space-formGap)",
+										borderRadius: "var(--radius-button)",
+										border: "none",
+										backgroundColor: L === "template" ? "var(--color-bg-surface)" : "transparent",
+										color: L === "template" ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+										fontWeight: L === "template" ? "var(--font-weight-semibold)" : "var(--font-weight-regular)",
+										fontSize: "var(--font-size-body-sm)",
+										cursor: "pointer",
+										boxShadow: L === "template" ? "var(--shadow-elevation-1)" : "none",
+										transition: "all 0.15s ease"
+									},
+									children: [/* @__PURE__ */ h(ne, { style: {
+										height: "var(--size-icon-sm)",
+										width: "var(--size-icon-sm)"
+									} }), S("bigconsole.dashboards.createDialog.tab.template", "From Template")]
+								})]
+							})
+						}),
+						L === "template" && /* @__PURE__ */ h("div", {
+							style: {
+								padding: "var(--space-pagePadding)",
+								maxHeight: "400px",
+								overflowY: "auto"
+							},
+							children: /* @__PURE__ */ h(t, {
+								templates: ge,
+								loading: _e,
+								error: C,
+								selectedTemplateId: q?.id,
+								onSelect: Ce
+							})
+						}),
+						L === "template" && q && /* @__PURE__ */ g("div", {
+							style: { padding: "var(--space-pagePadding)" },
+							children: [j && /* @__PURE__ */ h(m, {}), Q && /* @__PURE__ */ g(pe, { children: [/* @__PURE__ */ h(r, { content: Q }), /* @__PURE__ */ h(n, {
+								content: Q,
+								bindings: N,
+								onBindingChange: (e, t) => P((n) => ({
+									...n,
+									[e]: t
+								})),
+								inputValues: F,
+								onInputChange: (e, t) => I((n) => ({
+									...n,
+									[e]: t
+								})),
+								disabled: _ || E
+							})] })]
+						}),
+						/* @__PURE__ */ h("div", {
+							style: { padding: "var(--space-pagePadding)" },
+							children: /* @__PURE__ */ g(e, {
+								headingLevel: 3,
+								emphasis: "bare",
+								padding: "none",
+								title: "Dashboard details",
+								description: "Name it now — everything else can change later.",
+								"data-testid": "create-dashboard-details",
+								children: [
+									/* @__PURE__ */ g("div", {
+										style: { marginBottom: "var(--space-formGap)" },
+										children: [
+											/* @__PURE__ */ g("label", {
+												htmlFor: "dashboard-name",
+												style: {
+													display: "block",
+													fontSize: "var(--font-size-body-sm)",
+													fontWeight: "var(--font-weight-semibold)",
+													color: "var(--color-text-primary)",
+													marginBottom: "var(--space-controlGap)"
+												},
+												children: [S("bigconsole.dashboards.createDialog.field.name", "Dashboard Name"), /* @__PURE__ */ h("span", {
+													style: {
+														color: "var(--color-status-error-text)",
+														marginLeft: "var(--space-controlGap)"
+													},
+													children: "*"
+												})]
+											}),
+											/* @__PURE__ */ h(p, {
+												ref: Z,
+												id: "dashboard-name",
+												type: "text",
+												value: z,
+												onChange: (e) => {
+													B(e.target.value), Y && X(null);
+												},
+												placeholder: S("bigconsole.dashboards.createDialog.field.namePlaceholder", "Enter dashboard name"),
+												disabled: _ || E,
+												style: {
+													height: "var(--size-controlHeight-md)",
+													fontSize: "var(--font-size-body-sm)",
+													borderColor: Y ? "var(--color-status-error-border)" : void 0
+												}
+											}),
+											Y && /* @__PURE__ */ h("p", {
+												style: {
+													fontSize: "var(--font-size-body-sm)",
+													color: "var(--color-status-error-text)",
+													marginTop: "var(--space-controlGap)",
+													fontWeight: "var(--font-weight-medium)"
+												},
+												children: Y
+											})
+										]
+									}),
+									/* @__PURE__ */ g("div", {
+										style: { marginBottom: "var(--space-formGap)" },
+										children: [/* @__PURE__ */ g("label", {
+											htmlFor: "dashboard-description",
 											style: {
 												display: "block",
 												fontSize: "var(--font-size-body-sm)",
@@ -315,226 +380,181 @@ var _ = i(function({ isOpen: i, isCreating: _ = !1, onClose: v, onCreate: y, sho
 												color: "var(--color-text-primary)",
 												marginBottom: "var(--space-controlGap)"
 											},
-											children: [S("bigconsole.dashboards.createDialog.field.name", "Dashboard Name"), /* @__PURE__ */ h("span", {
+											children: [S("bigconsole.dashboards.createDialog.field.description", "Description"), /* @__PURE__ */ h("span", {
 												style: {
-													color: "var(--color-status-error-text)",
+													color: "var(--color-text-muted)",
+													fontWeight: "var(--font-weight-regular)",
 													marginLeft: "var(--space-controlGap)"
 												},
-												children: "*"
+												children: S("bigconsole.dashboards.createDialog.field.optional", "(optional)")
 											})]
-										}),
-										/* @__PURE__ */ h(f, {
-											ref: Z,
-											id: "dashboard-name",
-											type: "text",
-											value: z,
-											onChange: (e) => {
-												B(e.target.value), Y && X(null);
-											},
-											placeholder: S("bigconsole.dashboards.createDialog.field.namePlaceholder", "Enter dashboard name"),
+										}), /* @__PURE__ */ h(fe, {
+											id: "dashboard-description",
+											value: V,
+											onChange: (e) => H(e.target.value),
+											placeholder: S("bigconsole.dashboards.createDialog.field.descriptionPlaceholder", "Enter a brief description for this dashboard"),
+											rows: 3,
 											disabled: _ || E,
 											style: {
-												height: "var(--size-controlHeight-md)",
 												fontSize: "var(--font-size-body-sm)",
-												borderColor: Y ? "var(--color-status-error-border)" : void 0
+												resize: "none"
 											}
-										}),
-										Y && /* @__PURE__ */ h("p", {
+										})]
+									}),
+									/* @__PURE__ */ g("div", { children: [
+										/* @__PURE__ */ g("label", {
+											htmlFor: "dashboard-tags",
 											style: {
+												display: "flex",
+												alignItems: "center",
+												gap: "var(--space-iconGap)",
 												fontSize: "var(--font-size-body-sm)",
-												color: "var(--color-status-error-text)",
-												marginTop: "var(--space-controlGap)",
-												fontWeight: "var(--font-weight-medium)"
+												fontWeight: "var(--font-weight-semibold)",
+												color: "var(--color-text-primary)",
+												marginBottom: "var(--space-controlGap)"
 											},
-											children: Y
-										})
-									]
-								}),
-								/* @__PURE__ */ g("div", {
-									style: { marginBottom: "var(--space-formGap)" },
-									children: [/* @__PURE__ */ g("label", {
-										htmlFor: "dashboard-description",
-										style: {
-											display: "block",
-											fontSize: "var(--font-size-body-sm)",
-											fontWeight: "var(--font-weight-semibold)",
-											color: "var(--color-text-primary)",
-											marginBottom: "var(--space-controlGap)"
-										},
-										children: [S("bigconsole.dashboards.createDialog.field.description", "Description"), /* @__PURE__ */ h("span", {
+											children: [
+												/* @__PURE__ */ h(ie, { style: {
+													height: "var(--size-icon-sm)",
+													width: "var(--size-icon-sm)"
+												} }),
+												S("bigconsole.dashboards.createDialog.field.tags", "Tags"),
+												/* @__PURE__ */ h("span", {
+													style: {
+														color: "var(--color-text-muted)",
+														fontWeight: "var(--font-weight-regular)"
+													},
+													children: S("bigconsole.dashboards.createDialog.field.tagsOptional", "(optional, max 10)")
+												})
+											]
+										}),
+										U.length > 0 && /* @__PURE__ */ h("div", {
 											style: {
-												color: "var(--color-text-muted)",
-												fontWeight: "var(--font-weight-regular)",
-												marginLeft: "var(--space-controlGap)"
+												display: "flex",
+												flexWrap: "wrap",
+												gap: "var(--space-controlGap)",
+												marginBottom: "var(--space-controlGap)"
 											},
-											children: S("bigconsole.dashboards.createDialog.field.optional", "(optional)")
-										})]
-									}), /* @__PURE__ */ h(pe, {
-										id: "dashboard-description",
-										value: V,
-										onChange: (e) => H(e.target.value),
-										placeholder: S("bigconsole.dashboards.createDialog.field.descriptionPlaceholder", "Enter a brief description for this dashboard"),
-										rows: 3,
-										disabled: _ || E,
-										style: {
-											fontSize: "var(--font-size-body-sm)",
-											resize: "none"
-										}
-									})]
-								}),
-								/* @__PURE__ */ g("div", { children: [
-									/* @__PURE__ */ g("label", {
-										htmlFor: "dashboard-tags",
-										style: {
-											display: "flex",
-											alignItems: "center",
-											gap: "var(--space-iconGap)",
-											fontSize: "var(--font-size-body-sm)",
-											fontWeight: "var(--font-weight-semibold)",
-											color: "var(--color-text-primary)",
-											marginBottom: "var(--space-controlGap)"
-										},
-										children: [
-											/* @__PURE__ */ h(ae, { style: {
-												height: "var(--size-icon-sm)",
-												width: "var(--size-icon-sm)"
-											} }),
-											S("bigconsole.dashboards.createDialog.field.tags", "Tags"),
-											/* @__PURE__ */ h("span", {
+											children: U.map((e) => /* @__PURE__ */ g(oe, {
+												variant: "secondary",
 												style: {
-													color: "var(--color-text-muted)",
-													fontWeight: "var(--font-weight-regular)"
+													display: "flex",
+													alignItems: "center",
+													gap: "4px",
+													paddingRight: "4px"
 												},
-												children: S("bigconsole.dashboards.createDialog.field.tagsOptional", "(optional, max 10)")
-											})
-										]
-									}),
-									U.length > 0 && /* @__PURE__ */ h("div", {
-										style: {
-											display: "flex",
-											flexWrap: "wrap",
-											gap: "var(--space-controlGap)",
-											marginBottom: "var(--space-controlGap)"
-										},
-										children: U.map((e) => /* @__PURE__ */ g(se, {
-											variant: "secondary",
+												children: [e, /* @__PURE__ */ h("button", {
+													type: "button",
+													onClick: () => xe(e),
+													disabled: _ || E,
+													style: {
+														display: "flex",
+														alignItems: "center",
+														justifyContent: "center",
+														background: "none",
+														border: "none",
+														cursor: "pointer",
+														padding: "2px",
+														borderRadius: "50%",
+														color: "inherit",
+														opacity: .7
+													},
+													onMouseOver: (e) => e.currentTarget.style.opacity = "1",
+													onMouseOut: (e) => e.currentTarget.style.opacity = "0.7",
+													children: /* @__PURE__ */ h(ae, { style: {
+														height: "12px",
+														width: "12px"
+													} })
+												})]
+											}, e))
+										}),
+										/* @__PURE__ */ g("div", {
 											style: {
 												display: "flex",
-												alignItems: "center",
-												gap: "4px",
-												paddingRight: "4px"
+												gap: "var(--space-controlGap)"
 											},
-											children: [e, /* @__PURE__ */ h("button", {
-												type: "button",
-												onClick: () => xe(e),
-												disabled: _ || E,
+											children: [/* @__PURE__ */ h(p, {
+												id: "dashboard-tags",
+												type: "text",
+												value: G,
+												onChange: (e) => K(e.target.value),
+												onKeyDown: Se,
+												placeholder: U.length >= 10 ? S("bigconsole.dashboards.createDialog.field.tagsMaxReached", "Max tags reached") : S("bigconsole.dashboards.createDialog.field.tagsInputPlaceholder", "Type a tag and press Enter"),
+												disabled: _ || E || U.length >= 10,
 												style: {
-													display: "flex",
-													alignItems: "center",
-													justifyContent: "center",
-													background: "none",
-													border: "none",
-													cursor: "pointer",
-													padding: "2px",
-													borderRadius: "50%",
-													color: "inherit",
-													opacity: .7
-												},
-												onMouseOver: (e) => e.currentTarget.style.opacity = "1",
-												onMouseOut: (e) => e.currentTarget.style.opacity = "0.7",
-												children: /* @__PURE__ */ h(oe, { style: {
-													height: "12px",
-													width: "12px"
-												} })
+													flex: 1,
+													height: "var(--size-controlHeight-md)",
+													fontSize: "var(--font-size-body-sm)"
+												}
+											}), /* @__PURE__ */ h(d, {
+												type: "button",
+												variant: "outline",
+												onClick: $,
+												disabled: _ || E || !G.trim() || U.length >= 10,
+												style: { height: "var(--size-controlHeight-md)" },
+												children: S("bigconsole.dashboards.createDialog.action.addTag", "Add")
 											})]
-										}, e))
-									}),
-									/* @__PURE__ */ g("div", {
-										style: {
-											display: "flex",
-											gap: "var(--space-controlGap)"
-										},
-										children: [/* @__PURE__ */ h(f, {
-											id: "dashboard-tags",
-											type: "text",
-											value: G,
-											onChange: (e) => K(e.target.value),
-											onKeyDown: Se,
-											placeholder: U.length >= 10 ? S("bigconsole.dashboards.createDialog.field.tagsMaxReached", "Max tags reached") : S("bigconsole.dashboards.createDialog.field.tagsInputPlaceholder", "Type a tag and press Enter"),
-											disabled: _ || E || U.length >= 10,
+										}),
+										/* @__PURE__ */ h("p", {
 											style: {
-												flex: 1,
-												height: "var(--size-controlHeight-md)",
-												fontSize: "var(--font-size-body-sm)"
-											}
-										}), /* @__PURE__ */ h(u, {
-											type: "button",
-											variant: "outline",
-											onClick: $,
-											disabled: _ || E || !G.trim() || U.length >= 10,
-											style: { height: "var(--size-controlHeight-md)" },
-											children: S("bigconsole.dashboards.createDialog.action.addTag", "Add")
-										})]
-									}),
-									/* @__PURE__ */ h("p", {
-										style: {
-											fontSize: "var(--font-size-xs)",
-											color: "var(--color-text-muted)",
-											marginTop: "var(--space-controlGap)"
-										},
-										children: S("bigconsole.dashboards.createDialog.field.tagsHelp", "Press Enter to add a tag, or click Add")
-									})
-								] })
-							]
+												fontSize: "var(--font-size-xs)",
+												color: "var(--color-text-muted)",
+												marginTop: "var(--space-controlGap)"
+											},
+											children: S("bigconsole.dashboards.createDialog.field.tagsHelp", "Press Enter to add a tag, or click Add")
+										})
+									] })
+								]
+							})
 						})
-					}),
-					/* @__PURE__ */ g(de, {
+					]
+				}), /* @__PURE__ */ g(ue, {
+					style: {
+						padding: "var(--space-formGap) var(--space-pagePadding)",
+						borderTop: "1px solid var(--color-border)",
+						backgroundColor: "var(--color-bg-sunken)",
+						flexShrink: 0,
+						display: "flex",
+						justifyContent: "flex-end",
+						gap: "var(--space-controlGap)"
+					},
+					children: [/* @__PURE__ */ h(d, {
+						type: "button",
+						variant: "outline",
+						onClick: v,
+						disabled: _ || E,
+						style: { height: "var(--size-controlHeight-md)" },
+						children: S("bigconsole.dashboards.createDialog.action.cancel", "Cancel")
+					}), /* @__PURE__ */ h(d, {
+						type: "submit",
+						disabled: _ || E || !z.trim() || L === "template" && (!q || !Q || j),
 						style: {
-							padding: "var(--space-formGap) var(--space-pagePadding)",
-							borderTop: "1px solid var(--color-border)",
-							backgroundColor: "var(--color-bg-sunken)",
-							display: "flex",
-							justifyContent: "flex-end",
-							gap: "var(--space-controlGap)"
+							height: "var(--size-controlHeight-md)",
+							backgroundColor: "var(--color-action-primary-bg)"
 						},
-						children: [/* @__PURE__ */ h(u, {
-							type: "button",
-							variant: "outline",
-							onClick: v,
-							disabled: _ || E,
-							style: { height: "var(--size-controlHeight-md)" },
-							children: S("bigconsole.dashboards.createDialog.action.cancel", "Cancel")
-						}), /* @__PURE__ */ h(u, {
-							type: "submit",
-							disabled: _ || E || !z.trim() || L === "template" && (!q || !Q || j),
+						children: _ || E ? /* @__PURE__ */ g("span", {
 							style: {
-								height: "var(--size-controlHeight-md)",
-								backgroundColor: "var(--color-action-primary-bg)"
+								display: "flex",
+								alignItems: "center",
+								gap: "var(--space-iconGap)"
 							},
-							children: _ || E ? /* @__PURE__ */ g("span", {
-								style: {
-									display: "flex",
-									alignItems: "center",
-									gap: "var(--space-iconGap)"
-								},
-								children: [/* @__PURE__ */ h(p, { style: {
-									height: "var(--size-icon-sm)",
-									width: "var(--size-icon-sm)"
-								} }), S("bigconsole.dashboards.createDialog.action.creating", "Creating...")]
-							}) : /* @__PURE__ */ g("span", {
-								style: {
-									display: "flex",
-									alignItems: "center",
-									gap: "var(--space-iconGap)"
-								},
-								children: [/* @__PURE__ */ h(l, { style: {
-									height: "var(--size-icon-sm)",
-									width: "var(--size-icon-sm)"
-								} }), S("bigconsole.dashboards.createDialog.action.create", "Create Dashboard")]
-							})
-						})]
-					})
-				]
+							children: [/* @__PURE__ */ h(m, { style: {
+								height: "var(--size-icon-sm)",
+								width: "var(--size-icon-sm)"
+							} }), S("bigconsole.dashboards.createDialog.action.creating", "Creating...")]
+						}) : /* @__PURE__ */ g("span", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "var(--space-iconGap)"
+							},
+							children: [/* @__PURE__ */ h(u, { style: {
+								height: "var(--size-icon-sm)",
+								width: "var(--size-icon-sm)"
+							} }), S("bigconsole.dashboards.createDialog.action.create", "Create Dashboard")]
+						})
+					})]
+				})]
 			})]
 		})
 	});