@burdenoff/microfe-bigconsole 2026.1001.4 → 2026.1001.5

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

@@ -1,121 +1,161 @@
 import { Section as e } from "../common/Section.js";
 import "../common/index.js";
 import t from "./StoreTemplatePicker.js";
-import n from "../../hooks/useStoreDashboardTemplates.js";
-import { memo as r, useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
-import { Copy as c, LayoutDashboard as l, Plus as u, Tag as d, X as f } from "lucide-react";
-import { Badge as p, Button as m, Dialog as ee, DialogContent as te, DialogDescription as h, DialogFooter as g, DialogHeader as _, DialogTitle as v, Input as y, Spinner as b, Textarea as x } from "@burdenoff/fe-libs/ui";
-import { jsx as S, jsxs as C } from "react/jsx-runtime";
-import { useI18n as w } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { TemplateInstallOptions as n } from "./TemplateInstallOptions.js";
+import { TemplateLayoutPreview as r } from "./TemplateLayoutPreview.js";
+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 { useActiveContext as he } from "@burdenoff/fe-libs/shared/providers/shell/ActiveContextProvider";
 //#region src/bigconsole/components/dashboard/CreateDashboardDialog.tsx
-var T = r(function({ isOpen: r, isCreating: T = !1, onClose: E, onCreate: D, showTemplates: O = !0, onTemplateInstalled: k }) {
-	let { t: A } = w(), { templates: j, loading: M, error: N, fetchTemplateContent: P, installTemplate: F } = n({ autoLoad: O }), [I, L] = s(!1), [R, z] = s("blank"), [B, V] = s(""), [H, U] = s(""), [W, G] = s([]), [K, q] = s(""), [J, Y] = s(null), [X, Z] = s(null), Q = o(null);
-	a(() => {
-		r && (z("blank"), V(""), U(""), G([]), q(""), Y(null), Z(null), setTimeout(() => {
-			Q.current?.focus();
+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] = 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));
-	}, [r]);
-	let $ = i(() => {
-		let e = K.trim().toLowerCase();
-		e && !W.includes(e) && W.length < 10 && (G((t) => [...t, e]), q(""));
-	}, [K, W]), ne = i((e) => {
-		G((t) => t.filter((t) => t !== e));
-	}, []), re = i((e) => {
-		e.key === "Enter" ? (e.preventDefault(), $()) : e.key === "Backspace" && !K && W.length > 0 && G((e) => e.slice(0, -1));
+	}, [a]);
+	let $ = o(() => {
+		let e = G.trim().toLowerCase();
+		e && !U.includes(e) && U.length < 10 && (W((t) => [...t, e]), K(""));
+	}, [G, U]);
+	s(() => {
+		let e = !1;
+		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;
+		};
+	}, [
+		q,
+		w,
+		O,
+		a,
+		S
+	]);
+	let xe = o((e) => {
+		W((t) => t.filter((t) => t !== e));
+	}, []), Se = o((e) => {
+		e.key === "Enter" ? (e.preventDefault(), $()) : e.key === "Backspace" && !G && U.length > 0 && W((e) => e.slice(0, -1));
 	}, [
 		$,
-		K,
-		W.length
-	]), ie = i((e) => {
-		Y(e), V(e.name), U(e.description || "");
-	}, []), ae = i(async (e) => {
-		if (e.preventDefault(), R === "template" && !J) {
-			Z(A("bigconsole.dashboards.createDialog.error.selectTemplate", "Please select a template"));
+		G,
+		U.length
+	]), Ce = o((e) => {
+		J(e), X(null), B(e.name), H(e.description || "");
+	}, []), we = o(async (e) => {
+		if (e.preventDefault(), L === "template" && !q) {
+			X(S("bigconsole.dashboards.createDialog.error.selectTemplate", "Please select a template"));
 			return;
 		}
-		let t = B.trim();
+		let t = z.trim();
 		if (!t) {
-			Z(A("bigconsole.dashboards.createDialog.error.nameRequired", "Dashboard name is required")), Q.current?.focus();
+			X(S("bigconsole.dashboards.createDialog.error.nameRequired", "Dashboard name is required")), Z.current?.focus();
 			return;
 		}
 		if (t.length < 3) {
-			Z(A("bigconsole.dashboards.createDialog.error.nameTooShort", "Dashboard name must be at least 3 characters")), Q.current?.focus();
+			X(S("bigconsole.dashboards.createDialog.error.nameTooShort", "Dashboard name must be at least 3 characters")), Z.current?.focus();
 			return;
 		}
 		if (t.length > 100) {
-			Z(A("bigconsole.dashboards.createDialog.error.nameTooLong", "Dashboard name must be less than 100 characters")), Q.current?.focus();
+			X(S("bigconsole.dashboards.createDialog.error.nameTooLong", "Dashboard name must be less than 100 characters")), Z.current?.focus();
 			return;
 		}
-		if (Z(null), R === "template" && J) {
-			L(!0);
+		if (X(null), L === "template" && q) {
+			D(!0);
 			try {
-				let e = await P(J.id);
+				let e = await w(q.id);
+				if (k.current !== O) {
+					X(S("bigconsole.dashboards.templateSetup.workspaceChanged", "The workspace changed. Review the template setup before creating your dashboard."));
+					return;
+				}
 				if (!e) {
-					Z(A("bigconsole.dashboards.createDialog.error.noDefinition", "This template has no dashboard definition attached and cannot be installed."));
+					X(S("bigconsole.dashboards.createDialog.error.noDefinition", "This template has no dashboard definition attached and cannot be installed."));
 					return;
 				}
-				let n = await F({
-					templateId: J.id,
-					templateName: J.name,
+				let n = ee(e.requiredInputs, F, S);
+				if (n) {
+					X(n);
+					return;
+				}
+				let r = await T({
+					templateId: q.id,
+					templateName: q.name,
 					content: e,
-					name: t
+					name: t,
+					description: V.trim(),
+					tags: U,
+					dataSinkBindings: Object.entries(N).filter(([, e]) => e).map(([e, t]) => ({
+						slot: e,
+						dataSinkId: t
+					})),
+					inputValues: F
 				});
-				if (!n.success) {
-					Z(n.errorMessage ?? A("bigconsole.dashboards.createDialog.error.installFailed", "Failed to create dashboard from template."));
+				if (!r.success) {
+					X(r.errorMessage ?? S("bigconsole.dashboards.createDialog.error.installFailed", "Failed to create dashboard from template."));
 					return;
 				}
-				n.dashboardId && k?.({
-					dashboardId: n.dashboardId,
-					widgetsNeedingData: n.widgetsNeedingData
-				}), E();
+				r.dashboardId && x?.({
+					dashboardId: r.dashboardId,
+					widgetsNeedingData: r.widgetsNeedingData
+				}), v();
 			} catch (e) {
-				Z(e instanceof Error ? e.message : A("bigconsole.dashboards.createDialog.error.installFailed", "Failed to create dashboard from template."));
+				X(e instanceof Error ? e.message : S("bigconsole.dashboards.createDialog.error.installFailed", "Failed to create dashboard from template."));
 			} finally {
-				L(!1);
+				D(!1);
 			}
 			return;
 		}
 		try {
-			await D({
+			await y({
 				name: t,
-				description: H.trim(),
+				description: V.trim(),
 				category: "CUSTOM",
-				tags: W.length > 0 ? W : void 0
+				tags: U.length > 0 ? U : void 0
 			});
 		} catch (e) {
-			Z(e instanceof Error ? e.message : A("bigconsole.dashboards.createDialog.error.createFailed", "Failed to create dashboard. Please try again."));
+			X(e instanceof Error ? e.message : S("bigconsole.dashboards.createDialog.error.createFailed", "Failed to create dashboard. Please try again."));
 		}
 	}, [
-		B,
-		H,
-		W,
-		R,
-		J,
-		D,
-		E,
-		P,
+		z,
+		V,
+		U,
+		L,
+		q,
+		O,
+		N,
 		F,
-		k,
-		A
+		y,
+		v,
+		w,
+		T,
+		x,
+		S
 	]);
-	return /* @__PURE__ */ S(ee, {
-		open: r,
-		onOpenChange: (e) => !e && !T && E(),
-		children: /* @__PURE__ */ C(te, {
+	return /* @__PURE__ */ h(se, {
+		open: a,
+		onOpenChange: (e) => !e && !_ && !E && v(),
+		children: /* @__PURE__ */ g(ce, {
 			style: {
-				maxWidth: R === "template" ? "900px" : "480px",
+				maxWidth: L === "template" ? "900px" : "480px",
 				width: "100%",
 				padding: 0
 			},
-			children: [/* @__PURE__ */ S(_, {
+			children: [/* @__PURE__ */ h(de, {
 				style: { padding: "var(--space-pagePadding) var(--space-pagePadding) 0" },
-				children: /* @__PURE__ */ C("div", {
+				children: /* @__PURE__ */ g("div", {
 					style: {
 						display: "flex",
 						alignItems: "center",
 						gap: "var(--space-formGap)"
 					},
-					children: [/* @__PURE__ */ S("div", {
+					children: [/* @__PURE__ */ h("div", {
 						style: {
 							display: "flex",
 							height: "var(--size-controlHeight-lg)",
@@ -126,7 +166,7 @@ var T = r(function({ isOpen: r, isCreating: T = !1, onClose: E, onCreate: D, sho
 							borderRadius: "var(--radius-card)",
 							backgroundColor: "var(--color-bg-accentSubtle)"
 						},
-						children: /* @__PURE__ */ S(l, {
+						children: /* @__PURE__ */ h(re, {
 							"aria-hidden": "true",
 							style: {
 								height: "var(--size-icon-lg)",
@@ -134,29 +174,29 @@ var T = r(function({ isOpen: r, isCreating: T = !1, onClose: E, onCreate: D, sho
 								color: "var(--color-action-primary-bg)"
 							}
 						})
-					}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S(v, {
+					}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h(f, {
 						style: {
 							fontSize: "var(--font-size-heading-h4)",
 							fontWeight: "var(--font-weight-bold)",
 							color: "var(--color-text-primary)",
 							margin: 0
 						},
-						children: A("bigconsole.dashboards.createDialog.title", "Create New Dashboard")
-					}), /* @__PURE__ */ S(h, {
+						children: S("bigconsole.dashboards.createDialog.title", "Create New Dashboard")
+					}), /* @__PURE__ */ h(le, {
 						style: {
 							fontSize: "var(--font-size-body-sm)",
 							color: "var(--color-text-secondary)",
 							margin: "var(--space-controlGap) 0 0 0"
 						},
-						children: A("bigconsole.dashboards.createDialog.subtitle", "Create a new dashboard to visualize your data")
+						children: S("bigconsole.dashboards.createDialog.subtitle", "Create a new dashboard to visualize your data")
 					})] })]
 				})
-			}), /* @__PURE__ */ C("form", {
-				onSubmit: ae,
+			}), /* @__PURE__ */ g("form", {
+				onSubmit: we,
 				children: [
-					O && /* @__PURE__ */ S("div", {
+					b && /* @__PURE__ */ h("div", {
 						style: { padding: "var(--space-pagePadding) var(--space-pagePadding) 0" },
-						children: /* @__PURE__ */ C("div", {
+						children: /* @__PURE__ */ g("div", {
 							role: "group",
 							"aria-label": "How to start",
 							style: {
@@ -167,10 +207,11 @@ var T = r(function({ isOpen: r, isCreating: T = !1, onClose: E, onCreate: D, sho
 								backgroundColor: "var(--color-bg-sunken)",
 								borderRadius: "var(--radius-button)"
 							},
-							children: [/* @__PURE__ */ C("button", {
+							children: [/* @__PURE__ */ g("button", {
 								type: "button",
+								disabled: _ || E,
 								onClick: () => {
-									z("blank"), Y(null);
+									R("blank"), J(null);
 								},
 								style: {
 									flex: 1,
@@ -181,21 +222,22 @@ var T = r(function({ isOpen: r, isCreating: T = !1, onClose: E, onCreate: D, sho
 									padding: "var(--space-controlGap) var(--space-formGap)",
 									borderRadius: "var(--radius-button)",
 									border: "none",
-									backgroundColor: R === "blank" ? "var(--color-bg-surface)" : "transparent",
-									color: R === "blank" ? "var(--color-text-primary)" : "var(--color-text-secondary)",
-									fontWeight: R === "blank" ? "var(--font-weight-semibold)" : "var(--font-weight-regular)",
+									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: R === "blank" ? "var(--shadow-elevation-1)" : "none",
+									boxShadow: L === "blank" ? "var(--shadow-elevation-1)" : "none",
 									transition: "all 0.15s ease"
 								},
-								children: [/* @__PURE__ */ S(u, { style: {
+								children: [/* @__PURE__ */ h(u, { style: {
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
-								} }), A("bigconsole.dashboards.createDialog.tab.blank", "Blank Dashboard")]
-							}), /* @__PURE__ */ C("button", {
+								} }), S("bigconsole.dashboards.createDialog.tab.blank", "Blank Dashboard")]
+							}), /* @__PURE__ */ g("button", {
 								type: "button",
-								onClick: () => z("template"),
+								disabled: _ || E,
+								onClick: () => R("template"),
 								style: {
 									flex: 1,
 									display: "flex",
@@ -205,38 +247,55 @@ var T = r(function({ isOpen: r, isCreating: T = !1, onClose: E, onCreate: D, sho
 									padding: "var(--space-controlGap) var(--space-formGap)",
 									borderRadius: "var(--radius-button)",
 									border: "none",
-									backgroundColor: R === "template" ? "var(--color-bg-surface)" : "transparent",
-									color: R === "template" ? "var(--color-text-primary)" : "var(--color-text-secondary)",
-									fontWeight: R === "template" ? "var(--font-weight-semibold)" : "var(--font-weight-regular)",
+									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: R === "template" ? "var(--shadow-elevation-1)" : "none",
+									boxShadow: L === "template" ? "var(--shadow-elevation-1)" : "none",
 									transition: "all 0.15s ease"
 								},
-								children: [/* @__PURE__ */ S(c, { style: {
+								children: [/* @__PURE__ */ h(ne, { style: {
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
-								} }), A("bigconsole.dashboards.createDialog.tab.template", "From Template")]
+								} }), S("bigconsole.dashboards.createDialog.tab.template", "From Template")]
 							})]
 						})
 					}),
-					R === "template" && /* @__PURE__ */ S("div", {
+					L === "template" && /* @__PURE__ */ h("div", {
 						style: {
 							padding: "var(--space-pagePadding)",
 							maxHeight: "400px",
 							overflowY: "auto"
 						},
-						children: /* @__PURE__ */ S(t, {
-							templates: j,
-							loading: M,
-							error: N,
-							selectedTemplateId: J?.id,
-							onSelect: ie
+						children: /* @__PURE__ */ h(t, {
+							templates: ge,
+							loading: _e,
+							error: C,
+							selectedTemplateId: q?.id,
+							onSelect: Ce
 						})
 					}),
-					/* @__PURE__ */ S("div", {
+					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__ */ C(e, {
+						children: /* @__PURE__ */ g(e, {
 							headingLevel: 3,
 							emphasis: "bare",
 							padding: "none",
@@ -244,10 +303,10 @@ var T = r(function({ isOpen: r, isCreating: T = !1, onClose: E, onCreate: D, sho
 							description: "Name it now — everything else can change later.",
 							"data-testid": "create-dashboard-details",
 							children: [
-								/* @__PURE__ */ C("div", {
+								/* @__PURE__ */ g("div", {
 									style: { marginBottom: "var(--space-formGap)" },
 									children: [
-										/* @__PURE__ */ C("label", {
+										/* @__PURE__ */ g("label", {
 											htmlFor: "dashboard-name",
 											style: {
 												display: "block",
@@ -256,7 +315,7 @@ var T = r(function({ isOpen: r, isCreating: T = !1, onClose: E, onCreate: D, sho
 												color: "var(--color-text-primary)",
 												marginBottom: "var(--space-controlGap)"
 											},
-											children: [A("bigconsole.dashboards.createDialog.field.name", "Dashboard Name"), /* @__PURE__ */ S("span", {
+											children: [S("bigconsole.dashboards.createDialog.field.name", "Dashboard Name"), /* @__PURE__ */ h("span", {
 												style: {
 													color: "var(--color-status-error-text)",
 													marginLeft: "var(--space-controlGap)"
@@ -264,36 +323,36 @@ var T = r(function({ isOpen: r, isCreating: T = !1, onClose: E, onCreate: D, sho
 												children: "*"
 											})]
 										}),
-										/* @__PURE__ */ S(y, {
-											ref: Q,
+										/* @__PURE__ */ h(p, {
+											ref: Z,
 											id: "dashboard-name",
 											type: "text",
-											value: B,
+											value: z,
 											onChange: (e) => {
-												V(e.target.value), X && Z(null);
+												B(e.target.value), Y && X(null);
 											},
-											placeholder: A("bigconsole.dashboards.createDialog.field.namePlaceholder", "Enter dashboard name"),
-											disabled: T || I,
+											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: X ? "var(--color-status-error-border)" : void 0
+												borderColor: Y ? "var(--color-status-error-border)" : void 0
 											}
 										}),
-										X && /* @__PURE__ */ S("p", {
+										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: X
+											children: Y
 										})
 									]
 								}),
-								/* @__PURE__ */ C("div", {
+								/* @__PURE__ */ g("div", {
 									style: { marginBottom: "var(--space-formGap)" },
-									children: [/* @__PURE__ */ C("label", {
+									children: [/* @__PURE__ */ g("label", {
 										htmlFor: "dashboard-description",
 										style: {
 											display: "block",
@@ -302,29 +361,29 @@ var T = r(function({ isOpen: r, isCreating: T = !1, onClose: E, onCreate: D, sho
 											color: "var(--color-text-primary)",
 											marginBottom: "var(--space-controlGap)"
 										},
-										children: [A("bigconsole.dashboards.createDialog.field.description", "Description"), /* @__PURE__ */ S("span", {
+										children: [S("bigconsole.dashboards.createDialog.field.description", "Description"), /* @__PURE__ */ h("span", {
 											style: {
 												color: "var(--color-text-muted)",
 												fontWeight: "var(--font-weight-regular)",
 												marginLeft: "var(--space-controlGap)"
 											},
-											children: A("bigconsole.dashboards.createDialog.field.optional", "(optional)")
+											children: S("bigconsole.dashboards.createDialog.field.optional", "(optional)")
 										})]
-									}), /* @__PURE__ */ S(x, {
+									}), /* @__PURE__ */ h(fe, {
 										id: "dashboard-description",
-										value: H,
-										onChange: (e) => U(e.target.value),
-										placeholder: A("bigconsole.dashboards.createDialog.field.descriptionPlaceholder", "Enter a brief description for this dashboard"),
+										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: T || I,
+										disabled: _ || E,
 										style: {
 											fontSize: "var(--font-size-body-sm)",
 											resize: "none"
 										}
 									})]
 								}),
-								/* @__PURE__ */ C("div", { children: [
-									/* @__PURE__ */ C("label", {
+								/* @__PURE__ */ g("div", { children: [
+									/* @__PURE__ */ g("label", {
 										htmlFor: "dashboard-tags",
 										style: {
 											display: "flex",
@@ -336,28 +395,28 @@ var T = r(function({ isOpen: r, isCreating: T = !1, onClose: E, onCreate: D, sho
 											marginBottom: "var(--space-controlGap)"
 										},
 										children: [
-											/* @__PURE__ */ S(d, { style: {
+											/* @__PURE__ */ h(ie, { style: {
 												height: "var(--size-icon-sm)",
 												width: "var(--size-icon-sm)"
 											} }),
-											A("bigconsole.dashboards.createDialog.field.tags", "Tags"),
-											/* @__PURE__ */ S("span", {
+											S("bigconsole.dashboards.createDialog.field.tags", "Tags"),
+											/* @__PURE__ */ h("span", {
 												style: {
 													color: "var(--color-text-muted)",
 													fontWeight: "var(--font-weight-regular)"
 												},
-												children: A("bigconsole.dashboards.createDialog.field.tagsOptional", "(optional, max 10)")
+												children: S("bigconsole.dashboards.createDialog.field.tagsOptional", "(optional, max 10)")
 											})
 										]
 									}),
-									W.length > 0 && /* @__PURE__ */ S("div", {
+									U.length > 0 && /* @__PURE__ */ h("div", {
 										style: {
 											display: "flex",
 											flexWrap: "wrap",
 											gap: "var(--space-controlGap)",
 											marginBottom: "var(--space-controlGap)"
 										},
-										children: W.map((e) => /* @__PURE__ */ C(p, {
+										children: U.map((e) => /* @__PURE__ */ g(oe, {
 											variant: "secondary",
 											style: {
 												display: "flex",
@@ -365,10 +424,10 @@ var T = r(function({ isOpen: r, isCreating: T = !1, onClose: E, onCreate: D, sho
 												gap: "4px",
 												paddingRight: "4px"
 											},
-											children: [e, /* @__PURE__ */ S("button", {
+											children: [e, /* @__PURE__ */ h("button", {
 												type: "button",
-												onClick: () => ne(e),
-												disabled: T || I,
+												onClick: () => xe(e),
+												disabled: _ || E,
 												style: {
 													display: "flex",
 													alignItems: "center",
@@ -383,53 +442,53 @@ var T = r(function({ isOpen: r, isCreating: T = !1, onClose: E, onCreate: D, sho
 												},
 												onMouseOver: (e) => e.currentTarget.style.opacity = "1",
 												onMouseOut: (e) => e.currentTarget.style.opacity = "0.7",
-												children: /* @__PURE__ */ S(f, { style: {
+												children: /* @__PURE__ */ h(ae, { style: {
 													height: "12px",
 													width: "12px"
 												} })
 											})]
 										}, e))
 									}),
-									/* @__PURE__ */ C("div", {
+									/* @__PURE__ */ g("div", {
 										style: {
 											display: "flex",
 											gap: "var(--space-controlGap)"
 										},
-										children: [/* @__PURE__ */ S(y, {
+										children: [/* @__PURE__ */ h(p, {
 											id: "dashboard-tags",
 											type: "text",
-											value: K,
-											onChange: (e) => q(e.target.value),
-											onKeyDown: re,
-											placeholder: W.length >= 10 ? A("bigconsole.dashboards.createDialog.field.tagsMaxReached", "Max tags reached") : A("bigconsole.dashboards.createDialog.field.tagsInputPlaceholder", "Type a tag and press Enter"),
-											disabled: T || I || W.length >= 10,
+											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: {
 												flex: 1,
 												height: "var(--size-controlHeight-md)",
 												fontSize: "var(--font-size-body-sm)"
 											}
-										}), /* @__PURE__ */ S(m, {
+										}), /* @__PURE__ */ h(d, {
 											type: "button",
 											variant: "outline",
 											onClick: $,
-											disabled: T || I || !K.trim() || W.length >= 10,
+											disabled: _ || E || !G.trim() || U.length >= 10,
 											style: { height: "var(--size-controlHeight-md)" },
-											children: A("bigconsole.dashboards.createDialog.action.addTag", "Add")
+											children: S("bigconsole.dashboards.createDialog.action.addTag", "Add")
 										})]
 									}),
-									/* @__PURE__ */ S("p", {
+									/* @__PURE__ */ h("p", {
 										style: {
 											fontSize: "var(--font-size-xs)",
 											color: "var(--color-text-muted)",
 											marginTop: "var(--space-controlGap)"
 										},
-										children: A("bigconsole.dashboards.createDialog.field.tagsHelp", "Press Enter to add a tag, or click Add")
+										children: S("bigconsole.dashboards.createDialog.field.tagsHelp", "Press Enter to add a tag, or click Add")
 									})
 								] })
 							]
 						})
 					}),
-					/* @__PURE__ */ C(g, {
+					/* @__PURE__ */ g(ue, {
 						style: {
 							padding: "var(--space-formGap) var(--space-pagePadding)",
 							borderTop: "1px solid var(--color-border)",
@@ -438,40 +497,40 @@ var T = r(function({ isOpen: r, isCreating: T = !1, onClose: E, onCreate: D, sho
 							justifyContent: "flex-end",
 							gap: "var(--space-controlGap)"
 						},
-						children: [/* @__PURE__ */ S(m, {
+						children: [/* @__PURE__ */ h(d, {
 							type: "button",
 							variant: "outline",
-							onClick: E,
-							disabled: T || I,
+							onClick: v,
+							disabled: _ || E,
 							style: { height: "var(--size-controlHeight-md)" },
-							children: A("bigconsole.dashboards.createDialog.action.cancel", "Cancel")
-						}), /* @__PURE__ */ S(m, {
+							children: S("bigconsole.dashboards.createDialog.action.cancel", "Cancel")
+						}), /* @__PURE__ */ h(d, {
 							type: "submit",
-							disabled: T || I || !B.trim(),
+							disabled: _ || E || !z.trim() || L === "template" && (!q || !Q || j),
 							style: {
 								height: "var(--size-controlHeight-md)",
 								backgroundColor: "var(--color-action-primary-bg)"
 							},
-							children: T || I ? /* @__PURE__ */ C("span", {
+							children: _ || E ? /* @__PURE__ */ g("span", {
 								style: {
 									display: "flex",
 									alignItems: "center",
 									gap: "var(--space-iconGap)"
 								},
-								children: [/* @__PURE__ */ S(b, { style: {
+								children: [/* @__PURE__ */ h(m, { style: {
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
-								} }), A("bigconsole.dashboards.createDialog.action.creating", "Creating...")]
-							}) : /* @__PURE__ */ C("span", {
+								} }), S("bigconsole.dashboards.createDialog.action.creating", "Creating...")]
+							}) : /* @__PURE__ */ g("span", {
 								style: {
 									display: "flex",
 									alignItems: "center",
 									gap: "var(--space-iconGap)"
 								},
-								children: [/* @__PURE__ */ S(u, { style: {
+								children: [/* @__PURE__ */ h(u, { style: {
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
-								} }), A("bigconsole.dashboards.createDialog.action.create", "Create Dashboard")]
+								} }), S("bigconsole.dashboards.createDialog.action.create", "Create Dashboard")]
 							})
 						})]
 					})
@@ -481,6 +540,6 @@ var T = r(function({ isOpen: r, isCreating: T = !1, onClose: E, onCreate: D, sho
 	});
 });
 //#endregion
-export { T as default };
+export { _ as default };
 
 //# sourceMappingURL=CreateDashboardDialog.js.map