@burdenoff/microfe-bigconsole 2026.1029.3 → 2026.1030.1

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

@@ -1,149 +1,172 @@
-import { Section as e } from "../common/Section.js";
+import { classifyBigConsoleQuotaError as e } from "../../utils/quota.js";
+import { useBigConsoleViewBilling as t } from "../../providers/BigConsoleQuotaProvider.js";
+import { Section as n } from "../common/Section.js";
 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 { 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";
+import r from "./StoreTemplatePicker.js";
+import { TemplateInstallOptions as ee } from "./TemplateInstallOptions.js";
+import { TemplateLayoutPreview as te } from "./TemplateLayoutPreview.js";
+import { templateInputDefaults as ne, templateInputError as re } from "../../utils/templateInstallInputs.js";
+import ie from "../../hooks/useStoreDashboardTemplates.js";
+import ae from "./QuotaLimitNotice.js";
+import { memo as i, useCallback as a, useEffect as o, useMemo as oe, useRef as s, useState as c } from "react";
+import { Copy as se, LayoutDashboard as ce, Plus as l, Tag as le, X as ue } from "lucide-react";
+import { Badge as de, Button as u, Dialog as fe, DialogContent as pe, DialogDescription as me, DialogFooter as he, DialogHeader as ge, DialogTitle as _e, Input as d, Spinner as f, Textarea as ve } from "@burdenoff/fe-libs/ui";
+import { useI18n as ye } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Fragment as be, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useActiveContext as xe } 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);
-	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;
+var h = i(function({ isOpen: i, isCreating: h = !1, onClose: g, onCreate: _, showTemplates: v = !0, onTemplateInstalled: y }) {
+	let { t: b } = ye(), { templates: Se, loading: Ce, error: we, fetchTemplateContent: x, installTemplate: S } = ie({ autoLoad: v }), [C, w] = c(!1), { workspaceId: T } = xe(), E = s(T);
+	E.current = T;
+	let [Te, D] = c(null), [Ee, De] = c(null), [O, k] = c(!1), [A, j] = c({}), [M, N] = c({}), [P, F] = c("blank"), [I, L] = c(""), [R, z] = c(""), [B, V] = c([]), [H, U] = c(""), [W, G] = c(null), [K, q] = c(null), [J, Y] = c(null), X = t(), Z = s(null), Q = Ee === `${W?.id}:${T}` ? Te : null;
 	o(() => {
-		i && (R("blank"), B(""), H(""), W([]), K(""), J(null), X(null), setTimeout(() => {
+		i && (F("blank"), L(""), z(""), V([]), U(""), G(null), q(null), Y(null), setTimeout(() => {
 			Z.current?.focus();
 		}, 100));
 	}, [i]);
 	let $ = a(() => {
-		let e = G.trim().toLowerCase();
-		e && !U.includes(e) && U.length < 10 && (W((t) => [...t, e]), K(""));
-	}, [G, U]);
+		let e = H.trim().toLowerCase();
+		e && !B.includes(e) && B.length < 10 && (V((t) => [...t, e]), U(""));
+	}, [H, B]);
 	o(() => {
 		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 (D(null), j({}), N({}), k(!!W), !(!W || !i)) return x(W.id).then((t) => {
+			e || (D(t), De(`${W.id}:${T}`), k(!1), N(t ? ne(t.requiredInputs) : {}), t || q(b("bigconsole.dashboards.createDialog.error.noDefinition", "This template has no dashboard definition attached and cannot be installed.")));
 		}), () => {
 			e = !0;
 		};
 	}, [
-		q,
-		w,
-		O,
+		W,
+		x,
+		T,
 		i,
-		S
+		b
 	]);
-	let xe = a((e) => {
-		W((t) => t.filter((t) => t !== e));
-	}, []), Se = a((e) => {
-		e.key === "Enter" ? (e.preventDefault(), $()) : e.key === "Backspace" && !G && U.length > 0 && W((e) => e.slice(0, -1));
+	let Oe = a((e) => {
+		V((t) => t.filter((t) => t !== e));
+	}, []), ke = a((e) => {
+		e.key === "Enter" ? (e.preventDefault(), $()) : e.key === "Backspace" && !H && B.length > 0 && V((e) => e.slice(0, -1));
 	}, [
 		$,
-		G,
-		U.length
-	]), Ce = a((e) => {
-		J(e), X(null), B(e.name), H(e.description || "");
-	}, []), we = a(async (e) => {
-		if (e.preventDefault(), L === "template" && !q) {
-			X(S("bigconsole.dashboards.createDialog.error.selectTemplate", "Please select a template"));
+		H,
+		B.length
+	]), Ae = a((e) => {
+		G(e), q(null), L(e.name), z(e.description || "");
+	}, []), je = a(async (t) => {
+		if (t.preventDefault(), P === "template" && !W) {
+			q(b("bigconsole.dashboards.createDialog.error.selectTemplate", "Please select a template"));
 			return;
 		}
-		let t = z.trim();
-		if (!t) {
-			X(S("bigconsole.dashboards.createDialog.error.nameRequired", "Dashboard name is required")), Z.current?.focus();
+		let n = I.trim();
+		if (!n) {
+			q(b("bigconsole.dashboards.createDialog.error.nameRequired", "Dashboard name is required")), Z.current?.focus();
 			return;
 		}
-		if (t.length < 3) {
-			X(S("bigconsole.dashboards.createDialog.error.nameTooShort", "Dashboard name must be at least 3 characters")), Z.current?.focus();
+		if (n.length < 3) {
+			q(b("bigconsole.dashboards.createDialog.error.nameTooShort", "Dashboard name must be at least 3 characters")), Z.current?.focus();
 			return;
 		}
-		if (t.length > 100) {
-			X(S("bigconsole.dashboards.createDialog.error.nameTooLong", "Dashboard name must be less than 100 characters")), Z.current?.focus();
+		if (n.length > 100) {
+			q(b("bigconsole.dashboards.createDialog.error.nameTooLong", "Dashboard name must be less than 100 characters")), Z.current?.focus();
 			return;
 		}
-		if (X(null), L === "template" && q) {
-			D(!0);
+		if (q(null), Y(null), P === "template" && W) {
+			w(!0);
 			try {
-				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."));
+				let e = await x(W.id);
+				if (E.current !== T) {
+					q(b("bigconsole.dashboards.templateSetup.workspaceChanged", "The workspace changed. Review the template setup before creating your dashboard."));
 					return;
 				}
 				if (!e) {
-					X(S("bigconsole.dashboards.createDialog.error.noDefinition", "This template has no dashboard definition attached and cannot be installed."));
+					q(b("bigconsole.dashboards.createDialog.error.noDefinition", "This template has no dashboard definition attached and cannot be installed."));
 					return;
 				}
-				let n = te(e.requiredInputs, F, S);
-				if (n) {
-					X(n);
+				let t = re(e.requiredInputs, M, b);
+				if (t) {
+					q(t);
 					return;
 				}
-				let r = await T({
-					templateId: q.id,
-					templateName: q.name,
+				let r = await S({
+					templateId: W.id,
+					templateName: W.name,
 					content: e,
-					name: t,
-					description: V.trim(),
-					tags: U,
-					dataSinkBindings: Object.entries(N).filter(([, e]) => e).map(([e, t]) => ({
+					name: n,
+					description: R.trim(),
+					tags: B,
+					dataSinkBindings: Object.entries(A).filter(([, e]) => e).map(([e, t]) => ({
 						slot: e,
 						dataSinkId: t
 					})),
-					inputValues: F
+					inputValues: M
 				});
 				if (!r.success) {
-					X(r.errorMessage ?? S("bigconsole.dashboards.createDialog.error.installFailed", "Failed to create dashboard from template."));
+					q(r.errorMessage ?? b("bigconsole.dashboards.createDialog.error.installFailed", "Failed to create dashboard from template."));
 					return;
 				}
-				r.dashboardId && x?.({
+				r.dashboardId && y?.({
 					dashboardId: r.dashboardId,
 					widgetsNeedingData: r.widgetsNeedingData
-				}), v();
-			} catch (e) {
-				X(e instanceof Error ? e.message : S("bigconsole.dashboards.createDialog.error.installFailed", "Failed to create dashboard from template."));
+				}), g();
+			} catch (t) {
+				let n = e(t, "project");
+				if (n) {
+					Y(n);
+					return;
+				}
+				q(t instanceof Error ? t.message : b("bigconsole.dashboards.createDialog.error.installFailed", "Failed to create dashboard from template."));
 			} finally {
-				D(!1);
+				w(!1);
 			}
 			return;
 		}
 		try {
-			await y({
-				name: t,
-				description: V.trim(),
+			await _({
+				name: n,
+				description: R.trim(),
 				category: "CUSTOM",
-				tags: U.length > 0 ? U : void 0
+				tags: B.length > 0 ? B : void 0
 			});
-		} catch (e) {
-			X(e instanceof Error ? e.message : S("bigconsole.dashboards.createDialog.error.createFailed", "Failed to create dashboard. Please try again."));
+		} catch (t) {
+			let n = e(t, "project");
+			if (n) {
+				Y(n);
+				return;
+			}
+			q(t instanceof Error ? t.message : b("bigconsole.dashboards.createDialog.error.createFailed", "Failed to create dashboard. Please try again."));
 		}
 	}, [
-		z,
-		V,
-		U,
-		L,
-		q,
-		O,
-		N,
-		F,
-		y,
-		v,
-		w,
+		I,
+		R,
+		B,
+		P,
+		W,
 		T,
+		A,
+		M,
+		_,
+		g,
 		x,
-		S
+		S,
+		y,
+		b
+	]), Me = a(() => Y(null), []), Ne = oe(() => {
+		if (!X || !J) return;
+		let e = J.kind;
+		return () => {
+			g(), X(e);
+		};
+	}, [
+		X,
+		J,
+		g
 	]);
-	return /* @__PURE__ */ h(ce, {
+	return /* @__PURE__ */ p(fe, {
 		open: i,
-		onOpenChange: (e) => !e && !_ && !E && v(),
-		children: /* @__PURE__ */ g(le, {
+		onOpenChange: (e) => !e && !h && !C && g(),
+		children: /* @__PURE__ */ m(pe, {
 			style: {
-				maxWidth: L === "template" ? "900px" : "480px",
+				maxWidth: P === "template" ? "900px" : "480px",
 				width: "calc(100vw - 2 * var(--space-pagePadding))",
 				maxHeight: "calc(100dvh - 2 * var(--space-pagePadding))",
 				display: "flex",
@@ -151,18 +174,18 @@ var _ = i(function({ isOpen: i, isCreating: _ = !1, onClose: v, onCreate: y, sho
 				overflow: "hidden",
 				padding: 0
 			},
-			children: [/* @__PURE__ */ h(fe, {
+			children: [/* @__PURE__ */ p(ge, {
 				style: {
 					padding: "var(--space-pagePadding) var(--space-pagePadding) 0",
 					flexShrink: 0
 				},
-				children: /* @__PURE__ */ g("div", {
+				children: /* @__PURE__ */ m("div", {
 					style: {
 						display: "flex",
 						alignItems: "center",
 						gap: "var(--space-formGap)"
 					},
-					children: [/* @__PURE__ */ h("div", {
+					children: [/* @__PURE__ */ p("div", {
 						style: {
 							display: "flex",
 							height: "var(--size-controlHeight-lg)",
@@ -173,7 +196,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__ */ p(ce, {
 							"aria-hidden": "true",
 							style: {
 								height: "var(--size-icon-lg)",
@@ -181,152 +204,199 @@ 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__ */ m("div", { children: [/* @__PURE__ */ p(_e, {
 						style: {
 							fontSize: "var(--font-size-heading-h4)",
 							fontWeight: "var(--font-weight-bold)",
 							color: "var(--color-text-primary)",
 							margin: 0
 						},
-						children: S("bigconsole.dashboards.createDialog.title", "Create New Dashboard")
-					}), /* @__PURE__ */ h(ue, {
+						children: b("bigconsole.dashboards.createDialog.title", "Create New Dashboard")
+					}), /* @__PURE__ */ p(me, {
 						style: {
 							fontSize: "var(--font-size-body-sm)",
 							color: "var(--color-text-secondary)",
 							margin: "var(--space-controlGap) 0 0 0"
 						},
-						children: S("bigconsole.dashboards.createDialog.subtitle", "Create a new dashboard to visualize your data")
+						children: b("bigconsole.dashboards.createDialog.subtitle", "Create a new dashboard to visualize your data")
 					})] })]
 				})
-			}), /* @__PURE__ */ g("form", {
-				onSubmit: we,
+			}), /* @__PURE__ */ m("form", {
+				onSubmit: je,
 				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: {
-									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"),
+				children: [
+					/* @__PURE__ */ m("div", {
+						style: {
+							overflowY: "auto",
+							minHeight: 0,
+							flex: "1 1 auto"
+						},
+						children: [
+							v && /* @__PURE__ */ p("div", {
+								style: { padding: "var(--space-pagePadding) var(--space-pagePadding) 0" },
+								children: /* @__PURE__ */ m("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__ */ m("button", {
+										type: "button",
+										disabled: h || C,
+										onClick: () => {
+											F("blank"), G(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: P === "blank" ? "var(--color-bg-surface)" : "transparent",
+											color: P === "blank" ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+											fontWeight: P === "blank" ? "var(--font-weight-semibold)" : "var(--font-weight-regular)",
+											fontSize: "var(--font-size-body-sm)",
+											cursor: "pointer",
+											boxShadow: P === "blank" ? "var(--shadow-elevation-1)" : "none",
+											transition: "all 0.15s ease"
+										},
+										children: [/* @__PURE__ */ p(l, { style: {
+											height: "var(--size-icon-sm)",
+											width: "var(--size-icon-sm)"
+										} }), b("bigconsole.dashboards.createDialog.tab.blank", "Blank Dashboard")]
+									}), /* @__PURE__ */ m("button", {
+										type: "button",
+										disabled: h || C,
+										onClick: () => F("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: P === "template" ? "var(--color-bg-surface)" : "transparent",
+											color: P === "template" ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+											fontWeight: P === "template" ? "var(--font-weight-semibold)" : "var(--font-weight-regular)",
+											fontSize: "var(--font-size-body-sm)",
+											cursor: "pointer",
+											boxShadow: P === "template" ? "var(--shadow-elevation-1)" : "none",
+											transition: "all 0.15s ease"
+										},
+										children: [/* @__PURE__ */ p(se, { style: {
+											height: "var(--size-icon-sm)",
+											width: "var(--size-icon-sm)"
+										} }), b("bigconsole.dashboards.createDialog.tab.template", "From Template")]
+									})]
+								})
+							}),
+							P === "template" && /* @__PURE__ */ p("div", {
+								style: {
+									padding: "var(--space-pagePadding)",
+									maxHeight: "400px",
+									overflowY: "auto"
+								},
+								children: /* @__PURE__ */ p(r, {
+									templates: Se,
+									loading: Ce,
+									error: we,
+									selectedTemplateId: W?.id,
+									onSelect: Ae
+								})
+							}),
+							P === "template" && W && /* @__PURE__ */ m("div", {
+								style: { padding: "var(--space-pagePadding)" },
+								children: [O && /* @__PURE__ */ p(f, {}), Q && /* @__PURE__ */ m(be, { children: [/* @__PURE__ */ p(te, { content: Q }), /* @__PURE__ */ p(ee, {
+									content: Q,
+									bindings: A,
+									onBindingChange: (e, t) => j((n) => ({
+										...n,
+										[e]: t
+									})),
+									inputValues: M,
+									onInputChange: (e, t) => N((n) => ({
+										...n,
+										[e]: t
+									})),
+									disabled: h || C
+								})] })]
+							}),
+							/* @__PURE__ */ p("div", {
+								style: { padding: "var(--space-pagePadding)" },
+								children: /* @__PURE__ */ m(n, {
+									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__ */ m("div", {
+											style: { marginBottom: "var(--space-formGap)" },
+											children: [
+												/* @__PURE__ */ m("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: [b("bigconsole.dashboards.createDialog.field.name", "Dashboard Name"), /* @__PURE__ */ p("span", {
+														style: {
+															color: "var(--color-status-error-text)",
+															marginLeft: "var(--space-controlGap)"
+														},
+														children: "*"
+													})]
+												}),
+												/* @__PURE__ */ p(d, {
+													ref: Z,
+													id: "dashboard-name",
+													type: "text",
+													value: I,
+													onChange: (e) => {
+														L(e.target.value), K && q(null);
+													},
+													placeholder: b("bigconsole.dashboards.createDialog.field.namePlaceholder", "Enter dashboard name"),
+													disabled: h || C,
+													style: {
+														height: "var(--size-controlHeight-md)",
+														fontSize: "var(--font-size-body-sm)",
+														borderColor: K ? "var(--color-status-error-border)" : void 0
+													}
+												}),
+												K && /* @__PURE__ */ p("p", {
+													style: {
+														fontSize: "var(--font-size-body-sm)",
+														color: "var(--color-status-error-text)",
+														marginTop: "var(--space-controlGap)",
+														fontWeight: "var(--font-weight-medium)"
+													},
+													children: K
+												})
+											]
+										}),
+										/* @__PURE__ */ m("div", {
+											style: { marginBottom: "var(--space-formGap)" },
+											children: [/* @__PURE__ */ m("label", {
+												htmlFor: "dashboard-description",
 												style: {
 													display: "block",
 													fontSize: "var(--font-size-body-sm)",
@@ -334,230 +404,197 @@ 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: [b("bigconsole.dashboards.createDialog.field.description", "Description"), /* @__PURE__ */ p("span", {
 													style: {
-														color: "var(--color-status-error-text)",
+														color: "var(--color-text-muted)",
+														fontWeight: "var(--font-weight-regular)",
 														marginLeft: "var(--space-controlGap)"
 													},
-													children: "*"
+													children: b("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"),
-												disabled: _ || E,
+											}), /* @__PURE__ */ p(ve, {
+												id: "dashboard-description",
+												value: R,
+												onChange: (e) => z(e.target.value),
+												placeholder: b("bigconsole.dashboards.createDialog.field.descriptionPlaceholder", "Enter a brief description for this dashboard"),
+												rows: 3,
+												disabled: h || C,
 												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__ */ m("div", { children: [
+											/* @__PURE__ */ m("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__ */ p(le, { style: {
+														height: "var(--size-icon-sm)",
+														width: "var(--size-icon-sm)"
+													} }),
+													b("bigconsole.dashboards.createDialog.field.tags", "Tags"),
+													/* @__PURE__ */ p("span", {
+														style: {
+															color: "var(--color-text-muted)",
+															fontWeight: "var(--font-weight-regular)"
+														},
+														children: b("bigconsole.dashboards.createDialog.field.tagsOptional", "(optional, max 10)")
+													})
+												]
+											}),
+											B.length > 0 && /* @__PURE__ */ p("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: B.map((e) => /* @__PURE__ */ m(de, {
+													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__ */ p("button", {
+														type: "button",
+														onClick: () => Oe(e),
+														disabled: h || C,
+														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__ */ p(ue, { style: {
+															height: "12px",
+															width: "12px"
+														} })
+													})]
+												}, e))
+											}),
+											/* @__PURE__ */ m("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__ */ p(d, {
+													id: "dashboard-tags",
+													type: "text",
+													value: H,
+													onChange: (e) => U(e.target.value),
+													onKeyDown: ke,
+													placeholder: B.length >= 10 ? b("bigconsole.dashboards.createDialog.field.tagsMaxReached", "Max tags reached") : b("bigconsole.dashboards.createDialog.field.tagsInputPlaceholder", "Type a tag and press Enter"),
+													disabled: h || C || B.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__ */ p(u, {
+													type: "button",
+													variant: "outline",
+													onClick: $,
+													disabled: h || C || !H.trim() || B.length >= 10,
+													style: { height: "var(--size-controlHeight-md)" },
+													children: b("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__ */ p("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: b("bigconsole.dashboards.createDialog.field.tagsHelp", "Press Enter to add a tag, or click Add")
+											})
+										] })
+									]
+								})
 							})
+						]
+					}),
+					J && /* @__PURE__ */ p("div", {
+						style: {
+							padding: "var(--space-formGap) var(--space-pagePadding) 0",
+							flexShrink: 0
+						},
+						children: /* @__PURE__ */ p(ae, {
+							quota: J,
+							onViewBilling: Ne,
+							onDismiss: Me
 						})
-					]
-				}), /* @__PURE__ */ g(de, {
-					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(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),
+					}),
+					/* @__PURE__ */ m(he, {
 						style: {
-							height: "var(--size-controlHeight-md)",
-							backgroundColor: "var(--color-action-primary-bg)"
+							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: _ || 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", {
+						children: [/* @__PURE__ */ p(u, {
+							type: "button",
+							variant: "outline",
+							onClick: g,
+							disabled: h || C,
+							style: { height: "var(--size-controlHeight-md)" },
+							children: b("bigconsole.dashboards.createDialog.action.cancel", "Cancel")
+						}), /* @__PURE__ */ p(u, {
+							type: "submit",
+							disabled: h || C || J !== null || !I.trim() || P === "template" && (!W || !Q || O),
 							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "var(--space-iconGap)"
+								height: "var(--size-controlHeight-md)",
+								backgroundColor: "var(--color-action-primary-bg)"
 							},
-							children: [/* @__PURE__ */ h(l, { style: {
-								height: "var(--size-icon-sm)",
-								width: "var(--size-icon-sm)"
-							} }), S("bigconsole.dashboards.createDialog.action.create", "Create Dashboard")]
-						})
-					})]
-				})]
+							children: h || C ? /* @__PURE__ */ m("span", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: "var(--space-iconGap)"
+								},
+								children: [/* @__PURE__ */ p(f, { style: {
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} }), b("bigconsole.dashboards.createDialog.action.creating", "Creating...")]
+							}) : /* @__PURE__ */ m("span", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: "var(--space-iconGap)"
+								},
+								children: [/* @__PURE__ */ p(l, { style: {
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} }), b("bigconsole.dashboards.createDialog.action.create", "Create Dashboard")]
+							})
+						})]
+					})
+				]
 			})]
 		})
 	});
 });
 //#endregion
-export { _ as default };
+export { h as default };