@burdenoff/microfe-bigconsole 2026.712.1 → 2026.713.2

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

@@ -7,26 +7,24 @@ import i from "../../hooks/useWidgetActions.js";
 import a from "../../hooks/useDataSinkOperations.js";
 import o from "../../hooks/useParserOperations.js";
 import "../../hooks/index.js";
-import s from "./chart/ChartConfig.js";
-import c from "./gauge/GaugeConfig.js";
-import l from "./list/ListConfig.js";
-import u from "./metric-card/MetricCardConfig.js";
-import d from "./progress/ProgressConfig.js";
-import f from "./table/TableConfig.js";
-import ee from "../parser/DataSinkSelector.js";
-import te from "../parser/ParserSelector.js";
-import ne from "./ActionConfigDialog.js";
-import re from "./webhook-config/WebhookConfigPanel.js";
+import { getWidgetBinding as s, getWidgetBindingStatus as c, serializeWidgetBinding as ee } from "../../utils/widgetBinding.js";
+import te from "./ActionConfigDialog.js";
+import ne from "./webhook-config/WebhookConfigPanel.js";
 import "./webhook-config/index.js";
-import ie from "./event-logs/EventLogViewer.js";
+import re from "./event-logs/EventLogViewer.js";
 import "./event-logs/index.js";
-import ae from "./DrilldownConfigPanel.js";
-import { memo as p, useCallback as m, useEffect as h, useRef as g, useState as _ } from "react";
-import { Check as v, ChevronDown as oe, ChevronUp as se, ExternalLink as y, Info as b, Pencil as ce, Plus as le, Trash2 as ue, X as x } from "lucide-react";
-import { Button as S, Card as de, CardContent as fe, Input as C, Label as w, Select as T, SelectContent as E, SelectItem as D, SelectTrigger as O, SelectValue as k, Sheet as pe, SheetContent as me, SheetDescription as he, SheetHeader as ge, SheetTitle as _e, Spinner as A, Tabs as ve, TabsContent as j, TabsList as ye, TabsTrigger as M, Textarea as N } from "@burdenoff/fe-libs/ui";
-import { Fragment as be, jsx as P, jsxs as F } from "react/jsx-runtime";
+import ie from "./DrilldownConfigPanel.js";
+import { AdvancedSection as ae } from "../builder/inspector/AdvancedSection.js";
+import { AppearanceSection as oe } from "../builder/inspector/AppearanceSection.js";
+import { GeneralSection as se } from "../builder/inspector/GeneralSection.js";
+import { DataBindingSection as ce } from "../builder/inspector/DataBindingSection.js";
+import "../builder/inspector/index.js";
+import { memo as l, useCallback as u, useEffect as d, useRef as le, useState as f } from "react";
+import { Check as p, ChevronDown as ue, ChevronUp as de, ExternalLink as m, Info as h, Pencil as fe, Plus as pe, Trash2 as me, X as g } from "lucide-react";
+import { Button as _, Card as he, CardContent as ge, Input as v, Label as y, Select as b, SelectContent as x, SelectItem as S, SelectTrigger as C, SelectValue as w, Sheet as _e, SheetContent as ve, SheetDescription as ye, SheetHeader as be, SheetTitle as xe, Spinner as T, Tabs as Se, TabsContent as E, TabsList as Ce, TabsTrigger as D, Textarea as O } from "@burdenoff/fe-libs/ui";
+import { Fragment as we, jsx as k, jsxs as A } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/PropertiesPanel.tsx
-var xe = [
+var Te = [
 	{
 		value: "BIGCONSOLE",
 		label: "BigConsole Native",
@@ -47,7 +45,7 @@ var xe = [
 		label: "Custom",
 		description: "Custom React component"
 	}
-], Se = [
+], Ee = [
 	{
 		value: "DATASINK",
 		label: "DataSink",
@@ -78,14 +76,14 @@ var xe = [
 		label: "Sample JSON",
 		description: "Manually enter sample JSON data"
 	}
-], Ce = {
+], De = {
 	PRIMARY: "bg-action-primary",
 	SECONDARY: "bg-muted-foreground",
 	SUCCESS: "bg-state-success",
 	WARNING: "bg-state-warning",
 	DANGER: "bg-state-error"
 };
-function we(e) {
+function Oe(e) {
 	if (!e) return {};
 	let t = Array.isArray(e) ? e[0] : e;
 	if (!t || typeof t != "object") return {};
@@ -129,30 +127,16 @@ function we(e) {
 		xAxisField: a
 	};
 }
-function Te(e) {
-	switch (e) {
-		case "metric_card":
-		case "kpi_card_comparison": return u;
-		case "chart":
-		case "funnel_chart": return s;
-		case "table":
-		case "pivot_table": return f;
-		case "gauge": return c;
-		case "progress": return d;
-		case "list": return l;
-		default: return null;
-	}
-}
-var Ee = p(function({ widget: e, onSave: t }) {
-	let [n, r] = _(""), [i, a] = _(null), o = g(!1);
-	h(() => {
+var ke = l(function({ widget: e, onSave: t }) {
+	let [n, r] = f(""), [i, a] = f(null), o = le(!1);
+	d(() => {
 		try {
 			r(e.template && typeof e.template == "object" ? JSON.stringify(e.template, null, 2) : ""), a(null), o.current = !0;
 		} catch {
 			r("");
 		}
 	}, [e.id, e.template]);
-	let s = m((e) => {
+	let s = u((e) => {
 		let n = e.target.value;
 		if (r(n), n.trim() === "") a(null), t({});
 		else try {
@@ -161,7 +145,7 @@ var Ee = p(function({ widget: e, onSave: t }) {
 		} catch (e) {
 			a(e.message);
 		}
-	}, [t]), c = m(() => {
+	}, [t]), c = u(() => {
 		try {
 			let e = JSON.parse(n);
 			r(JSON.stringify(e, null, 2)), a(null), t(e);
@@ -169,27 +153,27 @@ var Ee = p(function({ widget: e, onSave: t }) {
 			a(e.message);
 		}
 	}, [n, t]);
-	return /* @__PURE__ */ F("div", {
+	return /* @__PURE__ */ A("div", {
 		style: {
 			paddingTop: "var(--space-formGap)",
 			borderTop: "1px solid var(--color-border)"
 		},
 		children: [
-			/* @__PURE__ */ F("div", {
+			/* @__PURE__ */ A("div", {
 				style: {
 					display: "flex",
 					alignItems: "center",
 					justifyContent: "space-between",
 					marginBottom: "var(--space-controlGap)"
 				},
-				children: [/* @__PURE__ */ P("label", {
+				children: [/* @__PURE__ */ k("label", {
 					style: {
 						fontSize: "var(--font-size-body-sm)",
 						fontWeight: "var(--font-weight-semibold)",
 						color: "var(--color-text-primary)"
 					},
 					children: "Template (JSON)"
-				}), i && /* @__PURE__ */ P("span", {
+				}), i && /* @__PURE__ */ k("span", {
 					style: {
 						fontSize: "var(--font-size-body-sm)",
 						color: "var(--color-status-error-text)",
@@ -198,7 +182,7 @@ var Ee = p(function({ widget: e, onSave: t }) {
 					children: "Invalid JSON"
 				})]
 			}),
-			/* @__PURE__ */ P(N, {
+			/* @__PURE__ */ k(O, {
 				value: n,
 				onChange: s,
 				spellCheck: !1,
@@ -211,7 +195,7 @@ var Ee = p(function({ widget: e, onSave: t }) {
 					resize: "vertical"
 				}
 			}),
-			i && /* @__PURE__ */ P("p", {
+			i && /* @__PURE__ */ k("p", {
 				style: {
 					fontSize: "var(--font-size-body-sm)",
 					color: "var(--color-status-error-text)",
@@ -222,14 +206,14 @@ var Ee = p(function({ widget: e, onSave: t }) {
 				},
 				children: i
 			}),
-			/* @__PURE__ */ F("div", {
+			/* @__PURE__ */ A("div", {
 				style: {
 					display: "flex",
 					alignItems: "center",
 					gap: "var(--space-controlGap)",
 					marginTop: "var(--space-controlGap)"
 				},
-				children: [/* @__PURE__ */ P(S, {
+				children: [/* @__PURE__ */ k(_, {
 					variant: "outline",
 					size: "sm",
 					onClick: c,
@@ -239,7 +223,7 @@ var Ee = p(function({ widget: e, onSave: t }) {
 						fontWeight: "var(--font-weight-semibold)"
 					},
 					children: "Format"
-				}), !i && n.trim() !== "" && /* @__PURE__ */ F("span", {
+				}), !i && n.trim() !== "" && /* @__PURE__ */ A("span", {
 					style: {
 						fontSize: "var(--font-size-body-sm)",
 						color: "var(--color-status-success-text)",
@@ -247,13 +231,13 @@ var Ee = p(function({ widget: e, onSave: t }) {
 						alignItems: "center",
 						gap: "4px"
 					},
-					children: [/* @__PURE__ */ P(v, { style: {
+					children: [/* @__PURE__ */ k(p, { style: {
 						width: "12px",
 						height: "12px"
 					} }), "Valid JSON"]
 				})]
 			}),
-			/* @__PURE__ */ F("div", {
+			/* @__PURE__ */ A("div", {
 				style: {
 					display: "flex",
 					alignItems: "center",
@@ -265,11 +249,11 @@ var Ee = p(function({ widget: e, onSave: t }) {
 					borderTop: "1px solid var(--color-border)"
 				},
 				children: [
-					/* @__PURE__ */ P("span", {
+					/* @__PURE__ */ k("span", {
 						style: { fontWeight: "var(--font-weight-medium)" },
 						children: "Ctrl+S to save"
 					}),
-					e.renderer === "ADAPTIVE_CARD" && /* @__PURE__ */ F("a", {
+					e.renderer === "ADAPTIVE_CARD" && /* @__PURE__ */ A("a", {
 						href: "https://adaptivecards.io/designer/",
 						target: "_blank",
 						rel: "noopener noreferrer",
@@ -282,12 +266,12 @@ var Ee = p(function({ widget: e, onSave: t }) {
 							fontWeight: "var(--font-weight-medium)",
 							textDecoration: "none"
 						},
-						children: ["Designer", /* @__PURE__ */ P(y, { style: {
+						children: ["Designer", /* @__PURE__ */ k(m, { style: {
 							height: "var(--size-icon-sm)",
 							width: "var(--size-icon-sm)"
 						} })]
 					}),
-					e.renderer === "BLOCKKIT" && /* @__PURE__ */ F("a", {
+					e.renderer === "BLOCKKIT" && /* @__PURE__ */ A("a", {
 						href: "https://app.slack.com/block-kit-builder",
 						target: "_blank",
 						rel: "noopener noreferrer",
@@ -300,7 +284,7 @@ var Ee = p(function({ widget: e, onSave: t }) {
 							fontWeight: "var(--font-weight-medium)",
 							textDecoration: "none"
 						},
-						children: ["Block Kit Builder", /* @__PURE__ */ P(y, { style: {
+						children: ["Block Kit Builder", /* @__PURE__ */ k(m, { style: {
 							height: "var(--size-icon-sm)",
 							width: "var(--size-icon-sm)"
 						} })]
@@ -310,17 +294,21 @@ var Ee = p(function({ widget: e, onSave: t }) {
 		]
 	});
 });
-function De(e) {
-	let t = e;
+function Ae(e) {
+	let t = e, n = s({
+		dataSinkId: t.dataSinkId,
+		parserId: t.parserId,
+		config: e.config || {}
+	});
 	return {
 		title: e.title || "",
 		description: e.description || "",
 		refreshInterval: e.refreshInterval ?? void 0,
 		renderer: e.renderer || "BIGCONSOLE",
 		template: e.template,
-		dataSinkId: t.dataSinkId ?? void 0,
+		dataSinkId: n.source.kind === "DATASINK" ? n.source.ref : void 0,
 		datasetId: t.datasetId ?? void 0,
-		parserId: t.parserId ?? void 0,
+		parserId: n.parserId,
 		parserRules: t.parserRules ?? void 0,
 		config: e.config || {},
 		drilldownConfig: e.drilldown ? {
@@ -334,248 +322,260 @@ function De(e) {
 		} : void 0
 	};
 }
-var I = p(function({ isOpen: s, onClose: c }) {
-	let [l, u] = _("general"), [d, f] = _("idle"), [p, y] = _(null), [I, L] = _(!1), R = e((e) => e.selectedWidgetId), Oe = e((e) => e.widgets), z = e((e) => e.updateWidget), B = R ? Oe.get(R) : void 0, V = g(null);
-	h(() => {
-		if (!R) {
-			V.current = null, y(null), L(!1), f("idle");
+var je = l(function({ isOpen: l, onClose: m }) {
+	let [je, Me] = f("general"), [j, M] = f("idle"), [N, P] = f(null), [F, I] = f(!1), L = e((e) => e.selectedWidgetId), Ne = e((e) => e.widgets), R = e((e) => e.updateWidget), z = L ? Ne.get(L) : void 0, B = le(null);
+	d(() => {
+		if (!L) {
+			B.current = null, P(null), I(!1), M("idle");
 			return;
 		}
-		let e = V.current !== R;
-		if (V.current = R, B) {
-			if (I && !e) return;
-			y(De(B)), L(!1), f("idle");
-		} else y(null), L(!1), f("idle");
+		let e = B.current !== L;
+		if (B.current = L, z) {
+			if (F && !e) return;
+			P(Ae(z)), I(!1), M("idle");
+		} else P(null), I(!1), M("idle");
 	}, [
-		R,
-		B,
-		I
+		L,
+		z,
+		F
 	]);
-	let { updateWidget: ke } = n(B?.pageId, B?.dashboardId, { skipFetch: !0 }), { createDrilldown: Ae, updateDrilldown: je, deleteDrilldown: Me } = r(), { dataSinks: H } = a({ skipFetch: !1 }), [U, W] = _(null), { executeParser: G } = o({
-		consoleId: B?.dashboardId,
+	let { updateWidget: Pe } = n(z?.pageId, z?.dashboardId, { skipFetch: !0 }), { createDrilldown: Fe, updateDrilldown: Ie, deleteDrilldown: Le } = r(), { dataSinks: V } = a({ skipFetch: !1 }), [Re, H] = f(null), { executeParser: ze } = o({
+		consoleId: z?.dashboardId,
 		skipFetch: !0
-	}), [Ne, Pe] = _(!1), { actions: K, loading: q, createAction: Fe, updateAction: J, deleteAction: Ie, reorderActions: Y } = i(R || void 0), [Le, X] = _(!1), [Re, Z] = _(void 0), [ze, Be] = _(!1), Ve = m(() => {
+	}), [Be, U] = f(!1), [Ve, W] = f(void 0), [He, G] = f(!1), [Ue, K] = f(null);
+	d(() => {
+		W(void 0), G(!1), K(null), U(!1);
+	}, [L]);
+	let { actions: q, loading: J, createAction: We, updateAction: Ge, deleteAction: Ke, reorderActions: Y } = i(L || void 0), [qe, X] = f(!1), [Je, Z] = f(void 0), [Ye, Xe] = f(!1), Ze = u(() => {
 		Z(void 0), X(!0);
-	}, []), He = m((e) => {
+	}, []), Qe = u((e) => {
 		Z(e), X(!0);
-	}, []), Ue = m(async (e) => {
-		if (R) {
-			Be(!0);
+	}, []), $e = u(async (e) => {
+		if (L) {
+			Xe(!0);
 			try {
 				let t = null;
-				if (t = "id" in e ? await J(e) : await Fe(e), t) {
-					let n = [...K];
+				if (t = "id" in e ? await Ge(e) : await We(e), t) {
+					let n = [...q];
 					if ("id" in e) {
 						let r = n.findIndex((t) => t.id === e.id);
 						r >= 0 && (n[r] = t);
 					} else n.push(t);
-					z(R, { actions: n.sort((e, t) => e.order - t.order) });
+					R(L, { actions: n.sort((e, t) => e.order - t.order) });
 				}
 				X(!1), Z(void 0);
 			} catch {} finally {
-				Be(!1);
+				Xe(!1);
 			}
 		}
 	}, [
-		R,
-		K,
-		Fe,
-		J,
-		z
-	]), We = m(async (e) => {
-		R && window.confirm("Are you sure you want to delete this action?") && await Ie(e) && z(R, { actions: K.filter((t) => t.id !== e) });
+		L,
+		q,
+		We,
+		Ge,
+		R
+	]), et = u(async (e) => {
+		L && window.confirm("Are you sure you want to delete this action?") && await Ke(e) && R(L, { actions: q.filter((t) => t.id !== e) });
 	}, [
-		R,
-		K,
-		Ie,
-		z
-	]), Ge = m(async (e) => {
-		if (!R || e === 0) return;
-		let t = [...K].sort((e, t) => e.order - t.order), n = t.map((e) => e.id);
-		[n[e - 1], n[e]] = [n[e], n[e - 1]], await Y(n) && z(R, { actions: t.map((e, t) => ({
+		L,
+		q,
+		Ke,
+		R
+	]), tt = u(async (e) => {
+		if (!L || e === 0) return;
+		let t = [...q].sort((e, t) => e.order - t.order), n = t.map((e) => e.id);
+		[n[e - 1], n[e]] = [n[e], n[e - 1]], await Y(n) && R(L, { actions: t.map((e, t) => ({
 			...e,
 			order: n.indexOf(e.id)
 		})).sort((e, t) => e.order - t.order) });
 	}, [
-		R,
-		K,
+		L,
+		q,
 		Y,
-		z
-	]), Ke = m(async (e) => {
-		if (!R) return;
-		let t = [...K].sort((e, t) => e.order - t.order);
+		R
+	]), nt = u(async (e) => {
+		if (!L) return;
+		let t = [...q].sort((e, t) => e.order - t.order);
 		if (e === t.length - 1) return;
 		let n = t.map((e) => e.id);
-		[n[e], n[e + 1]] = [n[e + 1], n[e]], await Y(n) && z(R, { actions: t.map((e, t) => ({
+		[n[e], n[e + 1]] = [n[e + 1], n[e]], await Y(n) && R(L, { actions: t.map((e, t) => ({
 			...e,
 			order: n.indexOf(e.id)
 		})).sort((e, t) => e.order - t.order) });
 	}, [
-		R,
-		K,
+		L,
+		q,
 		Y,
-		z
+		R
 	]);
-	h(() => {
-		R && K.length >= 0 && !q && z(R, { actions: K });
+	d(() => {
+		L && q.length >= 0 && !J && R(L, { actions: q });
 	}, [
-		R,
-		K,
+		L,
 		q,
-		z
+		J,
+		R
 	]);
-	let Q = m((e, t) => {
-		y((n) => n && {
+	let Q = u((e, t) => {
+		P((n) => n && {
 			...n,
 			[e]: t
-		}), L(!0);
-	}, []), $ = m((e) => {
-		y((t) => t && {
+		}), I(!0);
+	}, []), $ = u((e) => {
+		P((t) => t && {
 			...t,
 			config: e
-		}), L(!0);
+		}), I(!0);
 	}, []);
-	h(() => {
-		if (p?.dataSinkId && H.length > 0) {
-			let e = H.find((e) => e.id === p.dataSinkId);
-			e && W(e.key);
-		} else W(null);
-	}, [p?.dataSinkId, H]);
-	let qe = m((e) => {
-		if (W(e), e) {
-			let t = H.find((t) => t.key === e);
-			t && (Q("dataSinkId", t.id), y((t) => t && {
+	d(() => {
+		if (N?.dataSinkId && V.length > 0) {
+			let e = V.find((e) => e.id === N.dataSinkId);
+			e && H(e.key);
+		} else H(null);
+	}, [N?.dataSinkId, V]);
+	let rt = u((e) => {
+		if (W(void 0), G(!1), K(null), H(e), e) {
+			let t = V.find((t) => t.key === e);
+			t && (Q("dataSinkId", t.id), P((t) => t && {
 				...t,
 				config: {
 					...t.config,
 					dataSinkKey: e
 				}
-			}), L(!0));
-		} else Q("dataSinkId", void 0), y((e) => e && {
+			}), I(!0));
+		} else Q("dataSinkId", void 0), P((e) => e && {
 			...e,
 			config: {
 				...e.config,
 				dataSinkKey: void 0
 			},
 			parserId: void 0
-		}), L(!0);
-	}, [H, Q]), Je = m(async (e) => {
-		if (Q("parserId", e || void 0), e && B) {
-			Pe(!0);
+		}), I(!0);
+	}, [V, Q]), it = u(async (e) => {
+		if (Q("parserId", e || void 0), W(void 0), G(!1), K(null), e && z) {
+			U(!0);
 			try {
-				let t = await G(e);
-				if (t?.success && t.output) {
-					let e = we(t.output);
-					(e.labelField || e.valueField) && (y((t) => {
+				let t = await ze(e);
+				if (t?.success) {
+					W(t.output), G(!0);
+					let e = Oe(t.output);
+					(e.labelField || e.valueField) && (P((t) => {
 						if (!t) return t;
 						let n = t.config || {}, r = { ...n };
 						return e.labelField && !n.labelField && (r.labelField = e.labelField), e.valueField && !n.valueField && (r.valueField = e.valueField), e.xAxisField && !n.xAxisField && (r.xAxisField = e.xAxisField), {
 							...t,
 							config: r
 						};
-					}), L(!0));
-				}
+					}), I(!0));
+				} else G(!0), K(t?.error || "The parser could not produce a preview.");
 			} catch (e) {
-				console.warn("Failed to auto-detect parser fields:", e);
+				G(!0), K(e instanceof Error ? e.message : "The parser could not produce a preview."), console.warn("Failed to auto-detect parser fields:", e);
 			} finally {
-				Pe(!1);
+				U(!1);
 			}
 		}
 	}, [
 		Q,
-		G,
-		B
-	]), Ye = m(async () => {
-		if (!(!B || !p)) {
-			f("saving");
+		ze,
+		z
+	]), at = u(async () => {
+		if (!(!z || !N)) {
+			M("saving");
 			try {
 				let e = {
-					...B.metadata || {},
-					description: p.description || ""
-				}, t = await ke({
-					id: B.id,
-					title: p.title,
-					renderer: p.renderer,
-					template: p.template,
-					config: p.config,
-					refreshInterval: p.refreshInterval,
-					dataSinkId: p.dataSinkId,
-					datasetId: p.datasetId,
-					parserId: p.parserId,
-					parserRules: p.parserRules,
+					...z.metadata || {},
+					description: N.description || ""
+				}, t = ee(s({
+					dataSinkId: N.dataSinkId,
+					parserId: N.parserId,
+					config: {
+						...N.config,
+						binding: void 0
+					}
+				}), N.config), n = await Pe({
+					id: z.id,
+					title: N.title,
+					renderer: N.renderer,
+					template: N.template,
+					config: t.config,
+					refreshInterval: N.refreshInterval,
+					dataSinkId: t.dataSinkId,
+					datasetId: N.datasetId,
+					parserId: t.parserId,
+					parserRules: N.parserRules,
 					metadata: e
-				}), n = B.drilldown;
-				if (p.drilldownConfig) {
-					let { enabled: e, targetDashboardId: t, navigationMode: r, parameterMapping: i, passGlobalFilters: a, maxDepth: o, openIn: s } = p.drilldownConfig;
-					if (B.drilldown?.id) {
-						let c = await je({
-							id: B.drilldown.id,
+				}), r = z.drilldown;
+				if (N.drilldownConfig) {
+					let { enabled: e, targetDashboardId: t, navigationMode: n, parameterMapping: i, passGlobalFilters: a, maxDepth: o, openIn: s } = N.drilldownConfig;
+					if (z.drilldown?.id) {
+						let c = await Ie({
+							id: z.drilldown.id,
 							targetDashboardId: t,
 							parameterMapping: i,
-							navigationMode: r,
+							navigationMode: n,
 							enabled: e,
 							passGlobalFilters: a,
 							maxDepth: o,
 							openIn: s
 						});
-						c && (n = c);
+						c && (r = c);
 					} else if (t) {
-						let c = await Ae({
-							sourceWidgetId: B.id,
+						let c = await Fe({
+							sourceWidgetId: z.id,
 							targetDashboardId: t,
 							parameterMapping: i || {},
-							navigationMode: r,
+							navigationMode: n,
 							passGlobalFilters: a,
 							maxDepth: o,
 							openIn: s
 						});
-						c && (n = {
+						c && (r = {
 							...c,
 							enabled: e
 						});
 					}
-				} else B.drilldown?.id && !p.drilldownConfig && (await Me(B.drilldown.id), n = void 0);
-				t ? (z(B.id, {
-					title: p.title,
-					description: p.description,
-					renderer: p.renderer,
-					template: p.template,
-					config: p.config,
-					refreshInterval: p.refreshInterval,
-					dataSinkId: p.dataSinkId,
-					datasetId: p.datasetId,
-					parserId: p.parserId,
-					parserRules: p.parserRules,
-					drilldown: n,
+				} else z.drilldown?.id && !N.drilldownConfig && (await Le(z.drilldown.id), r = void 0);
+				n ? (R(z.id, {
+					title: N.title,
+					description: N.description,
+					renderer: N.renderer,
+					template: N.template,
+					config: t.config,
+					refreshInterval: N.refreshInterval,
+					dataSinkId: t.dataSinkId,
+					datasetId: N.datasetId,
+					parserId: t.parserId,
+					parserRules: N.parserRules,
+					drilldown: r,
 					updatedAt: (/* @__PURE__ */ new Date()).toISOString()
-				}), f("saved"), L(!1), setTimeout(() => f("idle"), 2e3)) : f("error");
+				}), M("saved"), I(!1), setTimeout(() => M("idle"), 2e3)) : M("error");
 			} catch {
-				f("error");
+				M("error");
 			}
 		}
 	}, [
-		B,
-		p,
-		ke,
 		z,
-		Ae,
-		je,
-		Me
-	]), Xe = m(() => {
-		B && (y(De(B)), L(!1), f("idle"));
-	}, [B]), Ze = m((e) => {
+		N,
+		Pe,
+		R,
+		Fe,
+		Ie,
+		Le
+	]), ot = u(() => {
+		z && (P(Ae(z)), I(!1), M("idle"));
+	}, [z]), st = u((e) => {
 		$(e);
-	}, [$]), Qe = m((e) => {
-		y((t) => t && {
+	}, [$]), ct = u((e) => {
+		P((t) => t && {
 			...t,
 			drilldownConfig: e
-		}), L(!0);
-	}, []), $e = B ? t(B.type) : null, et = B ? Te(B.type) : null;
-	return /* @__PURE__ */ P(pe, {
-		open: s,
-		onOpenChange: (e) => !e && c(),
+		}), I(!0);
+	}, []), lt = z ? t(z.type) : null;
+	return /* @__PURE__ */ k(_e, {
+		open: l,
+		onOpenChange: (e) => !e && m(),
 		modal: !1,
-		children: /* @__PURE__ */ F(me, {
+		children: /* @__PURE__ */ A(ve, {
 			style: {
 				width: "420px",
 				maxWidth: "90vw",
@@ -586,20 +586,20 @@ var I = p(function({ isOpen: s, onClose: c }) {
 				overflow: "hidden"
 			},
 			children: [
-				/* @__PURE__ */ P(ge, {
+				/* @__PURE__ */ k(be, {
 					style: {
 						padding: "var(--space-cardPadding)",
 						borderBottom: "1px solid var(--color-border)",
 						backgroundColor: "var(--color-bg-surface)",
 						flexShrink: 0
 					},
-					children: /* @__PURE__ */ F("div", {
+					children: /* @__PURE__ */ A("div", {
 						style: {
 							display: "flex",
 							alignItems: "center",
 							gap: "var(--space-controlGap)"
 						},
-						children: [/* @__PURE__ */ P("div", {
+						children: [/* @__PURE__ */ k("div", {
 							style: {
 								display: "flex",
 								height: "var(--size-controlHeight-lg)",
@@ -611,62 +611,62 @@ var I = p(function({ isOpen: s, onClose: c }) {
 								boxShadow: "var(--shadow-elevation-2)",
 								flexShrink: 0
 							},
-							children: /* @__PURE__ */ P(b, { style: {
+							children: /* @__PURE__ */ k(h, { style: {
 								height: "var(--size-icon-md)",
 								width: "var(--size-icon-md)",
 								color: "var(--color-action-primary-text)"
 							} })
-						}), /* @__PURE__ */ F("div", {
+						}), /* @__PURE__ */ A("div", {
 							style: {
 								flex: 1,
 								minWidth: 0
 							},
-							children: [/* @__PURE__ */ F("div", {
+							children: [/* @__PURE__ */ A("div", {
 								style: {
 									display: "flex",
 									alignItems: "center",
 									gap: "var(--space-iconGap)"
 								},
 								children: [
-									/* @__PURE__ */ P(_e, {
+									/* @__PURE__ */ k(xe, {
 										style: {
 											fontSize: "var(--font-size-body-md)",
 											fontWeight: "var(--font-weight-bold)",
 											color: "var(--color-text-primary)",
 											margin: 0
 										},
-										children: B ? "Widget Properties" : "Properties"
+										children: z ? "Widget Properties" : "Properties"
 									}),
-									d === "saving" && /* @__PURE__ */ P(A, { style: {
+									j === "saving" && /* @__PURE__ */ k(T, { style: {
 										height: "var(--size-icon-sm)",
 										width: "var(--size-icon-sm)"
 									} }),
-									d === "saved" && /* @__PURE__ */ P(v, { style: {
+									j === "saved" && /* @__PURE__ */ k(p, { style: {
 										height: "var(--size-icon-sm)",
 										width: "var(--size-icon-sm)",
 										color: "var(--color-status-success-bg)"
 									} }),
-									d === "error" && /* @__PURE__ */ P(x, { style: {
+									j === "error" && /* @__PURE__ */ k(g, { style: {
 										height: "var(--size-icon-sm)",
 										width: "var(--size-icon-sm)",
 										color: "var(--color-status-error-bg)"
 									} })
 								]
-							}), $e && /* @__PURE__ */ P(he, {
+							}), lt && /* @__PURE__ */ k(ye, {
 								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: $e.name
+								children: lt.name
 							})]
 						})]
 					})
 				}),
-				B ? /* @__PURE__ */ F(ve, {
-					value: l,
-					onValueChange: (e) => u(e),
+				z ? /* @__PURE__ */ A(Se, {
+					value: je,
+					onValueChange: (e) => Me(e),
 					style: {
 						flex: 1,
 						display: "flex",
@@ -674,7 +674,7 @@ var I = p(function({ isOpen: s, onClose: c }) {
 						minHeight: 0,
 						overflow: "hidden"
 					},
-					children: [/* @__PURE__ */ F(ye, {
+					children: [/* @__PURE__ */ A(Ce, {
 						style: {
 							width: "100%",
 							display: "flex",
@@ -689,7 +689,7 @@ var I = p(function({ isOpen: s, onClose: c }) {
 							overflowX: "auto"
 						},
 						children: [
-							/* @__PURE__ */ P(M, {
+							/* @__PURE__ */ k(D, {
 								value: "general",
 								style: {
 									fontWeight: "var(--font-weight-semibold)",
@@ -699,7 +699,7 @@ var I = p(function({ isOpen: s, onClose: c }) {
 								},
 								children: "General"
 							}),
-							/* @__PURE__ */ P(M, {
+							/* @__PURE__ */ k(D, {
 								value: "data",
 								style: {
 									fontWeight: "var(--font-weight-semibold)",
@@ -709,47 +709,17 @@ var I = p(function({ isOpen: s, onClose: c }) {
 								},
 								children: "Data"
 							}),
-							/* @__PURE__ */ P(M, {
-								value: "actions",
+							/* @__PURE__ */ k(D, {
+								value: "advanced",
 								style: {
 									fontWeight: "var(--font-weight-semibold)",
 									fontSize: "12px",
 									padding: "6px 8px",
 									flexShrink: 0
 								},
-								children: "Actions"
+								children: "Advanced"
 							}),
-							/* @__PURE__ */ P(M, {
-								value: "drilldown",
-								style: {
-									fontWeight: "var(--font-weight-semibold)",
-									fontSize: "12px",
-									padding: "6px 8px",
-									flexShrink: 0
-								},
-								children: "Drilldown"
-							}),
-							/* @__PURE__ */ P(M, {
-								value: "webhooks",
-								style: {
-									fontWeight: "var(--font-weight-semibold)",
-									fontSize: "12px",
-									padding: "6px 8px",
-									flexShrink: 0
-								},
-								children: "Hooks"
-							}),
-							/* @__PURE__ */ P(M, {
-								value: "events",
-								style: {
-									fontWeight: "var(--font-weight-semibold)",
-									fontSize: "12px",
-									padding: "6px 8px",
-									flexShrink: 0
-								},
-								children: "Events"
-							}),
-							/* @__PURE__ */ P(M, {
+							/* @__PURE__ */ k(D, {
 								value: "appearance",
 								style: {
 									fontWeight: "var(--font-weight-semibold)",
@@ -760,7 +730,7 @@ var I = p(function({ isOpen: s, onClose: c }) {
 								children: "Style"
 							})
 						]
-					}), /* @__PURE__ */ F("div", {
+					}), /* @__PURE__ */ A("div", {
 						style: {
 							flex: 1,
 							overflow: "auto",
@@ -768,287 +738,83 @@ var I = p(function({ isOpen: s, onClose: c }) {
 							minHeight: 0
 						},
 						children: [
-							/* @__PURE__ */ P(j, {
+							/* @__PURE__ */ k(E, {
 								value: "general",
 								className: "mt-0",
-								children: p && /* @__PURE__ */ F("div", {
+								children: N && /* @__PURE__ */ k("div", {
 									style: {
 										display: "flex",
 										flexDirection: "column",
 										gap: "var(--space-formGap)"
 									},
-									children: [
-										/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
-											htmlFor: "title",
-											style: {
-												display: "block",
-												fontSize: "var(--font-size-body-sm)",
-												fontWeight: "var(--font-weight-semibold)",
-												color: "var(--color-text-primary)",
-												marginBottom: "var(--space-controlGap)"
-											},
-											children: "Title"
-										}), /* @__PURE__ */ P(C, {
-											id: "title",
-											value: p.title,
-											onChange: (e) => Q("title", e.target.value),
-											style: {
-												height: "var(--size-controlHeight-md)",
-												fontSize: "var(--font-size-body-sm)"
-											}
-										})] }),
-										/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
-											htmlFor: "description",
-											style: {
-												display: "block",
-												fontSize: "var(--font-size-body-sm)",
-												fontWeight: "var(--font-weight-semibold)",
-												color: "var(--color-text-primary)",
-												marginBottom: "var(--space-controlGap)"
-											},
-											children: "Description"
-										}), /* @__PURE__ */ P(N, {
-											id: "description",
-											value: p.description,
-											onChange: (e) => Q("description", e.target.value),
-											rows: 3,
-											style: {
-												fontSize: "var(--font-size-body-sm)",
-												resize: "none"
-											}
-										})] }),
-										/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
-											htmlFor: "refresh",
-											style: {
-												display: "block",
-												fontSize: "var(--font-size-body-sm)",
-												fontWeight: "var(--font-weight-semibold)",
-												color: "var(--color-text-primary)",
-												marginBottom: "var(--space-controlGap)"
-											},
-											children: "Auto-Refresh (seconds)"
-										}), /* @__PURE__ */ P(C, {
-											id: "refresh",
-											type: "number",
-											value: p.refreshInterval || "",
-											onChange: (e) => Q("refreshInterval", e.target.value ? Number(e.target.value) : void 0),
-											min: 0,
-											placeholder: "No auto-refresh",
-											style: {
-												height: "var(--size-controlHeight-md)",
-												fontSize: "var(--font-size-body-sm)"
-											}
-										})] }),
-										/* @__PURE__ */ F("div", {
-											style: {
-												paddingTop: "var(--space-formGap)",
-												borderTop: "1px solid var(--color-border)"
-											},
-											children: [
-												/* @__PURE__ */ P("label", {
-													style: {
-														display: "block",
-														fontSize: "var(--font-size-body-sm)",
-														fontWeight: "var(--font-weight-semibold)",
-														color: "var(--color-text-primary)",
-														marginBottom: "var(--space-controlGap)"
-													},
-													children: "Renderer"
-												}),
-												/* @__PURE__ */ F(T, {
-													value: p.renderer,
-													onValueChange: (e) => {
-														let t = e;
-														Q("renderer", t), t === "BIGCONSOLE" && Q("template", void 0);
-													},
-													children: [/* @__PURE__ */ P(O, {
-														style: {
-															height: "var(--size-controlHeight-md)",
-															fontSize: "var(--font-size-body-sm)"
-														},
-														children: /* @__PURE__ */ P(k, { placeholder: "Select renderer" })
-													}), /* @__PURE__ */ P(E, {
-														position: "popper",
-														side: "bottom",
-														sideOffset: 4,
-														align: "start",
-														style: {
-															zIndex: 9999,
-															maxHeight: "200px",
-															backgroundColor: "var(--color-overlay-popoverBg, var(--color-bg-surface, #ffffff))",
-															border: "1px solid var(--color-border)",
-															boxShadow: "var(--shadow-elevation-3)",
-															borderRadius: "var(--radius-button)"
-														},
-														children: xe.map((e) => /* @__PURE__ */ P(D, {
-															value: e.value,
-															children: e.label
-														}, e.value))
-													})]
-												}),
-												/* @__PURE__ */ P("p", {
-													style: {
-														fontSize: "var(--font-size-body-sm)",
-														color: "var(--color-text-muted)",
-														marginTop: "var(--space-controlGap)"
-													},
-													children: xe.find((e) => e.value === p.renderer)?.description
-												})
-											]
-										}),
-										p.renderer && p.renderer !== "BIGCONSOLE" && /* @__PURE__ */ P(Ee, {
-											widget: {
-												...B,
-												template: p.template,
-												renderer: p.renderer
-											},
-											onSave: (e) => Q("template", e)
-										})
-									]
+									children: /* @__PURE__ */ k(se, {
+										title: N.title,
+										description: N.description,
+										refreshInterval: N.refreshInterval,
+										onTitleChange: (e) => Q("title", e),
+										onDescriptionChange: (e) => Q("description", e),
+										onRefreshIntervalChange: (e) => Q("refreshInterval", e)
+									})
 								})
 							}),
-							/* @__PURE__ */ P(j, {
+							/* @__PURE__ */ k(E, {
 								value: "data",
 								className: "mt-0 space-y-4",
-								children: p && /* @__PURE__ */ F(be, { children: [
-									/* @__PURE__ */ F("div", {
-										className: "space-y-4",
-										children: [
-											/* @__PURE__ */ P("div", {
-												className: "p-3 bg-bg-sunken rounded-md border border-border-subtle",
-												children: /* @__PURE__ */ P("p", {
-													className: "text-xs text-text-secondary",
-													children: "Connect this widget to a DataSink and Parser to display transformed data."
-												})
-											}),
-											/* @__PURE__ */ F("div", {
-												className: "space-y-2",
-												children: [
-													/* @__PURE__ */ P(w, { children: "DataSink" }),
-													/* @__PURE__ */ P(ee, {
-														value: U,
-														onChange: qe,
-														placeholder: "Select a DataSink..."
-													}),
-													U && /* @__PURE__ */ F("p", {
-														className: "text-xs text-text-secondary",
-														children: [
-															"Key: ",
-															U,
-															p.dataSinkId && /* @__PURE__ */ F("span", {
-																className: "ml-2 text-text-tertiary",
-																children: [
-																	"ID: ",
-																	p.dataSinkId.slice(0, 8),
-																	"..."
-																]
-															})
-														]
-													})
-												]
-											}),
-											/* @__PURE__ */ F("div", {
-												className: "space-y-2",
-												children: [
-													/* @__PURE__ */ P(w, { children: "Parser" }),
-													/* @__PURE__ */ P(te, {
-														consoleId: B?.dashboardId || "",
-														value: p.parserId || null,
-														onChange: Je,
-														filterInputSinkKey: U || void 0,
-														filterStatus: void 0,
-														placeholder: U ? "Select a parser..." : "Select a DataSink first...",
-														disabled: !U
-													}),
-													/* @__PURE__ */ P("p", {
-														className: "text-xs text-text-secondary",
-														children: Ne ? /* @__PURE__ */ F("span", {
-															className: "flex items-center gap-1",
-															children: [/* @__PURE__ */ P(A, { style: {
-																width: "12px",
-																height: "12px"
-															} }), "Auto-detecting field mappings..."]
-														}) : U ? "Showing parsers that use this DataSink as input" : "Select a DataSink to see available parsers"
-													})
-												]
-											}),
-											!!(p.parserId && (p.config?.labelField || p.config?.valueField)) && /* @__PURE__ */ F("div", {
-												className: "p-3 bg-green-50 dark:bg-green-950/30 rounded-md border border-green-200 dark:border-green-800",
-												children: [/* @__PURE__ */ P("p", {
-													className: "text-xs font-medium text-green-700 dark:text-green-400 mb-2",
-													children: "✓ Field mappings configured"
-												}), /* @__PURE__ */ F("div", {
-													className: "text-xs text-green-600 dark:text-green-500 space-y-1",
-													children: [
-														!!p.config?.labelField && /* @__PURE__ */ F("p", { children: [
-															"Label Field:",
-															" ",
-															/* @__PURE__ */ P("code", {
-																className: "bg-green-100 dark:bg-green-900 px-1 rounded",
-																children: String(p.config.labelField)
-															})
-														] }),
-														!!p.config?.valueField && /* @__PURE__ */ F("p", { children: [
-															"Value Field:",
-															" ",
-															/* @__PURE__ */ P("code", {
-																className: "bg-green-100 dark:bg-green-900 px-1 rounded",
-																children: String(p.config.valueField)
-															})
-														] }),
-														!!p.config?.xAxisField && /* @__PURE__ */ F("p", { children: [
-															"X-Axis Field:",
-															" ",
-															/* @__PURE__ */ P("code", {
-																className: "bg-green-100 dark:bg-green-900 px-1 rounded",
-																children: String(p.config.xAxisField)
-															})
-														] })
-													]
-												})]
-											}),
-											/* @__PURE__ */ F("div", {
-												className: "space-y-2",
-												children: [
-													/* @__PURE__ */ P(w, { children: "Data Path (Optional)" }),
-													/* @__PURE__ */ P(C, {
-														value: p.config?.dataPath || "",
-														onChange: (e) => $({
-															...p.config,
-															dataPath: e.target.value || void 0
-														}),
-														placeholder: "e.g., summary.totalRevenue"
-													}),
-													/* @__PURE__ */ P("p", {
-														className: "text-xs text-text-secondary",
-														children: "Path to extract specific data from the parser output (dot notation)"
-													})
-												]
+								children: N && /* @__PURE__ */ A(we, { children: [
+									(() => {
+										let e = s({
+											dataSinkId: N.dataSinkId,
+											parserId: N.parserId,
+											config: {
+												...N.config,
+												binding: void 0
+											}
+										}), t = c({
+											binding: e,
+											loading: Be,
+											error: Ue,
+											preview: Ve,
+											previewComplete: He
+										});
+										return /* @__PURE__ */ k(ce, {
+											consoleId: z?.dashboardId || "",
+											binding: e,
+											dataSinkKey: Re,
+											dataPath: typeof N.config.dataPath == "string" ? N.config.dataPath : void 0,
+											status: t.status,
+											missingFields: t.missingFields,
+											preview: Ve,
+											error: Ue,
+											onDataSinkChange: rt,
+											onParserChange: it,
+											onDataPathChange: (e) => $({
+												...N.config,
+												dataPath: e
 											})
-										]
-									}),
-									/* @__PURE__ */ P("div", {
+										});
+									})(),
+									/* @__PURE__ */ k("div", {
 										className: "border-t border-border-subtle pt-4",
-										children: /* @__PURE__ */ P(w, {
+										children: /* @__PURE__ */ k(y, {
 											className: "text-xs text-text-secondary uppercase tracking-wide",
 											children: "Alternative Data Sources"
 										})
 									}),
-									/* @__PURE__ */ F("div", {
+									/* @__PURE__ */ A("div", {
 										className: "space-y-2",
-										children: [/* @__PURE__ */ P(w, { children: "Data Source Type" }), /* @__PURE__ */ F(T, {
-											value: p.config?.dataSourceType || "",
+										children: [/* @__PURE__ */ k(y, { children: "Data Source Type" }), /* @__PURE__ */ A(b, {
+											value: N.config?.dataSourceType || "",
 											onValueChange: (e) => $({
-												...p.config,
+												...N.config,
 												dataSourceType: e || void 0
 											}),
-											children: [/* @__PURE__ */ P(O, {
+											children: [/* @__PURE__ */ k(C, {
 												style: {
 													height: "var(--size-controlHeight-md)",
 													fontSize: "var(--font-size-body-sm)"
 												},
-												children: /* @__PURE__ */ P(k, { placeholder: "Select type..." })
-											}), /* @__PURE__ */ P(E, {
+												children: /* @__PURE__ */ k(w, { placeholder: "Select type..." })
+											}), /* @__PURE__ */ k(x, {
 												position: "popper",
 												side: "bottom",
 												sideOffset: 4,
@@ -1061,56 +827,56 @@ var I = p(function({ isOpen: s, onClose: c }) {
 													boxShadow: "var(--shadow-elevation-3)",
 													borderRadius: "var(--radius-button)"
 												},
-												children: Se.map((e) => /* @__PURE__ */ P(D, {
+												children: Ee.map((e) => /* @__PURE__ */ k(S, {
 													value: e.value,
 													children: e.label
 												}, e.value))
 											})]
 										})]
 									}),
-									p.config?.dataSourceType === "REST_API" && /* @__PURE__ */ F("div", {
+									N.config?.dataSourceType === "REST_API" && /* @__PURE__ */ A("div", {
 										className: "space-y-3",
 										children: [
-											/* @__PURE__ */ F("div", {
+											/* @__PURE__ */ A("div", {
 												className: "space-y-2",
-												children: [/* @__PURE__ */ P(w, { children: "Endpoint URL *" }), /* @__PURE__ */ P(C, {
-													value: p.config?.endpointUrl || "",
+												children: [/* @__PURE__ */ k(y, { children: "Endpoint URL *" }), /* @__PURE__ */ k(v, {
+													value: N.config?.endpointUrl || "",
 													onChange: (e) => $({
-														...p.config,
+														...N.config,
 														endpointUrl: e.target.value || void 0
 													}),
 													placeholder: "https://api.example.com/data"
 												})]
 											}),
-											/* @__PURE__ */ F("div", {
+											/* @__PURE__ */ A("div", {
 												className: "space-y-2",
-												children: [/* @__PURE__ */ P(w, { children: "HTTP Method" }), /* @__PURE__ */ F(T, {
-													value: p.config?.httpMethod || "GET",
+												children: [/* @__PURE__ */ k(y, { children: "HTTP Method" }), /* @__PURE__ */ A(b, {
+													value: N.config?.httpMethod || "GET",
 													onValueChange: (e) => $({
-														...p.config,
+														...N.config,
 														httpMethod: e
 													}),
-													children: [/* @__PURE__ */ P(O, {
+													children: [/* @__PURE__ */ k(C, {
 														style: { height: "var(--size-controlHeight-md)" },
-														children: /* @__PURE__ */ P(k, {})
-													}), /* @__PURE__ */ F(E, {
+														children: /* @__PURE__ */ k(w, {})
+													}), /* @__PURE__ */ A(x, {
 														position: "popper",
 														side: "bottom",
 														sideOffset: 4,
 														children: [
-															/* @__PURE__ */ P(D, {
+															/* @__PURE__ */ k(S, {
 																value: "GET",
 																children: "GET"
 															}),
-															/* @__PURE__ */ P(D, {
+															/* @__PURE__ */ k(S, {
 																value: "POST",
 																children: "POST"
 															}),
-															/* @__PURE__ */ P(D, {
+															/* @__PURE__ */ k(S, {
 																value: "PUT",
 																children: "PUT"
 															}),
-															/* @__PURE__ */ P(D, {
+															/* @__PURE__ */ k(S, {
 																value: "DELETE",
 																children: "DELETE"
 															})
@@ -1118,12 +884,12 @@ var I = p(function({ isOpen: s, onClose: c }) {
 													})]
 												})]
 											}),
-											/* @__PURE__ */ F("div", {
+											/* @__PURE__ */ A("div", {
 												className: "space-y-2",
-												children: [/* @__PURE__ */ P(w, { children: "Headers (JSON)" }), /* @__PURE__ */ P(N, {
-													value: p.config?.headers || "",
+												children: [/* @__PURE__ */ k(y, { children: "Headers (JSON)" }), /* @__PURE__ */ k(O, {
+													value: N.config?.headers || "",
 													onChange: (e) => $({
-														...p.config,
+														...N.config,
 														headers: e.target.value || void 0
 													}),
 													rows: 3,
@@ -1131,35 +897,35 @@ var I = p(function({ isOpen: s, onClose: c }) {
 													className: "font-mono text-xs"
 												})]
 											}),
-											/* @__PURE__ */ F("div", {
+											/* @__PURE__ */ A("div", {
 												className: "space-y-2",
-												children: [/* @__PURE__ */ P(w, { children: "Authentication" }), /* @__PURE__ */ F(T, {
-													value: p.config?.authType || "none",
+												children: [/* @__PURE__ */ k(y, { children: "Authentication" }), /* @__PURE__ */ A(b, {
+													value: N.config?.authType || "none",
 													onValueChange: (e) => $({
-														...p.config,
+														...N.config,
 														authType: e
 													}),
-													children: [/* @__PURE__ */ P(O, {
+													children: [/* @__PURE__ */ k(C, {
 														style: { height: "var(--size-controlHeight-md)" },
-														children: /* @__PURE__ */ P(k, {})
-													}), /* @__PURE__ */ F(E, {
+														children: /* @__PURE__ */ k(w, {})
+													}), /* @__PURE__ */ A(x, {
 														position: "popper",
 														side: "bottom",
 														sideOffset: 4,
 														children: [
-															/* @__PURE__ */ P(D, {
+															/* @__PURE__ */ k(S, {
 																value: "none",
 																children: "None"
 															}),
-															/* @__PURE__ */ P(D, {
+															/* @__PURE__ */ k(S, {
 																value: "api_key",
 																children: "API Key"
 															}),
-															/* @__PURE__ */ P(D, {
+															/* @__PURE__ */ k(S, {
 																value: "bearer",
 																children: "Bearer Token"
 															}),
-															/* @__PURE__ */ P(D, {
+															/* @__PURE__ */ k(S, {
 																value: "basic",
 																children: "Basic Auth"
 															})
@@ -1167,24 +933,24 @@ var I = p(function({ isOpen: s, onClose: c }) {
 													})]
 												})]
 											}),
-											!!(p.config?.authType && p.config.authType !== "none") && /* @__PURE__ */ F("div", {
+											!!(N.config?.authType && N.config.authType !== "none") && /* @__PURE__ */ A("div", {
 												className: "space-y-2",
-												children: [/* @__PURE__ */ P(w, { children: String(p.config.authType) === "basic" ? "Credentials (user:pass)" : "Token/Key" }), /* @__PURE__ */ P(C, {
+												children: [/* @__PURE__ */ k(y, { children: String(N.config.authType) === "basic" ? "Credentials (user:pass)" : "Token/Key" }), /* @__PURE__ */ k(v, {
 													type: "password",
-													value: p.config?.authValue || "",
+													value: N.config?.authValue || "",
 													onChange: (e) => $({
-														...p.config,
+														...N.config,
 														authValue: e.target.value || void 0
 													}),
-													placeholder: p.config.authType === "basic" ? "username:password" : "Enter token or API key"
+													placeholder: N.config.authType === "basic" ? "username:password" : "Enter token or API key"
 												})]
 											}),
-											(p.config?.httpMethod === "POST" || p.config?.httpMethod === "PUT") && /* @__PURE__ */ F("div", {
+											(N.config?.httpMethod === "POST" || N.config?.httpMethod === "PUT") && /* @__PURE__ */ A("div", {
 												className: "space-y-2",
-												children: [/* @__PURE__ */ P(w, { children: "Request Body (JSON)" }), /* @__PURE__ */ P(N, {
-													value: p.config?.requestBody || "",
+												children: [/* @__PURE__ */ k(y, { children: "Request Body (JSON)" }), /* @__PURE__ */ k(O, {
+													value: N.config?.requestBody || "",
 													onChange: (e) => $({
-														...p.config,
+														...N.config,
 														requestBody: e.target.value || void 0
 													}),
 													rows: 4,
@@ -1192,19 +958,19 @@ var I = p(function({ isOpen: s, onClose: c }) {
 													className: "font-mono text-xs"
 												})]
 											}),
-											/* @__PURE__ */ F("div", {
+											/* @__PURE__ */ A("div", {
 												className: "space-y-2",
 												children: [
-													/* @__PURE__ */ P(w, { children: "Data Path (optional)" }),
-													/* @__PURE__ */ P(C, {
-														value: p.config?.dataPath || "",
+													/* @__PURE__ */ k(y, { children: "Data Path (optional)" }),
+													/* @__PURE__ */ k(v, {
+														value: N.config?.dataPath || "",
 														onChange: (e) => $({
-															...p.config,
+															...N.config,
 															dataPath: e.target.value || void 0
 														}),
 														placeholder: "$.data.items or .data.items"
 													}),
-													/* @__PURE__ */ P("p", {
+													/* @__PURE__ */ k("p", {
 														className: "text-xs text-text-secondary",
 														children: "JSONPath or dot notation to extract data from response"
 													})
@@ -1212,26 +978,26 @@ var I = p(function({ isOpen: s, onClose: c }) {
 											})
 										]
 									}),
-									p.config?.dataSourceType === "GRAPHQL" && /* @__PURE__ */ F("div", {
+									N.config?.dataSourceType === "GRAPHQL" && /* @__PURE__ */ A("div", {
 										className: "space-y-3",
 										children: [
-											/* @__PURE__ */ F("div", {
+											/* @__PURE__ */ A("div", {
 												className: "space-y-2",
-												children: [/* @__PURE__ */ P(w, { children: "GraphQL Endpoint *" }), /* @__PURE__ */ P(C, {
-													value: p.config?.graphqlEndpoint || "",
+												children: [/* @__PURE__ */ k(y, { children: "GraphQL Endpoint *" }), /* @__PURE__ */ k(v, {
+													value: N.config?.graphqlEndpoint || "",
 													onChange: (e) => $({
-														...p.config,
+														...N.config,
 														graphqlEndpoint: e.target.value || void 0
 													}),
 													placeholder: "https://api.example.com/graphql"
 												})]
 											}),
-											/* @__PURE__ */ F("div", {
+											/* @__PURE__ */ A("div", {
 												className: "space-y-2",
-												children: [/* @__PURE__ */ P(w, { children: "Query *" }), /* @__PURE__ */ P(N, {
-													value: p.config?.graphqlQuery || "",
+												children: [/* @__PURE__ */ k(y, { children: "Query *" }), /* @__PURE__ */ k(O, {
+													value: N.config?.graphqlQuery || "",
 													onChange: (e) => $({
-														...p.config,
+														...N.config,
 														graphqlQuery: e.target.value || void 0
 													}),
 													rows: 6,
@@ -1239,12 +1005,12 @@ var I = p(function({ isOpen: s, onClose: c }) {
 													className: "font-mono text-xs"
 												})]
 											}),
-											/* @__PURE__ */ F("div", {
+											/* @__PURE__ */ A("div", {
 												className: "space-y-2",
-												children: [/* @__PURE__ */ P(w, { children: "Variables (JSON, optional)" }), /* @__PURE__ */ P(N, {
-													value: p.config?.graphqlVariables || "",
+												children: [/* @__PURE__ */ k(y, { children: "Variables (JSON, optional)" }), /* @__PURE__ */ k(O, {
+													value: N.config?.graphqlVariables || "",
 													onChange: (e) => $({
-														...p.config,
+														...N.config,
 														graphqlVariables: e.target.value || void 0
 													}),
 													rows: 3,
@@ -1252,12 +1018,12 @@ var I = p(function({ isOpen: s, onClose: c }) {
 													className: "font-mono text-xs"
 												})]
 											}),
-											/* @__PURE__ */ F("div", {
+											/* @__PURE__ */ A("div", {
 												className: "space-y-2",
-												children: [/* @__PURE__ */ P(w, { children: "Headers (JSON, optional)" }), /* @__PURE__ */ P(N, {
-													value: p.config?.headers || "",
+												children: [/* @__PURE__ */ k(y, { children: "Headers (JSON, optional)" }), /* @__PURE__ */ k(O, {
+													value: N.config?.headers || "",
 													onChange: (e) => $({
-														...p.config,
+														...N.config,
 														headers: e.target.value || void 0
 													}),
 													rows: 2,
@@ -1265,19 +1031,19 @@ var I = p(function({ isOpen: s, onClose: c }) {
 													className: "font-mono text-xs"
 												})]
 											}),
-											/* @__PURE__ */ F("div", {
+											/* @__PURE__ */ A("div", {
 												className: "space-y-2",
 												children: [
-													/* @__PURE__ */ P(w, { children: "Data Path (optional)" }),
-													/* @__PURE__ */ P(C, {
-														value: p.config?.dataPath || "",
+													/* @__PURE__ */ k(y, { children: "Data Path (optional)" }),
+													/* @__PURE__ */ k(v, {
+														value: N.config?.dataPath || "",
 														onChange: (e) => $({
-															...p.config,
+															...N.config,
 															dataPath: e.target.value || void 0
 														}),
 														placeholder: ".data.items"
 													}),
-													/* @__PURE__ */ P("p", {
+													/* @__PURE__ */ k("p", {
 														className: "text-xs text-text-secondary",
 														children: "Path to extract data from GraphQL response"
 													})
@@ -1285,12 +1051,12 @@ var I = p(function({ isOpen: s, onClose: c }) {
 											})
 										]
 									}),
-									p.config?.dataSourceType === "MOCK" && /* @__PURE__ */ F("div", {
+									N.config?.dataSourceType === "MOCK" && /* @__PURE__ */ A("div", {
 										className: "space-y-2",
-										children: [/* @__PURE__ */ P(w, { children: "Sample Data (JSON)" }), /* @__PURE__ */ P(N, {
-											value: p.config?.mockData || "",
+										children: [/* @__PURE__ */ k(y, { children: "Sample Data (JSON)" }), /* @__PURE__ */ k(O, {
+											value: N.config?.mockData || "",
 											onChange: (e) => $({
-												...p.config,
+												...N.config,
 												mockData: e.target.value || void 0
 											}),
 											rows: 5,
@@ -1300,144 +1066,165 @@ var I = p(function({ isOpen: s, onClose: c }) {
 									})
 								] })
 							}),
-							/* @__PURE__ */ F(j, {
-								value: "actions",
-								className: "mt-0 space-y-4",
-								children: [/* @__PURE__ */ F("div", {
-									className: "flex items-center justify-between",
-									children: [/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("h3", {
-										className: "text-sm font-medium",
-										children: "Widget Actions"
-									}), /* @__PURE__ */ P("p", {
-										className: "text-xs text-text-secondary",
-										children: "Configure buttons on this widget"
-									})] }), /* @__PURE__ */ F(S, {
-										size: "sm",
-										onClick: Ve,
-										children: [/* @__PURE__ */ P(le, { className: "size-4" }), "Add"]
-									})]
-								}), q ? /* @__PURE__ */ P("div", {
-									className: "flex justify-center py-8",
-									children: /* @__PURE__ */ P(A, { className: "size-6" })
-								}) : K.length === 0 ? /* @__PURE__ */ F("div", {
-									className: "py-8 text-center",
-									children: [/* @__PURE__ */ P(b, { className: "size-10 mx-auto mb-2 text-text-secondary/50" }), /* @__PURE__ */ P("p", {
-										className: "text-sm text-text-secondary",
-										children: "No actions configured"
-									})]
-								}) : /* @__PURE__ */ P("div", {
-									className: "space-y-2",
-									children: [...K].sort((e, t) => e.order - t.order).map((e, t) => /* @__PURE__ */ P(de, {
-										className: e.disabled ? "opacity-60" : "",
-										children: /* @__PURE__ */ F(fe, {
-											className: "p-3 flex items-center gap-2",
-											children: [
-												/* @__PURE__ */ F("div", {
-													className: "flex flex-col gap-0.5",
-													children: [/* @__PURE__ */ P(S, {
-														variant: "ghost",
-														size: "icon-sm",
-														onClick: () => Ge(t),
-														disabled: t === 0,
-														className: "h-5 w-5",
-														children: /* @__PURE__ */ P(se, { className: "size-3" })
-													}), /* @__PURE__ */ P(S, {
-														variant: "ghost",
-														size: "icon-sm",
-														onClick: () => Ke(t),
-														disabled: t === K.length - 1,
-														className: "h-5 w-5",
-														children: /* @__PURE__ */ P(oe, { className: "size-3" })
-													})]
-												}),
-												/* @__PURE__ */ F("div", {
-													className: "flex-1 min-w-0",
-													children: [/* @__PURE__ */ F("div", {
-														className: "flex items-center gap-2",
-														children: [/* @__PURE__ */ P("span", { className: `size-2 rounded-full ${Ce[e.style] || "bg-muted-foreground"}` }), /* @__PURE__ */ P("span", {
-															className: "text-sm font-medium truncate",
-															children: e.label
-														})]
-													}), /* @__PURE__ */ F("p", {
-														className: "text-xs text-text-secondary",
-														children: [
-															e.name,
-															" • ",
-															e.type
-														]
-													})]
-												}),
-												/* @__PURE__ */ F("div", {
-													className: "flex gap-1",
-													children: [/* @__PURE__ */ P(S, {
-														variant: "ghost",
-														size: "icon-sm",
-														onClick: () => He(e),
-														children: /* @__PURE__ */ P(ce, { className: "size-4" })
-													}), /* @__PURE__ */ P(S, {
-														variant: "ghost",
-														size: "icon-sm",
-														onClick: () => We(e.id),
-														children: /* @__PURE__ */ P(ue, { className: "size-4" })
-													})]
-												})
-											]
+							/* @__PURE__ */ A(E, {
+								value: "advanced",
+								className: "mt-0 space-y-6",
+								children: [
+									N && /* @__PURE__ */ k(ae, {
+										renderer: N.renderer,
+										rendererOptions: Te,
+										onRendererChange: (e) => {
+											Q("renderer", e), e === "BIGCONSOLE" && Q("template", void 0);
+										},
+										templateEditor: N.renderer === "BIGCONSOLE" ? void 0 : /* @__PURE__ */ k(ke, {
+											widget: {
+												...z,
+												template: N.template,
+												renderer: N.renderer
+											},
+											onSave: (e) => Q("template", e)
 										})
-									}, e.id))
-								})]
-							}),
-							/* @__PURE__ */ P(j, {
-								value: "drilldown",
-								className: "mt-0",
-								children: /* @__PURE__ */ P(ae, {
-									widget: B,
-									onChange: Qe
-								})
-							}),
-							/* @__PURE__ */ P(j, {
-								value: "webhooks",
-								className: "mt-0",
-								children: /* @__PURE__ */ P(re, {
-									dashboardId: B.dashboardId,
-									widgetId: B.id
-								})
-							}),
-							/* @__PURE__ */ P(j, {
-								value: "events",
-								className: "mt-0",
-								children: /* @__PURE__ */ P(ie, {
-									dashboardId: B.dashboardId,
-									widgetId: B.id,
-									maxHeight: "calc(100vh - 350px)"
-								})
+									}),
+									/* @__PURE__ */ A("section", {
+										className: "space-y-4 border-t border-border-default pt-4",
+										children: [/* @__PURE__ */ A("div", {
+											className: "flex items-center justify-between",
+											children: [/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("h3", {
+												className: "text-sm font-medium",
+												children: "Widget Actions"
+											}), /* @__PURE__ */ k("p", {
+												className: "text-xs text-text-secondary",
+												children: "Configure buttons on this widget"
+											})] }), /* @__PURE__ */ A(_, {
+												size: "sm",
+												onClick: Ze,
+												children: [/* @__PURE__ */ k(pe, { className: "size-4" }), "Add"]
+											})]
+										}), J ? /* @__PURE__ */ k("div", {
+											className: "flex justify-center py-8",
+											children: /* @__PURE__ */ k(T, { className: "size-6" })
+										}) : q.length === 0 ? /* @__PURE__ */ A("div", {
+											className: "py-8 text-center",
+											children: [/* @__PURE__ */ k(h, { className: "size-10 mx-auto mb-2 text-text-secondary/50" }), /* @__PURE__ */ k("p", {
+												className: "text-sm text-text-secondary",
+												children: "No actions configured"
+											})]
+										}) : /* @__PURE__ */ k("div", {
+											className: "space-y-2",
+											children: [...q].sort((e, t) => e.order - t.order).map((e, t) => /* @__PURE__ */ k(he, {
+												className: e.disabled ? "opacity-60" : "",
+												children: /* @__PURE__ */ A(ge, {
+													className: "p-3 flex items-center gap-2",
+													children: [
+														/* @__PURE__ */ A("div", {
+															className: "flex flex-col gap-0.5",
+															children: [/* @__PURE__ */ k(_, {
+																variant: "ghost",
+																size: "icon-sm",
+																onClick: () => tt(t),
+																disabled: t === 0,
+																className: "h-5 w-5",
+																children: /* @__PURE__ */ k(de, { className: "size-3" })
+															}), /* @__PURE__ */ k(_, {
+																variant: "ghost",
+																size: "icon-sm",
+																onClick: () => nt(t),
+																disabled: t === q.length - 1,
+																className: "h-5 w-5",
+																children: /* @__PURE__ */ k(ue, { className: "size-3" })
+															})]
+														}),
+														/* @__PURE__ */ A("div", {
+															className: "flex-1 min-w-0",
+															children: [/* @__PURE__ */ A("div", {
+																className: "flex items-center gap-2",
+																children: [/* @__PURE__ */ k("span", { className: `size-2 rounded-full ${De[e.style] || "bg-muted-foreground"}` }), /* @__PURE__ */ k("span", {
+																	className: "text-sm font-medium truncate",
+																	children: e.label
+																})]
+															}), /* @__PURE__ */ A("p", {
+																className: "text-xs text-text-secondary",
+																children: [
+																	e.name,
+																	" • ",
+																	e.type
+																]
+															})]
+														}),
+														/* @__PURE__ */ A("div", {
+															className: "flex gap-1",
+															children: [/* @__PURE__ */ k(_, {
+																variant: "ghost",
+																size: "icon-sm",
+																onClick: () => Qe(e),
+																children: /* @__PURE__ */ k(fe, { className: "size-4" })
+															}), /* @__PURE__ */ k(_, {
+																variant: "ghost",
+																size: "icon-sm",
+																onClick: () => et(e.id),
+																children: /* @__PURE__ */ k(me, { className: "size-4" })
+															})]
+														})
+													]
+												})
+											}, e.id))
+										})]
+									}),
+									/* @__PURE__ */ A("section", {
+										className: "space-y-3 border-t border-border-default pt-4",
+										children: [/* @__PURE__ */ k("h3", {
+											className: "text-sm font-semibold text-text-primary",
+											children: "Drilldown"
+										}), /* @__PURE__ */ k(ie, {
+											widget: z,
+											onChange: ct
+										})]
+									}),
+									/* @__PURE__ */ A("section", {
+										className: "space-y-3 border-t border-border-default pt-4",
+										children: [/* @__PURE__ */ k("h3", {
+											className: "text-sm font-semibold text-text-primary",
+											children: "Webhooks"
+										}), /* @__PURE__ */ k(ne, {
+											dashboardId: z.dashboardId,
+											widgetId: z.id
+										})]
+									}),
+									/* @__PURE__ */ A("section", {
+										className: "space-y-3 border-t border-border-default pt-4",
+										children: [/* @__PURE__ */ k("h3", {
+											className: "text-sm font-semibold text-text-primary",
+											children: "Events"
+										}), /* @__PURE__ */ k(re, {
+											dashboardId: z.dashboardId,
+											widgetId: z.id,
+											maxHeight: "calc(100vh - 350px)"
+										})]
+									})
+								]
 							}),
-							/* @__PURE__ */ P(j, {
+							/* @__PURE__ */ k(E, {
 								value: "appearance",
 								className: "mt-0",
-								children: et ? /* @__PURE__ */ P(et, {
-									config: B.config || {},
-									onChange: Ze
-								}) : /* @__PURE__ */ P("div", {
-									className: "p-4 bg-bg-sunken rounded-lg text-center",
-									children: /* @__PURE__ */ P("p", {
-										className: "text-sm text-text-secondary",
-										children: "No style options for this widget type"
-									})
+								children: /* @__PURE__ */ k(oe, {
+									widgetType: z.type,
+									config: z.config || {},
+									onChange: st
 								})
 							})
 						]
 					})]
-				}) : /* @__PURE__ */ P("div", {
+				}) : /* @__PURE__ */ k("div", {
 					className: "flex-1 flex items-center justify-center p-4",
-					children: /* @__PURE__ */ F("div", {
+					children: /* @__PURE__ */ A("div", {
 						className: "text-center",
-						children: [/* @__PURE__ */ P(b, { className: "size-12 mx-auto mb-3 text-text-secondary" }), /* @__PURE__ */ P("p", {
+						children: [/* @__PURE__ */ k(h, { className: "size-12 mx-auto mb-3 text-text-secondary" }), /* @__PURE__ */ k("p", {
 							className: "text-sm text-text-secondary",
 							children: "Select a widget to edit"
 						})]
 					})
 				}),
-				B && /* @__PURE__ */ F("div", {
+				z && /* @__PURE__ */ A("div", {
 					style: {
 						padding: "var(--space-cardPadding)",
 						borderTop: "1px solid var(--color-border)",
@@ -1445,7 +1232,7 @@ var I = p(function({ isOpen: s, onClose: c }) {
 						flexShrink: 0
 					},
 					children: [
-						I && /* @__PURE__ */ F("div", {
+						F && /* @__PURE__ */ A("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
@@ -1456,13 +1243,13 @@ var I = p(function({ isOpen: s, onClose: c }) {
 								borderRadius: "var(--radius-button)",
 								border: "1px solid var(--color-status-warning-border, rgba(251, 191, 36, 0.3))"
 							},
-							children: [/* @__PURE__ */ P("div", { style: {
+							children: [/* @__PURE__ */ k("div", { style: {
 								width: "8px",
 								height: "8px",
 								borderRadius: "50%",
 								backgroundColor: "var(--color-status-warning-bg)",
 								flexShrink: 0
-							} }), /* @__PURE__ */ P("span", {
+							} }), /* @__PURE__ */ k("span", {
 								style: {
 									fontSize: "var(--font-size-body-sm)",
 									color: "var(--color-status-warning-text, #92400e)",
@@ -1471,7 +1258,7 @@ var I = p(function({ isOpen: s, onClose: c }) {
 								children: "You have unsaved changes"
 							})]
 						}),
-						d === "saved" && !I && /* @__PURE__ */ F("div", {
+						j === "saved" && !F && /* @__PURE__ */ A("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
@@ -1482,12 +1269,12 @@ var I = p(function({ isOpen: s, onClose: c }) {
 								borderRadius: "var(--radius-button)",
 								border: "1px solid var(--color-status-success-border, rgba(34, 197, 94, 0.3))"
 							},
-							children: [/* @__PURE__ */ P(v, { style: {
+							children: [/* @__PURE__ */ k(p, { style: {
 								width: "var(--size-icon-sm)",
 								height: "var(--size-icon-sm)",
 								color: "var(--color-status-success-text)",
 								flexShrink: 0
-							} }), /* @__PURE__ */ P("span", {
+							} }), /* @__PURE__ */ k("span", {
 								style: {
 									fontSize: "var(--font-size-body-sm)",
 									color: "var(--color-status-success-text)",
@@ -1496,7 +1283,7 @@ var I = p(function({ isOpen: s, onClose: c }) {
 								children: "All changes saved"
 							})]
 						}),
-						d === "error" && /* @__PURE__ */ F("div", {
+						j === "error" && /* @__PURE__ */ A("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
@@ -1507,12 +1294,12 @@ var I = p(function({ isOpen: s, onClose: c }) {
 								borderRadius: "var(--radius-button)",
 								border: "1px solid var(--color-status-error-border)"
 							},
-							children: [/* @__PURE__ */ P(x, { style: {
+							children: [/* @__PURE__ */ k(g, { style: {
 								width: "var(--size-icon-sm)",
 								height: "var(--size-icon-sm)",
 								color: "var(--color-status-error-text)",
 								flexShrink: 0
-							} }), /* @__PURE__ */ P("span", {
+							} }), /* @__PURE__ */ k("span", {
 								style: {
 									fontSize: "var(--font-size-body-sm)",
 									color: "var(--color-status-error-text)",
@@ -1521,50 +1308,50 @@ var I = p(function({ isOpen: s, onClose: c }) {
 								children: "Failed to save changes"
 							})]
 						}),
-						/* @__PURE__ */ F("div", {
+						/* @__PURE__ */ A("div", {
 							style: {
 								display: "flex",
 								gap: "var(--space-controlGap)"
 							},
-							children: [/* @__PURE__ */ P(S, {
-								onClick: Ye,
-								disabled: d === "saving" || !I,
+							children: [/* @__PURE__ */ k(_, {
+								onClick: at,
+								disabled: j === "saving" || !F,
 								style: {
 									flex: 1,
 									height: "var(--size-controlHeight-md)",
-									backgroundColor: I ? "var(--color-action-primary-bg)" : void 0,
-									opacity: I ? 1 : .5
+									backgroundColor: F ? "var(--color-action-primary-bg)" : void 0,
+									opacity: F ? 1 : .5
 								},
-								children: d === "saving" ? /* @__PURE__ */ F("span", {
+								children: j === "saving" ? /* @__PURE__ */ A("span", {
 									style: {
 										display: "flex",
 										alignItems: "center",
 										gap: "var(--space-iconGap)"
 									},
-									children: [/* @__PURE__ */ P(A, { style: {
+									children: [/* @__PURE__ */ k(T, { style: {
 										width: "var(--size-icon-sm)",
 										height: "var(--size-icon-sm)"
 									} }), "Saving..."]
-								}) : /* @__PURE__ */ F("span", {
+								}) : /* @__PURE__ */ A("span", {
 									style: {
 										display: "flex",
 										alignItems: "center",
 										gap: "var(--space-iconGap)"
 									},
-									children: [/* @__PURE__ */ P(v, { style: {
+									children: [/* @__PURE__ */ k(p, { style: {
 										width: "var(--size-icon-sm)",
 										height: "var(--size-icon-sm)"
 									} }), "Save Changes"]
 								})
-							}), /* @__PURE__ */ F(S, {
+							}), /* @__PURE__ */ A(_, {
 								variant: "outline",
-								onClick: Xe,
-								disabled: d === "saving" || !I,
+								onClick: ot,
+								disabled: j === "saving" || !F,
 								style: {
 									height: "var(--size-controlHeight-md)",
-									opacity: I ? 1 : .5
+									opacity: F ? 1 : .5
 								},
-								children: [/* @__PURE__ */ P(x, { style: {
+								children: [/* @__PURE__ */ k(g, { style: {
 									width: "var(--size-icon-sm)",
 									height: "var(--size-icon-sm)"
 								} }), "Discard"]
@@ -1572,20 +1359,20 @@ var I = p(function({ isOpen: s, onClose: c }) {
 						})
 					]
 				}),
-				/* @__PURE__ */ P(ne, {
-					isOpen: Le,
-					action: Re,
-					isLoading: ze,
+				/* @__PURE__ */ k(te, {
+					isOpen: qe,
+					action: Je,
+					isLoading: Ye,
 					onClose: () => {
 						X(!1), Z(void 0);
 					},
-					onSave: Ue
+					onSave: $e
 				})
 			]
 		})
 	});
 });
 //#endregion
-export { I as default };
+export { je as default };
 
 //# sourceMappingURL=PropertiesPanel.js.map