@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

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

@@ -1,32 +1,34 @@
-import e from "./StoreTemplatePicker.js";
-import t from "../../hooks/useStoreDashboardTemplates.js";
-import { memo as n, useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
-import { Copy as s, LayoutDashboard as c, Plus as l, Tag as u, X as d } from "lucide-react";
+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 ee, LayoutDashboard as c, Plus as l, Tag as u, X as d } from "lucide-react";
 import { useI18n as f } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Badge as p, Button as m, Dialog as h, DialogContent as g, DialogDescription as _, DialogFooter as v, DialogHeader as y, DialogTitle as b, Input as x, Spinner as ee, Textarea as S } from "@burdenoff/fe-libs/ui";
+import { Badge as p, Button as m, Dialog as te, DialogContent as h, DialogDescription as g, DialogFooter as _, DialogHeader as v, DialogTitle as y, Input as b, Spinner as x, Textarea as S } from "@burdenoff/fe-libs/ui";
 import { jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/bigconsole/components/dashboard/CreateDashboardDialog.tsx
-var T = n(function({ isOpen: n, isCreating: T = !1, onClose: E, onCreate: D, showTemplates: O = !0, onTemplateInstalled: k }) {
-	let { t: A } = f(), { templates: j, loading: M, error: N, fetchTemplateContent: P, installTemplate: F } = t({ autoLoad: O }), [I, L] = o(!1), [R, z] = o("blank"), [B, V] = o(""), [H, U] = o(""), [W, G] = o([]), [K, q] = o(""), [J, Y] = o(null), [X, Z] = o(null), Q = a(null);
-	i(() => {
-		n && (z("blank"), V(""), U(""), G([]), q(""), Y(null), Z(null), setTimeout(() => {
+var T = r(function({ isOpen: r, isCreating: T = !1, onClose: E, onCreate: D, showTemplates: O = !0, onTemplateInstalled: k }) {
+	let { t: A } = f(), { 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();
 		}, 100));
-	}, [n]);
-	let $ = r(() => {
+	}, [r]);
+	let $ = i(() => {
 		let e = K.trim().toLowerCase();
 		e && !W.includes(e) && W.length < 10 && (G((t) => [...t, e]), q(""));
-	}, [K, W]), te = r((e) => {
+	}, [K, W]), ne = i((e) => {
 		G((t) => t.filter((t) => t !== e));
-	}, []), ne = r((e) => {
+	}, []), re = i((e) => {
 		e.key === "Enter" ? (e.preventDefault(), $()) : e.key === "Backspace" && !K && W.length > 0 && G((e) => e.slice(0, -1));
 	}, [
 		$,
 		K,
 		W.length
-	]), re = r((e) => {
+	]), ie = i((e) => {
 		Y(e), V(e.name), U(e.description || "");
-	}, []), ie = r(async (e) => {
+	}, []), ae = i(async (e) => {
 		if (e.preventDefault(), R === "template" && !J) {
 			Z(A("bigconsole.dashboards.createDialog.error.selectTemplate", "Please select a template"));
 			return;
@@ -96,16 +98,16 @@ var T = n(function({ isOpen: n, isCreating: T = !1, onClose: E, onCreate: D, sho
 		k,
 		A
 	]);
-	return /* @__PURE__ */ C(h, {
-		open: n,
+	return /* @__PURE__ */ C(te, {
+		open: r,
 		onOpenChange: (e) => !e && !T && E(),
-		children: /* @__PURE__ */ w(g, {
+		children: /* @__PURE__ */ w(h, {
 			style: {
 				maxWidth: R === "template" ? "900px" : "480px",
-				padding: 0,
-				transition: "max-width 0.2s ease"
+				width: "100%",
+				padding: 0
 			},
-			children: [/* @__PURE__ */ C(y, {
+			children: [/* @__PURE__ */ C(v, {
 				style: { padding: "var(--space-pagePadding) var(--space-pagePadding) 0" },
 				children: /* @__PURE__ */ w("div", {
 					style: {
@@ -120,16 +122,19 @@ var T = n(function({ isOpen: n, isCreating: T = !1, onClose: E, onCreate: D, sho
 							width: "var(--size-controlHeight-lg)",
 							alignItems: "center",
 							justifyContent: "center",
+							flexShrink: 0,
 							borderRadius: "var(--radius-card)",
-							backgroundColor: "var(--color-action-primary-bg)",
-							boxShadow: "var(--shadow-elevation-2)"
+							backgroundColor: "var(--color-bg-accentSubtle)"
 						},
-						children: /* @__PURE__ */ C(c, { style: {
-							height: "var(--size-icon-lg)",
-							width: "var(--size-icon-lg)",
-							color: "var(--color-action-primary-text)"
-						} })
-					}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C(b, {
+						children: /* @__PURE__ */ C(c, {
+							"aria-hidden": "true",
+							style: {
+								height: "var(--size-icon-lg)",
+								width: "var(--size-icon-lg)",
+								color: "var(--color-action-primary-bg)"
+							}
+						})
+					}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C(y, {
 						style: {
 							fontSize: "var(--font-size-heading-h4)",
 							fontWeight: "var(--font-weight-bold)",
@@ -137,7 +142,7 @@ var T = n(function({ isOpen: n, isCreating: T = !1, onClose: E, onCreate: D, sho
 							margin: 0
 						},
 						children: A("bigconsole.dashboards.createDialog.title", "Create New Dashboard")
-					}), /* @__PURE__ */ C(_, {
+					}), /* @__PURE__ */ C(g, {
 						style: {
 							fontSize: "var(--font-size-body-sm)",
 							color: "var(--color-text-secondary)",
@@ -147,13 +152,16 @@ var T = n(function({ isOpen: n, isCreating: T = !1, onClose: E, onCreate: D, sho
 					})] })]
 				})
 			}), /* @__PURE__ */ w("form", {
-				onSubmit: ie,
+				onSubmit: ae,
 				children: [
 					O && /* @__PURE__ */ C("div", {
 						style: { padding: "var(--space-pagePadding) var(--space-pagePadding) 0" },
 						children: /* @__PURE__ */ w("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)",
@@ -205,7 +213,7 @@ var T = n(function({ isOpen: n, isCreating: T = !1, onClose: E, onCreate: D, sho
 									boxShadow: R === "template" ? "var(--shadow-elevation-1)" : "none",
 									transition: "all 0.15s ease"
 								},
-								children: [/* @__PURE__ */ C(s, { style: {
+								children: [/* @__PURE__ */ C(ee, { style: {
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
 								} }), A("bigconsole.dashboards.createDialog.tab.template", "From Template")]
@@ -218,22 +226,75 @@ var T = n(function({ isOpen: n, isCreating: T = !1, onClose: E, onCreate: D, sho
 							maxHeight: "400px",
 							overflowY: "auto"
 						},
-						children: /* @__PURE__ */ C(e, {
+						children: /* @__PURE__ */ C(t, {
 							templates: j,
 							loading: M,
 							error: N,
 							selectedTemplateId: J?.id,
-							onSelect: re
+							onSelect: ie
 						})
 					}),
-					/* @__PURE__ */ w("div", {
+					/* @__PURE__ */ C("div", {
 						style: { padding: "var(--space-pagePadding)" },
-						children: [
-							/* @__PURE__ */ w("div", {
-								style: { marginBottom: "var(--space-formGap)" },
-								children: [
-									/* @__PURE__ */ w("label", {
-										htmlFor: "dashboard-name",
+						children: /* @__PURE__ */ w(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__ */ w("div", {
+									style: { marginBottom: "var(--space-formGap)" },
+									children: [
+										/* @__PURE__ */ w("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: [A("bigconsole.dashboards.createDialog.field.name", "Dashboard Name"), /* @__PURE__ */ C("span", {
+												style: {
+													color: "var(--color-status-error-text)",
+													marginLeft: "var(--space-controlGap)"
+												},
+												children: "*"
+											})]
+										}),
+										/* @__PURE__ */ C(b, {
+											ref: Q,
+											id: "dashboard-name",
+											type: "text",
+											value: B,
+											onChange: (e) => {
+												V(e.target.value), X && Z(null);
+											},
+											placeholder: A("bigconsole.dashboards.createDialog.field.namePlaceholder", "Enter dashboard name"),
+											disabled: T || I,
+											style: {
+												height: "var(--size-controlHeight-md)",
+												fontSize: "var(--font-size-body-sm)",
+												borderColor: X ? "var(--color-status-error-border)" : void 0
+											}
+										}),
+										X && /* @__PURE__ */ C("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
+										})
+									]
+								}),
+								/* @__PURE__ */ w("div", {
+									style: { marginBottom: "var(--space-formGap)" },
+									children: [/* @__PURE__ */ w("label", {
+										htmlFor: "dashboard-description",
 										style: {
 											display: "block",
 											fontSize: "var(--font-size-body-sm)",
@@ -241,179 +302,134 @@ var T = n(function({ isOpen: n, 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__ */ C("span", {
+										children: [A("bigconsole.dashboards.createDialog.field.description", "Description"), /* @__PURE__ */ C("span", {
 											style: {
-												color: "var(--color-status-error-text)",
+												color: "var(--color-text-muted)",
+												fontWeight: "var(--font-weight-regular)",
 												marginLeft: "var(--space-controlGap)"
 											},
-											children: "*"
+											children: A("bigconsole.dashboards.createDialog.field.optional", "(optional)")
 										})]
-									}),
-									/* @__PURE__ */ C(x, {
-										ref: Q,
-										id: "dashboard-name",
-										type: "text",
-										value: B,
-										onChange: (e) => {
-											V(e.target.value), X && Z(null);
-										},
-										placeholder: A("bigconsole.dashboards.createDialog.field.namePlaceholder", "Enter dashboard name"),
+									}), /* @__PURE__ */ C(S, {
+										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"),
+										rows: 3,
 										disabled: T || I,
 										style: {
-											height: "var(--size-controlHeight-md)",
 											fontSize: "var(--font-size-body-sm)",
-											borderColor: X ? "var(--color-status-error-border)" : void 0
+											resize: "none"
 										}
-									}),
-									X && /* @__PURE__ */ C("p", {
+									})]
+								}),
+								/* @__PURE__ */ w("div", { children: [
+									/* @__PURE__ */ w("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: X
-									})
-								]
-							}),
-							/* @__PURE__ */ w("div", {
-								style: { marginBottom: "var(--space-formGap)" },
-								children: [/* @__PURE__ */ w("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: [A("bigconsole.dashboards.createDialog.field.description", "Description"), /* @__PURE__ */ C("span", {
+										children: [
+											/* @__PURE__ */ C(u, { style: {
+												height: "var(--size-icon-sm)",
+												width: "var(--size-icon-sm)"
+											} }),
+											A("bigconsole.dashboards.createDialog.field.tags", "Tags"),
+											/* @__PURE__ */ C("span", {
+												style: {
+													color: "var(--color-text-muted)",
+													fontWeight: "var(--font-weight-regular)"
+												},
+												children: A("bigconsole.dashboards.createDialog.field.tagsOptional", "(optional, max 10)")
+											})
+										]
+									}),
+									W.length > 0 && /* @__PURE__ */ C("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: A("bigconsole.dashboards.createDialog.field.optional", "(optional)")
-									})]
-								}), /* @__PURE__ */ C(S, {
-									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"),
-									rows: 3,
-									disabled: T || I,
-									style: {
-										fontSize: "var(--font-size-body-sm)",
-										resize: "none"
-									}
-								})]
-							}),
-							/* @__PURE__ */ w("div", { children: [
-								/* @__PURE__ */ w("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__ */ C(u, { style: {
-											height: "var(--size-icon-sm)",
-											width: "var(--size-icon-sm)"
-										} }),
-										A("bigconsole.dashboards.createDialog.field.tags", "Tags"),
-										/* @__PURE__ */ C("span", {
+										children: W.map((e) => /* @__PURE__ */ w(p, {
+											variant: "secondary",
 											style: {
-												color: "var(--color-text-muted)",
-												fontWeight: "var(--font-weight-regular)"
+												display: "flex",
+												alignItems: "center",
+												gap: "4px",
+												paddingRight: "4px"
 											},
-											children: A("bigconsole.dashboards.createDialog.field.tagsOptional", "(optional, max 10)")
-										})
-									]
-								}),
-								W.length > 0 && /* @__PURE__ */ C("div", {
-									style: {
-										display: "flex",
-										flexWrap: "wrap",
-										gap: "var(--space-controlGap)",
-										marginBottom: "var(--space-controlGap)"
-									},
-									children: W.map((e) => /* @__PURE__ */ w(p, {
-										variant: "secondary",
+											children: [e, /* @__PURE__ */ C("button", {
+												type: "button",
+												onClick: () => ne(e),
+												disabled: T || I,
+												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__ */ C(d, { style: {
+													height: "12px",
+													width: "12px"
+												} })
+											})]
+										}, e))
+									}),
+									/* @__PURE__ */ w("div", {
 										style: {
 											display: "flex",
-											alignItems: "center",
-											gap: "4px",
-											paddingRight: "4px"
+											gap: "var(--space-controlGap)"
 										},
-										children: [e, /* @__PURE__ */ C("button", {
-											type: "button",
-											onClick: () => te(e),
-											disabled: T || I,
+										children: [/* @__PURE__ */ C(b, {
+											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,
 											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__ */ C(d, { style: {
-												height: "12px",
-												width: "12px"
-											} })
+												flex: 1,
+												height: "var(--size-controlHeight-md)",
+												fontSize: "var(--font-size-body-sm)"
+											}
+										}), /* @__PURE__ */ C(m, {
+											type: "button",
+											variant: "outline",
+											onClick: $,
+											disabled: T || I || !K.trim() || W.length >= 10,
+											style: { height: "var(--size-controlHeight-md)" },
+											children: A("bigconsole.dashboards.createDialog.action.addTag", "Add")
 										})]
-									}, e))
-								}),
-								/* @__PURE__ */ w("div", {
-									style: {
-										display: "flex",
-										gap: "var(--space-controlGap)"
-									},
-									children: [/* @__PURE__ */ C(x, {
-										id: "dashboard-tags",
-										type: "text",
-										value: K,
-										onChange: (e) => q(e.target.value),
-										onKeyDown: ne,
-										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,
+									}),
+									/* @__PURE__ */ C("p", {
 										style: {
-											flex: 1,
-											height: "var(--size-controlHeight-md)",
-											fontSize: "var(--font-size-body-sm)"
-										}
-									}), /* @__PURE__ */ C(m, {
-										type: "button",
-										variant: "outline",
-										onClick: $,
-										disabled: T || I || !K.trim() || W.length >= 10,
-										style: { height: "var(--size-controlHeight-md)" },
-										children: A("bigconsole.dashboards.createDialog.action.addTag", "Add")
-									})]
-								}),
-								/* @__PURE__ */ C("p", {
-									style: {
-										fontSize: "var(--font-size-body-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")
-								})
-							] })
-						]
+											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")
+									})
+								] })
+							]
+						})
 					}),
-					/* @__PURE__ */ w(v, {
+					/* @__PURE__ */ w(_, {
 						style: {
 							padding: "var(--space-formGap) var(--space-pagePadding)",
 							borderTop: "1px solid var(--color-border)",
@@ -442,7 +458,7 @@ var T = n(function({ isOpen: n, isCreating: T = !1, onClose: E, onCreate: D, sho
 									alignItems: "center",
 									gap: "var(--space-iconGap)"
 								},
-								children: [/* @__PURE__ */ C(ee, { style: {
+								children: [/* @__PURE__ */ C(x, { style: {
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
 								} }), A("bigconsole.dashboards.createDialog.action.creating", "Creating...")]