@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

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

@@ -1,38 +1,37 @@
-import { WIDGET_CATEGORY_LABELS as e, getWidgetCategories as t, getWidgetKey as n } from "../widgets/WidgetRegistry.js";
-import { memo as r, useCallback as i, useMemo as a, useState as o } from "react";
-import { Activity as s, BarChart3 as c, Calendar as l, ChevronDown as u, ChevronRight as d, Columns as f, ExternalLink as p, FileText as m, Filter as h, Gauge as g, GitBranch as _, Grid3x3 as v, GripVertical as y, Layers as b, LayoutDashboard as x, List as S, MapPin as C, Puzzle as w, Search as T, Store as E, Table as D, TrendingUp as O, Type as k, X as A } from "lucide-react";
-import { useI18n as j } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Input as M } from "@burdenoff/fe-libs/ui";
-import { jsx as N, jsxs as P } from "react/jsx-runtime";
+import { SECTION_FOCUS_RING as e } from "../common/sectionStyles.js";
+import "../common/index.js";
+import { WIDGET_CATEGORY_LABELS as t, getWidgetCategories as n, getWidgetKey as r } from "../widgets/WidgetRegistry.js";
+import { memo as i, useCallback as a, useMemo as o, useState as s } from "react";
+import { Activity as c, BarChart3 as l, Calendar as u, ChevronDown as d, ChevronRight as f, Columns as p, ExternalLink as m, FileText as h, Filter as g, Gauge as _, GitBranch as v, Grid3x3 as y, GripVertical as b, Layers as x, LayoutDashboard as S, List as C, MapPin as w, Puzzle as T, Search as E, Store as D, Table as O, TrendingUp as k, Type as A, X as j } from "lucide-react";
+import { useI18n as M } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Input as N } from "@burdenoff/fe-libs/ui";
+import { jsx as P, jsxs as F } from "react/jsx-runtime";
 //#region src/bigconsole/components/dashboard/WidgetPalette.tsx
-var F = {
-	TrendingUp: O,
-	BarChart3: c,
-	Filter: h,
-	Table: D,
-	Grid3x3: v,
-	Gauge: g,
-	Activity: s,
-	List: S,
-	FileText: m,
-	Type: k,
-	ExternalLink: p,
-	MapPin: C,
-	Calendar: l,
-	Columns: f,
-	GitBranch: _,
-	Puzzle: w,
-	LayoutDashboard: x
+var I = {
+	TrendingUp: k,
+	BarChart3: l,
+	Filter: g,
+	Table: O,
+	Grid3x3: y,
+	Gauge: _,
+	Activity: c,
+	List: C,
+	FileText: h,
+	Type: A,
+	ExternalLink: m,
+	MapPin: w,
+	Calendar: u,
+	Columns: p,
+	GitBranch: v,
+	Puzzle: T,
+	LayoutDashboard: S
 };
-function I(e) {
-	return F[e] || w;
+function L(e) {
+	return I[e] || T;
 }
-var L = {
+var R = {
 	container: {
-		width: "300px",
-		height: "100%",
 		backgroundColor: "var(--color-bg-surface)",
-		borderRight: "1px solid var(--color-border)",
 		display: "flex",
 		flexDirection: "column",
 		flexShrink: 0,
@@ -41,8 +40,8 @@ var L = {
 	},
 	header: {
 		padding: "var(--space-formGap)",
-		borderBottom: "1px solid var(--color-border)",
-		backgroundColor: "var(--color-bg-sunken)",
+		borderBottom: "1px solid var(--color-border-subtle)",
+		backgroundColor: "var(--color-bg-surface)",
 		flexShrink: 0
 	},
 	headerTop: {
@@ -67,26 +66,28 @@ var L = {
 	},
 	title: {
 		fontSize: "var(--font-size-body-md)",
-		fontWeight: "var(--font-weight-semibold)",
+		fontWeight: "var(--font-weight-bold)",
+		letterSpacing: "-0.01em",
 		color: "var(--color-text-primary)",
 		margin: 0
 	},
 	subtitle: {
-		fontSize: "var(--font-size-body-xs)",
-		color: "var(--color-text-muted)",
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-secondary)",
 		margin: "2px 0 0 0"
 	},
 	closeButton: {
 		display: "flex",
 		alignItems: "center",
 		justifyContent: "center",
-		width: "28px",
-		height: "28px",
+		width: "var(--size-controlHeight-md)",
+		height: "var(--size-controlHeight-md)",
 		border: "none",
 		background: "transparent",
 		borderRadius: "var(--radius-button)",
 		cursor: "pointer",
 		color: "var(--color-text-secondary)",
+		flexShrink: 0,
 		transition: "background-color 0.15s"
 	},
 	searchContainer: { position: "relative" },
@@ -103,7 +104,7 @@ var L = {
 	searchInput: {
 		width: "100%",
 		paddingLeft: "36px",
-		height: "var(--size-controlHeight-sm)",
+		height: "var(--size-controlHeight-md)",
 		fontSize: "var(--font-size-body-sm)"
 	},
 	content: {
@@ -120,15 +121,18 @@ var L = {
 		bottom: 0,
 		overflowY: "auto",
 		overflowX: "hidden",
-		padding: "var(--space-controlGap)"
+		padding: "var(--space-controlGap)",
+		backgroundColor: "var(--color-bg-sunken)"
 	},
-	categoryContainer: { marginBottom: "var(--space-controlGap)" },
+	categoryContainer: { marginBottom: "var(--space-formGap)" },
+	categoryHeading: { margin: 0 },
 	categoryHeader: {
 		width: "100%",
 		display: "flex",
 		alignItems: "center",
 		gap: "var(--space-iconGap)",
-		padding: "var(--space-controlGap) var(--space-iconGap)",
+		minHeight: "var(--size-controlHeight-md)",
+		padding: "var(--space-iconGap) var(--space-controlGap)",
 		border: "none",
 		background: "transparent",
 		cursor: "pointer",
@@ -138,24 +142,27 @@ var L = {
 	categoryChevron: {
 		width: "16px",
 		height: "16px",
-		color: "var(--color-text-muted)",
+		color: "var(--color-text-secondary)",
 		flexShrink: 0
 	},
 	categoryLabel: {
 		flex: 1,
 		textAlign: "left",
-		fontSize: "var(--font-size-body-xs)",
-		fontWeight: "var(--font-weight-semibold)",
-		color: "var(--color-text-secondary)",
+		fontSize: "var(--font-size-body-sm)",
+		fontWeight: "var(--font-weight-bold)",
+		color: "var(--color-text-primary)",
 		textTransform: "uppercase",
-		letterSpacing: "0.05em"
+		letterSpacing: "0.06em"
 	},
 	categoryCount: {
-		fontSize: "var(--font-size-body-xs)",
-		color: "var(--color-text-muted)",
-		backgroundColor: "var(--color-bg-sunken)",
-		padding: "2px 8px",
-		borderRadius: "var(--radius-full)"
+		fontSize: "var(--font-size-body-sm)",
+		fontWeight: "var(--font-weight-medium)",
+		color: "var(--color-text-secondary)",
+		backgroundColor: "var(--color-bg-surface)",
+		border: "1px solid var(--color-border-subtle)",
+		padding: "1px 8px",
+		borderRadius: "var(--radius-pill, 9999px)",
+		flexShrink: 0
 	},
 	widgetList: {
 		display: "flex",
@@ -168,17 +175,19 @@ var L = {
 		display: "flex",
 		alignItems: "center",
 		gap: "var(--space-iconGap)",
+		minHeight: "var(--size-controlHeight-lg)",
 		padding: "var(--space-controlGap)",
 		borderRadius: "var(--radius-card)",
 		cursor: "grab",
 		backgroundColor: "var(--color-bg-surface)",
-		border: "1px solid var(--color-border)",
-		transition: "all 0.15s ease"
+		border: "1px solid var(--color-border-subtle)",
+		boxShadow: "var(--shadow-elevation-1)",
+		transition: "box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease"
 	},
 	widgetCardHover: {
-		backgroundColor: "var(--color-bg-hover)",
+		backgroundColor: "var(--color-action-ghost-bgHover)",
 		borderColor: "var(--color-action-primary-border)",
-		boxShadow: "var(--shadow-elevation-1)"
+		boxShadow: "var(--shadow-elevation-2)"
 	},
 	dragHandle: {
 		width: "16px",
@@ -217,7 +226,7 @@ var L = {
 		marginBottom: "2px"
 	},
 	widgetDescription: {
-		fontSize: "var(--font-size-body-xs)",
+		fontSize: "var(--font-size-body-sm)",
 		color: "var(--color-text-muted)",
 		lineHeight: 1.3,
 		overflow: "hidden",
@@ -227,27 +236,37 @@ var L = {
 	},
 	emptyState: {
 		textAlign: "center",
-		padding: "var(--space-pagePadding)"
+		padding: "var(--space-pagePadding) var(--space-formGap)",
+		backgroundColor: "var(--color-status-info-bgSubtle)",
+		border: "1px solid var(--color-status-info-border)",
+		borderRadius: "var(--radius-card)"
 	},
 	emptyIcon: {
 		width: "48px",
 		height: "48px",
 		borderRadius: "var(--radius-card)",
-		backgroundColor: "var(--color-bg-sunken)",
+		backgroundColor: "var(--color-bg-surface)",
 		display: "flex",
 		alignItems: "center",
 		justifyContent: "center",
 		margin: "0 auto var(--space-formGap)"
 	},
-	emptyText: {
+	emptyTitle: {
 		fontSize: "var(--font-size-body-sm)",
-		color: "var(--color-text-muted)",
+		fontWeight: "var(--font-weight-semibold)",
+		color: "var(--color-status-info-text)",
 		margin: 0
 	},
+	emptyText: {
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-secondary)",
+		margin: "var(--space-iconGap) 0 0 0"
+	},
 	clearButton: {
 		marginTop: "var(--space-controlGap)",
-		padding: "var(--space-controlGap) var(--space-formGap)",
-		fontSize: "var(--font-size-body-xs)",
+		minHeight: "var(--size-controlHeight-md)",
+		padding: "0 var(--space-formGap)",
+		fontSize: "var(--font-size-body-sm)",
 		fontWeight: "var(--font-weight-medium)",
 		color: "var(--color-action-primary-text)",
 		backgroundColor: "var(--color-action-primary-bg)",
@@ -257,12 +276,12 @@ var L = {
 	},
 	footer: {
 		padding: "var(--space-controlGap) var(--space-formGap)",
-		borderTop: "1px solid var(--color-border)",
-		backgroundColor: "var(--color-bg-sunken)",
+		borderTop: "1px solid var(--color-border-subtle)",
+		backgroundColor: "var(--color-bg-surface)",
 		flexShrink: 0
 	},
 	footerText: {
-		fontSize: "var(--font-size-body-xs)",
+		fontSize: "var(--font-size-body-sm)",
 		color: "var(--color-text-muted)",
 		margin: 0,
 		textAlign: "center"
@@ -273,10 +292,11 @@ var L = {
 		justifyContent: "center",
 		gap: "var(--space-iconGap)",
 		width: "100%",
+		minHeight: "var(--size-controlHeight-md)",
 		padding: "var(--space-controlGap)",
 		marginBottom: "var(--space-controlGap)",
 		borderRadius: "var(--radius-button)",
-		border: "1px dashed var(--color-border)",
+		border: "1px dashed var(--color-border-subtle)",
 		backgroundColor: "transparent",
 		color: "var(--color-text-secondary)",
 		fontSize: "var(--font-size-body-sm)",
@@ -284,8 +304,8 @@ var L = {
 		cursor: "pointer",
 		transition: "border-color 0.15s, color 0.15s"
 	}
-}, R = r(function({ isOpen: r, onClose: s, onWidgetSelect: c, onDragStart: l, onDragEnd: f, installedWidgets: m = [], installedWidgetsLoading: h = !1, definitions: g }) {
-	let { t: _ } = j(), [v, x] = o(""), [S, C] = o(new Set([
+}, z = i(function({ isOpen: i, onClose: c, onWidgetSelect: l, onDragStart: u, onDragEnd: p, installedWidgets: h = [], installedWidgetsLoading: g = !1, definitions: _ }) {
+	let { t: v } = M(), [y, S] = s(""), [C, w] = s(new Set([
 		"KPI",
 		"Visualization",
 		"Data",
@@ -293,14 +313,14 @@ var L = {
 		"Temporal",
 		"Custom",
 		"Installed"
-	])), [w, D] = o(null), O = a(() => (g ? Object.keys(e).map((t) => ({
-		category: t,
-		label: e[t],
-		widgets: g.filter((e) => e.category === t)
-	})) : t()).map((e) => {
+	])), [T, O] = s(null), k = o(() => (_ ? Object.keys(t).map((e) => ({
+		category: e,
+		label: t[e],
+		widgets: _.filter((t) => t.category === e)
+	})) : n()).map((e) => {
 		if (e.category === "Installed") {
 			let t = /* @__PURE__ */ new Map();
-			for (let e of m) t.set(e.name.toLowerCase(), e);
+			for (let e of h) t.set(e.name.toLowerCase(), e);
 			for (let n of e.widgets) {
 				let e = n.name.toLowerCase(), r = t.get(e);
 				t.set(e, r ? {
@@ -317,19 +337,19 @@ var L = {
 			};
 		}
 		return e;
-	}).filter((e) => e.category !== "Installed" || e.widgets.length > 0), [m, g]), k = a(() => {
-		if (!v.trim()) return O;
-		let e = v.toLowerCase();
-		return O.map((t) => ({
+	}).filter((e) => e.category !== "Installed" || e.widgets.length > 0), [h, _]), A = o(() => {
+		if (!y.trim()) return k;
+		let e = y.toLowerCase();
+		return k.map((t) => ({
 			...t,
 			widgets: t.widgets.filter((t) => t.name.toLowerCase().includes(e) || t.description.toLowerCase().includes(e) || t.tags.some((t) => t.includes(e)))
 		})).filter((e) => e.widgets.length > 0);
-	}, [O, v]), F = i((e) => {
-		C((t) => {
+	}, [k, y]), I = a((e) => {
+		w((t) => {
 			let n = new Set(t);
 			return n.has(e) ? n.delete(e) : n.add(e), n;
 		});
-	}, []), R = i((e, t) => {
+	}, []), z = a((e, t) => {
 		e.dataTransfer.setData("application/json", JSON.stringify({
 			type: t.type,
 			name: t.name,
@@ -338,191 +358,247 @@ var L = {
 			category: t.category
 		})), e.dataTransfer.effectAllowed = "copy";
 		let n = document.createElement("div");
-		n.style.cssText = "\n        position: absolute;\n        top: -1000px;\n        left: -1000px;\n        padding: 8px 12px;\n        background: var(--color-bg-surface);\n        border: 2px solid var(--color-action-primary-bg);\n        border-radius: 8px;\n        font-size: 14px;\n        font-weight: 500;\n        color: var(--color-text-primary);\n        box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      ", n.textContent = t.name, document.body.appendChild(n), e.dataTransfer.setDragImage(n, 0, 0), setTimeout(() => {
+		n.style.cssText = "\n        position: absolute;\n        top: -1000px;\n        left: -1000px;\n        padding: 8px 12px;\n        background: var(--color-bg-surface);\n        border: 2px solid var(--color-action-primary-bg);\n        border-radius: var(--radius-card);\n        font-size: var(--font-size-body-sm);\n        font-weight: 500;\n        color: var(--color-text-primary);\n        box-shadow: var(--shadow-elevation-3);\n      ", n.textContent = t.name, document.body.appendChild(n), e.dataTransfer.setDragImage(n, 0, 0), setTimeout(() => {
 			document.body.removeChild(n);
-		}, 0), l?.(t.type, t);
-	}, [l]), z = i(() => {
-		f?.();
-	}, [f]), B = i((e) => {
-		c?.(e.type, e);
-	}, [c]), V = i(() => {
+		}, 0), u?.(t.type, t);
+	}, [u]), B = a(() => {
+		p?.();
+	}, [p]), V = a((e) => {
+		l?.(e.type, e);
+	}, [l]), H = a(() => {
 		if (typeof window > "u") return;
 		let e = `${window.location.origin}/bigconsole/store${window.location.search}`;
 		window.open(e, "_blank", "noopener,noreferrer");
 	}, []);
-	return r ? /* @__PURE__ */ P("div", {
-		style: L.container,
+	return i ? /* @__PURE__ */ F("section", {
+		"aria-label": "Widget palette",
+		"data-testid": "widget-palette",
+		style: R.container,
+		className: "h-auto max-h-[45vh] w-full border-b border-[var(--color-border-subtle)] md:h-full md:max-h-none md:w-[300px] md:border-b-0 md:border-r",
 		children: [
-			/* @__PURE__ */ P("div", {
-				style: L.header,
-				children: [/* @__PURE__ */ P("div", {
-					style: L.headerTop,
-					children: [/* @__PURE__ */ P("div", {
-						style: L.headerTitle,
-						children: [/* @__PURE__ */ N("div", {
-							style: L.headerIcon,
-							children: /* @__PURE__ */ N(b, { style: {
-								width: "18px",
-								height: "18px",
-								color: "var(--color-action-primary-text)"
-							} })
-						}), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("h3", {
-							style: L.title,
-							children: _("bigconsole.dashboards.widgetPalette.title", "Widgets")
-						}), /* @__PURE__ */ N("p", {
-							style: L.subtitle,
-							children: _("bigconsole.dashboards.widgetPalette.subtitle", "Drag or click to add")
+			/* @__PURE__ */ F("div", {
+				style: R.header,
+				children: [/* @__PURE__ */ F("div", {
+					style: R.headerTop,
+					children: [/* @__PURE__ */ F("div", {
+						style: R.headerTitle,
+						children: [/* @__PURE__ */ P("div", {
+							style: R.headerIcon,
+							children: /* @__PURE__ */ P(x, {
+								"aria-hidden": "true",
+								style: {
+									width: "18px",
+									height: "18px",
+									color: "var(--color-action-primary-text)"
+								}
+							})
+						}), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("h2", {
+							style: R.title,
+							children: v("bigconsole.dashboards.widgetPalette.title", "Widgets")
+						}), /* @__PURE__ */ P("p", {
+							style: R.subtitle,
+							children: v("bigconsole.dashboards.widgetPalette.subtitle", "Drag or click to add")
 						})] })]
-					}), /* @__PURE__ */ N("button", {
+					}), /* @__PURE__ */ P("button", {
 						type: "button",
-						onClick: s,
-						style: L.closeButton,
-						onMouseOver: (e) => e.currentTarget.style.backgroundColor = "var(--color-bg-hover)",
-						onMouseOut: (e) => e.currentTarget.style.backgroundColor = "transparent",
-						children: /* @__PURE__ */ N(A, { style: {
-							width: "16px",
-							height: "16px"
-						} })
-					})]
-				}), /* @__PURE__ */ P("div", {
-					style: L.searchContainer,
-					children: [/* @__PURE__ */ N(T, { style: L.searchIcon }), /* @__PURE__ */ N(M, {
-						type: "text",
-						placeholder: _("bigconsole.dashboards.widgetPalette.searchPlaceholder", "Search widgets..."),
-						value: v,
-						onChange: (e) => x(e.target.value),
-						style: L.searchInput
+						onClick: c,
+						"aria-label": "Close widget palette",
+						title: "Close widget palette",
+						style: R.closeButton,
+						className: `hover:bg-action-ghost-bgHover motion-safe:transition-colors ${e}`,
+						children: /* @__PURE__ */ P(j, {
+							"aria-hidden": "true",
+							style: {
+								width: "16px",
+								height: "16px"
+							}
+						})
 					})]
+				}), /* @__PURE__ */ F("div", {
+					style: R.searchContainer,
+					children: [
+						/* @__PURE__ */ P("label", {
+							htmlFor: "widget-palette-search",
+							className: "sr-only",
+							children: "Search widgets"
+						}),
+						/* @__PURE__ */ P(E, {
+							"aria-hidden": "true",
+							style: R.searchIcon
+						}),
+						/* @__PURE__ */ P(N, {
+							id: "widget-palette-search",
+							type: "text",
+							placeholder: v("bigconsole.dashboards.widgetPalette.searchPlaceholder", "Search widgets..."),
+							value: y,
+							onChange: (e) => S(e.target.value),
+							style: R.searchInput
+						})
+					]
 				})]
 			}),
-			/* @__PURE__ */ N("div", {
-				style: L.content,
-				children: /* @__PURE__ */ P("div", {
-					style: L.scrollArea,
-					children: [k.map((e) => /* @__PURE__ */ P("div", {
-						style: L.categoryContainer,
-						children: [/* @__PURE__ */ P("button", {
-							type: "button",
-							onClick: () => F(e.category),
-							style: L.categoryHeader,
-							onMouseOver: (e) => e.currentTarget.style.backgroundColor = "var(--color-bg-hover)",
-							onMouseOut: (e) => e.currentTarget.style.backgroundColor = "transparent",
-							children: [
-								S.has(e.category) ? /* @__PURE__ */ N(u, { style: L.categoryChevron }) : /* @__PURE__ */ N(d, { style: L.categoryChevron }),
-								/* @__PURE__ */ N("span", {
-									style: L.categoryLabel,
-									children: e.label
-								}),
-								/* @__PURE__ */ N("span", {
-									style: L.categoryCount,
-									children: e.widgets.length
-								})
-							]
-						}), S.has(e.category) && /* @__PURE__ */ P("div", {
-							style: L.widgetList,
-							children: [h && e.category === "Installed" && /* @__PURE__ */ N("div", {
-								style: {
-									fontSize: "var(--font-size-body-xs)",
-									color: "var(--color-text-muted)",
-									padding: "var(--space-controlGap)"
-								},
-								children: _("bigconsole.dashboards.widgetPalette.loading", "Loading...")
-							}), e.widgets.map((e) => {
-								let t = I(e.icon), r = n(e), i = w === r;
-								return /* @__PURE__ */ P("div", {
-									draggable: !0,
-									onDragStart: (t) => R(t, e),
-									onDragEnd: z,
-									onClick: () => B(e),
-									onMouseEnter: () => D(r),
-									onMouseLeave: () => D(null),
-									style: {
-										...L.widgetCard,
-										...i ? L.widgetCardHover : {}
-									},
+			/* @__PURE__ */ P("div", {
+				style: R.content,
+				children: /* @__PURE__ */ F("div", {
+					style: R.scrollArea,
+					children: [A.map((t) => {
+						let n = C.has(t.category), i = `widget-palette-${t.category.toLowerCase()}`;
+						return /* @__PURE__ */ F("div", {
+							style: R.categoryContainer,
+							children: [/* @__PURE__ */ P("h3", {
+								style: R.categoryHeading,
+								children: /* @__PURE__ */ F("button", {
+									type: "button",
+									onClick: () => I(t.category),
+									"aria-expanded": n,
+									"aria-controls": i,
+									style: R.categoryHeader,
+									className: `hover:bg-action-ghost-bgHover motion-safe:transition-colors ${e}`,
 									children: [
-										/* @__PURE__ */ N(y, { style: L.dragHandle }),
-										/* @__PURE__ */ N("div", {
-											style: L.widgetIcon,
-											children: /* @__PURE__ */ N(t, { style: L.widgetIconInner })
+										P(n ? d : f, {
+											"aria-hidden": "true",
+											style: R.categoryChevron
 										}),
-										/* @__PURE__ */ P("div", {
-											style: L.widgetText,
-											children: [/* @__PURE__ */ N("div", {
-												style: L.widgetName,
-												children: e.name
-											}), /* @__PURE__ */ N("div", {
-												style: L.widgetDescription,
-												children: e.description
-											})]
+										/* @__PURE__ */ P("span", {
+											style: R.categoryLabel,
+											children: t.label
+										}),
+										/* @__PURE__ */ P("span", {
+											style: R.categoryCount,
+											children: t.widgets.length
 										})
 									]
-								}, r);
+								})
+							}), n && /* @__PURE__ */ F("div", {
+								id: i,
+								style: R.widgetList,
+								children: [g && t.category === "Installed" && /* @__PURE__ */ P("div", {
+									style: {
+										fontSize: "var(--font-size-body-sm)",
+										color: "var(--color-text-muted)",
+										padding: "var(--space-controlGap)"
+									},
+									children: v("bigconsole.dashboards.widgetPalette.loading", "Loading...")
+								}), t.widgets.map((e) => {
+									let t = L(e.icon), n = r(e), i = T === n;
+									return /* @__PURE__ */ F("div", {
+										draggable: !0,
+										role: "button",
+										tabIndex: 0,
+										"aria-label": `Add ${e.name} widget`,
+										onDragStart: (t) => z(t, e),
+										onDragEnd: B,
+										onClick: () => V(e),
+										onKeyDown: (t) => {
+											(t.key === "Enter" || t.key === " ") && (t.preventDefault(), V(e));
+										},
+										onMouseEnter: () => O(n),
+										onMouseLeave: () => O(null),
+										className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+										style: {
+											...R.widgetCard,
+											...i ? R.widgetCardHover : {}
+										},
+										children: [
+											/* @__PURE__ */ P(b, {
+												"aria-hidden": "true",
+												style: R.dragHandle
+											}),
+											/* @__PURE__ */ P("div", {
+												style: R.widgetIcon,
+												children: /* @__PURE__ */ P(t, {
+													"aria-hidden": "true",
+													style: R.widgetIconInner
+												})
+											}),
+											/* @__PURE__ */ F("div", {
+												style: R.widgetText,
+												children: [/* @__PURE__ */ P("div", {
+													style: R.widgetName,
+													children: e.name
+												}), /* @__PURE__ */ P("div", {
+													style: R.widgetDescription,
+													children: e.description
+												})]
+											})
+										]
+									}, n);
+								})]
 							})]
-						})]
-					}, e.category)), k.length === 0 && /* @__PURE__ */ P("div", {
-						style: L.emptyState,
+						}, t.category);
+					}), A.length === 0 && /* @__PURE__ */ F("div", {
+						style: R.emptyState,
+						role: "status",
 						children: [
-							/* @__PURE__ */ N("div", {
-								style: L.emptyIcon,
-								children: /* @__PURE__ */ N(T, { style: {
-									width: "24px",
-									height: "24px",
-									color: "var(--color-text-muted)"
-								} })
+							/* @__PURE__ */ P("div", {
+								style: R.emptyIcon,
+								children: /* @__PURE__ */ P(E, {
+									"aria-hidden": "true",
+									style: {
+										width: "24px",
+										height: "24px",
+										color: "var(--color-text-muted)"
+									}
+								})
 							}),
-							/* @__PURE__ */ P("p", {
-								style: L.emptyText,
+							/* @__PURE__ */ F("p", {
+								style: R.emptyTitle,
 								children: [
-									_("bigconsole.dashboards.widgetPalette.noResultsBefore", "No widgets found for"),
-									" \"",
-									/* @__PURE__ */ N("strong", { children: v }),
-									"\""
+									v("bigconsole.dashboards.widgetPalette.noResultsBefore", "No widgets found for"),
+									" “",
+									/* @__PURE__ */ P("strong", { children: y }),
+									"”"
 								]
 							}),
-							/* @__PURE__ */ N("button", {
+							/* @__PURE__ */ P("p", {
+								style: R.emptyText,
+								children: "Try a shorter term, or browse the widget store for more types."
+							}),
+							/* @__PURE__ */ P("button", {
 								type: "button",
-								onClick: () => x(""),
-								style: L.clearButton,
-								children: _("bigconsole.dashboards.widgetPalette.clearSearch", "Clear search")
+								onClick: () => S(""),
+								style: R.clearButton,
+								className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+								children: v("bigconsole.dashboards.widgetPalette.clearSearch", "Clear search")
 							})
 						]
 					})]
 				})
 			}),
-			/* @__PURE__ */ P("div", {
-				style: L.footer,
-				children: [/* @__PURE__ */ P("button", {
+			/* @__PURE__ */ F("div", {
+				style: R.footer,
+				children: [/* @__PURE__ */ F("button", {
 					type: "button",
-					onClick: V,
-					style: L.browseStoreButton,
-					onMouseOver: (e) => {
-						e.currentTarget.style.borderColor = "var(--color-action-primary-bg)", e.currentTarget.style.color = "var(--color-action-primary-text)";
-					},
-					onMouseOut: (e) => {
-						e.currentTarget.style.borderColor = "var(--color-border)", e.currentTarget.style.color = "var(--color-text-secondary)";
-					},
+					onClick: H,
+					style: R.browseStoreButton,
+					className: `hover:border-action-primary-bg hover:text-action-primary-text motion-safe:transition-colors ${e}`,
 					children: [
-						/* @__PURE__ */ N(E, { style: {
-							width: "15px",
-							height: "15px"
-						} }),
-						_("bigconsole.dashboards.widgetPalette.browseStore", "Browse widget store"),
-						/* @__PURE__ */ N(p, { style: {
-							width: "13px",
-							height: "13px",
-							opacity: .7
-						} })
+						/* @__PURE__ */ P(D, {
+							"aria-hidden": "true",
+							style: {
+								width: "15px",
+								height: "15px"
+							}
+						}),
+						v("bigconsole.dashboards.widgetPalette.browseStore", "Browse widget store"),
+						/* @__PURE__ */ P(m, {
+							"aria-hidden": "true",
+							style: {
+								width: "13px",
+								height: "13px",
+								opacity: .7
+							}
+						})
 					]
-				}), /* @__PURE__ */ N("p", {
-					style: L.footerText,
-					children: _("bigconsole.dashboards.widgetPalette.footerHint", "Drag widgets to position them on the canvas")
+				}), /* @__PURE__ */ P("p", {
+					style: R.footerText,
+					children: v("bigconsole.dashboards.widgetPalette.footerHint", "Drag widgets to position them on the canvas")
 				})]
 			})
 		]
 	}) : null;
 });
 //#endregion
-export { R as default };
+export { z as default };
 
 //# sourceMappingURL=WidgetPalette.js.map