@burdenoff/microfe-bigconsole 2026.729.1 → 2026.729.3

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

@@ -1,26 +1,23 @@
 import { memo as e, useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
-import { Pencil as a, Plus as o, Zap as s } from "lucide-react";
-import { Button as c, Checkbox as l, Dialog as ee, DialogContent as te, DialogDescription as u, DialogFooter as ne, DialogHeader as re, DialogTitle as ie, Input as d, Select as f, SelectContent as p, SelectItem as m, SelectTrigger as h, SelectValue as g, Spinner as ae, Textarea as _ } from "@burdenoff/fe-libs/ui";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { ChevronDown as ee, ChevronRight as te, Pencil as ne, Plus as re, Zap as ie } from "lucide-react";
+import { Button as ae, Checkbox as a, Dialog as oe, DialogContent as se, DialogDescription as ce, DialogFooter as le, DialogHeader as ue, DialogTitle as de, Input as o, Select as s, SelectContent as c, SelectItem as l, SelectTrigger as u, SelectValue as d, Spinner as fe, Textarea as pe } from "@burdenoff/fe-libs/ui";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/ActionConfigDialog.tsx
-var oe = [
-	{
-		value: "BUTTON",
-		label: "Button"
-	},
-	{
-		value: "LINK",
-		label: "Link"
-	},
-	{
-		value: "EMIT_EVENT",
-		label: "Emit Event"
-	},
-	{
-		value: "CUSTOM",
-		label: "Custom"
-	}
-], b = [
+var me = [{
+	value: "WEBHOOK",
+	label: "Call a webhook / my API",
+	hint: "Sends an HTTP request to the URL below every time the button is clicked."
+}, {
+	value: "EMIT",
+	label: "Just emit an event (advanced)",
+	hint: "Emits widget:<name>:clicked. Wire it up yourself in the Webhooks/Events section."
+}], he = [
+	"POST",
+	"GET",
+	"PUT",
+	"PATCH",
+	"DELETE"
+], ge = [
 	{
 		value: "PRIMARY",
 		label: "Primary",
@@ -46,7 +43,7 @@ var oe = [
 		label: "Danger",
 		color: "var(--color-action-danger-bg)"
 	}
-], x = [
+], _e = [
 	{
 		value: "",
 		label: "No icon"
@@ -103,82 +100,127 @@ var oe = [
 		value: "search",
 		label: "Search"
 	}
-], S = e(function({ isOpen: e, action: S, isLoading: C = !1, onClose: w, onSave: T }) {
-	let E = !!S, D = r(null), [O, k] = i(""), [A, j] = i(""), [M, N] = i("BUTTON"), [P, F] = i("PRIMARY"), [I, L] = i(""), [R, z] = i(!1), [B, V] = i(!1), [H, U] = i(!1), [W, G] = i("Confirm Action"), [K, q] = i("Are you sure you want to proceed?"), [J, Y] = i("Confirm"), [X, Z] = i("Cancel"), [Q, $] = i(null);
+];
+function m(e) {
+	return e.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
+}
+var h = {
+	display: "block",
+	fontSize: "var(--font-size-body-sm)",
+	fontWeight: "var(--font-weight-semibold)",
+	color: "var(--color-text-primary)",
+	marginBottom: "var(--space-controlGap)"
+}, g = {
+	fontSize: "var(--font-size-body-sm)",
+	color: "var(--color-text-muted)",
+	marginTop: "var(--space-controlGap)"
+}, _ = {
+	zIndex: 9999,
+	backgroundColor: "var(--color-overlay-popoverBg, var(--color-bg-surface))",
+	border: "1px solid var(--color-border)",
+	boxShadow: "var(--shadow-elevation-3)",
+	borderRadius: "var(--radius-button)"
+}, v = e(function({ isOpen: e, action: v, initialWebhook: y, isLoading: b = !1, saveError: ve, onClose: ye, onSave: be }) {
+	let x = !!v, S = r(null), C = r(!1), [w, T] = i(""), [E, D] = i(""), [O, k] = i(!1), [A, j] = i("PRIMARY"), [M, N] = i(""), [P, F] = i("WEBHOOK"), [I, L] = i(""), [R, z] = i("POST"), [B, V] = i(!1), [H, U] = i(!1), [xe, Se] = i(!1), [W, G] = i(!1), [K, q] = i("Confirm Action"), [J, Y] = i("Are you sure you want to proceed?"), [Ce, X] = i("Confirm"), [we, Z] = i("Cancel"), [Q, $] = i(null);
 	n(() => {
-		e && (S ? (k(S.name), j(S.label), N(S.type), F(S.style), L(S.icon || ""), z(S.disabled), V(S.hidden), U(!!S.confirmation), S.confirmation && (G(S.confirmation.title), q(S.confirmation.message), Y(S.confirmation.confirmLabel || "Confirm"), Z(S.confirmation.cancelLabel || "Cancel"))) : (k(""), j(""), N("BUTTON"), F("PRIMARY"), L(""), z(!1), V(!1), U(!1), G("Confirm Action"), q("Are you sure you want to proceed?"), Y("Confirm"), Z("Cancel")), $(null), setTimeout(() => D.current?.focus(), 100));
-	}, [e, S]);
-	let se = t((e) => {
+		if (!e) return;
+		C.current = !1, L(""), z("POST"), v ? (T(v.label), D(v.name), k(!1), j(v.style), N(v.icon || ""), V(v.disabled), U(v.hidden), F("EMIT"), G(!!v.confirmation), v.confirmation ? (q(v.confirmation.title), Y(v.confirmation.message), X(v.confirmation.confirmLabel || "Confirm"), Z(v.confirmation.cancelLabel || "Cancel")) : (q("Confirm Action"), Y("Are you sure you want to proceed?"), X("Confirm"), Z("Cancel"))) : (T(""), D(""), k(!1), j("PRIMARY"), N(""), F("WEBHOOK"), V(!1), U(!1), G(!1), q("Confirm Action"), Y("Are you sure you want to proceed?"), X("Confirm"), Z("Cancel")), Se(!1), $(null);
+		let t = requestAnimationFrame(() => requestAnimationFrame(() => S.current?.focus()));
+		return () => cancelAnimationFrame(t);
+	}, [e, v]), n(() => {
+		!e || !y || C.current || (F("WEBHOOK"), L(y.url), z(y.method));
+	}, [e, y]);
+	let Te = t((e) => {
+		T(e), O || D(m(e)), Q && $(null);
+	}, [O, Q]), Ee = t((e) => {
 		e.preventDefault();
-		let t = O.trim(), n = A.trim();
+		let t = w.trim();
 		if (!t) {
-			$("Action name is required"), D.current?.focus();
+			$("Button label is required"), S.current?.focus();
 			return;
 		}
+		let n = x && v ? v.name : m(O ? E : w) || m(w);
 		if (!n) {
-			$("Action label is required");
+			$("Enter a label using letters or numbers");
 			return;
 		}
-		let r = H ? {
-			title: W.trim() || "Confirm Action",
-			message: K.trim() || "Are you sure?",
-			confirmLabel: J.trim() || "Confirm",
-			cancelLabel: X.trim() || "Cancel"
-		} : void 0;
-		T(E && S ? {
-			id: S.id,
-			name: t,
-			label: n,
-			type: M,
-			style: P,
-			icon: I || void 0,
-			confirmation: H ? r : null,
-			disabled: R,
-			hidden: B
+		if (P === "WEBHOOK") {
+			let e = I.trim();
+			if (!e) {
+				$("Enter the URL to call when the button is clicked");
+				return;
+			}
+			if (!/^https?:\/\//i.test(e)) {
+				$("Webhook URL must start with http:// or https://");
+				return;
+			}
+		}
+		let r = W ? {
+			title: K.trim() || "Confirm Action",
+			message: J.trim() || "Are you sure?",
+			confirmLabel: Ce.trim() || "Confirm",
+			cancelLabel: we.trim() || "Cancel"
+		} : void 0, i = P === "WEBHOOK" ? {
+			url: I.trim(),
+			method: R
+		} : null;
+		be(x && v ? {
+			id: v.id,
+			name: n,
+			label: t,
+			type: "BUTTON",
+			style: A,
+			icon: M || void 0,
+			confirmation: W ? r : null,
+			disabled: B,
+			hidden: H
 		} : {
-			name: t,
-			label: n,
-			type: M,
-			style: P,
-			icon: I || void 0,
+			name: n,
+			label: t,
+			type: "BUTTON",
+			style: A,
+			icon: M || void 0,
 			confirmation: r,
-			disabled: R,
-			hidden: B
-		});
+			disabled: B,
+			hidden: H
+		}, i);
 	}, [
+		w,
+		E,
 		O,
-		A,
-		M,
 		P,
 		I,
 		R,
+		A,
+		M,
 		B,
 		H,
 		W,
 		K,
 		J,
-		X,
-		E,
-		S,
-		T
-	]);
-	return /* @__PURE__ */ v(ee, {
+		Ce,
+		we,
+		x,
+		v,
+		be
+	]), De = (e) => ge.find((t) => t.value === e)?.color || "var(--color-action-primary-bg)", Oe = me.find((e) => e.value === P);
+	return /* @__PURE__ */ f(oe, {
 		open: e,
-		onOpenChange: (e) => !e && !C && w(),
-		children: /* @__PURE__ */ y(te, {
+		onOpenChange: (e) => !e && !b && ye(),
+		children: /* @__PURE__ */ p(se, {
 			style: {
 				maxWidth: "500px",
 				padding: 0
 			},
-			children: [/* @__PURE__ */ v(re, {
+			children: [/* @__PURE__ */ f(ue, {
 				style: { padding: "var(--space-pagePadding) var(--space-pagePadding) 0" },
-				children: /* @__PURE__ */ y("div", {
+				children: /* @__PURE__ */ p("div", {
 					style: {
 						display: "flex",
 						alignItems: "center",
 						gap: "var(--space-formGap)"
 					},
-					children: [/* @__PURE__ */ v("div", {
+					children: [/* @__PURE__ */ f("div", {
 						style: {
 							display: "flex",
 							height: "var(--size-controlHeight-lg)",
@@ -189,38 +231,38 @@ var oe = [
 							backgroundColor: "var(--color-action-primary-bg)",
 							boxShadow: "var(--shadow-elevation-2)"
 						},
-						children: v(E ? a : s, { style: {
+						children: f(x ? ne : ie, { style: {
 							height: "var(--size-icon-lg)",
 							width: "var(--size-icon-lg)",
 							color: "var(--color-action-primary-text)"
 						} })
-					}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v(ie, {
+					}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f(de, {
 						style: {
 							fontSize: "var(--font-size-heading-h4)",
 							fontWeight: "var(--font-weight-bold)",
 							color: "var(--color-text-primary)",
 							margin: 0
 						},
-						children: E ? "Edit Action" : "Add Action"
-					}), /* @__PURE__ */ v(u, {
+						children: x ? "Edit Button" : "Add Button"
+					}), /* @__PURE__ */ f(ce, {
 						style: {
 							fontSize: "var(--font-size-body-sm)",
 							color: "var(--color-text-secondary)",
 							margin: "var(--space-controlGap) 0 0 0"
 						},
-						children: E ? "Update the action configuration" : "Configure a new widget action"
+						children: x ? "Update the button and what it does" : "Add a button and choose what it does"
 					})] })]
 				})
-			}), /* @__PURE__ */ y("form", {
-				onSubmit: se,
-				children: [/* @__PURE__ */ y("div", {
+			}), /* @__PURE__ */ p("form", {
+				onSubmit: Ee,
+				children: [/* @__PURE__ */ p("div", {
 					style: {
 						padding: "var(--space-pagePadding)",
 						maxHeight: "60vh",
 						overflowY: "auto"
 					},
 					children: [
-						Q && /* @__PURE__ */ v("div", {
+						(Q || ve) && /* @__PURE__ */ f("div", {
 							style: {
 								padding: "var(--space-controlGap)",
 								backgroundColor: "var(--color-status-error-bgSubtle)",
@@ -228,164 +270,95 @@ var oe = [
 								borderRadius: "var(--radius-button)",
 								marginBottom: "var(--space-formGap)"
 							},
-							children: /* @__PURE__ */ v("p", {
+							children: /* @__PURE__ */ f("p", {
 								style: {
 									fontSize: "var(--font-size-body-sm)",
 									color: "var(--color-status-error-text)",
 									margin: 0
 								},
-								children: Q
+								children: Q || ve
 							})
 						}),
-						/* @__PURE__ */ y("div", {
+						/* @__PURE__ */ p("div", {
 							style: { marginBottom: "var(--space-formGap)" },
 							children: [
-								/* @__PURE__ */ y("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: ["Name ", /* @__PURE__ */ v("span", {
+								/* @__PURE__ */ p("label", {
+									style: h,
+									children: ["Button label ", /* @__PURE__ */ f("span", {
 										style: { color: "var(--color-status-error-text)" },
 										children: "*"
 									})]
 								}),
-								/* @__PURE__ */ v(d, {
-									ref: D,
-									value: O,
-									onChange: (e) => {
-										k(e.target.value), Q && $(null);
-									},
-									placeholder: "e.g., refresh, export, delete",
-									disabled: C,
-									style: {
-										height: "var(--size-controlHeight-md)",
-										fontSize: "var(--font-size-body-sm)"
-									}
-								}),
-								/* @__PURE__ */ v("p", {
-									style: {
-										fontSize: "var(--font-size-body-sm)",
-										color: "var(--color-text-muted)",
-										marginTop: "var(--space-controlGap)"
-									},
-									children: "Unique identifier for this action (used in events)"
-								})
-							]
-						}),
-						/* @__PURE__ */ y("div", {
-							style: { marginBottom: "var(--space-formGap)" },
-							children: [
-								/* @__PURE__ */ y("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: ["Label ", /* @__PURE__ */ v("span", {
-										style: { color: "var(--color-status-error-text)" },
-										children: "*"
-									})]
-								}),
-								/* @__PURE__ */ v(d, {
-									value: A,
-									onChange: (e) => j(e.target.value),
+								/* @__PURE__ */ f(o, {
+									ref: S,
+									value: w,
+									onChange: (e) => Te(e.target.value),
 									placeholder: "e.g., Refresh Data, Export CSV",
-									disabled: C,
+									disabled: b,
 									style: {
 										height: "var(--size-controlHeight-md)",
 										fontSize: "var(--font-size-body-sm)"
 									}
 								}),
-								/* @__PURE__ */ v("p", {
-									style: {
-										fontSize: "var(--font-size-body-sm)",
-										color: "var(--color-text-muted)",
-										marginTop: "var(--space-controlGap)"
-									},
-									children: "Display text shown on the button"
+								/* @__PURE__ */ f("p", {
+									style: g,
+									children: "Text shown on the button"
 								})
 							]
 						}),
-						/* @__PURE__ */ y("div", {
+						/* @__PURE__ */ p("div", {
 							style: {
 								display: "grid",
 								gridTemplateColumns: "1fr 1fr",
 								gap: "var(--space-formGap)",
 								marginBottom: "var(--space-formGap)"
 							},
-							children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("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: "Type"
-							}), /* @__PURE__ */ y(f, {
-								value: M,
-								onValueChange: (e) => N(e),
-								disabled: C,
-								children: [/* @__PURE__ */ v(h, {
+							children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								style: h,
+								children: "Style"
+							}), /* @__PURE__ */ p(s, {
+								value: A,
+								onValueChange: (e) => j(e),
+								disabled: b,
+								children: [/* @__PURE__ */ f(u, {
 									style: {
 										height: "var(--size-controlHeight-md)",
 										fontSize: "var(--font-size-body-sm)"
 									},
-									children: /* @__PURE__ */ v(g, {})
-								}), /* @__PURE__ */ v(p, {
-									style: {
-										zIndex: 9999,
-										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: oe.map((e) => /* @__PURE__ */ v(m, {
+									children: /* @__PURE__ */ f(d, {})
+								}), /* @__PURE__ */ f(c, {
+									style: _,
+									children: ge.map((e) => /* @__PURE__ */ f(l, {
 										value: e.value,
 										children: e.label
 									}, e.value))
 								})]
-							})] }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("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: "Style"
-							}), /* @__PURE__ */ y(f, {
-								value: P,
-								onValueChange: (e) => F(e),
-								disabled: C,
-								children: [/* @__PURE__ */ v(h, {
+							})] }), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								style: h,
+								children: "Icon"
+							}), /* @__PURE__ */ p(s, {
+								value: M,
+								onValueChange: N,
+								disabled: b,
+								children: [/* @__PURE__ */ f(u, {
 									style: {
 										height: "var(--size-controlHeight-md)",
 										fontSize: "var(--font-size-body-sm)"
 									},
-									children: /* @__PURE__ */ v(g, {})
-								}), /* @__PURE__ */ v(p, {
+									children: /* @__PURE__ */ f(d, { placeholder: "No icon" })
+								}), /* @__PURE__ */ f(c, {
 									style: {
-										zIndex: 9999,
-										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)"
+										..._,
+										maxHeight: "200px"
 									},
-									children: b.map((e) => /* @__PURE__ */ v(m, {
-										value: e.value,
+									children: _e.map((e) => /* @__PURE__ */ f(l, {
+										value: e.value || "none",
 										children: e.label
-									}, e.value))
+									}, e.value || "none"))
 								})]
 							})] })]
 						}),
-						/* @__PURE__ */ y("div", {
+						/* @__PURE__ */ p("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
@@ -395,115 +368,140 @@ var oe = [
 								backgroundColor: "var(--color-bg-sunken)",
 								borderRadius: "var(--radius-button)"
 							},
-							children: [/* @__PURE__ */ v("span", {
+							children: [/* @__PURE__ */ f("span", {
 								style: {
 									fontSize: "var(--font-size-body-sm)",
 									color: "var(--color-text-muted)"
 								},
 								children: "Preview:"
-							}), /* @__PURE__ */ v("button", {
+							}), /* @__PURE__ */ f("button", {
 								type: "button",
 								style: {
 									padding: "var(--space-controlGap) var(--space-formGap)",
 									fontSize: "var(--font-size-body-sm)",
 									fontWeight: "var(--font-weight-medium)",
 									borderRadius: "var(--radius-button)",
-									backgroundColor: ((e) => b.find((t) => t.value === e)?.color || "var(--color-action-primary-bg)")(P),
+									backgroundColor: De(A),
 									color: "var(--color-action-primary-text)",
 									border: "none",
 									cursor: "default"
 								},
-								children: A || "Button"
+								children: w || "Button"
 							})]
 						}),
-						/* @__PURE__ */ y("div", {
+						/* @__PURE__ */ p("div", {
 							style: { marginBottom: "var(--space-formGap)" },
-							children: [/* @__PURE__ */ v("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: "Icon"
-							}), /* @__PURE__ */ y(f, {
-								value: I,
-								onValueChange: L,
-								disabled: C,
-								children: [/* @__PURE__ */ v(h, {
-									style: {
-										height: "var(--size-controlHeight-md)",
-										fontSize: "var(--font-size-body-sm)"
-									},
-									children: /* @__PURE__ */ v(g, { placeholder: "No icon" })
-								}), /* @__PURE__ */ v(p, {
-									style: {
-										zIndex: 9999,
-										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)",
-										maxHeight: "200px"
+							children: [
+								/* @__PURE__ */ f("label", {
+									style: h,
+									children: "When clicked"
+								}),
+								/* @__PURE__ */ p(s, {
+									value: P,
+									onValueChange: (e) => {
+										C.current = !0, F(e);
 									},
-									children: x.map((e) => /* @__PURE__ */ v(m, {
-										value: e.value || "none",
-										children: e.label
-									}, e.value || "none"))
-								})]
-							})]
+									disabled: b,
+									children: [/* @__PURE__ */ f(u, {
+										style: {
+											height: "var(--size-controlHeight-md)",
+											fontSize: "var(--font-size-body-sm)"
+										},
+										children: /* @__PURE__ */ f(d, {})
+									}), /* @__PURE__ */ f(c, {
+										style: _,
+										children: me.map((e) => /* @__PURE__ */ f(l, {
+											value: e.value,
+											children: e.label
+										}, e.value))
+									})]
+								}),
+								Oe && /* @__PURE__ */ f("p", {
+									style: g,
+									children: Oe.hint
+								})
+							]
 						}),
-						/* @__PURE__ */ y("div", {
+						P === "WEBHOOK" && /* @__PURE__ */ p("div", {
 							style: {
+								marginBottom: "var(--space-formGap)",
+								paddingLeft: "var(--space-formGap)",
+								borderLeft: "2px solid var(--color-border)",
 								display: "flex",
-								alignItems: "center",
-								gap: "var(--space-sectionGap)",
-								marginBottom: "var(--space-formGap)"
+								flexDirection: "column",
+								gap: "var(--space-controlGap)"
 							},
-							children: [/* @__PURE__ */ y("label", {
-								style: {
-									display: "flex",
-									alignItems: "center",
-									gap: "var(--space-controlGap)",
-									cursor: "pointer"
-								},
-								children: [/* @__PURE__ */ v(l, {
-									checked: R,
-									onCheckedChange: (e) => z(e === !0),
-									disabled: C
-								}), /* @__PURE__ */ v("span", {
-									style: {
-										fontSize: "var(--font-size-body-sm)",
-										color: "var(--color-text-primary)"
+							children: [
+								/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ p("label", {
+									style: h,
+									children: ["URL ", /* @__PURE__ */ f("span", {
+										style: { color: "var(--color-status-error-text)" },
+										children: "*"
+									})]
+								}), /* @__PURE__ */ f(o, {
+									value: I,
+									onChange: (e) => {
+										C.current = !0, L(e.target.value), Q && $(null);
 									},
-									children: "Disabled"
-								})]
-							}), /* @__PURE__ */ y("label", {
-								style: {
-									display: "flex",
-									alignItems: "center",
-									gap: "var(--space-controlGap)",
-									cursor: "pointer"
-								},
-								children: [/* @__PURE__ */ v(l, {
-									checked: B,
-									onCheckedChange: (e) => V(e === !0),
-									disabled: C
-								}), /* @__PURE__ */ v("span", {
+									placeholder: "https://your-service.com/hook",
+									disabled: b,
 									style: {
-										fontSize: "var(--font-size-body-sm)",
-										color: "var(--color-text-primary)"
+										height: "var(--size-controlHeight-md)",
+										fontSize: "var(--font-size-body-sm)"
+									}
+								})] }),
+								/* @__PURE__ */ p("div", {
+									style: { maxWidth: "160px" },
+									children: [/* @__PURE__ */ f("label", {
+										style: h,
+										children: "Method"
+									}), /* @__PURE__ */ p(s, {
+										value: R,
+										onValueChange: (e) => {
+											C.current = !0, z(e);
+										},
+										disabled: b,
+										children: [/* @__PURE__ */ f(u, {
+											style: {
+												height: "var(--size-controlHeight-md)",
+												fontSize: "var(--font-size-body-sm)"
+											},
+											children: /* @__PURE__ */ f(d, {})
+										}), /* @__PURE__ */ f(c, {
+											style: _,
+											children: he.map((e) => /* @__PURE__ */ f(l, {
+												value: e,
+												children: e
+											}, e))
+										})]
+									})]
+								}),
+								/* @__PURE__ */ f("p", {
+									style: g,
+									children: "The widget's current data is sent as the request payload."
+								}),
+								/^http:\/\//i.test(I.trim()) && /* @__PURE__ */ p("p", {
+									style: {
+										...g,
+										color: "var(--color-status-warning-text)"
 									},
-									children: "Hidden"
-								})]
-							})]
+									children: [
+										"Warning: ",
+										/* @__PURE__ */ f("code", { children: "http://" }),
+										" is unencrypted — the widget's data will be sent in plaintext. Use",
+										" ",
+										/* @__PURE__ */ f("code", { children: "https://" }),
+										" if it may contain anything sensitive."
+									]
+								})
+							]
 						}),
-						/* @__PURE__ */ y("div", {
+						/* @__PURE__ */ p("div", {
 							style: {
 								paddingTop: "var(--space-formGap)",
 								borderTop: "1px solid var(--color-border)"
 							},
-							children: [/* @__PURE__ */ y("label", {
+							children: [/* @__PURE__ */ p("label", {
 								style: {
 									display: "flex",
 									alignItems: "center",
@@ -511,19 +509,19 @@ var oe = [
 									cursor: "pointer",
 									marginBottom: "var(--space-formGap)"
 								},
-								children: [/* @__PURE__ */ v(l, {
-									checked: H,
-									onCheckedChange: (e) => U(e === !0),
-									disabled: C
-								}), /* @__PURE__ */ v("span", {
+								children: [/* @__PURE__ */ f(a, {
+									checked: W,
+									onCheckedChange: (e) => G(e === !0),
+									disabled: b
+								}), /* @__PURE__ */ f("span", {
 									style: {
 										fontSize: "var(--font-size-body-sm)",
 										fontWeight: "var(--font-weight-semibold)",
 										color: "var(--color-text-primary)"
 									},
-									children: "Require confirmation"
+									children: "Ask for confirmation first"
 								})]
-							}), H && /* @__PURE__ */ y("div", {
+							}), W && /* @__PURE__ */ p("div", {
 								style: {
 									paddingLeft: "var(--space-formGap)",
 									borderLeft: "2px solid var(--color-border)",
@@ -532,7 +530,7 @@ var oe = [
 									gap: "var(--space-controlGap)"
 								},
 								children: [
-									/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+									/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
 										style: {
 											display: "block",
 											fontSize: "var(--font-size-body-sm)",
@@ -541,16 +539,16 @@ var oe = [
 											marginBottom: "var(--space-controlGap)"
 										},
 										children: "Dialog Title"
-									}), /* @__PURE__ */ v(d, {
-										value: W,
-										onChange: (e) => G(e.target.value),
-										disabled: C,
+									}), /* @__PURE__ */ f(o, {
+										value: K,
+										onChange: (e) => q(e.target.value),
+										disabled: b,
 										style: {
 											height: "var(--size-controlHeight-sm)",
 											fontSize: "var(--font-size-body-sm)"
 										}
 									})] }),
-									/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+									/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
 										style: {
 											display: "block",
 											fontSize: "var(--font-size-body-sm)",
@@ -559,23 +557,23 @@ var oe = [
 											marginBottom: "var(--space-controlGap)"
 										},
 										children: "Message"
-									}), /* @__PURE__ */ v(_, {
-										value: K,
-										onChange: (e) => q(e.target.value),
+									}), /* @__PURE__ */ f(pe, {
+										value: J,
+										onChange: (e) => Y(e.target.value),
 										rows: 2,
-										disabled: C,
+										disabled: b,
 										style: {
 											fontSize: "var(--font-size-body-sm)",
 											resize: "none"
 										}
 									})] }),
-									/* @__PURE__ */ y("div", {
+									/* @__PURE__ */ p("div", {
 										style: {
 											display: "grid",
 											gridTemplateColumns: "1fr 1fr",
 											gap: "var(--space-controlGap)"
 										},
-										children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+										children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
 											style: {
 												display: "block",
 												fontSize: "var(--font-size-body-sm)",
@@ -584,15 +582,15 @@ var oe = [
 												marginBottom: "var(--space-controlGap)"
 											},
 											children: "Confirm Button"
-										}), /* @__PURE__ */ v(d, {
-											value: J,
-											onChange: (e) => Y(e.target.value),
-											disabled: C,
+										}), /* @__PURE__ */ f(o, {
+											value: Ce,
+											onChange: (e) => X(e.target.value),
+											disabled: b,
 											style: {
 												height: "var(--size-controlHeight-sm)",
 												fontSize: "var(--font-size-body-sm)"
 											}
-										})] }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+										})] }), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
 											style: {
 												display: "block",
 												fontSize: "var(--font-size-body-sm)",
@@ -601,10 +599,10 @@ var oe = [
 												marginBottom: "var(--space-controlGap)"
 											},
 											children: "Cancel Button"
-										}), /* @__PURE__ */ v(d, {
-											value: X,
+										}), /* @__PURE__ */ f(o, {
+											value: we,
 											onChange: (e) => Z(e.target.value),
-											disabled: C,
+											disabled: b,
 											style: {
 												height: "var(--size-controlHeight-sm)",
 												fontSize: "var(--font-size-body-sm)"
@@ -613,9 +611,118 @@ var oe = [
 									})
 								]
 							})]
+						}),
+						/* @__PURE__ */ p("div", {
+							style: {
+								paddingTop: "var(--space-formGap)",
+								borderTop: "1px solid var(--color-border)"
+							},
+							children: [/* @__PURE__ */ p("button", {
+								type: "button",
+								onClick: () => Se((e) => !e),
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: "var(--space-controlGap)",
+									background: "none",
+									border: "none",
+									padding: 0,
+									cursor: "pointer",
+									fontSize: "var(--font-size-body-sm)",
+									fontWeight: "var(--font-weight-semibold)",
+									color: "var(--color-text-primary)"
+								},
+								children: [f(xe ? ee : te, { style: {
+									height: "14px",
+									width: "14px"
+								} }), "Advanced"]
+							}), xe && /* @__PURE__ */ p("div", {
+								style: {
+									marginTop: "var(--space-formGap)",
+									display: "flex",
+									flexDirection: "column",
+									gap: "var(--space-formGap)"
+								},
+								children: [/* @__PURE__ */ p("div", { children: [
+									/* @__PURE__ */ f("label", {
+										style: h,
+										children: "Event name (id)"
+									}),
+									/* @__PURE__ */ f(o, {
+										value: x && v ? v.name : E,
+										onChange: (e) => {
+											D(e.target.value), k(!0);
+										},
+										placeholder: "auto from label",
+										disabled: b || x,
+										style: {
+											height: "var(--size-controlHeight-md)",
+											fontSize: "var(--font-size-body-sm)",
+											fontFamily: "var(--font-family-mono)"
+										}
+									}),
+									/* @__PURE__ */ p("p", {
+										style: g,
+										children: [
+											"Emits",
+											" ",
+											/* @__PURE__ */ p("code", { children: [
+												"widget:",
+												x && v ? v.name : m(E || w) || "<name>",
+												":clicked"
+											] }),
+											". ",
+											x ? "Fixed once created." : "Auto-derived from the label."
+										]
+									})
+								] }), /* @__PURE__ */ p("div", {
+									style: {
+										display: "flex",
+										alignItems: "center",
+										gap: "var(--space-sectionGap)"
+									},
+									children: [/* @__PURE__ */ p("label", {
+										style: {
+											display: "flex",
+											alignItems: "center",
+											gap: "var(--space-controlGap)",
+											cursor: "pointer"
+										},
+										children: [/* @__PURE__ */ f(a, {
+											checked: B,
+											onCheckedChange: (e) => V(e === !0),
+											disabled: b
+										}), /* @__PURE__ */ f("span", {
+											style: {
+												fontSize: "var(--font-size-body-sm)",
+												color: "var(--color-text-primary)"
+											},
+											children: "Disabled"
+										})]
+									}), /* @__PURE__ */ p("label", {
+										style: {
+											display: "flex",
+											alignItems: "center",
+											gap: "var(--space-controlGap)",
+											cursor: "pointer"
+										},
+										children: [/* @__PURE__ */ f(a, {
+											checked: H,
+											onCheckedChange: (e) => U(e === !0),
+											disabled: b
+										}), /* @__PURE__ */ f("span", {
+											style: {
+												fontSize: "var(--font-size-body-sm)",
+												color: "var(--color-text-primary)"
+											},
+											children: "Hidden"
+										})]
+									})]
+								})]
+							})]
 						})
 					]
-				}), /* @__PURE__ */ y(ne, {
+				}), /* @__PURE__ */ p(le, {
 					style: {
 						padding: "var(--space-formGap) var(--space-pagePadding)",
 						borderTop: "1px solid var(--color-border)",
@@ -624,40 +731,40 @@ var oe = [
 						justifyContent: "flex-end",
 						gap: "var(--space-controlGap)"
 					},
-					children: [/* @__PURE__ */ v(c, {
+					children: [/* @__PURE__ */ f(ae, {
 						type: "button",
 						variant: "outline",
-						onClick: w,
-						disabled: C,
+						onClick: ye,
+						disabled: b,
 						style: { height: "var(--size-controlHeight-md)" },
 						children: "Cancel"
-					}), /* @__PURE__ */ v(c, {
+					}), /* @__PURE__ */ f(ae, {
 						type: "submit",
-						disabled: C || !O.trim() || !A.trim(),
+						disabled: b || !w.trim(),
 						style: {
 							height: "var(--size-controlHeight-md)",
 							backgroundColor: "var(--color-action-primary-bg)"
 						},
-						children: C ? /* @__PURE__ */ y("span", {
+						children: b ? /* @__PURE__ */ p("span", {
 							style: {
 								display: "flex",
 								alignItems: "center",
 								gap: "var(--space-iconGap)"
 							},
-							children: [/* @__PURE__ */ v(ae, { style: {
+							children: [/* @__PURE__ */ f(fe, { style: {
 								height: "var(--size-icon-sm)",
 								width: "var(--size-icon-sm)"
 							} }), "Saving..."]
-						}) : /* @__PURE__ */ y("span", {
+						}) : /* @__PURE__ */ p("span", {
 							style: {
 								display: "flex",
 								alignItems: "center",
 								gap: "var(--space-iconGap)"
 							},
-							children: [v(E ? a : o, { style: {
+							children: [f(x ? ne : re, { style: {
 								height: "var(--size-icon-sm)",
 								width: "var(--size-icon-sm)"
-							} }), E ? "Update Action" : "Add Action"]
+							} }), x ? "Update Button" : "Add Button"]
 						})
 					})]
 				})]
@@ -666,6 +773,6 @@ var oe = [
 	});
 });
 //#endregion
-export { S as default };
+export { v as default };
 
 //# sourceMappingURL=ActionConfigDialog.js.map