@burdenoff/microfe-bigconsole 2026.510.54

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

@@ -0,0 +1,1594 @@
+import { useWidgetStore as e } from "../../store/widgetStore.js";
+import "../../store/index.js";
+import t from "../../hooks/useWidgetOperations.js";
+import n from "../../hooks/useDrilldownOperations.js";
+import r from "../../hooks/useWidgetActions.js";
+import i from "../../hooks/useDataSinkOperations.js";
+import a from "../../hooks/useParserOperations.js";
+import "../../hooks/index.js";
+import { getWidgetDefinition as o } from "./WidgetRegistry.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 "./webhook-config/index.js";
+import ie 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 { Fragment as de, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { Button as w, Card as fe, CardContent as pe, Input as T, Label as E, Select as D, SelectContent as O, SelectItem as k, SelectTrigger as A, SelectValue as j, Sheet as me, SheetContent as he, SheetDescription as ge, SheetHeader as _e, SheetTitle as ve, Spinner as M, Tabs as ye, TabsContent as N, TabsList as be, TabsTrigger as P, Textarea as F } from "@burdenoff/fe-libs/ui";
+//#region src/bigconsole/components/widgets/PropertiesPanel.tsx
+var xe = [
+	{
+		value: "BIGCONSOLE",
+		label: "BigConsole Native",
+		description: "Full-featured native widgets"
+	},
+	{
+		value: "ADAPTIVE_CARD",
+		label: "Adaptive Cards",
+		description: "Microsoft Teams/Outlook format"
+	},
+	{
+		value: "BLOCKKIT",
+		label: "Block Kit",
+		description: "Slack format"
+	},
+	{
+		value: "CUSTOM",
+		label: "Custom",
+		description: "Custom React component"
+	}
+], Se = [
+	{
+		value: "DATASINK",
+		label: "DataSink",
+		description: "Use data from BigConsole DataSinks"
+	},
+	{
+		value: "REST_API",
+		label: "REST API",
+		description: "Fetch data from REST endpoints"
+	},
+	{
+		value: "GRAPHQL",
+		label: "GraphQL",
+		description: "Query data using GraphQL"
+	},
+	{
+		value: "SQL",
+		label: "SQL Database",
+		description: "Query SQL databases directly"
+	},
+	{
+		value: "WEBSOCKET",
+		label: "WebSocket",
+		description: "Real-time data streaming"
+	},
+	{
+		value: "MOCK",
+		label: "Sample JSON",
+		description: "Manually enter sample JSON data"
+	}
+], Ce = {
+	PRIMARY: "bg-action-primary",
+	SECONDARY: "bg-muted-foreground",
+	SUCCESS: "bg-state-success",
+	WARNING: "bg-state-warning",
+	DANGER: "bg-state-error"
+};
+function we(e) {
+	if (!e) return {};
+	let t = Array.isArray(e) ? e[0] : e;
+	if (!t || typeof t != "object") return {};
+	let n = Object.keys(t), r = [
+		"name",
+		"label",
+		"category",
+		"title",
+		"key",
+		"id",
+		"month",
+		"date",
+		"region",
+		"product"
+	], i = [
+		"value",
+		"amount",
+		"count",
+		"total",
+		"revenue",
+		"sales",
+		"quantity",
+		"orders",
+		"sum"
+	], a, o;
+	for (let e of r) if (n.includes(e)) {
+		a = e;
+		break;
+	}
+	for (let e of i) if (n.includes(e)) {
+		o = e;
+		break;
+	}
+	if (!a || !o) for (let e of n) {
+		let n = t[e];
+		if (!a && typeof n == "string" && (a = e), !o && typeof n == "number" && (o = e), a && o) break;
+	}
+	return {
+		labelField: a,
+		valueField: o,
+		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(() => {
+		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 n = e.target.value;
+		if (r(n), n.trim() === "") a(null), t({});
+		else try {
+			let e = JSON.parse(n);
+			a(null), t(e);
+		} catch (e) {
+			a(e.message);
+		}
+	}, [t]), c = m(() => {
+		try {
+			let e = JSON.parse(n);
+			r(JSON.stringify(e, null, 2)), a(null), t(e);
+		} catch (e) {
+			a(e.message);
+		}
+	}, [n, t]);
+	return /* @__PURE__ */ C("div", {
+		style: {
+			paddingTop: "var(--space-formGap)",
+			borderTop: "1px solid var(--color-border)"
+		},
+		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: "Template (JSON)"
+				}), i && /* @__PURE__ */ S("span", {
+					style: {
+						fontSize: "var(--font-size-body-sm)",
+						color: "var(--color-status-error-text)",
+						fontWeight: "var(--font-weight-medium)"
+					},
+					children: "Invalid JSON"
+				})]
+			}),
+			/* @__PURE__ */ S(F, {
+				value: n,
+				onChange: s,
+				spellCheck: !1,
+				placeholder: `Enter ${e.renderer} template JSON...`,
+				style: {
+					fontFamily: "var(--font-family-mono)",
+					fontSize: "var(--font-size-body-sm)",
+					minHeight: "180px",
+					borderColor: i ? "var(--color-status-error-border)" : void 0,
+					resize: "vertical"
+				}
+			}),
+			i && /* @__PURE__ */ S("p", {
+				style: {
+					fontSize: "var(--font-size-body-sm)",
+					color: "var(--color-status-error-text)",
+					backgroundColor: "var(--color-status-error-bgSubtle)",
+					padding: "var(--space-controlGap)",
+					borderRadius: "var(--radius-button)",
+					marginTop: "var(--space-controlGap)"
+				},
+				children: i
+			}),
+			/* @__PURE__ */ C("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: "var(--space-controlGap)",
+					marginTop: "var(--space-controlGap)"
+				},
+				children: [/* @__PURE__ */ S(w, {
+					variant: "outline",
+					size: "sm",
+					onClick: c,
+					disabled: !!i || n.trim() === "",
+					style: {
+						height: "var(--size-controlHeight-sm)",
+						fontWeight: "var(--font-weight-semibold)"
+					},
+					children: "Format"
+				}), !i && n.trim() !== "" && /* @__PURE__ */ C("span", {
+					style: {
+						fontSize: "var(--font-size-body-sm)",
+						color: "var(--color-status-success-text)",
+						display: "flex",
+						alignItems: "center",
+						gap: "4px"
+					},
+					children: [/* @__PURE__ */ S(v, { style: {
+						width: "12px",
+						height: "12px"
+					} }), "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)"
+				},
+				children: [
+					/* @__PURE__ */ S("span", {
+						style: { fontWeight: "var(--font-weight-medium)" },
+						children: "Ctrl+S to save"
+					}),
+					e.renderer === "ADAPTIVE_CARD" && /* @__PURE__ */ C("a", {
+						href: "https://adaptivecards.io/designer/",
+						target: "_blank",
+						rel: "noopener noreferrer",
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: "var(--space-controlGap)",
+							color: "var(--color-text-link)",
+							fontSize: "var(--font-size-body-sm)",
+							fontWeight: "var(--font-weight-medium)",
+							textDecoration: "none"
+						},
+						children: ["Designer", /* @__PURE__ */ S(y, { style: {
+							height: "var(--size-icon-sm)",
+							width: "var(--size-icon-sm)"
+						} })]
+					}),
+					e.renderer === "BLOCKKIT" && /* @__PURE__ */ C("a", {
+						href: "https://app.slack.com/block-kit-builder",
+						target: "_blank",
+						rel: "noopener noreferrer",
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: "var(--space-controlGap)",
+							color: "var(--color-text-link)",
+							fontSize: "var(--font-size-body-sm)",
+							fontWeight: "var(--font-weight-medium)",
+							textDecoration: "none"
+						},
+						children: ["Block Kit Builder", /* @__PURE__ */ S(y, { style: {
+							height: "var(--size-icon-sm)",
+							width: "var(--size-icon-sm)"
+						} })]
+					})
+				]
+			})
+		]
+	});
+}), I = p(function({ isOpen: s, onClose: c }) {
+	let [l, u] = _("general"), [d, f] = _("idle"), [p, g] = _(null), [y, I] = _(!1), L = e((e) => e.selectedWidgetId), De = e((e) => e.widgets), R = e((e) => e.updateWidget), z = L ? De.get(L) : void 0;
+	h(() => {
+		z ? (g({
+			title: z.title || "",
+			description: z.description || "",
+			refreshInterval: z.refreshInterval ?? void 0,
+			renderer: z.renderer || "BIGCONSOLE",
+			template: z.template,
+			dataSinkId: z.dataSinkId ?? void 0,
+			datasetId: z.datasetId ?? void 0,
+			parserId: z.parserId ?? void 0,
+			parserRules: z.parserRules ?? void 0,
+			config: z.config || {},
+			drilldownConfig: z.drilldown ? {
+				enabled: z.drilldown.enabled ?? !1,
+				targetDashboardId: z.drilldown.targetDashboardId ?? "",
+				navigationMode: z.drilldown.navigationMode ?? "MODAL",
+				parameterMapping: z.drilldown.parameterMapping ?? {},
+				passGlobalFilters: z.drilldown.passGlobalFilters ?? !0,
+				maxDepth: z.drilldown.maxDepth ?? 3,
+				openIn: z.drilldown.openIn ?? "same"
+			} : void 0
+		}), I(!1), f("idle")) : g(null);
+	}, [z]);
+	let { updateWidget: B } = t(z?.pageId, z?.dashboardId, { skipFetch: !0 }), { createDrilldown: V, updateDrilldown: H, deleteDrilldown: U } = n(), { dataSinks: W } = i({ skipFetch: !1 }), [G, K] = _(null), { executeParser: Oe } = a({
+		consoleId: z?.dashboardId,
+		skipFetch: !0
+	}), [ke, Ae] = _(!1), { actions: q, loading: J, createAction: je, updateAction: Me, deleteAction: Ne, reorderActions: Y } = r(L || void 0), [Pe, X] = _(!1), [Fe, Z] = _(void 0), [Ie, Le] = _(!1), Re = m(() => {
+		Z(void 0), X(!0);
+	}, []), ze = m((e) => {
+		Z(e), X(!0);
+	}, []), Be = m(async (e) => {
+		if (L) {
+			Le(!0);
+			try {
+				let t = null;
+				if (t = "id" in e ? await Me(e) : await je(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);
+					R(L, { actions: n.sort((e, t) => e.order - t.order) });
+				}
+				X(!1), Z(void 0);
+			} catch {} finally {
+				Le(!1);
+			}
+		}
+	}, [
+		L,
+		q,
+		je,
+		Me,
+		R
+	]), Ve = m(async (e) => {
+		L && window.confirm("Are you sure you want to delete this action?") && await Ne(e) && R(L, { actions: q.filter((t) => t.id !== e) });
+	}, [
+		L,
+		q,
+		Ne,
+		R
+	]), He = m(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) });
+	}, [
+		L,
+		q,
+		Y,
+		R
+	]), Ue = m(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) && R(L, { actions: t.map((e, t) => ({
+			...e,
+			order: n.indexOf(e.id)
+		})).sort((e, t) => e.order - t.order) });
+	}, [
+		L,
+		q,
+		Y,
+		R
+	]);
+	h(() => {
+		L && q.length >= 0 && !J && R(L, { actions: q });
+	}, [
+		L,
+		q,
+		J,
+		R
+	]);
+	let Q = m((e, t) => {
+		g((n) => n && {
+			...n,
+			[e]: t
+		}), I(!0);
+	}, []), $ = m((e) => {
+		g((t) => t && {
+			...t,
+			config: e
+		}), I(!0);
+	}, []);
+	h(() => {
+		if (p?.dataSinkId && W.length > 0) {
+			let e = W.find((e) => e.id === p.dataSinkId);
+			e && K(e.key);
+		} else K(null);
+	}, [p?.dataSinkId, W]);
+	let We = m((e) => {
+		if (K(e), e) {
+			let t = W.find((t) => t.key === e);
+			t && (Q("dataSinkId", t.id), g((t) => t && {
+				...t,
+				config: {
+					...t.config,
+					dataSinkKey: e
+				}
+			}), I(!0));
+		} else Q("dataSinkId", void 0), g((e) => e && {
+			...e,
+			config: {
+				...e.config,
+				dataSinkKey: void 0
+			},
+			parserId: void 0
+		}), I(!0);
+	}, [W, Q]), Ge = m(async (e) => {
+		if (Q("parserId", e || void 0), e && z) {
+			Ae(!0);
+			try {
+				let t = await Oe(e);
+				if (t?.success && t.output) {
+					let e = we(t.output);
+					(e.labelField || e.valueField) && (g((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
+						};
+					}), I(!0));
+				}
+			} catch (e) {
+				console.warn("Failed to auto-detect parser fields:", e);
+			} finally {
+				Ae(!1);
+			}
+		}
+	}, [
+		Q,
+		Oe,
+		z
+	]), Ke = m(async () => {
+		if (!(!z || !p)) {
+			f("saving");
+			try {
+				let e = {
+					...z.metadata || {},
+					description: p.description || ""
+				}, t = await B({
+					id: z.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,
+					metadata: e
+				}), n = z.drilldown;
+				if (p.drilldownConfig) {
+					let { enabled: e, targetDashboardId: t, navigationMode: r, parameterMapping: i, passGlobalFilters: a, maxDepth: o, openIn: s } = p.drilldownConfig;
+					if (z.drilldown?.id) {
+						let c = await H({
+							id: z.drilldown.id,
+							targetDashboardId: t,
+							parameterMapping: i,
+							navigationMode: r,
+							enabled: e,
+							passGlobalFilters: a,
+							maxDepth: o,
+							openIn: s
+						});
+						c && (n = c);
+					} else if (t) {
+						let c = await V({
+							sourceWidgetId: z.id,
+							targetDashboardId: t,
+							parameterMapping: i || {},
+							navigationMode: r,
+							passGlobalFilters: a,
+							maxDepth: o,
+							openIn: s
+						});
+						c && (n = {
+							...c,
+							enabled: e
+						});
+					}
+				} else z.drilldown?.id && !p.drilldownConfig && (await U(z.drilldown.id), n = void 0);
+				t ? (R(z.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,
+					updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+				}), f("saved"), I(!1), setTimeout(() => f("idle"), 2e3)) : f("error");
+			} catch {
+				f("error");
+			}
+		}
+	}, [
+		z,
+		p,
+		B,
+		R,
+		V,
+		H,
+		U
+	]), qe = m(() => {
+		z && (g({
+			title: z.title || "",
+			description: z.description || "",
+			refreshInterval: z.refreshInterval ?? void 0,
+			renderer: z.renderer || "BIGCONSOLE",
+			template: z.template,
+			dataSinkId: z.dataSinkId ?? void 0,
+			datasetId: z.datasetId ?? void 0,
+			parserId: z.parserId ?? void 0,
+			parserRules: z.parserRules ?? void 0,
+			config: z.config || {},
+			drilldownConfig: z.drilldown ? {
+				enabled: z.drilldown.enabled ?? !1,
+				targetDashboardId: z.drilldown.targetDashboardId ?? "",
+				navigationMode: z.drilldown.navigationMode ?? "MODAL",
+				parameterMapping: z.drilldown.parameterMapping ?? {},
+				passGlobalFilters: z.drilldown.passGlobalFilters ?? !0,
+				maxDepth: z.drilldown.maxDepth ?? 3,
+				openIn: z.drilldown.openIn ?? "same"
+			} : void 0
+		}), I(!1), f("idle"));
+	}, [z]), Je = m((e) => {
+		$(e);
+	}, [$]), Ye = m((e) => {
+		g((t) => t && {
+			...t,
+			drilldownConfig: e
+		}), I(!0);
+	}, []), Xe = z ? o(z.type) : null, Ze = z ? Te(z.type) : null;
+	return /* @__PURE__ */ S(me, {
+		open: s,
+		onOpenChange: (e) => !e && c(),
+		modal: !1,
+		children: /* @__PURE__ */ C(he, {
+			style: {
+				width: "420px",
+				maxWidth: "90vw",
+				padding: 0,
+				display: "flex",
+				flexDirection: "column",
+				height: "100%",
+				overflow: "hidden"
+			},
+			children: [
+				/* @__PURE__ */ S(_e, {
+					style: {
+						padding: "var(--space-cardPadding)",
+						borderBottom: "1px solid var(--color-border)",
+						backgroundColor: "var(--color-bg-surface)",
+						flexShrink: 0
+					},
+					children: /* @__PURE__ */ C("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: "var(--space-controlGap)"
+						},
+						children: [/* @__PURE__ */ S("div", {
+							style: {
+								display: "flex",
+								height: "var(--size-controlHeight-lg)",
+								width: "var(--size-controlHeight-lg)",
+								alignItems: "center",
+								justifyContent: "center",
+								borderRadius: "var(--radius-card)",
+								backgroundColor: "var(--color-action-primary-bg)",
+								boxShadow: "var(--shadow-elevation-2)",
+								flexShrink: 0
+							},
+							children: /* @__PURE__ */ S(b, { style: {
+								height: "var(--size-icon-md)",
+								width: "var(--size-icon-md)",
+								color: "var(--color-action-primary-text)"
+							} })
+						}), /* @__PURE__ */ C("div", {
+							style: {
+								flex: 1,
+								minWidth: 0
+							},
+							children: [/* @__PURE__ */ C("div", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: "var(--space-iconGap)"
+								},
+								children: [
+									/* @__PURE__ */ S(ve, {
+										style: {
+											fontSize: "var(--font-size-body-md)",
+											fontWeight: "var(--font-weight-bold)",
+											color: "var(--color-text-primary)",
+											margin: 0
+										},
+										children: z ? "Widget Properties" : "Properties"
+									}),
+									d === "saving" && /* @__PURE__ */ S(M, { style: {
+										height: "var(--size-icon-sm)",
+										width: "var(--size-icon-sm)"
+									} }),
+									d === "saved" && /* @__PURE__ */ S(v, { style: {
+										height: "var(--size-icon-sm)",
+										width: "var(--size-icon-sm)",
+										color: "var(--color-status-success-bg)"
+									} }),
+									d === "error" && /* @__PURE__ */ S(x, { style: {
+										height: "var(--size-icon-sm)",
+										width: "var(--size-icon-sm)",
+										color: "var(--color-status-error-bg)"
+									} })
+								]
+							}), Xe && /* @__PURE__ */ S(ge, {
+								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: Xe.name
+							})]
+						})]
+					})
+				}),
+				z ? /* @__PURE__ */ C(ye, {
+					value: l,
+					onValueChange: (e) => u(e),
+					style: {
+						flex: 1,
+						display: "flex",
+						flexDirection: "column",
+						minHeight: 0,
+						overflow: "hidden"
+					},
+					children: [/* @__PURE__ */ C(be, {
+						style: {
+							width: "100%",
+							display: "flex",
+							justifyContent: "flex-start",
+							borderRadius: 0,
+							borderBottom: "1px solid var(--color-border)",
+							padding: "0 8px",
+							backgroundColor: "var(--color-bg-sunken)",
+							height: "var(--size-controlHeight-lg)",
+							flexShrink: 0,
+							gap: "2px",
+							overflowX: "auto"
+						},
+						children: [
+							/* @__PURE__ */ S(P, {
+								value: "general",
+								style: {
+									fontWeight: "var(--font-weight-semibold)",
+									fontSize: "12px",
+									padding: "6px 8px",
+									flexShrink: 0
+								},
+								children: "General"
+							}),
+							/* @__PURE__ */ S(P, {
+								value: "data",
+								style: {
+									fontWeight: "var(--font-weight-semibold)",
+									fontSize: "12px",
+									padding: "6px 8px",
+									flexShrink: 0
+								},
+								children: "Data"
+							}),
+							/* @__PURE__ */ S(P, {
+								value: "actions",
+								style: {
+									fontWeight: "var(--font-weight-semibold)",
+									fontSize: "12px",
+									padding: "6px 8px",
+									flexShrink: 0
+								},
+								children: "Actions"
+							}),
+							/* @__PURE__ */ S(P, {
+								value: "drilldown",
+								style: {
+									fontWeight: "var(--font-weight-semibold)",
+									fontSize: "12px",
+									padding: "6px 8px",
+									flexShrink: 0
+								},
+								children: "Drilldown"
+							}),
+							/* @__PURE__ */ S(P, {
+								value: "webhooks",
+								style: {
+									fontWeight: "var(--font-weight-semibold)",
+									fontSize: "12px",
+									padding: "6px 8px",
+									flexShrink: 0
+								},
+								children: "Hooks"
+							}),
+							/* @__PURE__ */ S(P, {
+								value: "events",
+								style: {
+									fontWeight: "var(--font-weight-semibold)",
+									fontSize: "12px",
+									padding: "6px 8px",
+									flexShrink: 0
+								},
+								children: "Events"
+							}),
+							/* @__PURE__ */ S(P, {
+								value: "appearance",
+								style: {
+									fontWeight: "var(--font-weight-semibold)",
+									fontSize: "12px",
+									padding: "6px 8px",
+									flexShrink: 0
+								},
+								children: "Style"
+							})
+						]
+					}), /* @__PURE__ */ C("div", {
+						style: {
+							flex: 1,
+							overflow: "auto",
+							padding: "var(--space-cardPadding)",
+							minHeight: 0
+						},
+						children: [
+							/* @__PURE__ */ S(N, {
+								value: "general",
+								className: "mt-0",
+								children: p && /* @__PURE__ */ C("div", {
+									style: {
+										display: "flex",
+										flexDirection: "column",
+										gap: "var(--space-formGap)"
+									},
+									children: [
+										/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("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__ */ S(T, {
+											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__ */ C("div", { children: [/* @__PURE__ */ S("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__ */ S(F, {
+											id: "description",
+											value: p.description,
+											onChange: (e) => Q("description", e.target.value),
+											rows: 3,
+											style: {
+												fontSize: "var(--font-size-body-sm)",
+												resize: "none"
+											}
+										})] }),
+										/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("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__ */ S(T, {
+											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__ */ C("div", {
+											style: {
+												paddingTop: "var(--space-formGap)",
+												borderTop: "1px solid var(--color-border)"
+											},
+											children: [
+												/* @__PURE__ */ S("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__ */ C(D, {
+													value: p.renderer,
+													onValueChange: (e) => {
+														let t = e;
+														Q("renderer", t), t === "BIGCONSOLE" && Q("template", void 0);
+													},
+													children: [/* @__PURE__ */ S(A, {
+														style: {
+															height: "var(--size-controlHeight-md)",
+															fontSize: "var(--font-size-body-sm)"
+														},
+														children: /* @__PURE__ */ S(j, { placeholder: "Select renderer" })
+													}), /* @__PURE__ */ S(O, {
+														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__ */ S(k, {
+															value: e.value,
+															children: e.label
+														}, e.value))
+													})]
+												}),
+												/* @__PURE__ */ S("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__ */ S(Ee, {
+											widget: {
+												...z,
+												template: p.template,
+												renderer: p.renderer
+											},
+											onSave: (e) => Q("template", e)
+										})
+									]
+								})
+							}),
+							/* @__PURE__ */ S(N, {
+								value: "data",
+								className: "mt-0 space-y-4",
+								children: p && /* @__PURE__ */ C(de, { children: [
+									/* @__PURE__ */ C("div", {
+										className: "space-y-4",
+										children: [
+											/* @__PURE__ */ S("div", {
+												className: "p-3 bg-muted rounded-md border border-border",
+												children: /* @__PURE__ */ S("p", {
+													className: "text-xs text-muted-foreground",
+													children: "Connect this widget to a DataSink and Parser to display transformed data."
+												})
+											}),
+											/* @__PURE__ */ C("div", {
+												className: "space-y-2",
+												children: [
+													/* @__PURE__ */ S(E, { children: "DataSink" }),
+													/* @__PURE__ */ S(ee, {
+														value: G,
+														onChange: We,
+														placeholder: "Select a DataSink..."
+													}),
+													G && /* @__PURE__ */ C("p", {
+														className: "text-xs text-muted-foreground",
+														children: [
+															"Key: ",
+															G,
+															p.dataSinkId && /* @__PURE__ */ C("span", {
+																className: "ml-2 text-text-tertiary",
+																children: [
+																	"ID: ",
+																	p.dataSinkId.slice(0, 8),
+																	"..."
+																]
+															})
+														]
+													})
+												]
+											}),
+											/* @__PURE__ */ C("div", {
+												className: "space-y-2",
+												children: [
+													/* @__PURE__ */ S(E, { children: "Parser" }),
+													/* @__PURE__ */ S(te, {
+														consoleId: z?.dashboardId || "",
+														value: p.parserId || null,
+														onChange: Ge,
+														filterInputSinkKey: G || void 0,
+														filterStatus: void 0,
+														placeholder: G ? "Select a parser..." : "Select a DataSink first...",
+														disabled: !G
+													}),
+													/* @__PURE__ */ S("p", {
+														className: "text-xs text-muted-foreground",
+														children: ke ? /* @__PURE__ */ C("span", {
+															className: "flex items-center gap-1",
+															children: [/* @__PURE__ */ S(M, { style: {
+																width: "12px",
+																height: "12px"
+															} }), "Auto-detecting field mappings..."]
+														}) : G ? "Showing parsers that use this DataSink as input" : "Select a DataSink to see available parsers"
+													})
+												]
+											}),
+											!!(p.parserId && (p.config?.labelField || p.config?.valueField)) && /* @__PURE__ */ C("div", {
+												className: "p-3 bg-green-50 dark:bg-green-950/30 rounded-md border border-green-200 dark:border-green-800",
+												children: [/* @__PURE__ */ S("p", {
+													className: "text-xs font-medium text-green-700 dark:text-green-400 mb-2",
+													children: "✓ Field mappings configured"
+												}), /* @__PURE__ */ C("div", {
+													className: "text-xs text-green-600 dark:text-green-500 space-y-1",
+													children: [
+														!!p.config?.labelField && /* @__PURE__ */ C("p", { children: [
+															"Label Field:",
+															" ",
+															/* @__PURE__ */ S("code", {
+																className: "bg-green-100 dark:bg-green-900 px-1 rounded",
+																children: String(p.config.labelField)
+															})
+														] }),
+														!!p.config?.valueField && /* @__PURE__ */ C("p", { children: [
+															"Value Field:",
+															" ",
+															/* @__PURE__ */ S("code", {
+																className: "bg-green-100 dark:bg-green-900 px-1 rounded",
+																children: String(p.config.valueField)
+															})
+														] }),
+														!!p.config?.xAxisField && /* @__PURE__ */ C("p", { children: [
+															"X-Axis Field:",
+															" ",
+															/* @__PURE__ */ S("code", {
+																className: "bg-green-100 dark:bg-green-900 px-1 rounded",
+																children: String(p.config.xAxisField)
+															})
+														] })
+													]
+												})]
+											}),
+											/* @__PURE__ */ C("div", {
+												className: "space-y-2",
+												children: [
+													/* @__PURE__ */ S(E, { children: "Data Path (Optional)" }),
+													/* @__PURE__ */ S(T, {
+														value: p.config?.dataPath || "",
+														onChange: (e) => $({
+															...p.config,
+															dataPath: e.target.value || void 0
+														}),
+														placeholder: "e.g., summary.totalRevenue"
+													}),
+													/* @__PURE__ */ S("p", {
+														className: "text-xs text-muted-foreground",
+														children: "Path to extract specific data from the parser output (dot notation)"
+													})
+												]
+											})
+										]
+									}),
+									/* @__PURE__ */ S("div", {
+										className: "border-t border-border pt-4",
+										children: /* @__PURE__ */ S(E, {
+											className: "text-xs text-muted-foreground uppercase tracking-wide",
+											children: "Alternative Data Sources"
+										})
+									}),
+									/* @__PURE__ */ C("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ S(E, { children: "Data Source Type" }), /* @__PURE__ */ C(D, {
+											value: p.config?.dataSourceType || "",
+											onValueChange: (e) => $({
+												...p.config,
+												dataSourceType: e || void 0
+											}),
+											children: [/* @__PURE__ */ S(A, {
+												style: {
+													height: "var(--size-controlHeight-md)",
+													fontSize: "var(--font-size-body-sm)"
+												},
+												children: /* @__PURE__ */ S(j, { placeholder: "Select type..." })
+											}), /* @__PURE__ */ S(O, {
+												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: Se.map((e) => /* @__PURE__ */ S(k, {
+													value: e.value,
+													children: e.label
+												}, e.value))
+											})]
+										})]
+									}),
+									p.config?.dataSourceType === "REST_API" && /* @__PURE__ */ C("div", {
+										className: "space-y-3",
+										children: [
+											/* @__PURE__ */ C("div", {
+												className: "space-y-2",
+												children: [/* @__PURE__ */ S(E, { children: "Endpoint URL *" }), /* @__PURE__ */ S(T, {
+													value: p.config?.endpointUrl || "",
+													onChange: (e) => $({
+														...p.config,
+														endpointUrl: e.target.value || void 0
+													}),
+													placeholder: "https://api.example.com/data"
+												})]
+											}),
+											/* @__PURE__ */ C("div", {
+												className: "space-y-2",
+												children: [/* @__PURE__ */ S(E, { children: "HTTP Method" }), /* @__PURE__ */ C(D, {
+													value: p.config?.httpMethod || "GET",
+													onValueChange: (e) => $({
+														...p.config,
+														httpMethod: e
+													}),
+													children: [/* @__PURE__ */ S(A, {
+														style: { height: "var(--size-controlHeight-md)" },
+														children: /* @__PURE__ */ S(j, {})
+													}), /* @__PURE__ */ C(O, {
+														position: "popper",
+														side: "bottom",
+														sideOffset: 4,
+														children: [
+															/* @__PURE__ */ S(k, {
+																value: "GET",
+																children: "GET"
+															}),
+															/* @__PURE__ */ S(k, {
+																value: "POST",
+																children: "POST"
+															}),
+															/* @__PURE__ */ S(k, {
+																value: "PUT",
+																children: "PUT"
+															}),
+															/* @__PURE__ */ S(k, {
+																value: "DELETE",
+																children: "DELETE"
+															})
+														]
+													})]
+												})]
+											}),
+											/* @__PURE__ */ C("div", {
+												className: "space-y-2",
+												children: [/* @__PURE__ */ S(E, { children: "Headers (JSON)" }), /* @__PURE__ */ S(F, {
+													value: p.config?.headers || "",
+													onChange: (e) => $({
+														...p.config,
+														headers: e.target.value || void 0
+													}),
+													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(E, { children: "Authentication" }), /* @__PURE__ */ C(D, {
+													value: p.config?.authType || "none",
+													onValueChange: (e) => $({
+														...p.config,
+														authType: e
+													}),
+													children: [/* @__PURE__ */ S(A, {
+														style: { height: "var(--size-controlHeight-md)" },
+														children: /* @__PURE__ */ S(j, {})
+													}), /* @__PURE__ */ C(O, {
+														position: "popper",
+														side: "bottom",
+														sideOffset: 4,
+														children: [
+															/* @__PURE__ */ S(k, {
+																value: "none",
+																children: "None"
+															}),
+															/* @__PURE__ */ S(k, {
+																value: "api_key",
+																children: "API Key"
+															}),
+															/* @__PURE__ */ S(k, {
+																value: "bearer",
+																children: "Bearer Token"
+															}),
+															/* @__PURE__ */ S(k, {
+																value: "basic",
+																children: "Basic Auth"
+															})
+														]
+													})]
+												})]
+											}),
+											!!(p.config?.authType && p.config.authType !== "none") && /* @__PURE__ */ C("div", {
+												className: "space-y-2",
+												children: [/* @__PURE__ */ S(E, { children: String(p.config.authType) === "basic" ? "Credentials (user:pass)" : "Token/Key" }), /* @__PURE__ */ S(T, {
+													type: "password",
+													value: p.config?.authValue || "",
+													onChange: (e) => $({
+														...p.config,
+														authValue: e.target.value || void 0
+													}),
+													placeholder: p.config.authType === "basic" ? "username:password" : "Enter token or API key"
+												})]
+											}),
+											(p.config?.httpMethod === "POST" || p.config?.httpMethod === "PUT") && /* @__PURE__ */ C("div", {
+												className: "space-y-2",
+												children: [/* @__PURE__ */ S(E, { children: "Request Body (JSON)" }), /* @__PURE__ */ S(F, {
+													value: p.config?.requestBody || "",
+													onChange: (e) => $({
+														...p.config,
+														requestBody: e.target.value || void 0
+													}),
+													rows: 4,
+													placeholder: "{\"key\": \"value\"}",
+													className: "font-mono text-xs"
+												})]
+											}),
+											/* @__PURE__ */ C("div", {
+												className: "space-y-2",
+												children: [
+													/* @__PURE__ */ S(E, { children: "Data Path (optional)" }),
+													/* @__PURE__ */ S(T, {
+														value: p.config?.dataPath || "",
+														onChange: (e) => $({
+															...p.config,
+															dataPath: e.target.value || void 0
+														}),
+														placeholder: "$.data.items or .data.items"
+													}),
+													/* @__PURE__ */ S("p", {
+														className: "text-xs text-muted-foreground",
+														children: "JSONPath or dot notation to extract data from response"
+													})
+												]
+											})
+										]
+									}),
+									p.config?.dataSourceType === "GRAPHQL" && /* @__PURE__ */ C("div", {
+										className: "space-y-3",
+										children: [
+											/* @__PURE__ */ C("div", {
+												className: "space-y-2",
+												children: [/* @__PURE__ */ S(E, { children: "GraphQL Endpoint *" }), /* @__PURE__ */ S(T, {
+													value: p.config?.graphqlEndpoint || "",
+													onChange: (e) => $({
+														...p.config,
+														graphqlEndpoint: e.target.value || void 0
+													}),
+													placeholder: "https://api.example.com/graphql"
+												})]
+											}),
+											/* @__PURE__ */ C("div", {
+												className: "space-y-2",
+												children: [/* @__PURE__ */ S(E, { children: "Query *" }), /* @__PURE__ */ S(F, {
+													value: p.config?.graphqlQuery || "",
+													onChange: (e) => $({
+														...p.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"
+												})]
+											}),
+											/* @__PURE__ */ C("div", {
+												className: "space-y-2",
+												children: [/* @__PURE__ */ S(E, { children: "Variables (JSON, optional)" }), /* @__PURE__ */ S(F, {
+													value: p.config?.graphqlVariables || "",
+													onChange: (e) => $({
+														...p.config,
+														graphqlVariables: e.target.value || void 0
+													}),
+													rows: 3,
+													placeholder: "{\"limit\": 10, \"offset\": 0}",
+													className: "font-mono text-xs"
+												})]
+											}),
+											/* @__PURE__ */ C("div", {
+												className: "space-y-2",
+												children: [/* @__PURE__ */ S(E, { children: "Headers (JSON, optional)" }), /* @__PURE__ */ S(F, {
+													value: p.config?.headers || "",
+													onChange: (e) => $({
+														...p.config,
+														headers: e.target.value || void 0
+													}),
+													rows: 2,
+													placeholder: "{\"Authorization\": \"Bearer token\"}",
+													className: "font-mono text-xs"
+												})]
+											}),
+											/* @__PURE__ */ C("div", {
+												className: "space-y-2",
+												children: [
+													/* @__PURE__ */ S(E, { children: "Data Path (optional)" }),
+													/* @__PURE__ */ S(T, {
+														value: p.config?.dataPath || "",
+														onChange: (e) => $({
+															...p.config,
+															dataPath: e.target.value || void 0
+														}),
+														placeholder: ".data.items"
+													}),
+													/* @__PURE__ */ S("p", {
+														className: "text-xs text-muted-foreground",
+														children: "Path to extract data from GraphQL response"
+													})
+												]
+											})
+										]
+									}),
+									p.config?.dataSourceType === "MOCK" && /* @__PURE__ */ C("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ S(E, { children: "Sample Data (JSON)" }), /* @__PURE__ */ S(F, {
+											value: p.config?.mockData || "",
+											onChange: (e) => $({
+												...p.config,
+												mockData: e.target.value || void 0
+											}),
+											rows: 5,
+											placeholder: "{\"value\": 100}",
+											className: "font-mono text-sm"
+										})]
+									})
+								] })
+							}),
+							/* @__PURE__ */ C(N, {
+								value: "actions",
+								className: "mt-0 space-y-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: "Widget Actions"
+									}), /* @__PURE__ */ S("p", {
+										className: "text-xs text-muted-foreground",
+										children: "Configure buttons on this widget"
+									})] }), /* @__PURE__ */ C(w, {
+										size: "sm",
+										onClick: Re,
+										children: [/* @__PURE__ */ S(le, { className: "size-4" }), "Add"]
+									})]
+								}), J ? /* @__PURE__ */ S("div", {
+									className: "flex justify-center py-8",
+									children: /* @__PURE__ */ S(M, { className: "size-6" })
+								}) : q.length === 0 ? /* @__PURE__ */ C("div", {
+									className: "py-8 text-center",
+									children: [/* @__PURE__ */ S(b, { className: "size-10 mx-auto mb-2 text-muted-foreground/50" }), /* @__PURE__ */ S("p", {
+										className: "text-sm text-muted-foreground",
+										children: "No actions configured"
+									})]
+								}) : /* @__PURE__ */ S("div", {
+									className: "space-y-2",
+									children: [...q].sort((e, t) => e.order - t.order).map((e, t) => /* @__PURE__ */ S(fe, {
+										className: e.disabled ? "opacity-60" : "",
+										children: /* @__PURE__ */ C(pe, {
+											className: "p-3 flex items-center gap-2",
+											children: [
+												/* @__PURE__ */ C("div", {
+													className: "flex flex-col gap-0.5",
+													children: [/* @__PURE__ */ S(w, {
+														variant: "ghost",
+														size: "icon-sm",
+														onClick: () => He(t),
+														disabled: t === 0,
+														className: "h-5 w-5",
+														children: /* @__PURE__ */ S(se, { className: "size-3" })
+													}), /* @__PURE__ */ S(w, {
+														variant: "ghost",
+														size: "icon-sm",
+														onClick: () => Ue(t),
+														disabled: t === q.length - 1,
+														className: "h-5 w-5",
+														children: /* @__PURE__ */ S(oe, { className: "size-3" })
+													})]
+												}),
+												/* @__PURE__ */ C("div", {
+													className: "flex-1 min-w-0",
+													children: [/* @__PURE__ */ C("div", {
+														className: "flex items-center gap-2",
+														children: [/* @__PURE__ */ S("span", { className: `size-2 rounded-full ${Ce[e.style] || "bg-muted-foreground"}` }), /* @__PURE__ */ S("span", {
+															className: "text-sm font-medium truncate",
+															children: e.label
+														})]
+													}), /* @__PURE__ */ C("p", {
+														className: "text-xs text-muted-foreground",
+														children: [
+															e.name,
+															" • ",
+															e.type
+														]
+													})]
+												}),
+												/* @__PURE__ */ C("div", {
+													className: "flex gap-1",
+													children: [/* @__PURE__ */ S(w, {
+														variant: "ghost",
+														size: "icon-sm",
+														onClick: () => ze(e),
+														children: /* @__PURE__ */ S(ce, { className: "size-4" })
+													}), /* @__PURE__ */ S(w, {
+														variant: "ghost",
+														size: "icon-sm",
+														onClick: () => Ve(e.id),
+														children: /* @__PURE__ */ S(ue, { className: "size-4" })
+													})]
+												})
+											]
+										})
+									}, e.id))
+								})]
+							}),
+							/* @__PURE__ */ S(N, {
+								value: "drilldown",
+								className: "mt-0",
+								children: /* @__PURE__ */ S(ae, {
+									widget: z,
+									onChange: Ye
+								})
+							}),
+							/* @__PURE__ */ S(N, {
+								value: "webhooks",
+								className: "mt-0",
+								children: /* @__PURE__ */ S(re, {
+									dashboardId: z.dashboardId,
+									widgetId: z.id
+								})
+							}),
+							/* @__PURE__ */ S(N, {
+								value: "events",
+								className: "mt-0",
+								children: /* @__PURE__ */ S(ie, {
+									dashboardId: z.dashboardId,
+									widgetId: z.id,
+									maxHeight: "calc(100vh - 350px)"
+								})
+							}),
+							/* @__PURE__ */ S(N, {
+								value: "appearance",
+								className: "mt-0",
+								children: Ze ? /* @__PURE__ */ S(Ze, {
+									config: z.config || {},
+									onChange: Je
+								}) : /* @__PURE__ */ S("div", {
+									className: "p-4 bg-muted rounded-lg text-center",
+									children: /* @__PURE__ */ S("p", {
+										className: "text-sm text-muted-foreground",
+										children: "No style options for this widget type"
+									})
+								})
+							})
+						]
+					})]
+				}) : /* @__PURE__ */ S("div", {
+					className: "flex-1 flex items-center justify-center p-4",
+					children: /* @__PURE__ */ C("div", {
+						className: "text-center",
+						children: [/* @__PURE__ */ S(b, { className: "size-12 mx-auto mb-3 text-muted-foreground" }), /* @__PURE__ */ S("p", {
+							className: "text-sm text-muted-foreground",
+							children: "Select a widget to edit"
+						})]
+					})
+				}),
+				z && /* @__PURE__ */ C("div", {
+					style: {
+						padding: "var(--space-cardPadding)",
+						borderTop: "1px solid var(--color-border)",
+						backgroundColor: "var(--color-bg-sunken)",
+						flexShrink: 0
+					},
+					children: [
+						y && /* @__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: "You have unsaved changes"
+							})]
+						}),
+						d === "saved" && !y && /* @__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(v, { 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: "All changes saved"
+							})]
+						}),
+						d === "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(x, { 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: "Failed to save changes"
+							})]
+						}),
+						/* @__PURE__ */ C("div", {
+							style: {
+								display: "flex",
+								gap: "var(--space-controlGap)"
+							},
+							children: [/* @__PURE__ */ S(w, {
+								onClick: Ke,
+								disabled: d === "saving" || !y,
+								style: {
+									flex: 1,
+									height: "var(--size-controlHeight-md)",
+									backgroundColor: y ? "var(--color-action-primary-bg)" : void 0,
+									opacity: y ? 1 : .5
+								},
+								children: d === "saving" ? /* @__PURE__ */ C("span", {
+									style: {
+										display: "flex",
+										alignItems: "center",
+										gap: "var(--space-iconGap)"
+									},
+									children: [/* @__PURE__ */ S(M, { style: {
+										width: "var(--size-icon-sm)",
+										height: "var(--size-icon-sm)"
+									} }), "Saving..."]
+								}) : /* @__PURE__ */ C("span", {
+									style: {
+										display: "flex",
+										alignItems: "center",
+										gap: "var(--space-iconGap)"
+									},
+									children: [/* @__PURE__ */ S(v, { style: {
+										width: "var(--size-icon-sm)",
+										height: "var(--size-icon-sm)"
+									} }), "Save Changes"]
+								})
+							}), /* @__PURE__ */ C(w, {
+								variant: "outline",
+								onClick: qe,
+								disabled: d === "saving" || !y,
+								style: {
+									height: "var(--size-controlHeight-md)",
+									opacity: y ? 1 : .5
+								},
+								children: [/* @__PURE__ */ S(x, { style: {
+									width: "var(--size-icon-sm)",
+									height: "var(--size-icon-sm)"
+								} }), "Discard"]
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ S(ne, {
+					isOpen: Pe,
+					action: Fe,
+					isLoading: Ie,
+					onClose: () => {
+						X(!1), Z(void 0);
+					},
+					onSave: Be
+				})
+			]
+		})
+	});
+});
+//#endregion
+export { I as default };
+
+//# sourceMappingURL=PropertiesPanel.js.map