@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

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

@@ -1,32 +1,34 @@
 import { useWidgetStore as e } from "../../store/widgetStore.js";
 import "../../store/index.js";
-import { getWidgetDefinition as t } from "./WidgetRegistry.js";
-import n from "../../hooks/useWidgetOperations.js";
-import r from "../../hooks/useDrilldownOperations.js";
-import i from "../../hooks/useWidgetActions.js";
-import a from "../../hooks/useEventWebhooks.js";
-import o from "../../hooks/useDataSinkOperations.js";
-import s from "../../hooks/useParserOperations.js";
+import { Section as t, SectionStack as n } 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 "../../hooks/index.js";
-import { getWidgetBinding as c, getWidgetBindingStatus as ee, reconcilePanelConfig as te, serializeWidgetBinding as ne } from "../../utils/widgetBinding.js";
-import re from "./ActionConfigDialog.js";
-import ie from "./webhook-config/WebhookConfigPanel.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 "./webhook-config/index.js";
-import ae from "./event-logs/EventLogViewer.js";
+import oe from "./event-logs/EventLogViewer.js";
 import "./event-logs/index.js";
-import oe from "./DrilldownConfigPanel.js";
-import { AdvancedSection as se } from "../builder/inspector/AdvancedSection.js";
-import { AppearanceSection as ce } from "../builder/inspector/AppearanceSection.js";
-import { GeneralSection as le } from "../builder/inspector/GeneralSection.js";
-import { DataBindingSection as ue } from "../builder/inspector/DataBindingSection.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 "../builder/inspector/index.js";
-import { memo as de, useCallback as l, useEffect as u, useMemo as d, useRef as fe, useState as f } from "react";
-import { Check as p, ChevronDown as pe, ChevronUp as me, ExternalLink as he, Info as ge, Pencil as _e, Plus as ve, Trash2 as ye, X as be } from "lucide-react";
-import { useI18n as xe } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Button as m, Card as Se, CardContent as Ce, Input as h, Label as g, Select as we, SelectContent as Te, SelectItem as _, SelectTrigger as Ee, SelectValue as De, Sheet as Oe, SheetContent as ke, SheetDescription as Ae, SheetHeader as je, SheetTitle as Me, Spinner as v, Tabs as Ne, TabsContent as y, TabsList as Pe, TabsTrigger as b, Textarea as x } from "@burdenoff/fe-libs/ui";
-import { Fragment as Fe, jsx as S, jsxs as C } from "react/jsx-runtime";
+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 { jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/PropertiesPanel.tsx
-var Ie = [
+var Fe = [
 	{
 		value: "BIGCONSOLE",
 		labelKey: "bigconsole.widget.properties.renderer.bigconsole.label",
@@ -55,7 +57,7 @@ var Ie = [
 		descriptionKey: "bigconsole.widget.properties.renderer.custom.description",
 		description: "Custom React component"
 	}
-], Le = [
+], Ie = [
 	{
 		value: "DATASINK",
 		labelKey: "bigconsole.widget.properties.dataSourceType.datasink.label",
@@ -99,15 +101,21 @@ var Ie = [
 		description: "Manually enter sample JSON data"
 	}
 ];
-function Re(e) {
+function Le(e) {
 	return `widget:${e.toLowerCase().replace(/\s+/g, "_")}:clicked`;
 }
-var ze = {
-	PRIMARY: "bg-action-primary",
-	SECONDARY: "bg-muted-foreground",
+var Re = {
+	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 = {
+	fontWeight: "var(--font-weight-semibold)",
+	fontSize: "var(--font-size-body-sm)",
+	padding: "6px 10px",
+	minHeight: "var(--size-controlHeight-md)",
+	flexShrink: 0
 };
 function Be(e) {
 	if (!e) return {};
@@ -153,75 +161,60 @@ function Be(e) {
 		xAxisField: a
 	};
 }
-var Ve = de(function({ widget: e, onSave: t }) {
-	let { t: n } = xe(), [r, i] = f(""), [a, o] = f(null), s = fe(!1);
-	u(() => {
+var Ve = fe(function({ widget: e, onSave: n }) {
+	let { t: r } = be(), [i, a] = m(""), [o, s] = m(null), c = p(!1);
+	d(() => {
 		try {
-			i(e.template && typeof e.template == "object" ? JSON.stringify(e.template, null, 2) : ""), o(null), s.current = !0;
+			a(e.template && typeof e.template == "object" ? JSON.stringify(e.template, null, 2) : ""), s(null), c.current = !0;
 		} catch {
-			i("");
+			a("");
 		}
 	}, [e.id, e.template]);
-	let c = l((e) => {
-		let n = e.target.value;
-		if (i(n), n.trim() === "") o(null), t({});
+	let ee = u((e) => {
+		let t = e.target.value;
+		if (a(t), t.trim() === "") s(null), n({});
 		else try {
-			let e = JSON.parse(n);
-			o(null), t(e);
+			let e = JSON.parse(t);
+			s(null), n(e);
 		} catch (e) {
-			o(e.message);
+			s(e.message);
 		}
-	}, [t]), ee = l(() => {
+	}, [n]), l = u(() => {
 		try {
-			let e = JSON.parse(r);
-			i(JSON.stringify(e, null, 2)), o(null), t(e);
+			let e = JSON.parse(i);
+			a(JSON.stringify(e, null, 2)), s(null), n(e);
 		} catch (e) {
-			o(e.message);
+			s(e.message);
 		}
-	}, [r, t]);
-	return /* @__PURE__ */ C("div", {
-		style: {
-			paddingTop: "var(--space-formGap)",
-			borderTop: "1px solid var(--color-border)"
-		},
+	}, [i, n]);
+	return /* @__PURE__ */ T(t, {
+		emphasis: "muted",
+		padding: "compact",
+		headingLevel: 4,
+		title: r("bigconsole.widget.properties.template.label", "Template (JSON)"),
+		description: `The ${e.renderer} payload this widget renders.`,
+		tone: o ? "danger" : "neutral",
+		meta: o ? /* @__PURE__ */ w("span", {
+			className: "text-xs font-medium text-[var(--color-status-error-text)]",
+			children: r("bigconsole.widget.properties.template.invalidJson", "Invalid JSON")
+		}) : void 0,
+		className: "mt-form-gap",
+		"data-testid": "widget-inspector-template",
 		children: [
-			/* @__PURE__ */ C("div", {
-				style: {
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "space-between",
-					marginBottom: "var(--space-controlGap)"
-				},
-				children: [/* @__PURE__ */ S("label", {
-					style: {
-						fontSize: "var(--font-size-body-sm)",
-						fontWeight: "var(--font-weight-semibold)",
-						color: "var(--color-text-primary)"
-					},
-					children: n("bigconsole.widget.properties.template.label", "Template (JSON)")
-				}), a && /* @__PURE__ */ S("span", {
-					style: {
-						fontSize: "var(--font-size-body-sm)",
-						color: "var(--color-status-error-text)",
-						fontWeight: "var(--font-weight-medium)"
-					},
-					children: n("bigconsole.widget.properties.template.invalidJson", "Invalid JSON")
-				})]
-			}),
-			/* @__PURE__ */ S(x, {
-				value: r,
-				onChange: c,
+			/* @__PURE__ */ w(C, {
+				value: i,
+				onChange: ee,
 				spellCheck: !1,
-				placeholder: n("bigconsole.widget.properties.template.placeholder", "Enter {{renderer}} template JSON...", { renderer: e.renderer ?? "" }),
+				placeholder: r("bigconsole.widget.properties.template.placeholder", "Enter {{renderer}} template JSON...", { renderer: e.renderer ?? "" }),
 				style: {
 					fontFamily: "var(--font-family-mono)",
 					fontSize: "var(--font-size-body-sm)",
 					minHeight: "180px",
-					borderColor: a ? "var(--color-status-error-border)" : void 0,
+					borderColor: o ? "var(--color-status-error-border)" : void 0,
 					resize: "vertical"
 				}
 			}),
-			a && /* @__PURE__ */ S("p", {
+			o && /* @__PURE__ */ w("p", {
 				style: {
 					fontSize: "var(--font-size-body-sm)",
 					color: "var(--color-status-error-text)",
@@ -230,26 +223,21 @@ var Ve = de(function({ widget: e, onSave: t }) {
 					borderRadius: "var(--radius-button)",
 					marginTop: "var(--space-controlGap)"
 				},
-				children: a
+				children: o
 			}),
-			/* @__PURE__ */ C("div", {
-				style: {
-					display: "flex",
-					alignItems: "center",
-					gap: "var(--space-controlGap)",
-					marginTop: "var(--space-controlGap)"
-				},
-				children: [/* @__PURE__ */ S(m, {
+			/* @__PURE__ */ T("div", {
+				className: "mt-control-gap flex flex-wrap items-center gap-control-gap",
+				children: [/* @__PURE__ */ w(_, {
 					variant: "outline",
 					size: "sm",
-					onClick: ee,
-					disabled: !!a || r.trim() === "",
+					onClick: l,
+					disabled: !!o || i.trim() === "",
 					style: {
 						height: "var(--size-controlHeight-sm)",
 						fontWeight: "var(--font-weight-semibold)"
 					},
-					children: n("bigconsole.widget.properties.template.format", "Format")
-				}), !a && r.trim() !== "" && /* @__PURE__ */ C("span", {
+					children: r("bigconsole.widget.properties.template.format", "Format")
+				}), !o && i.trim() !== "" && /* @__PURE__ */ T("span", {
 					style: {
 						fontSize: "var(--font-size-body-sm)",
 						color: "var(--color-status-success-text)",
@@ -257,29 +245,20 @@ var Ve = de(function({ widget: e, onSave: t }) {
 						alignItems: "center",
 						gap: "4px"
 					},
-					children: [/* @__PURE__ */ S(p, { style: {
+					children: [/* @__PURE__ */ w(h, { style: {
 						width: "12px",
 						height: "12px"
-					} }), n("bigconsole.widget.properties.template.validJson", "Valid JSON")]
+					} }), r("bigconsole.widget.properties.template.validJson", "Valid JSON")]
 				})]
 			}),
-			/* @__PURE__ */ C("div", {
-				style: {
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "space-between",
-					fontSize: "var(--font-size-body-sm)",
-					color: "var(--color-text-muted)",
-					marginTop: "var(--space-controlGap)",
-					paddingTop: "var(--space-controlGap)",
-					borderTop: "1px solid var(--color-border)"
-				},
+			/* @__PURE__ */ T("div", {
+				className: "mt-control-gap flex flex-wrap items-center justify-between gap-x-4 gap-y-1 border-t border-[var(--color-border-subtle)] pt-control-gap text-xs text-text-muted",
 				children: [
-					/* @__PURE__ */ S("span", {
-						style: { fontWeight: "var(--font-weight-medium)" },
-						children: n("bigconsole.widget.properties.template.ctrlSToSave", "Ctrl+S to save")
+					/* @__PURE__ */ w("span", {
+						className: "font-medium",
+						children: r("bigconsole.widget.properties.template.ctrlSToSave", "Ctrl+S to save")
 					}),
-					e.renderer === "ADAPTIVE_CARD" && /* @__PURE__ */ C("a", {
+					e.renderer === "ADAPTIVE_CARD" && /* @__PURE__ */ T("a", {
 						href: "https://adaptivecards.io/designer/",
 						target: "_blank",
 						rel: "noopener noreferrer",
@@ -292,12 +271,12 @@ var Ve = de(function({ widget: e, onSave: t }) {
 							fontWeight: "var(--font-weight-medium)",
 							textDecoration: "none"
 						},
-						children: [n("bigconsole.widget.properties.template.designer", "Designer"), /* @__PURE__ */ S(he, { style: {
+						children: [r("bigconsole.widget.properties.template.designer", "Designer"), /* @__PURE__ */ w(he, { style: {
 							height: "var(--size-icon-sm)",
 							width: "var(--size-icon-sm)"
 						} })]
 					}),
-					e.renderer === "BLOCKKIT" && /* @__PURE__ */ C("a", {
+					e.renderer === "BLOCKKIT" && /* @__PURE__ */ T("a", {
 						href: "https://app.slack.com/block-kit-builder",
 						target: "_blank",
 						rel: "noopener noreferrer",
@@ -310,7 +289,7 @@ var Ve = de(function({ widget: e, onSave: t }) {
 							fontWeight: "var(--font-weight-medium)",
 							textDecoration: "none"
 						},
-						children: [n("bigconsole.widget.properties.template.blockKitBuilder", "Block Kit Builder"), /* @__PURE__ */ S(he, { style: {
+						children: [r("bigconsole.widget.properties.template.blockKitBuilder", "Block Kit Builder"), /* @__PURE__ */ w(he, { style: {
 							height: "var(--size-icon-sm)",
 							width: "var(--size-icon-sm)"
 						} })]
@@ -321,7 +300,7 @@ var Ve = de(function({ widget: e, onSave: t }) {
 	});
 });
 function He(e) {
-	let t = e, n = c({
+	let t = e, n = l({
 		dataSinkId: t.dataSinkId,
 		parserId: t.parserId,
 		config: e.config || {}
@@ -348,331 +327,338 @@ function He(e) {
 		} : void 0
 	};
 }
-var w = de(function({ isOpen: de, onClose: he }) {
-	let { t: w } = xe(), [Ue, We] = f("general"), [T, E] = f("idle"), [D, O] = f(null), [k, A] = f(!1), j = e((e) => e.selectedWidgetId), Ge = e((e) => e.widgets), M = e((e) => e.updateWidget), N = j ? Ge.get(j) : void 0, P = fe(null), F = fe({});
-	u(() => {
-		if (!j) {
-			P.current = null, O(null), A(!1), E("idle");
+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);
+	}, []);
+	d(() => {
+		if (!P) {
+			Ke.current = null, j(null), N(!1), k("idle");
 			return;
 		}
-		let e = P.current !== j;
-		if (P.current = j, N) {
-			if (k && !e) return;
-			O(He(N)), F.current = N.config || {}, A(!1), E("idle");
-		} else O(null), A(!1), E("idle");
+		let e = Ke.current !== P;
+		if (Ke.current = P, I) {
+			if (M && !e) return;
+			j(He(I)), qe.current = I.config || {}, N(!1), k("idle");
+		} else j(null), N(!1), k("idle");
 	}, [
-		j,
-		N,
-		k
+		P,
+		I,
+		M
 	]);
-	let { updateWidget: Ke } = n(N?.pageId, N?.dashboardId, { skipFetch: !0 }), { createDrilldown: qe, updateDrilldown: Je, deleteDrilldown: Ye } = r(), { dataSinks: I } = o({ skipFetch: !1 }), [Xe, L] = f(null), { executeParser: Ze } = s({
-		consoleId: N?.dashboardId,
+	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({
+		consoleId: I?.dashboardId,
 		skipFetch: !0
-	}), [Qe, R] = f(!1), [$e, z] = f(void 0), [et, B] = f(!1), [tt, V] = f(null);
-	u(() => {
-		z(void 0), B(!1), V(null), R(!1);
-	}, [j]);
-	let { actions: H, loading: nt, createAction: rt, updateAction: it, deleteAction: at, reorderActions: U } = i(j || void 0), { webhooks: ot, loading: st, createWebhook: ct, updateWebhook: lt, deleteWebhook: W, refetch: ut } = a({
-		widgetId: j || void 0,
-		skipFetch: !j
-	}), G = l((e, t) => {
-		let n = Re(t);
-		return e.find((e) => e.widgetId === j && e.eventPattern === n) ?? null;
-	}, [j]), K = l((e) => G(ot, e), [G, ot]), dt = l(async (e, t) => {
-		if (!j || t === void 0) return !0;
-		let n = Re(e), r = K(e);
-		return !r && st && (r = G((await ut())?.data?.listEventWebhookMappings ?? [], e)), t && t.url ? r ? await lt({
+	}), [nt, rt] = m(!1), [it, z] = m(void 0), [at, B] = m(!1), [ot, V] = m(null);
+	d(() => {
+		z(void 0), B(!1), V(null), rt(!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({
+		widgetId: P || void 0,
+		skipFetch: !P
+	}), G = u((e, t) => {
+		let n = Le(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) => {
+		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({
 			id: r.id,
 			eventPattern: n,
 			webhookUrl: t.url,
 			method: t.method,
 			isActive: !0
-		}) !== null : await ct({
-			widgetId: j,
+		}) !== null : await pt({
+			widgetId: P,
 			eventPattern: n,
 			webhookUrl: t.url,
 			method: t.method
 		}) !== null : t === null && r ? W(r.id) : !0;
 	}, [
-		j,
+		P,
 		K,
-		st,
-		ut,
+		ft,
+		ht,
 		G,
-		ct,
-		lt,
+		pt,
+		mt,
 		W
-	]), [ft, q] = f(!1), [J, Y] = f(void 0), [pt, mt] = f(!1), [ht, X] = f(void 0), [gt, Z] = f(null), _t = d(() => {
+	]), [_t, q] = m(!1), [J, Y] = m(void 0), [vt, yt] = m(!1), [bt, X] = m(void 0), [xt, Z] = m(null), St = f(() => {
 		if (!J) return null;
 		let e = K(J.name);
 		return e ? {
 			url: e.webhookUrl,
 			method: e.method
 		} : null;
-	}, [J, K]), vt = ht === void 0 ? _t : ht, yt = d(() => {
+	}, [J, K]), Ct = bt === void 0 ? St : bt, wt = 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]), bt = l(() => {
+	}, [H, K]), Tt = u(() => {
 		X(void 0), Z(null), Y(void 0), q(!0);
-	}, []), xt = l((e) => {
+	}, []), Et = u((e) => {
 		X(void 0), Z(null), Y(e), q(!0);
-	}, []), St = l(async (e, t) => {
-		if (j) {
-			mt(!0), Z(null);
+	}, []), Dt = u(async (e, t) => {
+		if (P) {
+			yt(!0), Z(null);
 			try {
 				let n = "id" in e && !!e.id, r = null;
-				if (r = n ? await it(e) : await rt(e), r) {
+				if (r = n ? await lt(e) : await ct(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 (M(j, { actions: e.sort((e, t) => e.order - t.order) }), !await dt(r.name, t)) {
-						X(t), Z(t ? w("bigconsole.widget.properties.action.webhookSaveFailed", "The button was saved, but its webhook could not be saved. Check the URL and try again.") : w("bigconsole.widget.properties.action.webhookRemoveFailed", "The button was saved, but its old webhook could not be removed. Try again.")), Y(r);
+					if (F(P, { actions: e.sort((e, t) => e.order - t.order) }), !await gt(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;
 					}
 					X(void 0), Z(null), q(!1), Y(void 0);
 				}
 			} catch (e) {
-				console.warn("Failed to save widget action:", e), Z(e instanceof Error ? e.message : w("bigconsole.widget.properties.action.saveFailed", "Could not save the button. Please try again."));
+				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 {
-				mt(!1);
+				yt(!1);
 			}
 		}
 	}, [
-		j,
+		P,
 		H,
-		rt,
-		it,
-		M,
-		dt,
-		w
-	]), Ct = l(async (e) => {
-		if (j && window.confirm(w("bigconsole.widget.properties.action.deleteConfirm", "Are you sure you want to delete this action?"))) {
+		ct,
+		lt,
+		F,
+		gt,
+		D
+	]), Ot = 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 at(e) && (M(j, { actions: H.filter((t) => t.id !== e) }), t)) {
+			if (await ut(e) && (F(P, { actions: H.filter((t) => t.id !== e) }), t)) {
 				let e = K(t.name);
 				e && await W(e.id);
 			}
 		}
 	}, [
-		j,
+		P,
 		H,
-		at,
-		M,
+		ut,
+		F,
 		K,
 		W,
-		w
-	]), wt = l(async (e) => {
-		if (!j || e === 0) return;
+		D
+	]), kt = 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) && M(j, { actions: t.map((e, t) => ({
+		[n[e - 1], n[e]] = [n[e], n[e - 1]], await U(n) && F(P, { actions: t.map((e, t) => ({
 			...e,
 			order: n.indexOf(e.id)
 		})).sort((e, t) => e.order - t.order) });
 	}, [
-		j,
+		P,
 		H,
 		U,
-		M
-	]), Tt = l(async (e) => {
-		if (!j) return;
+		F
+	]), At = u(async (e) => {
+		if (!P) return;
 		let t = [...H].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 U(n) && M(j, { actions: t.map((e, t) => ({
+		[n[e], n[e + 1]] = [n[e + 1], n[e]], await U(n) && F(P, { actions: t.map((e, t) => ({
 			...e,
 			order: n.indexOf(e.id)
 		})).sort((e, t) => e.order - t.order) });
 	}, [
-		j,
+		P,
 		H,
 		U,
-		M
+		F
 	]);
-	u(() => {
-		j && H.length >= 0 && !nt && M(j, { actions: H });
+	d(() => {
+		P && H.length >= 0 && !st && F(P, { actions: H });
 	}, [
-		j,
+		P,
 		H,
-		nt,
-		M
+		st,
+		F
 	]);
-	let Q = l((e, t) => {
-		O((n) => n && {
+	let Q = u((e, t) => {
+		j((n) => n && {
 			...n,
 			[e]: t
-		}), A(!0);
-	}, []), $ = l((e) => {
-		O((t) => t && {
+		}), L();
+	}, [L]), $ = u((e) => {
+		j((t) => t && {
 			...t,
 			config: e
-		}), A(!0);
-	}, []);
-	u(() => {
-		if (D?.dataSinkId && I.length > 0) {
-			let e = I.find((e) => e.id === D.dataSinkId);
-			e && L(e.key);
-		} else L(null);
-	}, [D?.dataSinkId, I]);
-	let Et = l((e) => {
-		if (z(void 0), B(!1), V(null), L(e), e) {
-			let t = I.find((t) => t.key === e);
-			t && (Q("dataSinkId", t.id), O((t) => t && {
+		}), L();
+	}, [L]);
+	d(() => {
+		if (A?.dataSinkId && R.length > 0) {
+			let e = R.find((e) => e.id === A.dataSinkId);
+			e && et(e.key);
+		} else et(null);
+	}, [A?.dataSinkId, R]);
+	let jt = u((e) => {
+		if (z(void 0), B(!1), V(null), et(e), e) {
+			let t = R.find((t) => t.key === e);
+			t && (Q("dataSinkId", t.id), j((t) => t && {
 				...t,
 				config: {
 					...t.config,
 					dataSinkKey: e
 				}
-			}), A(!0));
-		} else Q("dataSinkId", void 0), O((e) => e && {
+			}), L());
+		} else Q("dataSinkId", void 0), j((e) => e && {
 			...e,
 			config: {
 				...e.config,
 				dataSinkKey: void 0
 			},
 			parserId: void 0
-		}), A(!0);
-	}, [I, Q]), Dt = l(async (e) => {
-		if (Q("parserId", e || void 0), z(void 0), B(!1), V(null), e && N) {
-			R(!0);
+		}), L();
+	}, [
+		R,
+		Q,
+		L
+	]), Mt = u(async (e) => {
+		if (Q("parserId", e || void 0), z(void 0), B(!1), V(null), e && I) {
+			rt(!0);
 			try {
-				let t = await Ze(e);
+				let t = await tt(e);
 				if (t?.success) {
 					z(t.output), B(!0);
 					let e = Be(t.output);
-					(e.labelField || e.valueField) && (O((t) => {
+					(e.labelField || e.valueField) && (j((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
 						};
-					}), A(!0));
-				} else B(!0), V(t?.error || w("bigconsole.widget.properties.parser.previewFailed", "The parser could not produce a preview."));
+					}), L());
+				} else B(!0), V(t?.error || D("bigconsole.widget.properties.parser.previewFailed", "The parser could not produce a preview."));
 			} catch (e) {
-				B(!0), V(e instanceof Error ? e.message : w("bigconsole.widget.properties.parser.previewFailed", "The parser could not produce a preview.")), console.warn("Failed to auto-detect parser fields:", 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 {
-				R(!1);
+				rt(!1);
 			}
 		}
 	}, [
 		Q,
-		Ze,
-		N,
-		w
-	]), Ot = l(async () => {
-		if (!(!N || !D)) {
-			E("saving");
-			try {
-				let t = {
-					...N.metadata || {},
-					description: D.description || ""
-				}, n = te(e.getState().widgets.get(N.id)?.config ?? {}, F.current, D.config), r = ne(c({
-					dataSinkId: D.dataSinkId,
-					parserId: D.parserId,
-					config: {
-						...n,
-						binding: void 0
-					}
-				}), n), i = await Ke({
-					id: N.id,
-					title: D.title,
-					renderer: D.renderer,
-					template: D.template,
-					config: r.config,
-					refreshInterval: D.refreshInterval,
-					dataSinkId: r.dataSinkId,
-					datasetId: D.datasetId,
-					parserId: r.parserId,
-					parserRules: D.parserRules,
-					metadata: t
-				}), a = N.drilldown;
-				if (D.drilldownConfig) {
-					let { enabled: e, targetDashboardId: t, navigationMode: n, parameterMapping: r, passGlobalFilters: i, maxDepth: o, openIn: s } = D.drilldownConfig;
-					if (N.drilldown?.id) {
-						let c = await Je({
-							id: N.drilldown.id,
-							targetDashboardId: t,
-							parameterMapping: r,
-							navigationMode: n,
-							enabled: e,
-							passGlobalFilters: i,
-							maxDepth: o,
-							openIn: s
-						});
-						c && (a = c);
-					} else if (t) {
-						let c = await qe({
-							sourceWidgetId: N.id,
-							targetDashboardId: t,
-							parameterMapping: r || {},
-							navigationMode: n,
-							passGlobalFilters: i,
-							maxDepth: o,
-							openIn: s
-						});
-						c && (a = {
-							...c,
-							enabled: e
-						});
-					}
-				} else N.drilldown?.id && !D.drilldownConfig && (await Ye(N.drilldown.id), a = void 0);
-				i ? (M(N.id, {
-					title: D.title,
-					description: D.description,
-					renderer: D.renderer,
-					template: D.template,
-					config: r.config,
-					refreshInterval: D.refreshInterval,
-					dataSinkId: r.dataSinkId,
-					datasetId: D.datasetId,
-					parserId: r.parserId,
-					parserRules: D.parserRules,
-					drilldown: a,
-					updatedAt: (/* @__PURE__ */ new Date()).toISOString()
-				}), E("saved"), A(!1), setTimeout(() => E("idle"), 2e3)) : E("error");
-			} catch {
-				E("error");
-			}
+		tt,
+		I,
+		L,
+		D
+	]), Nt = u(async () => {
+		if (!I || !A) return;
+		let t = Je.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({
+				dataSinkId: A.dataSinkId,
+				parserId: A.parserId,
+				config: {
+					...r,
+					binding: void 0
+				}
+			}), r), a = await Ye({
+				id: I.id,
+				title: A.title,
+				renderer: A.renderer,
+				template: A.template,
+				config: i.config,
+				refreshInterval: A.refreshInterval,
+				dataSinkId: i.dataSinkId,
+				datasetId: A.datasetId,
+				parserId: i.parserId,
+				parserRules: A.parserRules,
+				metadata: n
+			}), o = I.drilldown;
+			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({
+						id: I.drilldown.id,
+						targetDashboardId: t,
+						parameterMapping: r,
+						navigationMode: n,
+						enabled: e,
+						passGlobalFilters: i,
+						maxDepth: a,
+						openIn: s
+					});
+					c && (o = c);
+				} else if (t) {
+					let c = await Xe({
+						sourceWidgetId: I.id,
+						targetDashboardId: t,
+						parameterMapping: r || {},
+						navigationMode: n,
+						passGlobalFilters: i,
+						maxDepth: a,
+						openIn: s
+					});
+					c && (o = {
+						...c,
+						enabled: e
+					});
+				}
+			} else I.drilldown?.id && !A.drilldownConfig && (await Qe(I.drilldown.id), o = void 0);
+			a ? (F(I.id, {
+				title: A.title,
+				description: A.description,
+				renderer: A.renderer,
+				template: A.template,
+				config: i.config,
+				refreshInterval: A.refreshInterval,
+				dataSinkId: i.dataSinkId,
+				datasetId: A.datasetId,
+				parserId: i.parserId,
+				parserRules: A.parserRules,
+				drilldown: o,
+				updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+			}), k("saved"), Je.current === t && N(!1), setTimeout(() => k("idle"), 2e3)) : k("error");
+		} catch {
+			k("error");
 		}
 	}, [
-		N,
-		D,
-		Ke,
-		M,
-		qe,
-		Je,
-		Ye
-	]), kt = l(() => {
-		N && (O(He(N)), F.current = N.config || {}, A(!1), E("idle"));
-	}, [N]), At = l((e) => {
+		I,
+		A,
+		Ye,
+		F,
+		Xe,
+		Ze,
+		Qe
+	]), Pt = u(() => {
+		I && (j(He(I)), qe.current = I.config || {}, N(!1), k("idle"));
+	}, [I]), Ft = u((e) => {
 		$(e);
-	}, [$]), jt = l((e) => {
-		O((t) => t && {
+	}, [$]), It = u((e) => {
+		j((t) => t && {
 			...t,
 			drilldownConfig: e
-		}), A(!0);
-	}, []), Mt = N ? t(N.type) : null, Nt = d(() => Ie.map((e) => ({
+		}), L();
+	}, [L]), Lt = I ? r(I.type) : null, Rt = f(() => Fe.map((e) => ({
 		value: e.value,
-		label: w(e.labelKey, e.label),
-		description: w(e.descriptionKey, e.description)
-	})), [w]), Pt = d(() => Le.map((e) => ({
+		label: D(e.labelKey, e.label),
+		description: D(e.descriptionKey, e.description)
+	})), [D]), zt = f(() => Ie.map((e) => ({
 		value: e.value,
-		label: w(e.labelKey, e.label)
-	})), [w]);
-	return /* @__PURE__ */ S(Oe, {
-		open: de,
+		label: D(e.labelKey, e.label)
+	})), [D]);
+	return /* @__PURE__ */ w(De, {
+		open: fe,
 		onOpenChange: (e) => !e && he(),
 		modal: !1,
-		children: /* @__PURE__ */ C(ke, {
+		children: /* @__PURE__ */ T(Oe, {
 			style: {
-				width: "420px",
-				maxWidth: "90vw",
+				width: "min(420px, 100vw)",
+				maxWidth: "100vw",
 				padding: 0,
 				display: "flex",
 				flexDirection: "column",
@@ -680,20 +666,20 @@ var w = de(function({ isOpen: de, onClose: he }) {
 				overflow: "hidden"
 			},
 			children: [
-				/* @__PURE__ */ S(je, {
+				/* @__PURE__ */ w(Ae, {
 					style: {
 						padding: "var(--space-cardPadding)",
-						borderBottom: "1px solid var(--color-border)",
+						borderBottom: "1px solid var(--color-border-subtle)",
 						backgroundColor: "var(--color-bg-surface)",
 						flexShrink: 0
 					},
-					children: /* @__PURE__ */ C("div", {
+					children: /* @__PURE__ */ T("div", {
 						style: {
 							display: "flex",
 							alignItems: "center",
 							gap: "var(--space-controlGap)"
 						},
-						children: [/* @__PURE__ */ S("div", {
+						children: [/* @__PURE__ */ w("div", {
 							style: {
 								display: "flex",
 								height: "var(--size-controlHeight-lg)",
@@ -705,60 +691,60 @@ var w = de(function({ isOpen: de, onClose: he }) {
 								boxShadow: "var(--shadow-elevation-2)",
 								flexShrink: 0
 							},
-							children: /* @__PURE__ */ S(ge, { style: {
+							children: /* @__PURE__ */ w(ge, { style: {
 								height: "var(--size-icon-md)",
 								width: "var(--size-icon-md)",
 								color: "var(--color-action-primary-text)"
 							} })
-						}), /* @__PURE__ */ C("div", {
+						}), /* @__PURE__ */ T("div", {
 							style: {
 								flex: 1,
 								minWidth: 0
 							},
-							children: [/* @__PURE__ */ C("div", {
+							children: [/* @__PURE__ */ T("div", {
 								style: {
 									display: "flex",
 									alignItems: "center",
 									gap: "var(--space-iconGap)"
 								},
 								children: [
-									/* @__PURE__ */ S(Me, {
+									/* @__PURE__ */ w(je, {
 										style: {
 											fontSize: "var(--font-size-body-md)",
 											fontWeight: "var(--font-weight-bold)",
 											color: "var(--color-text-primary)",
 											margin: 0
 										},
-										children: N ? w("bigconsole.widget.properties.header.widgetProperties", "Widget Properties") : w("bigconsole.widget.properties.header.properties", "Properties")
+										children: I ? D("bigconsole.widget.properties.header.widgetProperties", "Widget Properties") : D("bigconsole.widget.properties.header.properties", "Properties")
 									}),
-									T === "saving" && /* @__PURE__ */ S(v, { style: {
+									O === "saving" && /* @__PURE__ */ w(Me, { style: {
 										height: "var(--size-icon-sm)",
 										width: "var(--size-icon-sm)"
 									} }),
-									T === "saved" && /* @__PURE__ */ S(p, { style: {
+									O === "saved" && /* @__PURE__ */ w(h, { style: {
 										height: "var(--size-icon-sm)",
 										width: "var(--size-icon-sm)",
 										color: "var(--color-status-success-bg)"
 									} }),
-									T === "error" && /* @__PURE__ */ S(be, { style: {
+									O === "error" && /* @__PURE__ */ w(g, { style: {
 										height: "var(--size-icon-sm)",
 										width: "var(--size-icon-sm)",
 										color: "var(--color-status-error-bg)"
 									} })
 								]
-							}), Mt && /* @__PURE__ */ S(Ae, {
+							}), Lt && /* @__PURE__ */ w(ke, {
 								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: Mt.name
+								children: Lt.name
 							})]
 						})]
 					})
 				}),
-				N ? /* @__PURE__ */ C(Ne, {
+				I ? /* @__PURE__ */ T(Ne, {
 					value: Ue,
 					onValueChange: (e) => We(e),
 					style: {
@@ -768,63 +754,44 @@ var w = de(function({ isOpen: de, onClose: he }) {
 						minHeight: 0,
 						overflow: "hidden"
 					},
-					children: [/* @__PURE__ */ C(Pe, {
+					children: [/* @__PURE__ */ T(Pe, {
 						style: {
 							width: "100%",
 							display: "flex",
+							flexWrap: "wrap",
 							justifyContent: "flex-start",
 							borderRadius: 0,
-							borderBottom: "1px solid var(--color-border)",
-							padding: "0 8px",
+							borderBottom: "1px solid var(--color-border-subtle)",
+							padding: "2px 8px",
 							backgroundColor: "var(--color-bg-sunken)",
-							height: "var(--size-controlHeight-lg)",
+							minHeight: "var(--size-controlHeight-lg)",
+							height: "auto",
 							flexShrink: 0,
-							gap: "2px",
-							overflowX: "auto"
+							gap: "2px"
 						},
 						children: [
-							/* @__PURE__ */ S(b, {
+							/* @__PURE__ */ w(S, {
 								value: "general",
-								style: {
-									fontWeight: "var(--font-weight-semibold)",
-									fontSize: "12px",
-									padding: "6px 8px",
-									flexShrink: 0
-								},
-								children: w("bigconsole.widget.properties.tab.general", "General")
+								style: E,
+								children: D("bigconsole.widget.properties.tab.general", "General")
 							}),
-							/* @__PURE__ */ S(b, {
+							/* @__PURE__ */ w(S, {
 								value: "data",
-								style: {
-									fontWeight: "var(--font-weight-semibold)",
-									fontSize: "12px",
-									padding: "6px 8px",
-									flexShrink: 0
-								},
-								children: w("bigconsole.widget.properties.tab.data", "Data")
+								style: E,
+								children: D("bigconsole.widget.properties.tab.data", "Data")
 							}),
-							/* @__PURE__ */ S(b, {
+							/* @__PURE__ */ w(S, {
 								value: "advanced",
-								style: {
-									fontWeight: "var(--font-weight-semibold)",
-									fontSize: "12px",
-									padding: "6px 8px",
-									flexShrink: 0
-								},
-								children: w("bigconsole.widget.properties.tab.advanced", "Advanced")
+								style: E,
+								children: D("bigconsole.widget.properties.tab.advanced", "Advanced")
 							}),
-							/* @__PURE__ */ S(b, {
+							/* @__PURE__ */ w(S, {
 								value: "appearance",
-								style: {
-									fontWeight: "var(--font-weight-semibold)",
-									fontSize: "12px",
-									padding: "6px 8px",
-									flexShrink: 0
-								},
-								children: w("bigconsole.widget.properties.tab.style", "Style")
+								style: E,
+								children: D("bigconsole.widget.properties.tab.style", "Style")
 							})
 						]
-					}), /* @__PURE__ */ C("div", {
+					}), /* @__PURE__ */ T("div", {
 						style: {
 							flex: 1,
 							overflow: "auto",
@@ -832,642 +799,591 @@ var w = de(function({ isOpen: de, onClose: he }) {
 							minHeight: 0
 						},
 						children: [
-							/* @__PURE__ */ S(y, {
+							/* @__PURE__ */ w(x, {
 								value: "general",
 								className: "mt-0",
-								children: D && /* @__PURE__ */ S("div", {
-									style: {
-										display: "flex",
-										flexDirection: "column",
-										gap: "var(--space-formGap)"
-									},
-									children: /* @__PURE__ */ S(le, {
-										title: D.title,
-										description: D.description,
-										refreshInterval: D.refreshInterval,
-										onTitleChange: (e) => Q("title", e),
-										onDescriptionChange: (e) => Q("description", e),
-										onRefreshIntervalChange: (e) => Q("refreshInterval", e)
-									})
-								})
+								children: A && /* @__PURE__ */ w(n, { children: /* @__PURE__ */ w(ue, {
+									title: A.title,
+									description: A.description,
+									refreshInterval: A.refreshInterval,
+									onTitleChange: (e) => Q("title", e),
+									onDescriptionChange: (e) => Q("description", e),
+									onRefreshIntervalChange: (e) => Q("refreshInterval", e)
+								}) })
 							}),
-							/* @__PURE__ */ S(y, {
+							/* @__PURE__ */ w(x, {
 								value: "data",
-								className: "mt-0 space-y-4",
-								children: D && /* @__PURE__ */ C(Fe, { children: [
-									(() => {
-										let e = c({
-											dataSinkId: D.dataSinkId,
-											parserId: D.parserId,
-											config: {
-												...D.config,
-												binding: void 0
-											}
-										}), t = ee({
-											binding: e,
-											loading: Qe,
-											error: tt,
-											preview: $e,
-											previewComplete: et
-										});
-										return /* @__PURE__ */ S(ue, {
-											consoleId: N?.dashboardId || "",
-											binding: e,
-											dataSinkKey: Xe,
-											dataPath: typeof D.config.dataPath == "string" ? D.config.dataPath : void 0,
-											status: t.status,
-											missingFields: t.missingFields,
-											preview: $e,
-											error: tt,
-											onDataSinkChange: Et,
-											onParserChange: Dt,
-											onDataPathChange: (e) => $({
-												...D.config,
-												dataPath: e
-											})
-										});
-									})(),
-									/* @__PURE__ */ S("div", {
-										className: "border-t border-border-subtle pt-4",
-										children: /* @__PURE__ */ S(g, {
-											className: "text-xs text-text-secondary uppercase tracking-wide",
-											children: w("bigconsole.widget.properties.data.alternativeSources", "Alternative Data Sources")
+								className: "mt-0",
+								children: A && /* @__PURE__ */ T(n, { children: [(() => {
+									let e = l({
+										dataSinkId: A.dataSinkId,
+										parserId: A.parserId,
+										config: {
+											...A.config,
+											binding: void 0
+										}
+									}), t = te({
+										binding: e,
+										loading: nt,
+										error: ot,
+										preview: it,
+										previewComplete: at
+									});
+									return /* @__PURE__ */ w(de, {
+										consoleId: I?.dashboardId || "",
+										binding: e,
+										dataSinkKey: $e,
+										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,
+										onDataPathChange: (e) => $({
+											...A.config,
+											dataPath: e
 										})
-									}),
-									/* @__PURE__ */ C("div", {
-										className: "space-y-2",
-										children: [/* @__PURE__ */ S(g, { children: w("bigconsole.widget.properties.data.sourceTypeLabel", "Data Source Type") }), /* @__PURE__ */ C(we, {
-											value: D.config?.dataSourceType || "",
-											onValueChange: (e) => $({
-												...D.config,
-												dataSourceType: e || void 0
-											}),
-											children: [/* @__PURE__ */ S(Ee, {
-												style: {
-													height: "var(--size-controlHeight-md)",
-													fontSize: "var(--font-size-body-sm)"
-												},
-												children: /* @__PURE__ */ S(De, { placeholder: w("bigconsole.widget.properties.data.selectTypePlaceholder", "Select type...") })
-											}), /* @__PURE__ */ S(Te, {
-												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: Pt.map((e) => /* @__PURE__ */ S(_, {
-													value: e.value,
-													children: e.label
-												}, e.value))
-											})]
-										})]
-									}),
-									D.config?.dataSourceType === "REST_API" && /* @__PURE__ */ C("div", {
-										className: "space-y-3",
+									});
+								})(), /* @__PURE__ */ w(t, {
+									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.",
+									headingLevel: 3,
+									"data-testid": "widget-inspector-alt-sources",
+									children: /* @__PURE__ */ T("div", {
+										className: "flex flex-col gap-form-gap",
 										children: [
-											/* @__PURE__ */ C("div", {
-												className: "space-y-2",
-												children: [/* @__PURE__ */ S(g, { children: w("bigconsole.widget.properties.rest.endpointUrlLabel", "Endpoint URL *") }), /* @__PURE__ */ S(h, {
-													value: D.config?.endpointUrl || "",
-													onChange: (e) => $({
-														...D.config,
-														endpointUrl: e.target.value || void 0
-													}),
-													placeholder: "https://api.example.com/data"
-												})]
-											}),
-											/* @__PURE__ */ C("div", {
+											/* @__PURE__ */ T("div", {
 												className: "space-y-2",
-												children: [/* @__PURE__ */ S(g, { children: w("bigconsole.widget.properties.rest.httpMethodLabel", "HTTP Method") }), /* @__PURE__ */ C(we, {
-													value: D.config?.httpMethod || "GET",
+												children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.data.sourceTypeLabel", "Data Source Type") }), /* @__PURE__ */ T(Ce, {
+													value: A.config?.dataSourceType || "",
 													onValueChange: (e) => $({
-														...D.config,
-														httpMethod: e
+														...A.config,
+														dataSourceType: e || void 0
 													}),
-													children: [/* @__PURE__ */ S(Ee, {
-														style: { height: "var(--size-controlHeight-md)" },
-														children: /* @__PURE__ */ S(De, {})
-													}), /* @__PURE__ */ C(Te, {
+													children: [/* @__PURE__ */ w(Te, {
+														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, {
 														position: "popper",
 														side: "bottom",
 														sideOffset: 4,
-														children: [
-															/* @__PURE__ */ S(_, {
-																value: "GET",
-																children: "GET"
-															}),
-															/* @__PURE__ */ S(_, {
-																value: "POST",
-																children: "POST"
-															}),
-															/* @__PURE__ */ S(_, {
-																value: "PUT",
-																children: "PUT"
-															}),
-															/* @__PURE__ */ S(_, {
-																value: "DELETE",
-																children: "DELETE"
-															})
-														]
+														align: "start",
+														style: {
+															zIndex: 9999,
+															maxHeight: "200px",
+															backgroundColor: "var(--color-overlay-popoverBg, var(--color-bg-surface))",
+															border: "1px solid var(--color-border-subtle)",
+															boxShadow: "var(--shadow-elevation-3)",
+															borderRadius: "var(--radius-button)"
+														},
+														children: zt.map((e) => /* @__PURE__ */ w(b, {
+															value: e.value,
+															children: e.label
+														}, e.value))
 													})]
 												})]
 											}),
-											/* @__PURE__ */ C("div", {
-												className: "space-y-2",
-												children: [/* @__PURE__ */ S(g, { children: w("bigconsole.widget.properties.rest.headersLabel", "Headers (JSON)") }), /* @__PURE__ */ S(x, {
-													value: D.config?.headers || "",
-													onChange: (e) => $({
-														...D.config,
-														headers: e.target.value || void 0
+											A.config?.dataSourceType === "REST_API" && /* @__PURE__ */ T("div", {
+												className: "space-y-3",
+												children: [
+													/* @__PURE__ */ T("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.rest.endpointUrlLabel", "Endpoint URL *") }), /* @__PURE__ */ w(v, {
+															value: A.config?.endpointUrl || "",
+															onChange: (e) => $({
+																...A.config,
+																endpointUrl: e.target.value || void 0
+															}),
+															placeholder: "https://api.example.com/data"
+														})]
 													}),
-													rows: 3,
-													placeholder: "{\"Authorization\": \"Bearer token\", \"Content-Type\": \"application/json\"}",
-													className: "font-mono text-xs"
-												})]
-											}),
-											/* @__PURE__ */ C("div", {
-												className: "space-y-2",
-												children: [/* @__PURE__ */ S(g, { children: w("bigconsole.widget.properties.rest.authenticationLabel", "Authentication") }), /* @__PURE__ */ C(we, {
-													value: D.config?.authType || "none",
-													onValueChange: (e) => $({
-														...D.config,
-														authType: e
+													/* @__PURE__ */ T("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.rest.httpMethodLabel", "HTTP Method") }), /* @__PURE__ */ T(Ce, {
+															value: A.config?.httpMethod || "GET",
+															onValueChange: (e) => $({
+																...A.config,
+																httpMethod: e
+															}),
+															children: [/* @__PURE__ */ w(Te, {
+																style: { height: "var(--size-controlHeight-md)" },
+																children: /* @__PURE__ */ w(Ee, {})
+															}), /* @__PURE__ */ T(we, {
+																position: "popper",
+																side: "bottom",
+																sideOffset: 4,
+																children: [
+																	/* @__PURE__ */ w(b, {
+																		value: "GET",
+																		children: "GET"
+																	}),
+																	/* @__PURE__ */ w(b, {
+																		value: "POST",
+																		children: "POST"
+																	}),
+																	/* @__PURE__ */ w(b, {
+																		value: "PUT",
+																		children: "PUT"
+																	}),
+																	/* @__PURE__ */ w(b, {
+																		value: "DELETE",
+																		children: "DELETE"
+																	})
+																]
+															})]
+														})]
 													}),
-													children: [/* @__PURE__ */ S(Ee, {
-														style: { height: "var(--size-controlHeight-md)" },
-														children: /* @__PURE__ */ S(De, {})
-													}), /* @__PURE__ */ C(Te, {
-														position: "popper",
-														side: "bottom",
-														sideOffset: 4,
-														children: [
-															/* @__PURE__ */ S(_, {
-																value: "none",
-																children: w("bigconsole.widget.properties.rest.authNone", "None")
+													/* @__PURE__ */ T("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.rest.headersLabel", "Headers (JSON)") }), /* @__PURE__ */ w(C, {
+															value: A.config?.headers || "",
+															onChange: (e) => $({
+																...A.config,
+																headers: e.target.value || void 0
 															}),
-															/* @__PURE__ */ S(_, {
-																value: "api_key",
-																children: w("bigconsole.widget.properties.rest.authApiKey", "API Key")
+															rows: 3,
+															placeholder: "{\"Authorization\": \"Bearer token\", \"Content-Type\": \"application/json\"}",
+															className: "font-mono text-xs"
+														})]
+													}),
+													/* @__PURE__ */ T("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.rest.authenticationLabel", "Authentication") }), /* @__PURE__ */ T(Ce, {
+															value: A.config?.authType || "none",
+															onValueChange: (e) => $({
+																...A.config,
+																authType: e
 															}),
-															/* @__PURE__ */ S(_, {
-																value: "bearer",
-																children: w("bigconsole.widget.properties.rest.authBearer", "Bearer Token")
+															children: [/* @__PURE__ */ w(Te, {
+																style: { height: "var(--size-controlHeight-md)" },
+																children: /* @__PURE__ */ w(Ee, {})
+															}), /* @__PURE__ */ T(we, {
+																position: "popper",
+																side: "bottom",
+																sideOffset: 4,
+																children: [
+																	/* @__PURE__ */ w(b, {
+																		value: "none",
+																		children: D("bigconsole.widget.properties.rest.authNone", "None")
+																	}),
+																	/* @__PURE__ */ w(b, {
+																		value: "api_key",
+																		children: D("bigconsole.widget.properties.rest.authApiKey", "API Key")
+																	}),
+																	/* @__PURE__ */ w(b, {
+																		value: "bearer",
+																		children: D("bigconsole.widget.properties.rest.authBearer", "Bearer Token")
+																	}),
+																	/* @__PURE__ */ w(b, {
+																		value: "basic",
+																		children: D("bigconsole.widget.properties.rest.authBasic", "Basic Auth")
+																	})
+																]
+															})]
+														})]
+													}),
+													!!(A.config?.authType && A.config.authType !== "none") && /* @__PURE__ */ T("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ w(y, { children: String(A.config.authType) === "basic" ? D("bigconsole.widget.properties.rest.credentialsLabel", "Credentials (user:pass)") : D("bigconsole.widget.properties.rest.tokenKeyLabel", "Token/Key") }), /* @__PURE__ */ w(v, {
+															type: "password",
+															value: A.config?.authValue || "",
+															onChange: (e) => $({
+																...A.config,
+																authValue: e.target.value || void 0
 															}),
-															/* @__PURE__ */ S(_, {
-																value: "basic",
-																children: w("bigconsole.widget.properties.rest.authBasic", "Basic Auth")
-															})
-														]
-													})]
-												})]
-											}),
-											!!(D.config?.authType && D.config.authType !== "none") && /* @__PURE__ */ C("div", {
-												className: "space-y-2",
-												children: [/* @__PURE__ */ S(g, { children: String(D.config.authType) === "basic" ? w("bigconsole.widget.properties.rest.credentialsLabel", "Credentials (user:pass)") : w("bigconsole.widget.properties.rest.tokenKeyLabel", "Token/Key") }), /* @__PURE__ */ S(h, {
-													type: "password",
-													value: D.config?.authValue || "",
-													onChange: (e) => $({
-														...D.config,
-														authValue: e.target.value || void 0
+															placeholder: A.config.authType === "basic" ? D("bigconsole.widget.properties.rest.credentialsPlaceholder", "username:password") : D("bigconsole.widget.properties.rest.tokenKeyPlaceholder", "Enter token or API key")
+														})]
 													}),
-													placeholder: D.config.authType === "basic" ? w("bigconsole.widget.properties.rest.credentialsPlaceholder", "username:password") : w("bigconsole.widget.properties.rest.tokenKeyPlaceholder", "Enter token or API key")
-												})]
-											}),
-											(D.config?.httpMethod === "POST" || D.config?.httpMethod === "PUT") && /* @__PURE__ */ C("div", {
-												className: "space-y-2",
-												children: [/* @__PURE__ */ S(g, { children: w("bigconsole.widget.properties.rest.requestBodyLabel", "Request Body (JSON)") }), /* @__PURE__ */ S(x, {
-													value: D.config?.requestBody || "",
-													onChange: (e) => $({
-														...D.config,
-														requestBody: e.target.value || void 0
+													(A.config?.httpMethod === "POST" || A.config?.httpMethod === "PUT") && /* @__PURE__ */ T("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.rest.requestBodyLabel", "Request Body (JSON)") }), /* @__PURE__ */ w(C, {
+															value: A.config?.requestBody || "",
+															onChange: (e) => $({
+																...A.config,
+																requestBody: e.target.value || void 0
+															}),
+															rows: 4,
+															placeholder: "{\"key\": \"value\"}",
+															className: "font-mono text-xs"
+														})]
 													}),
-													rows: 4,
-													placeholder: "{\"key\": \"value\"}",
-													className: "font-mono text-xs"
-												})]
+													/* @__PURE__ */ T("div", {
+														className: "space-y-2",
+														children: [
+															/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.dataPath.label", "Data Path (optional)") }),
+															/* @__PURE__ */ w(v, {
+																value: A.config?.dataPath || "",
+																onChange: (e) => $({
+																	...A.config,
+																	dataPath: e.target.value || void 0
+																}),
+																placeholder: "$.data.items or .data.items"
+															}),
+															/* @__PURE__ */ w("p", {
+																className: "text-xs text-text-secondary",
+																children: D("bigconsole.widget.properties.dataPath.restHelp", "JSONPath or dot notation to extract data from response")
+															})
+														]
+													})
+												]
 											}),
-											/* @__PURE__ */ C("div", {
-												className: "space-y-2",
+											A.config?.dataSourceType === "GRAPHQL" && /* @__PURE__ */ T("div", {
+												className: "space-y-3",
 												children: [
-													/* @__PURE__ */ S(g, { children: w("bigconsole.widget.properties.dataPath.label", "Data Path (optional)") }),
-													/* @__PURE__ */ S(h, {
-														value: D.config?.dataPath || "",
-														onChange: (e) => $({
-															...D.config,
-															dataPath: e.target.value || void 0
-														}),
-														placeholder: "$.data.items or .data.items"
+													/* @__PURE__ */ T("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.graphql.endpointLabel", "GraphQL Endpoint *") }), /* @__PURE__ */ w(v, {
+															value: A.config?.graphqlEndpoint || "",
+															onChange: (e) => $({
+																...A.config,
+																graphqlEndpoint: e.target.value || void 0
+															}),
+															placeholder: "https://api.example.com/graphql"
+														})]
 													}),
-													/* @__PURE__ */ S("p", {
-														className: "text-xs text-text-secondary",
-														children: w("bigconsole.widget.properties.dataPath.restHelp", "JSONPath or dot notation to extract data from response")
-													})
-												]
-											})
-										]
-									}),
-									D.config?.dataSourceType === "GRAPHQL" && /* @__PURE__ */ C("div", {
-										className: "space-y-3",
-										children: [
-											/* @__PURE__ */ C("div", {
-												className: "space-y-2",
-												children: [/* @__PURE__ */ S(g, { children: w("bigconsole.widget.properties.graphql.endpointLabel", "GraphQL Endpoint *") }), /* @__PURE__ */ S(h, {
-													value: D.config?.graphqlEndpoint || "",
-													onChange: (e) => $({
-														...D.config,
-														graphqlEndpoint: e.target.value || void 0
+													/* @__PURE__ */ T("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.graphql.queryLabel", "Query *") }), /* @__PURE__ */ w(C, {
+															value: A.config?.graphqlQuery || "",
+															onChange: (e) => $({
+																...A.config,
+																graphqlQuery: e.target.value || void 0
+															}),
+															rows: 6,
+															placeholder: "query GetData($limit: Int) {\n  items(limit: $limit) {\n    id\n    name\n    value\n  }\n}",
+															className: "font-mono text-xs"
+														})]
 													}),
-													placeholder: "https://api.example.com/graphql"
-												})]
-											}),
-											/* @__PURE__ */ C("div", {
-												className: "space-y-2",
-												children: [/* @__PURE__ */ S(g, { children: w("bigconsole.widget.properties.graphql.queryLabel", "Query *") }), /* @__PURE__ */ S(x, {
-													value: D.config?.graphqlQuery || "",
-													onChange: (e) => $({
-														...D.config,
-														graphqlQuery: e.target.value || void 0
+													/* @__PURE__ */ T("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.graphql.variablesLabel", "Variables (JSON, optional)") }), /* @__PURE__ */ w(C, {
+															value: A.config?.graphqlVariables || "",
+															onChange: (e) => $({
+																...A.config,
+																graphqlVariables: e.target.value || void 0
+															}),
+															rows: 3,
+															placeholder: "{\"limit\": 10, \"offset\": 0}",
+															className: "font-mono text-xs"
+														})]
 													}),
-													rows: 6,
-													placeholder: "query GetData($limit: Int) {\n  items(limit: $limit) {\n    id\n    name\n    value\n  }\n}",
-													className: "font-mono text-xs"
-												})]
-											}),
-											/* @__PURE__ */ C("div", {
-												className: "space-y-2",
-												children: [/* @__PURE__ */ S(g, { children: w("bigconsole.widget.properties.graphql.variablesLabel", "Variables (JSON, optional)") }), /* @__PURE__ */ S(x, {
-													value: D.config?.graphqlVariables || "",
-													onChange: (e) => $({
-														...D.config,
-														graphqlVariables: e.target.value || void 0
+													/* @__PURE__ */ T("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.graphql.headersLabel", "Headers (JSON, optional)") }), /* @__PURE__ */ w(C, {
+															value: A.config?.headers || "",
+															onChange: (e) => $({
+																...A.config,
+																headers: e.target.value || void 0
+															}),
+															rows: 2,
+															placeholder: "{\"Authorization\": \"Bearer token\"}",
+															className: "font-mono text-xs"
+														})]
 													}),
-													rows: 3,
-													placeholder: "{\"limit\": 10, \"offset\": 0}",
-													className: "font-mono text-xs"
-												})]
+													/* @__PURE__ */ T("div", {
+														className: "space-y-2",
+														children: [
+															/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.dataPath.label", "Data Path (optional)") }),
+															/* @__PURE__ */ w(v, {
+																value: A.config?.dataPath || "",
+																onChange: (e) => $({
+																	...A.config,
+																	dataPath: e.target.value || void 0
+																}),
+																placeholder: ".data.items"
+															}),
+															/* @__PURE__ */ w("p", {
+																className: "text-xs text-text-secondary",
+																children: D("bigconsole.widget.properties.dataPath.graphqlHelp", "Path to extract data from GraphQL response")
+															})
+														]
+													})
+												]
 											}),
-											/* @__PURE__ */ C("div", {
+											A.config?.dataSourceType === "MOCK" && /* @__PURE__ */ T("div", {
 												className: "space-y-2",
-												children: [/* @__PURE__ */ S(g, { children: w("bigconsole.widget.properties.graphql.headersLabel", "Headers (JSON, optional)") }), /* @__PURE__ */ S(x, {
-													value: D.config?.headers || "",
+												children: [/* @__PURE__ */ w(y, { children: D("bigconsole.widget.properties.mock.sampleDataLabel", "Sample Data (JSON)") }), /* @__PURE__ */ w(C, {
+													value: A.config?.mockData || "",
 													onChange: (e) => $({
-														...D.config,
-														headers: e.target.value || void 0
+														...A.config,
+														mockData: e.target.value || void 0
 													}),
-													rows: 2,
-													placeholder: "{\"Authorization\": \"Bearer token\"}",
-													className: "font-mono text-xs"
+													rows: 5,
+													placeholder: "{\"value\": 100}",
+													className: "font-mono text-sm"
 												})]
-											}),
-											/* @__PURE__ */ C("div", {
-												className: "space-y-2",
-												children: [
-													/* @__PURE__ */ S(g, { children: w("bigconsole.widget.properties.dataPath.label", "Data Path (optional)") }),
-													/* @__PURE__ */ S(h, {
-														value: D.config?.dataPath || "",
-														onChange: (e) => $({
-															...D.config,
-															dataPath: e.target.value || void 0
-														}),
-														placeholder: ".data.items"
-													}),
-													/* @__PURE__ */ S("p", {
-														className: "text-xs text-text-secondary",
-														children: w("bigconsole.widget.properties.dataPath.graphqlHelp", "Path to extract data from GraphQL response")
-													})
-												]
 											})
 										]
-									}),
-									D.config?.dataSourceType === "MOCK" && /* @__PURE__ */ C("div", {
-										className: "space-y-2",
-										children: [/* @__PURE__ */ S(g, { children: w("bigconsole.widget.properties.mock.sampleDataLabel", "Sample Data (JSON)") }), /* @__PURE__ */ S(x, {
-											value: D.config?.mockData || "",
-											onChange: (e) => $({
-												...D.config,
-												mockData: e.target.value || void 0
-											}),
-											rows: 5,
-											placeholder: "{\"value\": 100}",
-											className: "font-mono text-sm"
-										})]
 									})
-								] })
+								})] })
 							}),
-							/* @__PURE__ */ C(y, {
+							/* @__PURE__ */ w(x, {
 								value: "advanced",
-								className: "mt-0 space-y-6",
-								children: [
-									D && /* @__PURE__ */ S(se, {
-										renderer: D.renderer,
-										rendererOptions: Nt,
+								className: "mt-0",
+								children: /* @__PURE__ */ T(n, { children: [
+									A && /* @__PURE__ */ w(ce, {
+										renderer: A.renderer,
+										rendererOptions: Rt,
 										onRendererChange: (e) => {
 											Q("renderer", e), e === "BIGCONSOLE" && Q("template", void 0);
 										},
-										templateEditor: D.renderer === "BIGCONSOLE" ? void 0 : /* @__PURE__ */ S(Ve, {
+										templateEditor: A.renderer === "BIGCONSOLE" ? void 0 : /* @__PURE__ */ w(Ve, {
 											widget: {
-												...N,
-												template: D.template,
-												renderer: D.renderer
+												...I,
+												template: A.template,
+												renderer: A.renderer
 											},
 											onSave: (e) => Q("template", e)
 										})
 									}),
-									/* @__PURE__ */ C("section", {
-										className: "space-y-4 border-t border-border-default pt-4",
-										children: [/* @__PURE__ */ C("div", {
-											className: "flex items-center justify-between",
-											children: [/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h3", {
-												className: "text-sm font-medium",
-												children: w("bigconsole.widget.properties.actions.heading", "Widget Actions")
-											}), /* @__PURE__ */ S("p", {
-												className: "text-xs text-text-secondary",
-												children: w("bigconsole.widget.properties.actions.subheading", "Configure buttons on this widget")
-											})] }), /* @__PURE__ */ C(m, {
-												size: "sm",
-												onClick: bt,
-												children: [/* @__PURE__ */ S(ve, { className: "size-4" }), w("bigconsole.widget.properties.actions.add", "Add")]
-											})]
-										}), nt ? /* @__PURE__ */ S("div", {
+									/* @__PURE__ */ w(t, {
+										title: D("bigconsole.widget.properties.actions.heading", "Widget Actions"),
+										description: D("bigconsole.widget.properties.actions.subheading", "Configure buttons on this widget"),
+										headingLevel: 3,
+										meta: H.length > 0 ? /* @__PURE__ */ w("span", {
+											className: "rounded-pill bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
+											children: H.length
+										}) : void 0,
+										actions: /* @__PURE__ */ T(_, {
+											size: "sm",
+											onClick: Tt,
+											children: [/* @__PURE__ */ w(ve, { className: "size-4" }), D("bigconsole.widget.properties.actions.add", "Add")]
+										}),
+										"data-testid": "widget-inspector-actions",
+										children: st ? /* @__PURE__ */ w("div", {
 											className: "flex justify-center py-8",
-											children: /* @__PURE__ */ S(v, { className: "size-6" })
-										}) : H.length === 0 ? /* @__PURE__ */ C("div", {
-											className: "py-8 text-center",
-											children: [/* @__PURE__ */ S(ge, { className: "size-10 mx-auto mb-2 text-text-secondary/50" }), /* @__PURE__ */ S("p", {
-												className: "text-sm text-text-secondary",
-												children: w("bigconsole.widget.properties.actions.empty", "No actions configured")
-											})]
-										}) : /* @__PURE__ */ S("div", {
+											children: /* @__PURE__ */ w(Me, { 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__ */ S(Se, {
+											children: [...H].sort((e, t) => e.order - t.order).map((e, t) => /* @__PURE__ */ w(xe, {
 												className: e.disabled ? "opacity-60" : "",
-												children: /* @__PURE__ */ C(Ce, {
+												children: /* @__PURE__ */ T(Se, {
 													className: "p-3 flex items-center gap-2",
 													children: [
-														/* @__PURE__ */ C("div", {
+														/* @__PURE__ */ T("div", {
 															className: "flex flex-col gap-0.5",
-															children: [/* @__PURE__ */ S(m, {
+															children: [/* @__PURE__ */ w(_, {
 																variant: "ghost",
 																size: "icon-sm",
-																onClick: () => wt(t),
+																onClick: () => kt(t),
 																disabled: t === 0,
 																className: "h-5 w-5",
-																children: /* @__PURE__ */ S(me, { className: "size-3" })
-															}), /* @__PURE__ */ S(m, {
+																children: /* @__PURE__ */ w(me, { className: "size-3" })
+															}), /* @__PURE__ */ w(_, {
 																variant: "ghost",
 																size: "icon-sm",
-																onClick: () => Tt(t),
+																onClick: () => At(t),
 																disabled: t === H.length - 1,
 																className: "h-5 w-5",
-																children: /* @__PURE__ */ S(pe, { className: "size-3" })
+																children: /* @__PURE__ */ w(pe, { className: "size-3" })
 															})]
 														}),
-														/* @__PURE__ */ C("div", {
+														/* @__PURE__ */ T("div", {
 															className: "flex-1 min-w-0",
-															children: [/* @__PURE__ */ C("div", {
+															children: [/* @__PURE__ */ T("div", {
 																className: "flex items-center gap-2",
-																children: [/* @__PURE__ */ S("span", { className: `size-2 rounded-full ${ze[e.style] || "bg-muted-foreground"}` }), /* @__PURE__ */ S("span", {
+																children: [/* @__PURE__ */ w("span", {
+																	"aria-hidden": "true",
+																	className: `size-2 shrink-0 rounded-full ${Re[e.style] || ze}`
+																}), /* @__PURE__ */ w("span", {
 																	className: "text-sm font-medium truncate",
 																	children: e.label
 																})]
-															}), /* @__PURE__ */ S("p", {
+															}), /* @__PURE__ */ w("p", {
 																className: "text-xs text-text-secondary truncate",
-																children: yt.has(e.name) ? w("bigconsole.widget.properties.actions.webhookSummary", "→ {{method}} {{url}}", {
-																	method: yt.get(e.name)?.method ?? "",
-																	url: yt.get(e.name)?.webhookUrl ?? ""
-																}) : w("bigconsole.widget.properties.actions.emitsEvent", "Emits an event")
+																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 ?? ""
+																}) : D("bigconsole.widget.properties.actions.emitsEvent", "Emits an event")
 															})]
 														}),
-														/* @__PURE__ */ C("div", {
-															className: "flex gap-1",
-															children: [/* @__PURE__ */ S(m, {
+														/* @__PURE__ */ T("div", {
+															className: "flex shrink-0 gap-1",
+															children: [/* @__PURE__ */ w(_, {
 																variant: "ghost",
 																size: "icon-sm",
-																onClick: () => xt(e),
-																children: /* @__PURE__ */ S(_e, { className: "size-4" })
-															}), /* @__PURE__ */ S(m, {
+																"aria-label": `Edit ${e.label}`,
+																onClick: () => Et(e),
+																children: /* @__PURE__ */ w(_e, { className: "size-4" })
+															}), /* @__PURE__ */ w(_, {
 																variant: "ghost",
 																size: "icon-sm",
-																onClick: () => Ct(e.id),
-																children: /* @__PURE__ */ S(ye, { className: "size-4" })
+																"aria-label": `Delete ${e.label}`,
+																onClick: () => Ot(e.id),
+																children: /* @__PURE__ */ w(ye, { className: "size-4" })
 															})]
 														})
 													]
 												})
 											}, e.id))
-										})]
+										})
 									}),
-									/* @__PURE__ */ C("section", {
-										className: "space-y-3 border-t border-border-default pt-4",
-										children: [/* @__PURE__ */ S("h3", {
-											className: "text-sm font-semibold text-text-primary",
-											children: w("bigconsole.widget.properties.section.drilldown", "Drilldown")
-										}), /* @__PURE__ */ S(oe, {
-											widget: N,
-											onChange: jt
-										})]
+									/* @__PURE__ */ w(t, {
+										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, {
+											widget: I,
+											onChange: It
+										})
 									}),
-									/* @__PURE__ */ C("section", {
-										className: "space-y-3 border-t border-border-default pt-4",
-										children: [/* @__PURE__ */ S("h3", {
-											className: "text-sm font-semibold text-text-primary",
-											children: w("bigconsole.widget.properties.section.webhooks", "Webhooks")
-										}), /* @__PURE__ */ S(ie, {
-											dashboardId: N.dashboardId,
-											widgetId: N.id
-										})]
+									/* @__PURE__ */ w(t, {
+										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, {
+											dashboardId: I.dashboardId,
+											widgetId: I.id
+										})
 									}),
-									/* @__PURE__ */ C("section", {
-										className: "space-y-3 border-t border-border-default pt-4",
-										children: [/* @__PURE__ */ S("h3", {
-											className: "text-sm font-semibold text-text-primary",
-											children: w("bigconsole.widget.properties.section.events", "Events")
-										}), /* @__PURE__ */ S(ae, {
-											dashboardId: N.dashboardId,
-											widgetId: N.id,
-											maxHeight: "calc(100vh - 350px)"
-										})]
+									/* @__PURE__ */ w(t, {
+										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, {
+											dashboardId: I.dashboardId,
+											widgetId: I.id,
+											maxHeight: "min(50vh, 360px)"
+										})
 									})
-								]
+								] })
 							}),
-							/* @__PURE__ */ S(y, {
+							/* @__PURE__ */ w(x, {
 								value: "appearance",
 								className: "mt-0",
-								children: D && /* @__PURE__ */ S(ce, {
-									widgetType: N.type,
-									config: D.config || {},
-									onChange: At
+								children: A && /* @__PURE__ */ w(le, {
+									widgetType: I.type,
+									config: A.config || {},
+									onChange: Ft
 								})
 							})
 						]
 					})]
-				}) : /* @__PURE__ */ S("div", {
-					className: "flex-1 flex items-center justify-center p-4",
-					children: /* @__PURE__ */ C("div", {
-						className: "text-center",
-						children: [/* @__PURE__ */ S(ge, { className: "size-12 mx-auto mb-3 text-text-secondary" }), /* @__PURE__ */ S("p", {
+				}) : /* @__PURE__ */ w("div", {
+					className: "flex min-h-0 flex-1 items-center justify-center p-card-padding",
+					children: /* @__PURE__ */ w(t, {
+						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" }),
+						className: "w-full max-w-sm",
+						"data-testid": "widget-inspector-empty",
+						children: /* @__PURE__ */ w("p", {
 							className: "text-sm text-text-secondary",
-							children: w("bigconsole.widget.properties.emptyState", "Select a widget to edit")
-						})]
+							children: "Pick a widget on the canvas and its identity, data binding, actions and style options appear here."
+						})
 					})
 				}),
-				N && /* @__PURE__ */ C("div", {
+				I && /* @__PURE__ */ T("div", {
 					style: {
 						padding: "var(--space-cardPadding)",
-						borderTop: "1px solid var(--color-border)",
+						borderTop: "1px solid var(--color-border-subtle)",
 						backgroundColor: "var(--color-bg-sunken)",
 						flexShrink: 0
 					},
 					children: [
-						k && /* @__PURE__ */ C("div", {
-							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "var(--space-iconGap)",
-								marginBottom: "var(--space-controlGap)",
-								padding: "var(--space-controlGap)",
-								backgroundColor: "var(--color-status-warning-bgSubtle, rgba(251, 191, 36, 0.1))",
-								borderRadius: "var(--radius-button)",
-								border: "1px solid var(--color-status-warning-border, rgba(251, 191, 36, 0.3))"
-							},
-							children: [/* @__PURE__ */ S("div", { style: {
-								width: "8px",
-								height: "8px",
-								borderRadius: "50%",
-								backgroundColor: "var(--color-status-warning-bg)",
-								flexShrink: 0
-							} }), /* @__PURE__ */ S("span", {
-								style: {
-									fontSize: "var(--font-size-body-sm)",
-									color: "var(--color-status-warning-text, #92400e)",
-									fontWeight: "var(--font-weight-medium)"
-								},
-								children: w("bigconsole.widget.properties.footer.unsavedChanges", "You have unsaved changes")
-							})]
+						M && /* @__PURE__ */ w(t, {
+							tone: "warning",
+							padding: "compact",
+							title: D("bigconsole.widget.properties.footer.unsavedChanges", "You have unsaved changes"),
+							headingLevel: 3,
+							className: "mb-control-gap",
+							"data-testid": "widget-inspector-save-unsaved"
 						}),
-						T === "saved" && !k && /* @__PURE__ */ C("div", {
-							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "var(--space-iconGap)",
-								marginBottom: "var(--space-controlGap)",
-								padding: "var(--space-controlGap)",
-								backgroundColor: "var(--color-status-success-bgSubtle, rgba(34, 197, 94, 0.1))",
-								borderRadius: "var(--radius-button)",
-								border: "1px solid var(--color-status-success-border, rgba(34, 197, 94, 0.3))"
-							},
-							children: [/* @__PURE__ */ S(p, { style: {
-								width: "var(--size-icon-sm)",
-								height: "var(--size-icon-sm)",
-								color: "var(--color-status-success-text)",
-								flexShrink: 0
-							} }), /* @__PURE__ */ S("span", {
-								style: {
-									fontSize: "var(--font-size-body-sm)",
-									color: "var(--color-status-success-text)",
-									fontWeight: "var(--font-weight-medium)"
-								},
-								children: w("bigconsole.widget.properties.footer.allSaved", "All changes saved")
-							})]
+						O === "saved" && !M && /* @__PURE__ */ w(t, {
+							tone: "success",
+							padding: "compact",
+							title: D("bigconsole.widget.properties.footer.allSaved", "All changes saved"),
+							headingLevel: 3,
+							icon: /* @__PURE__ */ w(h, { className: "h-icon-sm w-icon-sm" }),
+							className: "mb-control-gap",
+							"data-testid": "widget-inspector-save-saved"
 						}),
-						T === "error" && /* @__PURE__ */ C("div", {
-							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "var(--space-iconGap)",
-								marginBottom: "var(--space-controlGap)",
-								padding: "var(--space-controlGap)",
-								backgroundColor: "var(--color-status-error-bgSubtle)",
-								borderRadius: "var(--radius-button)",
-								border: "1px solid var(--color-status-error-border)"
-							},
-							children: [/* @__PURE__ */ S(be, { style: {
-								width: "var(--size-icon-sm)",
-								height: "var(--size-icon-sm)",
-								color: "var(--color-status-error-text)",
-								flexShrink: 0
-							} }), /* @__PURE__ */ S("span", {
-								style: {
-									fontSize: "var(--font-size-body-sm)",
-									color: "var(--color-status-error-text)",
-									fontWeight: "var(--font-weight-medium)"
-								},
-								children: w("bigconsole.widget.properties.footer.saveFailed", "Failed to save changes")
-							})]
+						O === "error" && /* @__PURE__ */ w(t, {
+							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" }),
+							className: "mb-control-gap",
+							"data-testid": "widget-inspector-save-error"
 						}),
-						/* @__PURE__ */ C("div", {
-							style: {
-								display: "flex",
-								gap: "var(--space-controlGap)"
-							},
-							children: [/* @__PURE__ */ S(m, {
-								onClick: Ot,
-								disabled: T === "saving" || !k,
+						/* @__PURE__ */ T("div", {
+							className: "flex flex-wrap gap-control-gap",
+							children: [/* @__PURE__ */ w(_, {
+								onClick: Nt,
+								disabled: O === "saving" || !M,
 								style: {
 									flex: 1,
 									height: "var(--size-controlHeight-md)",
-									backgroundColor: k ? "var(--color-action-primary-bg)" : void 0,
-									opacity: k ? 1 : .5
+									backgroundColor: M ? "var(--color-action-primary-bg)" : void 0,
+									opacity: M ? 1 : .5
 								},
-								children: T === "saving" ? /* @__PURE__ */ C("span", {
+								children: O === "saving" ? /* @__PURE__ */ T("span", {
 									style: {
 										display: "flex",
 										alignItems: "center",
 										gap: "var(--space-iconGap)"
 									},
-									children: [/* @__PURE__ */ S(v, { style: {
+									children: [/* @__PURE__ */ w(Me, { style: {
 										width: "var(--size-icon-sm)",
 										height: "var(--size-icon-sm)"
-									} }), w("bigconsole.widget.properties.footer.saving", "Saving...")]
-								}) : /* @__PURE__ */ C("span", {
+									} }), D("bigconsole.widget.properties.footer.saving", "Saving...")]
+								}) : /* @__PURE__ */ T("span", {
 									style: {
 										display: "flex",
 										alignItems: "center",
 										gap: "var(--space-iconGap)"
 									},
-									children: [/* @__PURE__ */ S(p, { style: {
+									children: [/* @__PURE__ */ w(h, { style: {
 										width: "var(--size-icon-sm)",
 										height: "var(--size-icon-sm)"
-									} }), w("bigconsole.widget.properties.footer.saveChanges", "Save Changes")]
+									} }), D("bigconsole.widget.properties.footer.saveChanges", "Save Changes")]
 								})
-							}), /* @__PURE__ */ C(m, {
+							}), /* @__PURE__ */ T(_, {
 								variant: "outline",
-								onClick: kt,
-								disabled: T === "saving" || !k,
+								onClick: Pt,
+								disabled: O === "saving" || !M,
 								style: {
 									height: "var(--size-controlHeight-md)",
-									opacity: k ? 1 : .5
+									opacity: M ? 1 : .5
 								},
-								children: [/* @__PURE__ */ S(be, { style: {
+								children: [/* @__PURE__ */ w(g, { style: {
 									width: "var(--size-icon-sm)",
 									height: "var(--size-icon-sm)"
-								} }), w("bigconsole.widget.properties.footer.discard", "Discard")]
+								} }), D("bigconsole.widget.properties.footer.discard", "Discard")]
 							})]
 						})
 					]
 				}),
-				/* @__PURE__ */ S(re, {
-					isOpen: ft,
+				/* @__PURE__ */ w(ie, {
+					isOpen: _t,
 					action: J,
-					initialWebhook: vt,
-					isLoading: pt,
-					saveError: gt,
+					initialWebhook: Ct,
+					isLoading: vt,
+					saveError: xt,
 					onClose: () => {
 						q(!1), Y(void 0), X(void 0), Z(null);
 					},
-					onSave: St
+					onSave: Dt
 				})
 			]
 		})
 	});
 });
 //#endregion
-export { w as default };
+export { D as default };
 
 //# sourceMappingURL=PropertiesPanel.js.map