@burdenoff/microfe-bigconsole 2026.812.2 → 2026.827.1

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

@@ -1,34 +1,37 @@
 import { useWidgetStore as e } from "../../store/widgetStore.js";
+import { useIsEditMode as t } from "../../store/dashboardStore.js";
 import "../../store/index.js";
-import { Section as t, SectionStack as n } from "../common/Section.js";
+import { Section as n, SectionStack as r } from "../common/Section.js";
 import "../common/index.js";
-import { getWidgetDefinition as r } from "./WidgetRegistry.js";
-import i from "../../hooks/useWidgetOperations.js";
-import a from "../../hooks/useDrilldownOperations.js";
-import o from "../../hooks/useWidgetActions.js";
-import s from "../../hooks/useEventWebhooks.js";
-import c from "../../hooks/useDataSinkOperations.js";
-import ee from "../../hooks/useParserOperations.js";
+import { getWidgetDefinition as i } from "./WidgetRegistry.js";
+import a from "../../hooks/useWidgetOperations.js";
+import o from "../../hooks/useDrilldownOperations.js";
+import s from "../../hooks/useWidgetActions.js";
+import c from "../../hooks/useEventWebhooks.js";
+import ee from "../../hooks/useDataSinkOperations.js";
+import te from "../../hooks/useParserOperations.js";
 import "../../hooks/index.js";
-import { getWidgetBinding as l, getWidgetBindingStatus as te, reconcilePanelConfig as ne, serializeWidgetBinding as re } from "../../utils/widgetBinding.js";
-import ie from "./ActionConfigDialog.js";
-import ae from "./webhook-config/WebhookConfigPanel.js";
+import { getWidgetBinding as l, getWidgetBindingStatus as ne, reconcilePanelConfig as re, serializeWidgetBinding as ie } from "../../utils/widgetBinding.js";
+import ae from "./ActionConfigDialog.js";
+import oe from "./webhook-config/WebhookConfigPanel.js";
 import "./webhook-config/index.js";
-import oe from "./event-logs/EventLogViewer.js";
+import se from "./event-logs/EventLogViewer.js";
 import "./event-logs/index.js";
-import se from "./DrilldownConfigPanel.js";
-import { AdvancedSection as ce } from "../builder/inspector/AdvancedSection.js";
-import { AppearanceSection as le } from "../builder/inspector/AppearanceSection.js";
-import { GeneralSection as ue } from "../builder/inspector/GeneralSection.js";
-import { DataBindingSection as de } from "../builder/inspector/DataBindingSection.js";
+import ce from "./DrilldownConfigPanel.js";
+import { AdvancedSection as le } from "../builder/inspector/AdvancedSection.js";
+import { AppearanceSection as ue } from "../builder/inspector/AppearanceSection.js";
+import { GeneralSection as de } from "../builder/inspector/GeneralSection.js";
+import { DataBindingSection as fe } from "../builder/inspector/DataBindingSection.js";
+import pe from "../builder/inspector/LayoutSection.js";
 import "../builder/inspector/index.js";
-import { memo as fe, useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
-import { Check as h, ChevronDown as pe, ChevronUp as me, ExternalLink as he, Info as ge, Pencil as _e, Plus as ve, Trash2 as ye, X as g } from "lucide-react";
-import { useI18n as be } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Button as _, Card as xe, CardContent as Se, Input as v, Label as y, Select as Ce, SelectContent as we, SelectItem as b, SelectTrigger as Te, SelectValue as Ee, Sheet as De, SheetContent as Oe, SheetDescription as ke, SheetHeader as Ae, SheetTitle as je, Spinner as Me, Tabs as Ne, TabsContent as x, TabsList as Pe, TabsTrigger as S, Textarea as C } from "@burdenoff/fe-libs/ui";
+import { DEFAULT_GRID_CONFIG as me } from "../../utils/widgetPositioning.js";
+import { memo as he, useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import { Check as h, ChevronDown as ge, ChevronUp as _e, ExternalLink as g, Info as ve, Pencil as ye, Plus as be, Trash2 as xe, X as Se } from "lucide-react";
+import { useI18n as Ce } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Button as _, Card as we, CardContent as Te, Input as v, Label as y, Select as Ee, SelectContent as De, SelectItem as b, SelectTrigger as Oe, SelectValue as ke, Sheet as Ae, SheetContent as je, SheetDescription as Me, SheetHeader as Ne, SheetTitle as Pe, Spinner as Fe, Tabs as Ie, TabsContent as x, TabsList as Le, TabsTrigger as S, Textarea as C } from "@burdenoff/fe-libs/ui";
 import { jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/PropertiesPanel.tsx
-var Fe = [
+var Re = [
 	{
 		value: "BIGCONSOLE",
 		labelKey: "bigconsole.widget.properties.renderer.bigconsole.label",
@@ -57,7 +60,7 @@ var Fe = [
 		descriptionKey: "bigconsole.widget.properties.renderer.custom.description",
 		description: "Custom React component"
 	}
-], Ie = [
+], ze = [
 	{
 		value: "DATASINK",
 		labelKey: "bigconsole.widget.properties.dataSourceType.datasink.label",
@@ -101,23 +104,23 @@ var Fe = [
 		description: "Manually enter sample JSON data"
 	}
 ];
-function Le(e) {
+function Be(e) {
 	return `widget:${e.toLowerCase().replace(/\s+/g, "_")}:clicked`;
 }
-var Re = {
+var Ve = {
 	PRIMARY: "bg-action-primary-bg",
 	SECONDARY: "bg-[var(--color-text-muted)]",
 	SUCCESS: "bg-status-success-bg",
 	WARNING: "bg-status-warning-bg",
 	DANGER: "bg-status-error-bg"
-}, ze = "bg-[var(--color-text-muted)]", E = {
+}, He = "bg-[var(--color-text-muted)]", E = {
 	fontWeight: "var(--font-weight-semibold)",
 	fontSize: "var(--font-size-body-sm)",
 	padding: "6px 10px",
 	minHeight: "var(--size-controlHeight-md)",
 	flexShrink: 0
 };
-function Be(e) {
+function Ue(e) {
 	if (!e) return {};
 	let t = Array.isArray(e) ? e[0] : e;
 	if (!t || typeof t != "object") return {};
@@ -161,8 +164,8 @@ function Be(e) {
 		xAxisField: a
 	};
 }
-var Ve = fe(function({ widget: e, onSave: n }) {
-	let { t: r } = be(), [i, a] = m(""), [o, s] = m(null), c = p(!1);
+var We = he(function({ widget: e, onSave: t }) {
+	let { t: r } = Ce(), [i, a] = m(""), [o, s] = m(null), c = p(!1);
 	d(() => {
 		try {
 			a(e.template && typeof e.template == "object" ? JSON.stringify(e.template, null, 2) : ""), s(null), c.current = !0;
@@ -171,23 +174,23 @@ var Ve = fe(function({ widget: e, onSave: n }) {
 		}
 	}, [e.id, e.template]);
 	let ee = u((e) => {
-		let t = e.target.value;
-		if (a(t), t.trim() === "") s(null), n({});
+		let n = e.target.value;
+		if (a(n), n.trim() === "") s(null), t({});
 		else try {
-			let e = JSON.parse(t);
-			s(null), n(e);
+			let e = JSON.parse(n);
+			s(null), t(e);
 		} catch (e) {
 			s(e.message);
 		}
-	}, [n]), l = u(() => {
+	}, [t]), te = u(() => {
 		try {
 			let e = JSON.parse(i);
-			a(JSON.stringify(e, null, 2)), s(null), n(e);
+			a(JSON.stringify(e, null, 2)), s(null), t(e);
 		} catch (e) {
 			s(e.message);
 		}
-	}, [i, n]);
-	return /* @__PURE__ */ T(t, {
+	}, [i, t]);
+	return /* @__PURE__ */ T(n, {
 		emphasis: "muted",
 		padding: "compact",
 		headingLevel: 4,
@@ -230,7 +233,7 @@ var Ve = fe(function({ widget: e, onSave: n }) {
 				children: [/* @__PURE__ */ w(_, {
 					variant: "outline",
 					size: "sm",
-					onClick: l,
+					onClick: te,
 					disabled: !!o || i.trim() === "",
 					style: {
 						height: "var(--size-controlHeight-sm)",
@@ -271,7 +274,7 @@ var Ve = fe(function({ widget: e, onSave: n }) {
 							fontWeight: "var(--font-weight-medium)",
 							textDecoration: "none"
 						},
-						children: [r("bigconsole.widget.properties.template.designer", "Designer"), /* @__PURE__ */ w(he, { style: {
+						children: [r("bigconsole.widget.properties.template.designer", "Designer"), /* @__PURE__ */ w(g, { style: {
 							height: "var(--size-icon-sm)",
 							width: "var(--size-icon-sm)"
 						} })]
@@ -289,7 +292,7 @@ var Ve = fe(function({ widget: e, onSave: n }) {
 							fontWeight: "var(--font-weight-medium)",
 							textDecoration: "none"
 						},
-						children: [r("bigconsole.widget.properties.template.blockKitBuilder", "Block Kit Builder"), /* @__PURE__ */ w(he, { style: {
+						children: [r("bigconsole.widget.properties.template.blockKitBuilder", "Block Kit Builder"), /* @__PURE__ */ w(g, { style: {
 							height: "var(--size-icon-sm)",
 							width: "var(--size-icon-sm)"
 						} })]
@@ -299,7 +302,7 @@ var Ve = fe(function({ widget: e, onSave: n }) {
 		]
 	});
 });
-function He(e) {
+function Ge(e) {
 	let t = e, n = l({
 		dataSinkId: t.dataSinkId,
 		parserId: t.parserId,
@@ -327,48 +330,55 @@ function He(e) {
 		} : void 0
 	};
 }
-var D = fe(function({ isOpen: fe, onClose: he }) {
-	let { t: D } = be(), [Ue, We] = m("general"), [O, k] = m("idle"), [A, j] = m(null), [M, N] = m(!1), P = e((e) => e.selectedWidgetId), Ge = e((e) => e.widgets), F = e((e) => e.updateWidget), I = P ? Ge.get(P) : void 0, Ke = p(null), qe = p({}), Je = p(0), L = u(() => {
-		Je.current += 1, N(!0);
+var D = he(function({ isOpen: he, onClose: g }) {
+	let { t: D } = Ce(), [Ke, qe] = m("general"), [O, k] = m("idle"), [A, j] = m(null), [M, N] = m(!1), P = e((e) => e.selectedWidgetId), Je = e((e) => e.widgets), F = e((e) => e.updateWidget), Ye = e((e) => e.updateWidgetPosition), Xe = t(), I = P ? Je.get(P) : void 0, Ze = I ? {
+		x: I.position?.x ?? I.positionX ?? 0,
+		y: I.position?.y ?? I.positionY ?? 0,
+		width: I.position?.width ?? I.positionWidth ?? 4,
+		height: I.position?.height ?? I.positionHeight ?? 4
+	} : null, Qe = u((e) => {
+		P && Ye(P, e);
+	}, [P, Ye]), $e = p(null), et = p({}), tt = p(0), L = u(() => {
+		tt.current += 1, N(!0);
 	}, []);
 	d(() => {
 		if (!P) {
-			Ke.current = null, j(null), N(!1), k("idle");
+			$e.current = null, j(null), N(!1), k("idle");
 			return;
 		}
-		let e = Ke.current !== P;
-		if (Ke.current = P, I) {
+		let e = $e.current !== P;
+		if ($e.current = P, I) {
 			if (M && !e) return;
-			j(He(I)), qe.current = I.config || {}, N(!1), k("idle");
+			j(Ge(I)), et.current = I.config || {}, N(!1), k("idle");
 		} else j(null), N(!1), k("idle");
 	}, [
 		P,
 		I,
 		M
 	]);
-	let { updateWidget: Ye } = i(I?.pageId, I?.dashboardId, { skipFetch: !0 }), { createDrilldown: Xe, updateDrilldown: Ze, deleteDrilldown: Qe } = a(), { dataSinks: R } = c({ skipFetch: !1 }), [$e, et] = m(null), { executeParser: tt } = ee({
+	let { updateWidget: nt } = a(I?.pageId, I?.dashboardId, { skipFetch: !0 }), { createDrilldown: rt, updateDrilldown: it, deleteDrilldown: at } = o(), { dataSinks: R } = ee({ skipFetch: !1 }), [ot, st] = m(null), { executeParser: ct } = te({
 		consoleId: I?.dashboardId,
 		skipFetch: !0
-	}), [nt, rt] = m(!1), [it, z] = m(void 0), [at, B] = m(!1), [ot, V] = m(null);
+	}), [lt, ut] = m(!1), [dt, z] = m(void 0), [ft, B] = m(!1), [pt, V] = m(null);
 	d(() => {
-		z(void 0), B(!1), V(null), rt(!1);
+		z(void 0), B(!1), V(null), ut(!1);
 	}, [P]);
-	let { actions: H, loading: st, createAction: ct, updateAction: lt, deleteAction: ut, reorderActions: U } = o(P || void 0), { webhooks: dt, loading: ft, createWebhook: pt, updateWebhook: mt, deleteWebhook: W, refetch: ht } = s({
+	let { actions: H, loading: mt, createAction: ht, updateAction: gt, deleteAction: _t, reorderActions: U } = s(P || void 0), { webhooks: vt, loading: yt, createWebhook: bt, updateWebhook: xt, deleteWebhook: W, refetch: St } = c({
 		widgetId: P || void 0,
 		skipFetch: !P
 	}), G = u((e, t) => {
-		let n = Le(t);
+		let n = Be(t);
 		return e.find((e) => e.widgetId === P && e.eventPattern === n) ?? null;
-	}, [P]), K = u((e) => G(dt, e), [G, dt]), gt = u(async (e, t) => {
+	}, [P]), K = u((e) => G(vt, e), [G, vt]), Ct = u(async (e, t) => {
 		if (!P || t === void 0) return !0;
-		let n = Le(e), r = K(e);
-		return !r && ft && (r = G((await ht())?.data?.listEventWebhookMappings ?? [], e)), t && t.url ? r ? await mt({
+		let n = Be(e), r = K(e);
+		return !r && yt && (r = G((await St())?.data?.listEventWebhookMappings ?? [], e)), t && t.url ? r ? await xt({
 			id: r.id,
 			eventPattern: n,
 			webhookUrl: t.url,
 			method: t.method,
 			isActive: !0
-		}) !== null : await pt({
+		}) !== null : await bt({
 			widgetId: P,
 			eventPattern: n,
 			webhookUrl: t.url,
@@ -377,42 +387,42 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 	}, [
 		P,
 		K,
-		ft,
-		ht,
+		yt,
+		St,
 		G,
-		pt,
-		mt,
+		bt,
+		xt,
 		W
-	]), [_t, q] = m(!1), [J, Y] = m(void 0), [vt, yt] = m(!1), [bt, X] = m(void 0), [xt, Z] = m(null), St = f(() => {
+	]), [wt, q] = m(!1), [J, Y] = m(void 0), [Tt, Et] = m(!1), [Dt, X] = m(void 0), [Ot, Z] = m(null), kt = f(() => {
 		if (!J) return null;
 		let e = K(J.name);
 		return e ? {
 			url: e.webhookUrl,
 			method: e.method
 		} : null;
-	}, [J, K]), Ct = bt === void 0 ? St : bt, wt = f(() => {
+	}, [J, K]), At = Dt === void 0 ? kt : Dt, jt = f(() => {
 		let e = /* @__PURE__ */ new Map();
 		for (let t of H) {
 			let n = K(t.name);
 			n && e.set(t.name, n);
 		}
 		return e;
-	}, [H, K]), Tt = u(() => {
+	}, [H, K]), Mt = u(() => {
 		X(void 0), Z(null), Y(void 0), q(!0);
-	}, []), Et = u((e) => {
+	}, []), Nt = u((e) => {
 		X(void 0), Z(null), Y(e), q(!0);
-	}, []), Dt = u(async (e, t) => {
+	}, []), Pt = u(async (e, t) => {
 		if (P) {
-			yt(!0), Z(null);
+			Et(!0), Z(null);
 			try {
 				let n = "id" in e && !!e.id, r = null;
-				if (r = n ? await lt(e) : await ct(e), r) {
+				if (r = n ? await gt(e) : await ht(e), r) {
 					let e = [...H];
 					if (n) {
 						let t = e.findIndex((e) => e.id === r?.id);
 						t >= 0 && (e[t] = r);
 					} else e.push(r);
-					if (F(P, { actions: e.sort((e, t) => e.order - t.order) }), !await gt(r.name, t)) {
+					if (F(P, { actions: e.sort((e, t) => e.order - t.order) }), !await Ct(r.name, t)) {
 						X(t), Z(t ? D("bigconsole.widget.properties.action.webhookSaveFailed", "The button was saved, but its webhook could not be saved. Check the URL and try again.") : D("bigconsole.widget.properties.action.webhookRemoveFailed", "The button was saved, but its old webhook could not be removed. Try again.")), Y(r);
 						return;
 					}
@@ -421,21 +431,21 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 			} catch (e) {
 				console.warn("Failed to save widget action:", e), Z(e instanceof Error ? e.message : D("bigconsole.widget.properties.action.saveFailed", "Could not save the button. Please try again."));
 			} finally {
-				yt(!1);
+				Et(!1);
 			}
 		}
 	}, [
 		P,
 		H,
-		ct,
-		lt,
-		F,
+		ht,
 		gt,
+		F,
+		Ct,
 		D
-	]), Ot = u(async (e) => {
+	]), Ft = u(async (e) => {
 		if (P && window.confirm(D("bigconsole.widget.properties.action.deleteConfirm", "Are you sure you want to delete this action?"))) {
 			let t = H.find((t) => t.id === e);
-			if (await ut(e) && (F(P, { actions: H.filter((t) => t.id !== e) }), t)) {
+			if (await _t(e) && (F(P, { actions: H.filter((t) => t.id !== e) }), t)) {
 				let e = K(t.name);
 				e && await W(e.id);
 			}
@@ -443,12 +453,12 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 	}, [
 		P,
 		H,
-		ut,
+		_t,
 		F,
 		K,
 		W,
 		D
-	]), kt = u(async (e) => {
+	]), It = u(async (e) => {
 		if (!P || e === 0) return;
 		let t = [...H].sort((e, t) => e.order - t.order), n = t.map((e) => e.id);
 		[n[e - 1], n[e]] = [n[e], n[e - 1]], await U(n) && F(P, { actions: t.map((e, t) => ({
@@ -460,7 +470,7 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 		H,
 		U,
 		F
-	]), At = u(async (e) => {
+	]), Lt = u(async (e) => {
 		if (!P) return;
 		let t = [...H].sort((e, t) => e.order - t.order);
 		if (e === t.length - 1) return;
@@ -476,11 +486,11 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 		F
 	]);
 	d(() => {
-		P && H.length >= 0 && !st && F(P, { actions: H });
+		P && H.length >= 0 && !mt && F(P, { actions: H });
 	}, [
 		P,
 		H,
-		st,
+		mt,
 		F
 	]);
 	let Q = u((e, t) => {
@@ -497,11 +507,11 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 	d(() => {
 		if (A?.dataSinkId && R.length > 0) {
 			let e = R.find((e) => e.id === A.dataSinkId);
-			e && et(e.key);
-		} else et(null);
+			e && st(e.key);
+		} else st(null);
 	}, [A?.dataSinkId, R]);
-	let jt = u((e) => {
-		if (z(void 0), B(!1), V(null), et(e), e) {
+	let Rt = u((e) => {
+		if (z(void 0), B(!1), V(null), st(e), e) {
 			let t = R.find((t) => t.key === e);
 			t && (Q("dataSinkId", t.id), j((t) => t && {
 				...t,
@@ -522,14 +532,14 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 		R,
 		Q,
 		L
-	]), Mt = u(async (e) => {
+	]), zt = u(async (e) => {
 		if (Q("parserId", e || void 0), z(void 0), B(!1), V(null), e && I) {
-			rt(!0);
+			ut(!0);
 			try {
-				let t = await tt(e);
+				let t = await ct(e);
 				if (t?.success) {
 					z(t.output), B(!0);
-					let e = Be(t.output);
+					let e = Ue(t.output);
 					(e.labelField || e.valueField) && (j((t) => {
 						if (!t) return t;
 						let n = t.config || {}, r = { ...n };
@@ -542,31 +552,31 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 			} catch (e) {
 				B(!0), V(e instanceof Error ? e.message : D("bigconsole.widget.properties.parser.previewFailed", "The parser could not produce a preview.")), console.warn("Failed to auto-detect parser fields:", e);
 			} finally {
-				rt(!1);
+				ut(!1);
 			}
 		}
 	}, [
 		Q,
-		tt,
+		ct,
 		I,
 		L,
 		D
-	]), Nt = u(async () => {
+	]), Bt = u(async () => {
 		if (!I || !A) return;
-		let t = Je.current;
+		let t = tt.current;
 		k("saving");
 		try {
 			let n = {
 				...I.metadata || {},
 				description: A.description || ""
-			}, r = ne(e.getState().widgets.get(I.id)?.config ?? {}, qe.current, A.config), i = re(l({
+			}, r = re(e.getState().widgets.get(I.id)?.config ?? {}, et.current, A.config), i = ie(l({
 				dataSinkId: A.dataSinkId,
 				parserId: A.parserId,
 				config: {
 					...r,
 					binding: void 0
 				}
-			}), r), a = await Ye({
+			}), r), a = await nt({
 				id: I.id,
 				title: A.title,
 				renderer: A.renderer,
@@ -582,7 +592,7 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 			if (A.drilldownConfig) {
 				let { enabled: e, targetDashboardId: t, navigationMode: n, parameterMapping: r, passGlobalFilters: i, maxDepth: a, openIn: s } = A.drilldownConfig;
 				if (I.drilldown?.id) {
-					let c = await Ze({
+					let c = await it({
 						id: I.drilldown.id,
 						targetDashboardId: t,
 						parameterMapping: r,
@@ -594,7 +604,7 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 					});
 					c && (o = c);
 				} else if (t) {
-					let c = await Xe({
+					let c = await rt({
 						sourceWidgetId: I.id,
 						targetDashboardId: t,
 						parameterMapping: r || {},
@@ -608,7 +618,7 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 						enabled: e
 					});
 				}
-			} else I.drilldown?.id && !A.drilldownConfig && (await Qe(I.drilldown.id), o = void 0);
+			} else I.drilldown?.id && !A.drilldownConfig && (await at(I.drilldown.id), o = void 0);
 			a ? (F(I.id, {
 				title: A.title,
 				description: A.description,
@@ -622,40 +632,40 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 				parserRules: A.parserRules,
 				drilldown: o,
 				updatedAt: (/* @__PURE__ */ new Date()).toISOString()
-			}), k("saved"), Je.current === t && N(!1), setTimeout(() => k("idle"), 2e3)) : k("error");
+			}), k("saved"), tt.current === t && N(!1), setTimeout(() => k("idle"), 2e3)) : k("error");
 		} catch {
 			k("error");
 		}
 	}, [
 		I,
 		A,
-		Ye,
+		nt,
 		F,
-		Xe,
-		Ze,
-		Qe
-	]), Pt = u(() => {
-		I && (j(He(I)), qe.current = I.config || {}, N(!1), k("idle"));
-	}, [I]), Ft = u((e) => {
+		rt,
+		it,
+		at
+	]), Vt = u(() => {
+		I && (j(Ge(I)), et.current = I.config || {}, N(!1), k("idle"));
+	}, [I]), Ht = u((e) => {
 		$(e);
-	}, [$]), It = u((e) => {
+	}, [$]), Ut = u((e) => {
 		j((t) => t && {
 			...t,
 			drilldownConfig: e
 		}), L();
-	}, [L]), Lt = I ? r(I.type) : null, Rt = f(() => Fe.map((e) => ({
+	}, [L]), Wt = I ? i(I.type) : null, Gt = f(() => Re.map((e) => ({
 		value: e.value,
 		label: D(e.labelKey, e.label),
 		description: D(e.descriptionKey, e.description)
-	})), [D]), zt = f(() => Ie.map((e) => ({
+	})), [D]), Kt = f(() => ze.map((e) => ({
 		value: e.value,
 		label: D(e.labelKey, e.label)
 	})), [D]);
-	return /* @__PURE__ */ w(De, {
-		open: fe,
-		onOpenChange: (e) => !e && he(),
+	return /* @__PURE__ */ w(Ae, {
+		open: he,
+		onOpenChange: (e) => !e && g(),
 		modal: !1,
-		children: /* @__PURE__ */ T(Oe, {
+		children: /* @__PURE__ */ T(je, {
 			style: {
 				width: "min(420px, 100vw)",
 				maxWidth: "100vw",
@@ -666,7 +676,7 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 				overflow: "hidden"
 			},
 			children: [
-				/* @__PURE__ */ w(Ae, {
+				/* @__PURE__ */ w(Ne, {
 					style: {
 						padding: "var(--space-cardPadding)",
 						borderBottom: "1px solid var(--color-border-subtle)",
@@ -691,7 +701,7 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 								boxShadow: "var(--shadow-elevation-2)",
 								flexShrink: 0
 							},
-							children: /* @__PURE__ */ w(ge, { style: {
+							children: /* @__PURE__ */ w(ve, { style: {
 								height: "var(--size-icon-md)",
 								width: "var(--size-icon-md)",
 								color: "var(--color-action-primary-text)"
@@ -708,7 +718,7 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 									gap: "var(--space-iconGap)"
 								},
 								children: [
-									/* @__PURE__ */ w(je, {
+									/* @__PURE__ */ w(Pe, {
 										style: {
 											fontSize: "var(--font-size-body-md)",
 											fontWeight: "var(--font-weight-bold)",
@@ -717,7 +727,7 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 										},
 										children: I ? D("bigconsole.widget.properties.header.widgetProperties", "Widget Properties") : D("bigconsole.widget.properties.header.properties", "Properties")
 									}),
-									O === "saving" && /* @__PURE__ */ w(Me, { style: {
+									O === "saving" && /* @__PURE__ */ w(Fe, { style: {
 										height: "var(--size-icon-sm)",
 										width: "var(--size-icon-sm)"
 									} }),
@@ -726,27 +736,27 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 										width: "var(--size-icon-sm)",
 										color: "var(--color-status-success-bg)"
 									} }),
-									O === "error" && /* @__PURE__ */ w(g, { style: {
+									O === "error" && /* @__PURE__ */ w(Se, { style: {
 										height: "var(--size-icon-sm)",
 										width: "var(--size-icon-sm)",
 										color: "var(--color-status-error-bg)"
 									} })
 								]
-							}), Lt && /* @__PURE__ */ w(ke, {
+							}), Wt && /* @__PURE__ */ w(Me, {
 								style: {
 									fontSize: "var(--font-size-body-sm)",
 									color: "var(--color-text-secondary)",
 									margin: "var(--space-controlGap) 0 0 0",
 									fontWeight: "var(--font-weight-medium)"
 								},
-								children: Lt.name
+								children: Wt.name
 							})]
 						})]
 					})
 				}),
-				I ? /* @__PURE__ */ T(Ne, {
-					value: Ue,
-					onValueChange: (e) => We(e),
+				I ? /* @__PURE__ */ T(Ie, {
+					value: Ke,
+					onValueChange: (e) => qe(e),
 					style: {
 						flex: 1,
 						display: "flex",
@@ -754,7 +764,7 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 						minHeight: 0,
 						overflow: "hidden"
 					},
-					children: [/* @__PURE__ */ T(Pe, {
+					children: [/* @__PURE__ */ T(Le, {
 						style: {
 							width: "100%",
 							display: "flex",
@@ -802,19 +812,23 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 							/* @__PURE__ */ w(x, {
 								value: "general",
 								className: "mt-0",
-								children: A && /* @__PURE__ */ w(n, { children: /* @__PURE__ */ w(ue, {
+								children: A && /* @__PURE__ */ T(r, { children: [/* @__PURE__ */ w(de, {
 									title: A.title,
 									description: A.description,
 									refreshInterval: A.refreshInterval,
 									onTitleChange: (e) => Q("title", e),
 									onDescriptionChange: (e) => Q("description", e),
 									onRefreshIntervalChange: (e) => Q("refreshInterval", e)
-								}) })
+								}), Xe && Ze && /* @__PURE__ */ w(pe, {
+									position: Ze,
+									columns: me.cols,
+									onChange: Qe
+								})] })
 							}),
 							/* @__PURE__ */ w(x, {
 								value: "data",
 								className: "mt-0",
-								children: A && /* @__PURE__ */ T(n, { children: [(() => {
+								children: A && /* @__PURE__ */ T(r, { children: [(() => {
 									let e = l({
 										dataSinkId: A.dataSinkId,
 										parserId: A.parserId,
@@ -822,30 +836,30 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 											...A.config,
 											binding: void 0
 										}
-									}), t = te({
+									}), t = ne({
 										binding: e,
-										loading: nt,
-										error: ot,
-										preview: it,
-										previewComplete: at
+										loading: lt,
+										error: pt,
+										preview: dt,
+										previewComplete: ft
 									});
-									return /* @__PURE__ */ w(de, {
+									return /* @__PURE__ */ w(fe, {
 										consoleId: I?.dashboardId || "",
 										binding: e,
-										dataSinkKey: $e,
+										dataSinkKey: ot,
 										dataPath: typeof A.config.dataPath == "string" ? A.config.dataPath : void 0,
 										status: t.status,
 										missingFields: t.missingFields,
-										preview: it,
-										error: ot,
-										onDataSinkChange: jt,
-										onParserChange: Mt,
+										preview: dt,
+										error: pt,
+										onDataSinkChange: Rt,
+										onParserChange: zt,
 										onDataPathChange: (e) => $({
 											...A.config,
 											dataPath: e
 										})
 									});
-								})(), /* @__PURE__ */ w(t, {
+								})(), /* @__PURE__ */ w(n, {
 									emphasis: "muted",
 									title: D("bigconsole.widget.properties.data.alternativeSources", "Alternative Data Sources"),
 									description: "Skip the DataSink pipeline and fetch straight from an API, a GraphQL endpoint or sample JSON.",
@@ -856,19 +870,19 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 										children: [
 											/* @__PURE__ */ T("div", {
 												className: "space-y-2",
-												children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.data.sourceTypeLabel", "Data Source Type") }), /* @__PURE__ */ T(Ce, {
+												children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.data.sourceTypeLabel", "Data Source Type") }), /* @__PURE__ */ T(Ee, {
 													value: A.config?.dataSourceType || "",
 													onValueChange: (e) => $({
 														...A.config,
 														dataSourceType: e || void 0
 													}),
-													children: [/* @__PURE__ */ w(Te, {
+													children: [/* @__PURE__ */ w(Oe, {
 														style: {
 															height: "var(--size-controlHeight-md)",
 															fontSize: "var(--font-size-body-sm)"
 														},
-														children: /* @__PURE__ */ w(Ee, { placeholder: D("bigconsole.widget.properties.data.selectTypePlaceholder", "Select type...") })
-													}), /* @__PURE__ */ w(we, {
+														children: /* @__PURE__ */ w(ke, { placeholder: D("bigconsole.widget.properties.data.selectTypePlaceholder", "Select type...") })
+													}), /* @__PURE__ */ w(De, {
 														position: "popper",
 														side: "bottom",
 														sideOffset: 4,
@@ -881,7 +895,7 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 															boxShadow: "var(--shadow-elevation-3)",
 															borderRadius: "var(--radius-button)"
 														},
-														children: zt.map((e) => /* @__PURE__ */ w(b, {
+														children: Kt.map((e) => /* @__PURE__ */ w(b, {
 															value: e.value,
 															children: e.label
 														}, e.value))
@@ -904,16 +918,16 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 													}),
 													/* @__PURE__ */ T("div", {
 														className: "space-y-2",
-														children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.rest.httpMethodLabel", "HTTP Method") }), /* @__PURE__ */ T(Ce, {
+														children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.rest.httpMethodLabel", "HTTP Method") }), /* @__PURE__ */ T(Ee, {
 															value: A.config?.httpMethod || "GET",
 															onValueChange: (e) => $({
 																...A.config,
 																httpMethod: e
 															}),
-															children: [/* @__PURE__ */ w(Te, {
+															children: [/* @__PURE__ */ w(Oe, {
 																style: { height: "var(--size-controlHeight-md)" },
-																children: /* @__PURE__ */ w(Ee, {})
-															}), /* @__PURE__ */ T(we, {
+																children: /* @__PURE__ */ w(ke, {})
+															}), /* @__PURE__ */ T(De, {
 																position: "popper",
 																side: "bottom",
 																sideOffset: 4,
@@ -953,16 +967,16 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 													}),
 													/* @__PURE__ */ T("div", {
 														className: "space-y-2",
-														children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.rest.authenticationLabel", "Authentication") }), /* @__PURE__ */ T(Ce, {
+														children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.rest.authenticationLabel", "Authentication") }), /* @__PURE__ */ T(Ee, {
 															value: A.config?.authType || "none",
 															onValueChange: (e) => $({
 																...A.config,
 																authType: e
 															}),
-															children: [/* @__PURE__ */ w(Te, {
+															children: [/* @__PURE__ */ w(Oe, {
 																style: { height: "var(--size-controlHeight-md)" },
-																children: /* @__PURE__ */ w(Ee, {})
-															}), /* @__PURE__ */ T(we, {
+																children: /* @__PURE__ */ w(ke, {})
+															}), /* @__PURE__ */ T(De, {
 																position: "popper",
 																side: "bottom",
 																sideOffset: 4,
@@ -1125,14 +1139,14 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 							/* @__PURE__ */ w(x, {
 								value: "advanced",
 								className: "mt-0",
-								children: /* @__PURE__ */ T(n, { children: [
-									A && /* @__PURE__ */ w(ce, {
+								children: /* @__PURE__ */ T(r, { children: [
+									A && /* @__PURE__ */ w(le, {
 										renderer: A.renderer,
-										rendererOptions: Rt,
+										rendererOptions: Gt,
 										onRendererChange: (e) => {
 											Q("renderer", e), e === "BIGCONSOLE" && Q("template", void 0);
 										},
-										templateEditor: A.renderer === "BIGCONSOLE" ? void 0 : /* @__PURE__ */ w(Ve, {
+										templateEditor: A.renderer === "BIGCONSOLE" ? void 0 : /* @__PURE__ */ w(We, {
 											widget: {
 												...I,
 												template: A.template,
@@ -1141,7 +1155,7 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 											onSave: (e) => Q("template", e)
 										})
 									}),
-									/* @__PURE__ */ w(t, {
+									/* @__PURE__ */ w(n, {
 										title: D("bigconsole.widget.properties.actions.heading", "Widget Actions"),
 										description: D("bigconsole.widget.properties.actions.subheading", "Configure buttons on this widget"),
 										headingLevel: 3,
@@ -1151,21 +1165,21 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 										}) : void 0,
 										actions: /* @__PURE__ */ T(_, {
 											size: "sm",
-											onClick: Tt,
-											children: [/* @__PURE__ */ w(ve, { className: "size-4" }), D("bigconsole.widget.properties.actions.add", "Add")]
+											onClick: Mt,
+											children: [/* @__PURE__ */ w(be, { className: "size-4" }), D("bigconsole.widget.properties.actions.add", "Add")]
 										}),
 										"data-testid": "widget-inspector-actions",
-										children: st ? /* @__PURE__ */ w("div", {
+										children: mt ? /* @__PURE__ */ w("div", {
 											className: "flex justify-center py-8",
-											children: /* @__PURE__ */ w(Me, { className: "size-6" })
+											children: /* @__PURE__ */ w(Fe, { className: "size-6" })
 										}) : H.length === 0 ? /* @__PURE__ */ w("p", {
 											className: "text-sm text-text-secondary",
 											children: D("bigconsole.widget.properties.actions.empty", "No actions configured")
 										}) : /* @__PURE__ */ w("div", {
 											className: "space-y-2",
-											children: [...H].sort((e, t) => e.order - t.order).map((e, t) => /* @__PURE__ */ w(xe, {
+											children: [...H].sort((e, t) => e.order - t.order).map((e, t) => /* @__PURE__ */ w(we, {
 												className: e.disabled ? "opacity-60" : "",
-												children: /* @__PURE__ */ T(Se, {
+												children: /* @__PURE__ */ T(Te, {
 													className: "p-3 flex items-center gap-2",
 													children: [
 														/* @__PURE__ */ T("div", {
@@ -1173,17 +1187,17 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 															children: [/* @__PURE__ */ w(_, {
 																variant: "ghost",
 																size: "icon-sm",
-																onClick: () => kt(t),
+																onClick: () => It(t),
 																disabled: t === 0,
 																className: "h-5 w-5",
-																children: /* @__PURE__ */ w(me, { className: "size-3" })
+																children: /* @__PURE__ */ w(_e, { className: "size-3" })
 															}), /* @__PURE__ */ w(_, {
 																variant: "ghost",
 																size: "icon-sm",
-																onClick: () => At(t),
+																onClick: () => Lt(t),
 																disabled: t === H.length - 1,
 																className: "h-5 w-5",
-																children: /* @__PURE__ */ w(pe, { className: "size-3" })
+																children: /* @__PURE__ */ w(ge, { className: "size-3" })
 															})]
 														}),
 														/* @__PURE__ */ T("div", {
@@ -1192,16 +1206,16 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 																className: "flex items-center gap-2",
 																children: [/* @__PURE__ */ w("span", {
 																	"aria-hidden": "true",
-																	className: `size-2 shrink-0 rounded-full ${Re[e.style] || ze}`
+																	className: `size-2 shrink-0 rounded-full ${Ve[e.style] || He}`
 																}), /* @__PURE__ */ w("span", {
 																	className: "text-sm font-medium truncate",
 																	children: e.label
 																})]
 															}), /* @__PURE__ */ w("p", {
 																className: "text-xs text-text-secondary truncate",
-																children: wt.has(e.name) ? D("bigconsole.widget.properties.actions.webhookSummary", "→ {{method}} {{url}}", {
-																	method: wt.get(e.name)?.method ?? "",
-																	url: wt.get(e.name)?.webhookUrl ?? ""
+																children: jt.has(e.name) ? D("bigconsole.widget.properties.actions.webhookSummary", "→ {{method}} {{url}}", {
+																	method: jt.get(e.name)?.method ?? "",
+																	url: jt.get(e.name)?.webhookUrl ?? ""
 																}) : D("bigconsole.widget.properties.actions.emitsEvent", "Emits an event")
 															})]
 														}),
@@ -1211,14 +1225,14 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 																variant: "ghost",
 																size: "icon-sm",
 																"aria-label": `Edit ${e.label}`,
-																onClick: () => Et(e),
-																children: /* @__PURE__ */ w(_e, { className: "size-4" })
+																onClick: () => Nt(e),
+																children: /* @__PURE__ */ w(ye, { className: "size-4" })
 															}), /* @__PURE__ */ w(_, {
 																variant: "ghost",
 																size: "icon-sm",
 																"aria-label": `Delete ${e.label}`,
-																onClick: () => Ot(e.id),
-																children: /* @__PURE__ */ w(ye, { className: "size-4" })
+																onClick: () => Ft(e.id),
+																children: /* @__PURE__ */ w(xe, { className: "size-4" })
 															})]
 														})
 													]
@@ -1226,33 +1240,33 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 											}, e.id))
 										})
 									}),
-									/* @__PURE__ */ w(t, {
+									/* @__PURE__ */ w(n, {
 										title: D("bigconsole.widget.properties.section.drilldown", "Drilldown"),
 										description: "Where a click on this widget's data takes the viewer.",
 										headingLevel: 3,
 										"data-testid": "widget-inspector-drilldown",
-										children: /* @__PURE__ */ w(se, {
+										children: /* @__PURE__ */ w(ce, {
 											widget: I,
-											onChange: It
+											onChange: Ut
 										})
 									}),
-									/* @__PURE__ */ w(t, {
+									/* @__PURE__ */ w(n, {
 										title: D("bigconsole.widget.properties.section.webhooks", "Webhooks"),
 										description: "HTTP endpoints called when this widget emits an event.",
 										headingLevel: 3,
 										"data-testid": "widget-inspector-webhooks",
-										children: /* @__PURE__ */ w(ae, {
+										children: /* @__PURE__ */ w(oe, {
 											dashboardId: I.dashboardId,
 											widgetId: I.id
 										})
 									}),
-									/* @__PURE__ */ w(t, {
+									/* @__PURE__ */ w(n, {
 										emphasis: "muted",
 										title: D("bigconsole.widget.properties.section.events", "Events"),
 										description: "Recent deliveries for this widget, newest first. Supporting detail — nothing here changes the widget.",
 										headingLevel: 3,
 										"data-testid": "widget-inspector-events",
-										children: /* @__PURE__ */ w(oe, {
+										children: /* @__PURE__ */ w(se, {
 											dashboardId: I.dashboardId,
 											widgetId: I.id,
 											maxHeight: "min(50vh, 360px)"
@@ -1263,21 +1277,21 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 							/* @__PURE__ */ w(x, {
 								value: "appearance",
 								className: "mt-0",
-								children: A && /* @__PURE__ */ w(le, {
+								children: A && /* @__PURE__ */ w(ue, {
 									widgetType: I.type,
 									config: A.config || {},
-									onChange: Ft
+									onChange: Ht
 								})
 							})
 						]
 					})]
 				}) : /* @__PURE__ */ w("div", {
 					className: "flex min-h-0 flex-1 items-center justify-center p-card-padding",
-					children: /* @__PURE__ */ w(t, {
+					children: /* @__PURE__ */ w(n, {
 						tone: "info",
 						title: D("bigconsole.widget.properties.emptyState", "Select a widget to edit"),
 						headingLevel: 3,
-						icon: /* @__PURE__ */ w(ge, { className: "h-icon-md w-icon-md" }),
+						icon: /* @__PURE__ */ w(ve, { className: "h-icon-md w-icon-md" }),
 						className: "w-full max-w-sm",
 						"data-testid": "widget-inspector-empty",
 						children: /* @__PURE__ */ w("p", {
@@ -1294,7 +1308,7 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 						flexShrink: 0
 					},
 					children: [
-						M && /* @__PURE__ */ w(t, {
+						M && /* @__PURE__ */ w(n, {
 							tone: "warning",
 							padding: "compact",
 							title: D("bigconsole.widget.properties.footer.unsavedChanges", "You have unsaved changes"),
@@ -1302,7 +1316,7 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 							className: "mb-control-gap",
 							"data-testid": "widget-inspector-save-unsaved"
 						}),
-						O === "saved" && !M && /* @__PURE__ */ w(t, {
+						O === "saved" && !M && /* @__PURE__ */ w(n, {
 							tone: "success",
 							padding: "compact",
 							title: D("bigconsole.widget.properties.footer.allSaved", "All changes saved"),
@@ -1311,19 +1325,19 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 							className: "mb-control-gap",
 							"data-testid": "widget-inspector-save-saved"
 						}),
-						O === "error" && /* @__PURE__ */ w(t, {
+						O === "error" && /* @__PURE__ */ w(n, {
 							tone: "danger",
 							padding: "compact",
 							title: D("bigconsole.widget.properties.footer.saveFailed", "Failed to save changes"),
 							headingLevel: 3,
-							icon: /* @__PURE__ */ w(g, { className: "h-icon-sm w-icon-sm" }),
+							icon: /* @__PURE__ */ w(Se, { className: "h-icon-sm w-icon-sm" }),
 							className: "mb-control-gap",
 							"data-testid": "widget-inspector-save-error"
 						}),
 						/* @__PURE__ */ T("div", {
 							className: "flex flex-wrap gap-control-gap",
 							children: [/* @__PURE__ */ w(_, {
-								onClick: Nt,
+								onClick: Bt,
 								disabled: O === "saving" || !M,
 								style: {
 									flex: 1,
@@ -1337,7 +1351,7 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 										alignItems: "center",
 										gap: "var(--space-iconGap)"
 									},
-									children: [/* @__PURE__ */ w(Me, { style: {
+									children: [/* @__PURE__ */ w(Fe, { style: {
 										width: "var(--size-icon-sm)",
 										height: "var(--size-icon-sm)"
 									} }), D("bigconsole.widget.properties.footer.saving", "Saving...")]
@@ -1354,13 +1368,13 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 								})
 							}), /* @__PURE__ */ T(_, {
 								variant: "outline",
-								onClick: Pt,
+								onClick: Vt,
 								disabled: O === "saving" || !M,
 								style: {
 									height: "var(--size-controlHeight-md)",
 									opacity: M ? 1 : .5
 								},
-								children: [/* @__PURE__ */ w(g, { style: {
+								children: [/* @__PURE__ */ w(Se, { style: {
 									width: "var(--size-icon-sm)",
 									height: "var(--size-icon-sm)"
 								} }), D("bigconsole.widget.properties.footer.discard", "Discard")]
@@ -1368,16 +1382,16 @@ var D = fe(function({ isOpen: fe, onClose: he }) {
 						})
 					]
 				}),
-				/* @__PURE__ */ w(ie, {
-					isOpen: _t,
+				/* @__PURE__ */ w(ae, {
+					isOpen: wt,
 					action: J,
-					initialWebhook: Ct,
-					isLoading: vt,
-					saveError: xt,
+					initialWebhook: At,
+					isLoading: Tt,
+					saveError: Ot,
 					onClose: () => {
 						q(!1), Y(void 0), X(void 0), Z(null);
 					},
-					onSave: Dt
+					onSave: Pt
 				})
 			]
 		})