@burdenoff/microfe-bigconsole 2026.615.2 → 2026.615.3

package/dist/bigconsole/components/widgets/WidgetWrapper.js

@@ -3,35 +3,36 @@ import { useDashboardStore as r, useGlobalFilterValues as i } from "../../store/
 import "../../store/index.js";
 import a from "../../hooks/useWidgetData.js";
 import { getWidgetDefinition as o } from "./WidgetRegistry.js";
-import { formatTimeUntilRefresh as s, useWidgetAutoRefresh as c } from "../../hooks/useAutoRefresh.js";
-import ee from "../../hooks/useWidgetExport.js";
-import te from "../../hooks/useDrilldown.js";
+import { formatTimeUntilRefresh as ee, useWidgetAutoRefresh as te } from "../../hooks/useAutoRefresh.js";
+import ne from "../../hooks/useWidgetComments.js";
+import re from "../../hooks/useWidgetExport.js";
+import ie from "../../hooks/useDrilldown.js";
 import "../../hooks/index.js";
-import l from "./WidgetHeader.js";
-import u from "./states/LoadingState.js";
-import ne from "./states/ErrorState.js";
-import d from "./states/EmptyState.js";
-import re from "./WidgetErrorBoundary.js";
-import { hasCustomIframeConfig as ie, hasRenderableCustomConfig as ae } from "./custom/config.js";
-import oe from "../../renderers/factory/WidgetRendererFactory.js";
-import se from "./widget-actions/WidgetActions.js";
+import ae from "./WidgetHeader.js";
+import s from "./states/LoadingState.js";
+import oe from "./states/ErrorState.js";
+import c from "./states/EmptyState.js";
+import se from "./WidgetErrorBoundary.js";
+import { hasCustomIframeConfig as ce, hasRenderableCustomConfig as le } from "./custom/config.js";
+import ue from "../../renderers/factory/WidgetRendererFactory.js";
+import de from "./widget-actions/WidgetActions.js";
 import "./widget-actions/index.js";
-import { Suspense as ce, lazy as f, memo as p, useCallback as m, useEffect as h, useMemo as g, useRef as _ } from "react";
-import { jsx as v, jsxs as le } from "react/jsx-runtime";
+import { Suspense as l, lazy as u, memo as d, useCallback as f, useEffect as fe, useMemo as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as pe } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/WidgetWrapper.tsx
-var ue = f(() => import("./metric-card/index.js").then((e) => ({ default: e.MetricCardWidget }))), de = f(() => import("./chart/index.js").then((e) => ({ default: e.ChartWidget }))), fe = f(() => import("./table/index.js").then((e) => ({ default: e.TableWidget }))), pe = f(() => import("./pivot-table/index.js").then((e) => ({ default: e.PivotTableWidget }))), me = f(() => import("./gauge/index.js").then((e) => ({ default: e.GaugeWidget }))), he = f(() => import("./progress/index.js").then((e) => ({ default: e.ProgressWidget }))), ge = f(() => import("./list/index.js").then((e) => ({ default: e.ListWidget }))), _e = f(() => import("./heatmap/index.js").then((e) => ({ default: e.HeatmapWidget }))), ve = f(() => import("./calendar/index.js").then((e) => ({ default: e.CalendarWidget }))), ye = f(() => import("./kanban/index.js").then((e) => ({ default: e.KanbanWidget }))), be = f(() => import("./timeline/index.js").then((e) => ({ default: e.TimelineWidget }))), xe = f(() => import("./kpi-comparison/index.js").then((e) => ({ default: e.KPIComparisonWidget }))), Se = f(() => import("./text-widget/index.js").then((e) => ({ default: e.TextWidget }))), Ce = f(() => import("./map-widget/index.js").then((e) => ({ default: e.MapWidget }))), we = f(() => import("./iframe-widget/index.js").then((e) => ({ default: e.IframeWidget }))), Te = f(() => import("./custom/index.js").then((e) => ({ default: e.CustomWidget }))), Ee = f(() => import("./adaptive-card/index.js").then((e) => ({ default: e.AdaptiveCardWidget })));
-function y(e, t) {
+var me = u(() => import("./metric-card/index.js").then((e) => ({ default: e.MetricCardWidget }))), he = u(() => import("./chart/index.js").then((e) => ({ default: e.ChartWidget }))), ge = u(() => import("./table/index.js").then((e) => ({ default: e.TableWidget }))), _e = u(() => import("./pivot-table/index.js").then((e) => ({ default: e.PivotTableWidget }))), ve = u(() => import("./gauge/index.js").then((e) => ({ default: e.GaugeWidget }))), ye = u(() => import("./progress/index.js").then((e) => ({ default: e.ProgressWidget }))), be = u(() => import("./list/index.js").then((e) => ({ default: e.ListWidget }))), xe = u(() => import("./heatmap/index.js").then((e) => ({ default: e.HeatmapWidget }))), Se = u(() => import("./calendar/index.js").then((e) => ({ default: e.CalendarWidget }))), Ce = u(() => import("./kanban/index.js").then((e) => ({ default: e.KanbanWidget }))), we = u(() => import("./timeline/index.js").then((e) => ({ default: e.TimelineWidget }))), Te = u(() => import("./kpi-comparison/index.js").then((e) => ({ default: e.KPIComparisonWidget }))), Ee = u(() => import("./text-widget/index.js").then((e) => ({ default: e.TextWidget }))), De = u(() => import("./map-widget/index.js").then((e) => ({ default: e.MapWidget }))), Oe = u(() => import("./iframe-widget/index.js").then((e) => ({ default: e.IframeWidget }))), ke = u(() => import("./custom/index.js").then((e) => ({ default: e.CustomWidget }))), Ae = u(() => import("./adaptive-card/index.js").then((e) => ({ default: e.AdaptiveCardWidget }))), je = u(() => import("./comments/WidgetComments.js").then((e) => ({ default: e.WidgetComments })));
+function _(e, t) {
 	if (e.widget.id !== t.widget.id || e.widget.updatedAt !== t.widget.updatedAt || e.isLoading !== t.isLoading || e.error !== t.error || (e.actions?.length ?? 0) !== (t.actions?.length ?? 0)) return !1;
 	if (e.actions && t.actions) {
 		for (let n = 0; n < e.actions.length; n++) if (e.actions[n]?.id !== t.actions[n]?.id) return !1;
 	}
 	return !(e.data !== t.data || JSON.stringify(e.filterValues) !== JSON.stringify(t.filterValues));
 }
-var b = p(function({ widget: f, children: p, data: y, className: b = "", isLoading: De, error: Oe, onRefresh: x, onDrilldown: S, actions: C, onAction: w, filterValues: T }) {
-	let E = r((e) => e.viewMode === "edit"), D = t((e) => e.selectWidget), O = e(f.id), k = n(f.id), A = i(), ke = !!f.dataSinkId || !!f.datasetId || !!f.parserId, { data: j, loading: Ae } = a(f.id, {
-		skip: !ke,
-		pollInterval: (f.refreshInterval ?? 0) * 1e3 || 0
-	}), M = g(() => {
+var v = d(function({ widget: u, children: d, data: _, className: v = "", isLoading: Me, error: Ne, onRefresh: y, onDrilldown: Pe, actions: b, onAction: x, filterValues: S }) {
+	let C = r((e) => e.viewMode === "edit"), w = t((e) => e.selectWidget), T = e(u.id), E = n(u.id), D = i(), Fe = !!u.dataSinkId || !!u.datasetId || !!u.parserId, { data: O, loading: Ie } = a(u.id, {
+		skip: !Fe,
+		pollInterval: (u.refreshInterval ?? 0) * 1e3 || 0
+	}), k = p(() => {
 		if (typeof window > "u") return {};
 		let e = new URLSearchParams(window.location.search), t = {};
 		return e.forEach((e, n) => {
@@ -40,51 +41,56 @@ var b = p(function({ widget: f, children: p, data: y, className: b = "", isLoadi
 				r.startsWith("__") || (t[r] = e);
 			}
 		}), t;
-	}, []), N = g(() => {
+	}, []), A = p(() => {
 		let e = {};
-		return M && Object.keys(M).length > 0 && Object.assign(e, M), A && Object.keys(A).length > 0 && Object.assign(e, A), T && Object.keys(T).length > 0 && Object.assign(e, T), e;
+		return k && Object.keys(k).length > 0 && Object.assign(e, k), D && Object.keys(D).length > 0 && Object.assign(e, D), S && Object.keys(S).length > 0 && Object.assign(e, S), e;
 	}, [
-		M,
-		A,
-		T
-	]), P = Object.keys(N).length > 0, F = De ?? (Ae && !j) ?? k.isLoading, I = Oe ?? k.errorMessage, je = o(f.type), L = _(x);
-	h(() => {
-		L.current = x;
-	}, [x]);
-	let Me = m(async () => {
-		L.current && await L.current();
-	}, []), { timeUntilRefresh: Ne, isPaused: Pe } = c({
-		widgetId: f.id,
-		refreshInterval: f.refreshInterval,
-		onRefresh: Me,
-		enabled: !E && !!f.refreshInterval
-	}), R = _(null), z = g(() => {
-		if (y && Array.isArray(y)) return y;
-		let e = f.data;
+		k,
+		D,
+		S
+	]), j = Object.keys(A).length > 0, M = Me ?? (Ie && !O) ?? E.isLoading, N = Ne ?? E.errorMessage, Le = o(u.type), P = m(y);
+	fe(() => {
+		P.current = y;
+	}, [y]);
+	let F = f(async () => {
+		P.current && await P.current();
+	}, []), { timeUntilRefresh: Re, isPaused: ze } = te({
+		widgetId: u.id,
+		refreshInterval: u.refreshInterval,
+		onRefresh: F,
+		enabled: !C && !!u.refreshInterval
+	}), I = m(null), [L, R] = h(!1), [z, Be] = h(!1), { count: Ve } = ne(u.id, z), He = f(() => {
+		R((e) => {
+			let t = !e;
+			return t && Be(!0), t;
+		});
+	}, []), B = p(() => {
+		if (_ && Array.isArray(_)) return _;
+		let e = u.data;
 		if (e?.processed && Array.isArray(e.processed)) return e.processed;
 		if (e?.raw) {
 			let t = typeof e.raw == "string" ? JSON.parse(e.raw) : e.raw;
 			if (Array.isArray(t)) return t;
 		}
 		return null;
-	}, [y, f]), { exportCSV: Fe, exportPNG: Ie } = ee(f, {
-		data: z,
-		containerRef: R
-	}), B = m((e) => {
+	}, [_, u]), { exportCSV: Ue, exportPNG: We } = re(u, {
+		data: B,
+		containerRef: I
+	}), V = f((e) => {
 		if (e == null) return !1;
 		if (Array.isArray(e)) return e.length > 0;
 		if (typeof e == "object") {
 			let t = e, n = Object.keys(t);
 			return n.length === 0 ? !1 : n.some((e) => {
 				let n = t[e];
-				return n == null || n === "" ? !1 : Array.isArray(n) ? n.length > 0 : typeof n == "object" ? B(n) : !0;
+				return n == null || n === "" ? !1 : Array.isArray(n) ? n.length > 0 : typeof n == "object" ? V(n) : !0;
 			});
 		}
 		return !0;
-	}, []), V = m((e) => {
-		if (!P || !e) return e;
+	}, []), H = f((e) => {
+		if (!j || !e) return e;
 		let t = {}, n = {};
-		Object.entries(N || {}).forEach(([e, r]) => {
+		Object.entries(A || {}).forEach(([e, r]) => {
 			if (e.startsWith("ctx_")) {
 				let n = e.slice(4);
 				t[n] = r;
@@ -202,116 +208,116 @@ var b = p(function({ widget: f, children: p, data: y, className: b = "", isLoadi
 		}
 		return e;
 	}, [
-		P,
-		N,
-		f.id
-	]), H = g(() => {
+		j,
+		A,
+		u.id
+	]), U = p(() => {
 		let e = null;
-		if (y && B(y)) e = y;
-		else if (j) {
-			let t = j;
-			if (t?.processed && B(t.processed)) e = t.processed;
+		if (_ && V(_)) e = _;
+		else if (O) {
+			let t = O;
+			if (t?.processed && V(t.processed)) e = t.processed;
 			else if (t?.raw) try {
 				let n = typeof t.raw == "string" ? JSON.parse(t.raw) : t.raw;
-				B(n) && (e = n);
+				V(n) && (e = n);
 			} catch {}
 		} else {
-			let t = f.data;
-			if (t?.processed && B(t.processed)) e = t.processed;
+			let t = u.data;
+			if (t?.processed && V(t.processed)) e = t.processed;
 			else if (t?.raw) try {
 				let n = typeof t.raw == "string" ? JSON.parse(t.raw) : t.raw;
-				B(n) && (e = n);
+				V(n) && (e = n);
 			} catch {}
 		}
 		if (!e) {
-			let t = f.config?.mockData;
+			let t = u.config?.mockData;
 			if (t) try {
 				let n = typeof t == "string" ? JSON.parse(t) : t;
-				B(n) && (e = n);
+				V(n) && (e = n);
 			} catch {}
 		}
-		return P && e ? V(e) : e;
+		return j && e ? H(e) : e;
 	}, [
-		y,
-		f,
+		_,
+		u,
+		O,
 		j,
-		P,
-		V,
-		N,
-		B
-	]), U = g(() => H ?? null, [H]), { executeDrilldown: W, canDrilldown: G } = te({ onDrilldown: (e, t) => {
-		S?.(e);
-	} }), K = g(() => G(f), [f, G]), q = m((e) => {
-		if (!f.drilldown?.enabled) return;
+		H,
+		A,
+		V
+	]), W = p(() => U ?? null, [U]), { executeDrilldown: G, canDrilldown: K } = ie({ onDrilldown: (e, t) => {
+		Pe?.(e);
+	} }), q = p(() => K(u), [u, K]), J = f((e) => {
+		if (!u.drilldown?.enabled) return;
 		let t = {
 			selectedData: e || {},
-			globalFilters: A || {},
-			widgetData: U || {},
+			globalFilters: D || {},
+			widgetData: W || {},
 			metadata: {
-				widgetId: f.id,
-				widgetType: f.type,
-				widgetTitle: f.title
+				widgetId: u.id,
+				widgetType: u.type,
+				widgetTitle: u.title
 			},
-			sourceDashboardId: f.dashboardId
+			sourceDashboardId: u.dashboardId
 		};
-		W(f.drilldown, t);
+		G(u.drilldown, t);
 	}, [
-		f,
-		U,
-		A,
-		W
-	]), J = _(null), Le = m((e) => {
-		J.current = {
+		u,
+		W,
+		D,
+		G
+	]), Y = m(null), Ge = f((e) => {
+		Y.current = {
 			x: e.clientX,
 			y: e.clientY
 		};
-	}, []), Re = m((e) => {
-		if (e.stopPropagation(), J.current) {
-			let t = Math.abs(e.clientX - J.current.x), n = Math.abs(e.clientY - J.current.y);
+	}, []), Ke = f((e) => {
+		if (e.stopPropagation(), Y.current) {
+			let t = Math.abs(e.clientX - Y.current.x), n = Math.abs(e.clientY - Y.current.y);
 			if (t > 5 || n > 5) {
-				J.current = null;
+				Y.current = null;
 				return;
 			}
 		}
-		J.current = null, E && D(f.id);
+		Y.current = null, C && w(u.id);
 	}, [
-		E,
-		D,
-		f.id
-	]), ze = m((e) => {
-		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), E && D(f.id));
+		C,
+		w,
+		u.id
+	]), qe = f((e) => {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), C && w(u.id));
 	}, [
-		E,
-		D,
-		f.id
-	]), Be = g(() => f.type === "custom" && ae(f.config), [f.type, f.config]), Ve = g(() => f.type === "custom" && ie(f.config), [f.type, f.config]), Y = K && !Ve, He = !F && !I && !U && !Be, X = g(() => f.renderer, [f]), Z = g(() => X && X !== "BIGCONSOLE", [X]), Ue = g(() => ({
-		widgetId: f.id,
-		data: U || {}
-	}), [f.id, U]), Q = m((e, t) => {
-		if (!w) return;
-		let n = C?.find((t) => t.name === e.name);
-		w(n || e, t);
-	}, [w, C]), $ = m(() => {
+		C,
+		w,
+		u.id
+	]), Je = p(() => u.type === "custom" && le(u.config), [u.type, u.config]), Ye = p(() => u.type === "custom" && ce(u.config), [u.type, u.config]), X = q && !Ye, Xe = !M && !N && !W && !Je, Z = p(() => u.renderer, [u]), Q = p(() => Z && Z !== "BIGCONSOLE", [Z]), Ze = p(() => ({
+		widgetId: u.id,
+		data: W || {}
+	}), [u.id, W]), $ = f((e, t) => {
+		if (!x) return;
+		let n = b?.find((t) => t.name === e.name);
+		x(n || e, t);
+	}, [x, b]), Qe = f(() => {
 		let e = {
-			widget: f,
+			widget: u,
 			data: (() => {
-				if (!U) return U;
-				if (f.type === "table" || f.type === "pivot_table") {
-					if (Array.isArray(U)) return U;
-					if (U && typeof U == "object" && "rows" in U) return U.rows;
+				if (!W) return W;
+				if (u.type === "table" || u.type === "pivot_table") {
+					if (Array.isArray(W)) return W;
+					if (W && typeof W == "object" && "rows" in W) return W.rows;
 				}
-				if (f.type === "list") {
-					if (Array.isArray(U)) return U;
-					if (U && typeof U == "object" && "items" in U) return U.items;
+				if (u.type === "list") {
+					if (Array.isArray(W)) return W;
+					if (W && typeof W == "object" && "items" in W) return W.items;
 				}
-				if (f.type === "funnel_chart") {
-					if (Array.isArray(U)) return U;
-					if (U && typeof U == "object" && "stages" in U) return U.stages;
+				if (u.type === "funnel_chart") {
+					if (Array.isArray(W)) return W;
+					if (W && typeof W == "object" && "stages" in W) return W.stages;
 				}
-				if (f.type === "chart") {
-					if (Array.isArray(U)) return U;
-					if (U && typeof U == "object" && "datasets" in U) {
-						let e = U;
+				if (u.type === "chart") {
+					if (Array.isArray(W)) return W;
+					if (W && typeof W == "object" && "datasets" in W) {
+						let e = W;
 						if (e.labels && e.datasets) return e.labels.map((t, n) => {
 							let r = { name: t };
 							return e.datasets?.forEach((e) => {
@@ -320,8 +326,8 @@ var b = p(function({ widget: f, children: p, data: y, className: b = "", isLoadi
 						});
 					}
 				}
-				if (f.type === "text" && U && typeof U == "object" && !("content" in U)) {
-					let e = U, t = [];
+				if (u.type === "text" && W && typeof W == "object" && !("content" in W)) {
+					let e = W, t = [];
 					for (let [n, r] of Object.entries(e)) if (r && typeof r == "object" && !Array.isArray(r)) {
 						t.push(`### ${n}`);
 						for (let [e, n] of Object.entries(r)) t.push(`- **${e}:** ${n}`);
@@ -336,181 +342,191 @@ var b = p(function({ widget: f, children: p, data: y, className: b = "", isLoadi
 						format: "markdown"
 					};
 				}
-				if (f.type === "custom") {
-					let e = f.config?.valueField;
-					if (e && U && typeof U == "object" && !Array.isArray(U)) {
-						let t = U;
+				if (u.type === "custom") {
+					let e = u.config?.valueField;
+					if (e && W && typeof W == "object" && !Array.isArray(W)) {
+						let t = W;
 						if (e in t) return {
 							value: t[e],
-							label: f.title,
+							label: u.title,
 							data: t
 						};
 					}
 				}
-				return U;
+				return W;
 			})(),
-			onDrilldown: K ? q : void 0
+			onDrilldown: q ? J : void 0
 		};
-		if (Z) {
+		if (Q) {
 			let e = {};
-			if (H && typeof H == "object" && !Array.isArray(H) && Object.keys(H).length > 0 && (e = { ...H }), f.config?._internalWidgetType === "custom" && Object.keys(e).length > 0) {
-				let t = f.config?.valueField;
+			if (U && typeof U == "object" && !Array.isArray(U) && Object.keys(U).length > 0 && (e = { ...U }), u.config?._internalWidgetType === "custom" && Object.keys(e).length > 0) {
+				let t = u.config?.valueField;
 				if (t && t in e) {
 					let n = e[t], r = typeof n == "number" ? n.toLocaleString() : String(n);
 					e = {
 						...e,
 						value: n,
 						title: e.title || r,
-						description: e.description || f.title || "",
+						description: e.description || u.title || "",
 						text: e.text || r
 					};
 				}
 			}
-			return /* @__PURE__ */ v(oe, {
-				widget: f,
+			return /* @__PURE__ */ g(ue, {
+				widget: u,
 				data: e,
-				isEditMode: E,
-				isSelected: O,
-				isLoading: F,
-				error: I,
-				onDrilldown: K ? q : void 0,
-				onAction: Q
+				isEditMode: C,
+				isSelected: T,
+				isLoading: M,
+				error: N,
+				onDrilldown: q ? J : void 0,
+				onAction: $
 			});
 		}
-		switch (f.type?.toLowerCase() || "") {
-			case "metric_card": return /* @__PURE__ */ v(ue, { ...e });
-			case "kpi_card_comparison": return /* @__PURE__ */ v(xe, { ...e });
+		switch (u.type?.toLowerCase() || "") {
+			case "metric_card": return /* @__PURE__ */ g(me, { ...e });
+			case "kpi_card_comparison": return /* @__PURE__ */ g(Te, { ...e });
 			case "chart":
-			case "funnel_chart": return /* @__PURE__ */ v(de, { ...e });
-			case "table": return /* @__PURE__ */ v(fe, { ...e });
-			case "pivot_table": return /* @__PURE__ */ v(pe, { ...e });
-			case "gauge": return /* @__PURE__ */ v(me, { ...e });
-			case "progress": return /* @__PURE__ */ v(he, { ...e });
-			case "list": return /* @__PURE__ */ v(ge, { ...e });
-			case "heatmap": return /* @__PURE__ */ v(_e, { ...e });
-			case "calendar": return /* @__PURE__ */ v(ve, { ...e });
-			case "timeline": return /* @__PURE__ */ v(be, { ...e });
-			case "kanban": return /* @__PURE__ */ v(ye, { ...e });
-			case "form": return /* @__PURE__ */ v(Ee, { ...e });
-			case "text": return /* @__PURE__ */ v(Se, { ...e });
-			case "iframe": return /* @__PURE__ */ v(we, { ...e });
-			case "map": return /* @__PURE__ */ v(Ce, { ...e });
-			case "custom": return /* @__PURE__ */ v(Te, { ...e });
-			default: return p || /* @__PURE__ */ v(d, { widgetType: f.type });
+			case "funnel_chart": return /* @__PURE__ */ g(he, { ...e });
+			case "table": return /* @__PURE__ */ g(ge, { ...e });
+			case "pivot_table": return /* @__PURE__ */ g(_e, { ...e });
+			case "gauge": return /* @__PURE__ */ g(ve, { ...e });
+			case "progress": return /* @__PURE__ */ g(ye, { ...e });
+			case "list": return /* @__PURE__ */ g(be, { ...e });
+			case "heatmap": return /* @__PURE__ */ g(xe, { ...e });
+			case "calendar": return /* @__PURE__ */ g(Se, { ...e });
+			case "timeline": return /* @__PURE__ */ g(we, { ...e });
+			case "kanban": return /* @__PURE__ */ g(Ce, { ...e });
+			case "form": return /* @__PURE__ */ g(Ae, { ...e });
+			case "text": return /* @__PURE__ */ g(Ee, { ...e });
+			case "iframe": return /* @__PURE__ */ g(Oe, { ...e });
+			case "map": return /* @__PURE__ */ g(De, { ...e });
+			case "custom": return /* @__PURE__ */ g(ke, { ...e });
+			default: return d || /* @__PURE__ */ g(c, { widgetType: u.type });
 		}
 	}, [
-		f,
-		U,
-		p,
-		K,
+		u,
+		W,
+		d,
 		q,
-		Z,
-		E,
-		O,
-		F,
-		I,
+		J,
 		Q,
-		H
+		C,
+		T,
+		M,
+		N,
+		$,
+		U
 	]);
-	return /* @__PURE__ */ le("div", {
-		ref: R,
+	return /* @__PURE__ */ pe("div", {
+		ref: I,
 		className: `
         group relative flex flex-col
         h-full w-full
         rounded-lg border
         bg-bg-surface
         transition-all duration-200
-        ${O && E ? "border-action-primary-border ring-2 ring-action-primary-border/30" : "border-border-default hover:border-action-primary-bg"}
-        ${E ? "cursor-pointer" : ""}
-        ${b}
+        ${T && C ? "border-action-primary-border ring-2 ring-action-primary-border/30" : "border-border-default hover:border-action-primary-bg"}
+        ${C ? "cursor-pointer" : ""}
+        ${v}
       `,
-		onMouseDown: Le,
-		onClick: Re,
-		onKeyDown: ze,
-		tabIndex: E ? 0 : -1,
-		role: E ? "button" : void 0,
-		"aria-selected": O,
-		"aria-label": `Widget: ${f.title}`,
-		"data-widget-id": f.id,
-		"data-widget-type": f.type,
+		onMouseDown: Ge,
+		onClick: Ke,
+		onKeyDown: qe,
+		tabIndex: C ? 0 : -1,
+		role: C ? "button" : void 0,
+		"aria-selected": T,
+		"aria-label": `Widget: ${u.title}`,
+		"data-widget-id": u.id,
+		"data-widget-type": u.type,
 		children: [
-			/* @__PURE__ */ v(l, {
-				widget: f,
-				definition: je,
-				isSelected: O,
-				isEditMode: E,
-				isLoading: F,
-				timeUntilRefresh: f.refreshInterval && !Pe ? s(Ne) : void 0,
-				hasDrilldown: K,
-				onRefresh: x,
-				onExportCSV: z ? Fe : void 0,
-				onExportPNG: Ie,
-				onDrilldown: K ? () => q() : void 0
+			/* @__PURE__ */ g(ae, {
+				widget: u,
+				definition: Le,
+				isSelected: T,
+				isEditMode: C,
+				isLoading: M,
+				timeUntilRefresh: u.refreshInterval && !ze ? ee(Re) : void 0,
+				hasDrilldown: q,
+				onRefresh: y,
+				onExportCSV: B ? Ue : void 0,
+				onExportPNG: We,
+				onDrilldown: q ? () => J() : void 0,
+				onToggleComments: He,
+				commentsOpen: L,
+				commentCount: z ? Ve : void 0
 			}),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ g("div", {
 				className: `
           flex-1 overflow-hidden p-4 min-h-0
-          ${Y && !E ? "cursor-pointer" : ""}
+          ${X && !C ? "cursor-pointer" : ""}
         `,
-				title: Y && !E ? "Click data to drill down" : void 0,
-				children: /* @__PURE__ */ v("div", {
+				title: X && !C ? "Click data to drill down" : void 0,
+				children: /* @__PURE__ */ g("div", {
 					className: "h-full overflow-auto",
 					children: (() => {
-						if (F) return /* @__PURE__ */ v(u, {});
-						if (I) return /* @__PURE__ */ v(ne, {
-							error: I,
-							onRetry: x
+						if (M) return /* @__PURE__ */ g(s, {});
+						if (N) return /* @__PURE__ */ g(oe, {
+							error: N,
+							onRetry: y
 						});
-						if (He && !p) return /* @__PURE__ */ v(d, {
-							widgetType: f.type,
-							hasDataSource: !!f.parserId || !!f.dataSinkId
+						if (Xe && !d) return /* @__PURE__ */ g(c, {
+							widgetType: u.type,
+							hasDataSource: !!u.parserId || !!u.dataSinkId
 						});
-						let e = `${f.parserId ?? ""}|${f.dataSinkId ?? ""}|${f.updatedAt ?? ""}`;
-						return /* @__PURE__ */ v(re, {
-							widgetId: f.id,
-							widgetType: f.type,
-							widgetTitle: f.title,
+						let e = `${u.parserId ?? ""}|${u.dataSinkId ?? ""}|${u.updatedAt ?? ""}`;
+						return /* @__PURE__ */ g(se, {
+							widgetId: u.id,
+							widgetType: u.type,
+							widgetTitle: u.title,
 							resetKey: e,
-							children: p ?? /* @__PURE__ */ v(ce, {
-								fallback: /* @__PURE__ */ v(u, {}),
-								children: $()
+							children: d ?? /* @__PURE__ */ g(l, {
+								fallback: /* @__PURE__ */ g(s, {}),
+								children: Qe()
 							})
 						});
 					})()
 				})
 			}),
-			C && C.length > 0 && !F && !I && /* @__PURE__ */ v("div", {
+			b && b.length > 0 && !M && !N && /* @__PURE__ */ g("div", {
 				className: "px-4 py-3 border-t border-border-default bg-bg-muted",
 				style: { flexShrink: 0 },
-				children: /* @__PURE__ */ v(se, {
-					actions: C,
-					context: Ue,
-					onAction: w,
-					disabled: E,
+				children: /* @__PURE__ */ g(de, {
+					actions: b,
+					context: Ze,
+					onAction: x,
+					disabled: C,
 					layout: "horizontal",
 					size: "sm"
 				})
 			}),
-			Y && !E && /* @__PURE__ */ v("div", {
+			X && !C && /* @__PURE__ */ g("div", {
 				className: "\n            absolute bottom-2 right-2\n            opacity-0 group-hover:opacity-100\n            transition-opacity duration-200\n          ",
 				title: "Click to drill down",
-				children: /* @__PURE__ */ v("svg", {
+				children: /* @__PURE__ */ g("svg", {
 					className: "w-4 h-4 text-text-secondary",
 					fill: "none",
 					stroke: "currentColor",
 					viewBox: "0 0 24 24",
-					children: /* @__PURE__ */ v("path", {
+					children: /* @__PURE__ */ g("path", {
 						strokeLinecap: "round",
 						strokeLinejoin: "round",
 						strokeWidth: 2,
 						d: "M13 7l5 5m0 0l-5 5m5-5H6"
 					})
 				})
+			}),
+			L && /* @__PURE__ */ g(l, {
+				fallback: null,
+				children: /* @__PURE__ */ g(je, {
+					widgetId: u.id,
+					onClose: () => R(!1)
+				})
 			})
 		]
 	});
-}, y);
+}, _);
 //#endregion
-export { b as default };
+export { v as default };
 
 //# sourceMappingURL=WidgetWrapper.js.map