@burdenoff/microfe-bigconsole 2026.929.1 → 2026.930.1

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

@@ -1,20 +1,21 @@
 import { Section as e } from "../common/Section.js";
 import "../common/index.js";
 import { BIGCONSOLE_PERMISSIONS as t } from "../../../constants/permissions.js";
-import { memo as n, useCallback as r, useEffect as ee, useMemo as i, useRef as te, useState as a } from "react";
-import { PermissionButton as ne } from "@burdenoff/fe-libs/shared/components";
-import { ChevronDown as re, ChevronRight as ie, Pencil as ae, Plus as oe, Zap as se } from "lucide-react";
-import { Button as ce, Checkbox as o, Dialog as le, DialogContent as ue, DialogDescription as de, DialogFooter as fe, DialogHeader as pe, DialogTitle as me, Input as s, Select as c, SelectContent as l, SelectItem as u, SelectTrigger as d, SelectValue as f, Spinner as he, Textarea as ge } from "@burdenoff/fe-libs/ui";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { useI18n as _e } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { serializeActionConfig as ee, slugifyActionName as n, validateActionConfig as te } from "./actionConfig.js";
+import { memo as r, useCallback as i, useEffect as ne, useId as re, useMemo as ie, useRef as a, useState as o } from "react";
+import { PermissionButton as ae } from "@burdenoff/fe-libs/shared/components";
+import { ChevronDown as oe, ChevronRight as se } from "lucide-react";
+import { Button as ce, Checkbox as s, Input as c, ResponsiveDialog as le, ResponsiveDialogContent as ue, ResponsiveDialogDescription as de, ResponsiveDialogFooter as fe, ResponsiveDialogHeader as pe, ResponsiveDialogTitle as me, Select as l, SelectContent as u, SelectItem as he, SelectTrigger as ge, SelectValue as _e, Spinner as ve, Textarea as ye } from "@burdenoff/fe-libs/ui";
+import { Fragment as be, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useI18n as xe } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/bigconsole/components/widgets/ActionConfigDialog.tsx
-var ve = [
+var Se = [
 	"POST",
 	"GET",
 	"PUT",
 	"PATCH",
 	"DELETE"
-], ye = [
+], Ce = [
 	{
 		value: "PRIMARY",
 		color: "var(--color-action-primary-bg)"
@@ -34,8 +35,16 @@ var ve = [
 	{
 		value: "DANGER",
 		color: "var(--color-action-danger-bg)"
+	},
+	{
+		value: "GHOST",
+		color: "transparent"
+	},
+	{
+		value: "LINK",
+		color: "transparent"
 	}
-], be = [
+], we = [
 	"",
 	"refresh",
 	"download",
@@ -50,145 +59,112 @@ var ve = [
 	"settings",
 	"filter",
 	"search"
-];
-function h(e) {
-	return e.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
-}
-var g = {
+], p = {
 	display: "block",
 	fontSize: "var(--font-size-body-sm)",
 	fontWeight: "var(--font-weight-medium)",
 	color: "var(--color-text-primary)",
 	marginBottom: "var(--space-controlGap)"
-}, xe = {
+}, Te = {
 	margin: "0 0 var(--space-controlGap) 0",
 	fontSize: "var(--font-size-body-sm)",
 	fontWeight: "var(--font-weight-bold)",
 	letterSpacing: "0.06em",
 	textTransform: "uppercase",
 	color: "var(--color-text-secondary)"
-}, _ = {
+}, m = {
 	fontSize: "var(--font-size-body-sm)",
 	color: "var(--color-text-muted)",
 	marginTop: "var(--space-controlGap)"
-}, v = {
+}, h = {
 	zIndex: 9999,
 	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)"
-}, y = n(function({ isOpen: n, action: y, initialWebhook: b, isLoading: x = !1, saveError: Se, onClose: Ce, onSave: we }) {
-	let { t: S } = _e(), C = !!y, Te = te(null), w = te(!1), [T, E] = a(""), [D, O] = a(""), [k, A] = a(!1), [j, M] = a("PRIMARY"), [N, Ee] = a(""), [P, F] = a("WEBHOOK"), [I, L] = a(""), [R, z] = a("POST"), [B, V] = a(!1), [H, U] = a(!1), [W, De] = a(!1), [G, K] = a(!1), [q, J] = a(() => S("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action")), [Oe, Y] = a(() => S("bigconsole.widget.actions.confirm.defaultMessage", "Are you sure you want to proceed?")), [ke, X] = a(() => S("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), [Ae, Z] = a(() => S("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel")), [Q, $] = a(null), je = i(() => [{
-		value: "WEBHOOK",
-		label: S("bigconsole.widget.actions.outcome.webhook.label", "Call a webhook / my API"),
-		hint: S("bigconsole.widget.actions.outcome.webhook.hint", "Sends an HTTP request to the URL below every time the button is clicked.")
-	}, {
-		value: "EMIT",
-		label: S("bigconsole.widget.actions.outcome.emit.label", "Just emit an event (advanced)"),
-		hint: S("bigconsole.widget.actions.outcome.emit.hint", "Emits widget:<name>:clicked. Wire it up yourself in the Webhooks/Events section.")
-	}], [S]), Me = i(() => {
+}, g = r(function({ isOpen: r, action: g, initialWebhook: _, isLoading: v = !1, saveError: Ee, onClose: De, onSave: Oe }) {
+	let { t: y } = xe(), b = !!g, x = a(null), ke = a(null), Ae = a(null), S = re(), C = a(""), w = a(!1), [T, E] = o(""), [D, O] = o(""), [k, A] = o(!1), [j, M] = o("PRIMARY"), [N, je] = o(""), [P, F] = o("WEBHOOK"), [I, L] = o(""), [R, z] = o("POST"), [B, V] = o(!1), [H, U] = o(!1), [W, G] = o(!1), [K, Me] = o(!1), [Ne, q] = o(() => y("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action")), [Pe, J] = o(() => y("bigconsole.widget.actions.confirm.defaultMessage", "Are you sure you want to proceed?")), [Y, X] = o(() => y("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), [Fe, Z] = o(() => y("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel")), [Q, $] = o(null), Ie = ie(() => {
 		let e = {
-			PRIMARY: S("bigconsole.widget.actions.style.primary", "Primary"),
-			SECONDARY: S("bigconsole.widget.actions.style.secondary", "Secondary"),
-			SUCCESS: S("bigconsole.widget.actions.style.success", "Success"),
-			WARNING: S("bigconsole.widget.actions.style.warning", "Warning"),
-			DANGER: S("bigconsole.widget.actions.style.danger", "Danger"),
-			GHOST: S("bigconsole.widget.actions.style.ghost", "Ghost"),
-			LINK: S("bigconsole.widget.actions.style.link", "Link")
+			PRIMARY: y("bigconsole.widget.actions.style.primary", "Primary"),
+			SECONDARY: y("bigconsole.widget.actions.style.secondary", "Secondary"),
+			SUCCESS: y("bigconsole.widget.actions.style.success", "Success"),
+			WARNING: y("bigconsole.widget.actions.style.warning", "Warning"),
+			DANGER: y("bigconsole.widget.actions.style.danger", "Danger"),
+			GHOST: y("bigconsole.widget.actions.style.ghost", "Ghost"),
+			LINK: y("bigconsole.widget.actions.style.link", "Link")
 		};
-		return ye.map((t) => ({
+		return Ce.map((t) => ({
 			value: t.value,
 			label: e[t.value],
 			color: t.color
 		}));
-	}, [S]), Ne = i(() => {
+	}, [y]), Le = ie(() => {
 		let e = {
-			"": S("bigconsole.widget.actions.icon.none", "No icon"),
-			refresh: S("bigconsole.widget.actions.icon.refresh", "Refresh"),
-			download: S("bigconsole.widget.actions.icon.download", "Download"),
-			upload: S("bigconsole.widget.actions.icon.upload", "Upload"),
-			trash: S("bigconsole.widget.actions.icon.trash", "Trash"),
-			edit: S("bigconsole.widget.actions.icon.edit", "Edit"),
-			plus: S("bigconsole.widget.actions.icon.plus", "Plus"),
-			check: S("bigconsole.widget.actions.icon.check", "Check"),
-			eye: S("bigconsole.widget.actions.icon.eye", "View"),
-			copy: S("bigconsole.widget.actions.icon.copy", "Copy"),
-			share: S("bigconsole.widget.actions.icon.share", "Share"),
-			settings: S("bigconsole.widget.actions.icon.settings", "Settings"),
-			filter: S("bigconsole.widget.actions.icon.filter", "Filter"),
-			search: S("bigconsole.widget.actions.icon.search", "Search")
+			"": y("bigconsole.widget.actions.icon.none", "No icon"),
+			refresh: y("bigconsole.widget.actions.icon.refresh", "Refresh"),
+			download: y("bigconsole.widget.actions.icon.download", "Download"),
+			upload: y("bigconsole.widget.actions.icon.upload", "Upload"),
+			trash: y("bigconsole.widget.actions.icon.trash", "Trash"),
+			edit: y("bigconsole.widget.actions.icon.edit", "Edit"),
+			plus: y("bigconsole.widget.actions.icon.plus", "Plus"),
+			check: y("bigconsole.widget.actions.icon.check", "Check"),
+			eye: y("bigconsole.widget.actions.icon.eye", "View"),
+			copy: y("bigconsole.widget.actions.icon.copy", "Copy"),
+			share: y("bigconsole.widget.actions.icon.share", "Share"),
+			settings: y("bigconsole.widget.actions.icon.settings", "Settings"),
+			filter: y("bigconsole.widget.actions.icon.filter", "Filter"),
+			search: y("bigconsole.widget.actions.icon.search", "Search")
 		};
-		return be.map((t) => ({
+		return we.map((t) => ({
 			value: t,
 			label: e[t]
 		}));
-	}, [S]);
-	ee(() => {
-		if (!n) return;
-		w.current = !1, L(""), z("POST"), y ? (E(y.label), O(y.name), A(!1), M(y.style), Ee(y.icon || ""), V(y.disabled), U(y.hidden), F("EMIT"), K(!!y.confirmation), y.confirmation ? (J(y.confirmation.title), Y(y.confirmation.message), X(y.confirmation.confirmLabel || S("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), Z(y.confirmation.cancelLabel || S("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel"))) : (J(S("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action")), Y(S("bigconsole.widget.actions.confirm.defaultMessage", "Are you sure you want to proceed?")), X(S("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), Z(S("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel")))) : (E(""), O(""), A(!1), M("PRIMARY"), Ee(""), F("WEBHOOK"), V(!1), U(!1), K(!1), J(S("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action")), Y(S("bigconsole.widget.actions.confirm.defaultMessage", "Are you sure you want to proceed?")), X(S("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), Z(S("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel"))), De(!1), $(null);
-		let e = requestAnimationFrame(() => requestAnimationFrame(() => Te.current?.focus()));
+	}, [y]);
+	ne(() => {
+		if (!r) return;
+		w.current = !1, C.current = `button_${crypto.randomUUID().replace(/-/g, "").slice(0, 12)}`, L(""), z("POST"), g ? (E(g.label), O(g.name), A(!1), M(g.style), je(g.icon || ""), V(g.disabled), U(g.hidden), F("EMIT"), Me(!!g.confirmation), g.confirmation ? (q(g.confirmation.title), J(g.confirmation.message), X(g.confirmation.confirmLabel || y("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), Z(g.confirmation.cancelLabel || y("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel"))) : (q(y("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action")), J(y("bigconsole.widget.actions.confirm.defaultMessage", "Are you sure you want to proceed?")), X(y("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), Z(y("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel")))) : (E(""), O(""), A(!1), M("PRIMARY"), je(""), F("WEBHOOK"), V(!1), U(!1), Me(!1), q(y("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action")), J(y("bigconsole.widget.actions.confirm.defaultMessage", "Are you sure you want to proceed?")), X(y("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm")), Z(y("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel"))), G(!1), $(null);
+		let e = requestAnimationFrame(() => requestAnimationFrame(() => x.current?.focus()));
 		return () => cancelAnimationFrame(e);
 	}, [
-		n,
-		y,
-		S
-	]), ee(() => {
-		!n || !b || w.current || (F("WEBHOOK"), L(b.url), z(b.method));
-	}, [n, b]);
-	let Pe = r((e) => {
-		E(e), k || O(h(e)), Q && $(null);
-	}, [k, Q]), Fe = r((e) => {
+		r,
+		g,
+		y
+	]), ne(() => {
+		!r || !_ || w.current || (F("WEBHOOK"), L(_.url), z(_.method));
+	}, [r, _]);
+	let Re = i((e) => {
+		E(e), !k && !b && O(n(e) || C.current), Q && $(null);
+	}, [
+		k,
+		Q,
+		b
+	]), ze = i((e) => {
 		e.preventDefault();
-		let t = T.trim();
-		if (!t) {
-			$(S("bigconsole.widget.actions.validation.labelRequired", "Button label is required")), Te.current?.focus();
-			return;
-		}
-		let n = C && y ? y.name : h(k ? D : T) || h(T);
-		if (!n) {
-			$(S("bigconsole.widget.actions.validation.labelLettersOrNumbers", "Enter a label using letters or numbers"));
-			return;
-		}
-		if (P === "WEBHOOK") {
-			let e = I.trim();
-			if (!e) {
-				$(S("bigconsole.widget.actions.validation.urlRequired", "Enter the URL to call when the button is clicked"));
-				return;
-			}
-			if (!/^https?:\/\//i.test(e)) {
-				$(S("bigconsole.widget.actions.validation.urlScheme", "Webhook URL must start with http:// or https://"));
-				return;
-			}
-		}
-		let r = G ? {
-			title: q.trim() || S("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action"),
-			message: Oe.trim() || S("bigconsole.widget.actions.confirm.fallbackMessage", "Are you sure?"),
-			confirmLabel: ke.trim() || S("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm"),
-			cancelLabel: Ae.trim() || S("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel")
-		} : void 0, ee = P === "WEBHOOK" ? {
-			url: I.trim(),
-			method: R
-		} : null;
-		we(C && y ? {
-			id: y.id,
-			name: n,
-			label: t,
-			type: "BUTTON",
+		let t = {
+			label: T,
+			name: b && g ? g.name : n(k ? D : T) || n(T) || C.current,
+			outcome: P,
+			url: I,
+			method: R,
 			style: j,
-			icon: N || void 0,
-			confirmation: G ? r : null,
+			icon: N,
+			confirmation: (K ? {
+				title: Ne.trim() || y("bigconsole.widget.actions.confirm.defaultTitle", "Confirm Action"),
+				message: Pe.trim() || y("bigconsole.widget.actions.confirm.fallbackMessage", "Are you sure?"),
+				confirmLabel: Y.trim() || y("bigconsole.widget.actions.confirm.defaultConfirmLabel", "Confirm"),
+				cancelLabel: Fe.trim() || y("bigconsole.widget.actions.confirm.defaultCancelLabel", "Cancel")
+			} : void 0) ?? null,
 			disabled: B,
 			hidden: H
-		} : {
-			name: n,
-			label: t,
-			type: "BUTTON",
-			style: j,
-			icon: N || void 0,
-			confirmation: r,
-			disabled: B,
-			hidden: H
-		}, ee);
+		}, r = te(t);
+		if ($(r), r) {
+			r.field === "name" && G(!0);
+			let e = r.field === "url" ? ke : r.field === "label" ? x : Ae;
+			requestAnimationFrame(() => e.current?.focus());
+			return;
+		}
+		let i = ee(t, g);
+		Oe(i.data, i.webhook);
 	}, [
 		T,
 		D,
@@ -200,618 +176,378 @@ var g = {
 		N,
 		B,
 		H,
-		G,
-		q,
+		K,
+		Ne,
+		Pe,
+		Y,
+		Fe,
+		b,
+		g,
 		Oe,
-		ke,
-		Ae,
-		C,
-		y,
-		we,
-		S
-	]), Ie = (e) => Me.find((t) => t.value === e)?.color || "var(--color-action-primary-bg)", Le = je.find((e) => e.value === P);
-	return /* @__PURE__ */ p(le, {
-		open: n,
-		onOpenChange: (e) => !e && !x && Ce(),
-		children: /* @__PURE__ */ m(ue, {
+		y
+	]), Be = (e) => Ie.find((t) => t.value === e)?.color || "var(--color-action-primary-bg)", Ve = Q?.field === "url" ? Q.reason === "required" ? y("bigconsole.widget.actions.validation.urlRequired", "Enter the URL to call when the button is clicked") : y("bigconsole.widget.actions.validation.urlScheme", "Enter a complete URL starting with http:// or https://") : Q?.field === "label" ? y("bigconsole.widget.actions.validation.labelRequired", "Button label is required") : Q ? y("bigconsole.widget.actions.validation.labelLettersOrNumbers", "Enter an event name using letters or numbers") : null, He = (e) => Q?.field === e ? /* @__PURE__ */ d("p", {
+		id: `${S}-${e}-error`,
+		role: "alert",
+		className: "mt-1 text-sm text-[var(--color-status-error-text)]",
+		children: Ve
+	}) : null;
+	return /* @__PURE__ */ d(le, {
+		open: r,
+		onOpenChange: (e) => !e && !v && De(),
+		children: /* @__PURE__ */ f(ue, {
+			"data-testid": "action-config-dialog",
+			showHandle: !1,
 			style: {
 				width: "min(500px, calc(100vw - 2rem))",
 				maxWidth: "calc(100vw - 2rem)",
-				padding: 0
+				maxHeight: "calc(100dvh - 2rem)",
+				padding: 0,
+				gap: 0,
+				zIndex: 140,
+				display: "flex",
+				flexDirection: "column"
+			},
+			onEscapeKeyDown: (e) => {
+				v && e.preventDefault();
 			},
-			children: [/* @__PURE__ */ p(pe, {
-				style: { padding: "var(--space-cardPadding) var(--space-cardPadding) 0" },
-				children: /* @__PURE__ */ m("div", {
-					style: {
-						display: "flex",
-						flexWrap: "wrap",
-						alignItems: "center",
-						gap: "var(--space-controlGap)",
-						minWidth: 0
-					},
-					children: [/* @__PURE__ */ p("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)"
-						},
-						children: p(C ? ae : se, { style: {
-							height: "var(--size-icon-lg)",
-							width: "var(--size-icon-lg)",
-							color: "var(--color-action-primary-text)"
-						} })
-					}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p(me, {
-						style: {
-							fontSize: "var(--font-size-body-md)",
-							fontWeight: "var(--font-weight-bold)",
-							color: "var(--color-text-primary)",
-							margin: 0
-						},
-						children: C ? S("bigconsole.widget.actions.header.editTitle", "Edit Button") : S("bigconsole.widget.actions.header.addTitle", "Add Button")
-					}), /* @__PURE__ */ p(de, {
-						style: {
-							fontSize: "var(--font-size-body-sm)",
-							color: "var(--color-text-secondary)",
-							margin: "var(--space-controlGap) 0 0 0"
-						},
-						children: C ? S("bigconsole.widget.actions.header.editDescription", "Update the button and what it does") : S("bigconsole.widget.actions.header.addDescription", "Add a button and choose what it does")
-					})] })]
-				})
-			}), /* @__PURE__ */ m("form", {
-				onSubmit: Fe,
-				children: [/* @__PURE__ */ m("div", {
-					style: {
-						padding: "var(--space-cardPadding)",
-						maxHeight: "65vh",
-						minWidth: 0,
-						overflowY: "auto"
-					},
+			children: [/* @__PURE__ */ f(pe, {
+				className: "p-4 pr-12 text-left",
+				children: [/* @__PURE__ */ d(me, { children: b ? y("bigconsole.widget.actions.header.editTitle", "Edit Button") : y("bigconsole.widget.actions.header.addTitle", "Add Button") }), /* @__PURE__ */ d(de, { children: b ? y("bigconsole.widget.actions.header.editDescription", "Update the button and what it does") : y("bigconsole.widget.actions.header.addDescription", "Add a button that sends this widget’s data to an API.") })]
+			}), /* @__PURE__ */ f("form", {
+				onSubmit: ze,
+				noValidate: !0,
+				className: "flex min-h-0 flex-col",
+				style: { maxHeight: "calc(100dvh - 8rem)" },
+				children: [/* @__PURE__ */ f("div", {
+					className: "min-h-0 overflow-y-auto px-4 pb-4",
 					children: [
-						(Q || Se) && /* @__PURE__ */ p(e, {
+						Ee && /* @__PURE__ */ d(e, {
 							tone: "danger",
 							padding: "compact",
 							headingLevel: 3,
-							title: "This button could not be saved",
-							className: "mb-form-gap",
-							"data-testid": "action-config-error",
-							children: /* @__PURE__ */ p("p", {
+							title: y("bigconsole.widget.actions.validation.saveFailed", "This button could not be saved"),
+							className: "mb-4",
+							children: /* @__PURE__ */ d("p", {
 								role: "alert",
-								className: "break-words text-sm text-[var(--color-status-error-text)]",
-								children: Q || Se
+								className: "break-words text-sm",
+								children: Ee
 							})
 						}),
-						/* @__PURE__ */ p("h3", {
-							style: xe,
-							children: "Appearance"
-						}),
-						/* @__PURE__ */ m("div", {
-							style: { marginBottom: "var(--space-formGap)" },
+						/* @__PURE__ */ f("div", {
+							className: "mb-4",
 							children: [
-								/* @__PURE__ */ m("label", {
-									style: g,
-									children: [
-										S("bigconsole.widget.actions.field.buttonLabel", "Button label"),
-										" ",
-										/* @__PURE__ */ p("span", {
-											style: { color: "var(--color-status-error-text)" },
-											children: "*"
-										})
-									]
+								/* @__PURE__ */ f("label", {
+									htmlFor: `${S}-label`,
+									style: p,
+									children: [y("bigconsole.widget.actions.field.buttonLabel", "Button label"), " *"]
 								}),
-								/* @__PURE__ */ p(s, {
-									ref: Te,
+								/* @__PURE__ */ d(c, {
+									id: `${S}-label`,
+									ref: x,
 									value: T,
-									onChange: (e) => Pe(e.target.value),
-									placeholder: S("bigconsole.widget.actions.field.buttonLabelPlaceholder", "e.g., Refresh Data, Export CSV"),
-									disabled: x,
-									style: {
-										height: "var(--size-controlHeight-md)",
-										fontSize: "var(--font-size-body-sm)"
-									}
+									onChange: (e) => Re(e.target.value),
+									placeholder: y("bigconsole.widget.actions.field.buttonLabelPlaceholder", "e.g., Refresh Data, Export CSV"),
+									disabled: v,
+									"aria-required": !0,
+									"aria-invalid": Q?.field === "label",
+									"aria-describedby": Q?.field === "label" ? `${S}-label-error` : void 0
 								}),
-								/* @__PURE__ */ p("p", {
-									style: _,
-									children: S("bigconsole.widget.actions.field.buttonLabelHint", "Text shown on the button")
-								})
+								He("label")
 							]
 						}),
-						/* @__PURE__ */ m("div", {
-							style: {
-								display: "grid",
-								gridTemplateColumns: "repeat(auto-fit, minmax(11rem, 1fr))",
-								gap: "var(--space-formGap)",
-								marginBottom: "var(--space-formGap)"
-							},
-							children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
-								style: g,
-								children: S("bigconsole.widget.actions.field.style", "Style")
-							}), /* @__PURE__ */ m(c, {
-								value: j,
-								onValueChange: (e) => M(e),
-								disabled: x,
-								children: [/* @__PURE__ */ p(d, {
-									style: {
-										height: "var(--size-controlHeight-md)",
-										fontSize: "var(--font-size-body-sm)"
-									},
-									children: /* @__PURE__ */ p(f, {})
-								}), /* @__PURE__ */ p(l, {
-									style: v,
-									children: Me.map((e) => /* @__PURE__ */ p(u, {
-										value: e.value,
-										children: e.label
-									}, e.value))
-								})]
-							})] }), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
-								style: g,
-								children: S("bigconsole.widget.actions.field.icon", "Icon")
-							}), /* @__PURE__ */ m(c, {
-								value: N,
-								onValueChange: Ee,
-								disabled: x,
-								children: [/* @__PURE__ */ p(d, {
-									style: {
-										height: "var(--size-controlHeight-md)",
-										fontSize: "var(--font-size-body-sm)"
-									},
-									children: /* @__PURE__ */ p(f, { placeholder: S("bigconsole.widget.actions.icon.none", "No icon") })
-								}), /* @__PURE__ */ p(l, {
-									style: {
-										...v,
-										maxHeight: "200px"
-									},
-									children: Ne.map((e) => /* @__PURE__ */ p(u, {
-										value: e.value || "none",
-										children: e.label
-									}, e.value || "none"))
-								})]
-							})] })]
-						}),
-						/* @__PURE__ */ m("div", {
-							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "var(--space-controlGap)",
-								marginBottom: "var(--space-formGap)",
-								padding: "var(--space-controlGap)",
-								backgroundColor: "var(--color-bg-sunken)",
-								borderRadius: "var(--radius-button)"
-							},
-							children: [/* @__PURE__ */ p("span", {
-								style: {
-									fontSize: "var(--font-size-body-sm)",
-									color: "var(--color-text-muted)"
-								},
-								children: S("bigconsole.widget.actions.preview.label", "Preview:")
-							}), /* @__PURE__ */ p("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: Ie(j),
-									color: "var(--color-action-primary-text)",
-									border: "none",
-									cursor: "default"
-								},
-								children: T || S("bigconsole.widget.actions.preview.buttonFallback", "Button")
+						/* @__PURE__ */ f("div", {
+							className: "mb-4",
+							children: [/* @__PURE__ */ d("p", {
+								style: p,
+								children: y("bigconsole.widget.actions.field.whenClicked", "When clicked")
+							}), /* @__PURE__ */ d("p", {
+								className: "text-sm text-text-secondary",
+								"data-testid": "action-outcome-summary",
+								children: P === "WEBHOOK" ? y("bigconsole.widget.actions.outcome.webhook.label", "Send data to an API") : y("bigconsole.widget.actions.outcome.emit.label", "Emit a custom event")
 							})]
 						}),
-						/* @__PURE__ */ p("h3", {
-							style: {
-								...xe,
-								marginTop: "var(--space-formGap)"
-							},
-							children: "Behaviour"
-						}),
-						/* @__PURE__ */ m("div", {
-							style: { marginBottom: "var(--space-formGap)" },
+						P === "WEBHOOK" && /* @__PURE__ */ f("div", {
+							className: "mb-4",
 							children: [
-								/* @__PURE__ */ p("label", {
-									style: g,
-									children: S("bigconsole.widget.actions.field.whenClicked", "When clicked")
+								/* @__PURE__ */ f("label", {
+									htmlFor: `${S}-url`,
+									style: p,
+									children: [y("bigconsole.widget.actions.webhook.urlLabel", "Destination URL"), " *"]
 								}),
-								/* @__PURE__ */ m(c, {
-									value: P,
-									onValueChange: (e) => {
-										w.current = !0, F(e);
+								/* @__PURE__ */ d(c, {
+									id: `${S}-url`,
+									ref: ke,
+									type: "url",
+									value: I,
+									onChange: (e) => {
+										w.current = !0, L(e.target.value), Q?.field === "url" && $(null);
 									},
-									disabled: x,
-									children: [/* @__PURE__ */ p(d, {
-										style: {
-											height: "var(--size-controlHeight-md)",
-											fontSize: "var(--font-size-body-sm)"
-										},
-										children: /* @__PURE__ */ p(f, {})
-									}), /* @__PURE__ */ p(l, {
-										style: v,
-										children: je.map((e) => /* @__PURE__ */ p(u, {
-											value: e.value,
-											children: e.label
-										}, e.value))
-									})]
+									placeholder: y("bigconsole.widget.actions.webhook.urlPlaceholder", "https://your-service.com/hook"),
+									disabled: v,
+									"aria-required": !0,
+									"aria-invalid": Q?.field === "url",
+									"aria-describedby": Q?.field === "url" ? `${S}-url-error` : `${S}-url-hint`
 								}),
-								Le && /* @__PURE__ */ p("p", {
-									style: _,
-									children: Le.hint
+								He("url"),
+								/* @__PURE__ */ d("p", {
+									id: `${S}-url-hint`,
+									style: m,
+									children: y("bigconsole.widget.actions.webhook.payloadHint", "The widget's current data is sent as the request payload.")
 								})
 							]
 						}),
-						P === "WEBHOOK" && /* @__PURE__ */ m("div", {
-							style: {
-								marginBottom: "var(--space-formGap)",
-								paddingLeft: "var(--space-formGap)",
-								borderLeft: "2px solid var(--color-border-subtle)",
-								display: "flex",
-								flexDirection: "column",
-								gap: "var(--space-controlGap)"
-							},
+						/* @__PURE__ */ f("button", {
+							type: "button",
+							onClick: () => G((e) => !e),
+							"aria-expanded": W,
+							"aria-controls": `${S}-options`,
+							className: "flex min-h-10 items-center gap-2 text-sm font-medium",
+							disabled: v,
+							children: [d(W ? oe : se, { className: "size-4" }), y("bigconsole.widget.actions.advanced.toggle", "More options")]
+						}),
+						/* @__PURE__ */ f("div", {
+							id: `${S}-options`,
+							hidden: !W,
+							className: "space-y-4 border-t border-border-subtle pt-4",
 							children: [
-								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("label", {
-									style: g,
-									children: [
-										S("bigconsole.widget.actions.webhook.urlLabel", "URL"),
-										" ",
-										/* @__PURE__ */ p("span", {
-											style: { color: "var(--color-status-error-text)" },
-											children: "*"
-										})
-									]
-								}), /* @__PURE__ */ p(s, {
-									value: I,
-									onChange: (e) => {
-										w.current = !0, L(e.target.value), Q && $(null);
-									},
-									placeholder: S("bigconsole.widget.actions.webhook.urlPlaceholder", "https://your-service.com/hook"),
-									disabled: x,
-									style: {
-										height: "var(--size-controlHeight-md)",
-										fontSize: "var(--font-size-body-sm)"
-									}
-								})] }),
-								/* @__PURE__ */ m("div", {
-									style: {
-										maxWidth: "160px",
-										minWidth: 0
-									},
-									children: [/* @__PURE__ */ p("label", {
-										style: g,
-										children: S("bigconsole.widget.actions.webhook.methodLabel", "Method")
-									}), /* @__PURE__ */ m(c, {
-										value: R,
-										onValueChange: (e) => {
-											w.current = !0, z(e);
-										},
-										disabled: x,
-										children: [/* @__PURE__ */ p(d, {
+								/* @__PURE__ */ f("div", { children: [
+									/* @__PURE__ */ d("h3", {
+										style: Te,
+										children: y("bigconsole.widget.actions.options.appearance", "Appearance")
+									}),
+									/* @__PURE__ */ f("div", {
+										className: "grid grid-cols-2 gap-3",
+										children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+											id: `${S}-style-label`,
+											htmlFor: `${S}-style`,
+											style: p,
+											children: y("bigconsole.widget.actions.field.style", "Style")
+										}), /* @__PURE__ */ f(l, {
+											value: j,
+											onValueChange: (e) => {
+												let t = Ie.find((t) => t.value === e);
+												t && M(t.value);
+											},
+											disabled: v,
+											children: [/* @__PURE__ */ d(ge, {
+												id: `${S}-style`,
+												"aria-labelledby": `${S}-style-label`,
+												children: /* @__PURE__ */ d(_e, {})
+											}), /* @__PURE__ */ d(u, {
+												style: h,
+												children: Ie.map((e) => /* @__PURE__ */ d(he, {
+													value: e.value,
+													children: e.label
+												}, e.value))
+											})]
+										})] }), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+											id: `${S}-icon-label`,
+											htmlFor: `${S}-icon`,
+											style: p,
+											children: y("bigconsole.widget.actions.field.icon", "Icon")
+										}), /* @__PURE__ */ f(l, {
+											value: N || "none",
+											onValueChange: (e) => je(e === "none" ? "" : e),
+											disabled: v,
+											children: [/* @__PURE__ */ d(ge, {
+												id: `${S}-icon`,
+												"aria-labelledby": `${S}-icon-label`,
+												children: /* @__PURE__ */ d(_e, {})
+											}), /* @__PURE__ */ d(u, {
+												style: {
+													...h,
+													maxHeight: "200px"
+												},
+												children: Le.map((e) => /* @__PURE__ */ d(he, {
+													value: e.value || "none",
+													children: e.label
+												}, e.value || "none"))
+											})]
+										})] })]
+									}),
+									/* @__PURE__ */ f("div", {
+										className: "mt-3 flex items-center gap-2 rounded-button bg-bg-sunken p-2",
+										children: [/* @__PURE__ */ d("span", {
+											className: "text-sm text-text-muted",
+											children: y("bigconsole.widget.actions.preview.label", "Preview:")
+										}), /* @__PURE__ */ d("span", {
+											className: "rounded-button px-3 py-1 text-sm",
 											style: {
-												height: "var(--size-controlHeight-md)",
-												fontSize: "var(--font-size-body-sm)"
+												backgroundColor: Be(j),
+												color: "var(--color-action-primary-text)"
 											},
-											children: /* @__PURE__ */ p(f, {})
-										}), /* @__PURE__ */ p(l, {
-											style: v,
-											children: ve.map((e) => /* @__PURE__ */ p(u, {
-												value: e,
-												children: e
-											}, e))
+											children: T || y("bigconsole.widget.actions.preview.buttonFallback", "Button")
 										})]
-									})]
-								}),
-								/* @__PURE__ */ p("p", {
-									style: _,
-									children: S("bigconsole.widget.actions.webhook.payloadHint", "The widget's current data is sent as the request payload.")
-								}),
-								/^http:\/\//i.test(I.trim()) && /* @__PURE__ */ m("p", {
-									style: {
-										..._,
-										color: "var(--color-status-warning-text)"
+									})
+								] }),
+								P === "WEBHOOK" && /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+									id: `${S}-method-label`,
+									htmlFor: `${S}-method`,
+									style: p,
+									children: y("bigconsole.widget.actions.webhook.methodLabel", "Request method")
+								}), /* @__PURE__ */ f(l, {
+									value: R,
+									onValueChange: (e) => {
+										let t = Se.find((t) => t === e);
+										t && (w.current = !0, z(t));
 									},
+									disabled: v,
+									children: [/* @__PURE__ */ d(ge, {
+										id: `${S}-method`,
+										"aria-labelledby": `${S}-method-label`,
+										children: /* @__PURE__ */ d(_e, {})
+									}), /* @__PURE__ */ d(u, {
+										style: h,
+										children: Se.map((e) => /* @__PURE__ */ d(he, {
+											value: e,
+											children: e
+										}, e))
+									})]
+								})] }),
+								/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ f("label", {
+									className: "flex items-center gap-2 text-sm",
+									children: [/* @__PURE__ */ d(s, {
+										checked: K,
+										onCheckedChange: (e) => Me(e === !0),
+										disabled: v
+									}), y("bigconsole.widget.actions.confirm.toggleLabel", "Ask for confirmation first")]
+								}), K && /* @__PURE__ */ f("div", {
+									className: "mt-3 space-y-3",
 									children: [
-										S("bigconsole.widget.actions.webhook.insecureWarningPrefix", "Warning:"),
-										" ",
-										/* @__PURE__ */ p("code", { children: "http://" }),
-										" ",
-										S("bigconsole.widget.actions.webhook.insecureWarningMiddle", "is unencrypted — the widget's data will be sent in plaintext. Use"),
-										" ",
-										/* @__PURE__ */ p("code", { children: "https://" }),
-										" ",
-										S("bigconsole.widget.actions.webhook.insecureWarningSuffix", "if it may contain anything sensitive.")
+										/* @__PURE__ */ d("label", {
+											htmlFor: `${S}-message`,
+											style: p,
+											children: y("bigconsole.widget.actions.confirm.messageLabel", "Message")
+										}),
+										/* @__PURE__ */ d(ye, {
+											id: `${S}-message`,
+											value: Pe,
+											onChange: (e) => J(e.target.value),
+											rows: 2,
+											disabled: v
+										}),
+										/* @__PURE__ */ f("details", { children: [/* @__PURE__ */ d("summary", {
+											className: "cursor-pointer text-sm text-text-secondary",
+											children: y("bigconsole.widget.actions.confirm.customize", "Customize confirmation labels")
+										}), /* @__PURE__ */ f("div", {
+											className: "mt-3 space-y-3",
+											children: [
+												/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+													htmlFor: `${S}-confirm-title`,
+													style: p,
+													children: y("bigconsole.widget.actions.confirm.dialogTitleLabel", "Dialog Title")
+												}), /* @__PURE__ */ d(c, {
+													id: `${S}-confirm-title`,
+													value: Ne,
+													onChange: (e) => q(e.target.value),
+													disabled: v
+												})] }),
+												/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+													htmlFor: `${S}-confirm-label`,
+													style: p,
+													children: y("bigconsole.widget.actions.confirm.confirmButtonLabel", "Confirm Button")
+												}), /* @__PURE__ */ d(c, {
+													id: `${S}-confirm-label`,
+													value: Y,
+													onChange: (e) => X(e.target.value),
+													disabled: v
+												})] }),
+												/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+													htmlFor: `${S}-cancel-label`,
+													style: p,
+													children: y("bigconsole.widget.actions.confirm.cancelButtonLabel", "Cancel Button")
+												}), /* @__PURE__ */ d(c, {
+													id: `${S}-cancel-label`,
+													value: Fe,
+													onChange: (e) => Z(e.target.value),
+													disabled: v
+												})] })
+											]
+										})] })
 									]
-								})
-							]
-						}),
-						/* @__PURE__ */ m("div", {
-							style: {
-								paddingTop: "var(--space-formGap)",
-								borderTop: "1px solid var(--color-border-subtle)"
-							},
-							children: [/* @__PURE__ */ m("label", {
-								style: {
-									display: "flex",
-									alignItems: "center",
-									gap: "var(--space-controlGap)",
-									cursor: "pointer",
-									marginBottom: "var(--space-formGap)"
-								},
-								children: [/* @__PURE__ */ p(o, {
-									checked: G,
-									onCheckedChange: (e) => K(e === !0),
-									disabled: x
-								}), /* @__PURE__ */ p("span", {
-									style: {
-										fontSize: "var(--font-size-body-sm)",
-										fontWeight: "var(--font-weight-semibold)",
-										color: "var(--color-text-primary)"
-									},
-									children: S("bigconsole.widget.actions.confirm.toggleLabel", "Ask for confirmation first")
-								})]
-							}), G && /* @__PURE__ */ m("div", {
-								style: {
-									paddingLeft: "var(--space-formGap)",
-									borderLeft: "2px solid var(--color-border-subtle)",
-									display: "flex",
-									flexDirection: "column",
-									gap: "var(--space-controlGap)"
-								},
-								children: [
-									/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
-										style: {
-											display: "block",
-											fontSize: "var(--font-size-body-sm)",
-											fontWeight: "var(--font-weight-medium)",
-											color: "var(--color-text-secondary)",
-											marginBottom: "var(--space-controlGap)"
-										},
-										children: S("bigconsole.widget.actions.confirm.dialogTitleLabel", "Dialog Title")
-									}), /* @__PURE__ */ p(s, {
-										value: q,
-										onChange: (e) => J(e.target.value),
-										disabled: x,
-										style: {
-											height: "var(--size-controlHeight-sm)",
-											fontSize: "var(--font-size-body-sm)"
-										}
-									})] }),
-									/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
-										style: {
-											display: "block",
-											fontSize: "var(--font-size-body-sm)",
-											fontWeight: "var(--font-weight-medium)",
-											color: "var(--color-text-secondary)",
-											marginBottom: "var(--space-controlGap)"
-										},
-										children: S("bigconsole.widget.actions.confirm.messageLabel", "Message")
-									}), /* @__PURE__ */ p(ge, {
-										value: Oe,
-										onChange: (e) => Y(e.target.value),
-										rows: 2,
-										disabled: x,
-										style: {
-											fontSize: "var(--font-size-body-sm)",
-											resize: "none"
-										}
-									})] }),
-									/* @__PURE__ */ m("div", {
-										style: {
-											display: "grid",
-											gridTemplateColumns: "repeat(auto-fit, minmax(11rem, 1fr))",
-											gap: "var(--space-controlGap)"
-										},
-										children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
-											style: {
-												display: "block",
-												fontSize: "var(--font-size-body-sm)",
-												fontWeight: "var(--font-weight-medium)",
-												color: "var(--color-text-secondary)",
-												marginBottom: "var(--space-controlGap)"
-											},
-											children: S("bigconsole.widget.actions.confirm.confirmButtonLabel", "Confirm Button")
-										}), /* @__PURE__ */ p(s, {
-											value: ke,
-											onChange: (e) => X(e.target.value),
-											disabled: x,
-											style: {
-												height: "var(--size-controlHeight-sm)",
-												fontSize: "var(--font-size-body-sm)"
-											}
-										})] }), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
-											style: {
-												display: "block",
-												fontSize: "var(--font-size-body-sm)",
-												fontWeight: "var(--font-weight-medium)",
-												color: "var(--color-text-secondary)",
-												marginBottom: "var(--space-controlGap)"
+								})] }),
+								/* @__PURE__ */ f("div", { children: [
+									/* @__PURE__ */ f("label", {
+										className: "flex items-center gap-2 text-sm",
+										children: [/* @__PURE__ */ d(s, {
+											checked: P === "EMIT",
+											onCheckedChange: (e) => {
+												w.current = !0, F(e === !0 ? "EMIT" : "WEBHOOK"), $(null);
 											},
-											children: S("bigconsole.widget.actions.confirm.cancelButtonLabel", "Cancel Button")
-										}), /* @__PURE__ */ p(s, {
-											value: Ae,
-											onChange: (e) => Z(e.target.value),
-											disabled: x,
-											style: {
-												height: "var(--size-controlHeight-sm)",
-												fontSize: "var(--font-size-body-sm)"
-											}
-										})] })]
-									})
-								]
-							})]
-						}),
-						/* @__PURE__ */ m("div", {
-							style: {
-								paddingTop: "var(--space-formGap)",
-								borderTop: "1px solid var(--color-border-subtle)"
-							},
-							children: [/* @__PURE__ */ p("h3", {
-								style: {
-									...xe,
-									margin: 0
-								},
-								children: /* @__PURE__ */ m("button", {
-									type: "button",
-									onClick: () => De((e) => !e),
-									"aria-expanded": W,
-									"aria-controls": "action-config-advanced",
-									style: {
-										display: "flex",
-										alignItems: "center",
-										gap: "var(--space-controlGap)",
-										minHeight: "var(--size-controlHeight-md)",
-										background: "none",
-										border: "none",
-										padding: 0,
-										cursor: "pointer",
-										font: "inherit",
-										letterSpacing: "inherit",
-										textTransform: "inherit",
-										color: "inherit"
-									},
-									children: [p(W ? re : ie, { style: {
-										height: "14px",
-										width: "14px"
-									} }), S("bigconsole.widget.actions.advanced.toggle", "Advanced")]
-								})
-							}), W && /* @__PURE__ */ m("div", {
-								id: "action-config-advanced",
-								style: {
-									marginTop: "var(--space-formGap)",
-									display: "flex",
-									flexDirection: "column",
-									gap: "var(--space-formGap)"
-								},
-								children: [/* @__PURE__ */ m("div", { children: [
-									/* @__PURE__ */ p("label", {
-										style: g,
-										children: S("bigconsole.widget.actions.advanced.eventNameLabel", "Event name (id)")
+											disabled: v
+										}), y("bigconsole.widget.actions.options.customEvent", "Use a custom event instead of calling an API")]
 									}),
-									/* @__PURE__ */ p(s, {
-										value: C && y ? y.name : D,
-										onChange: (e) => {
-											O(e.target.value), A(!0);
-										},
-										placeholder: S("bigconsole.widget.actions.advanced.eventNamePlaceholder", "auto from label"),
-										disabled: x || C,
-										style: {
-											height: "var(--size-controlHeight-md)",
-											fontSize: "var(--font-size-body-sm)",
-											fontFamily: "var(--font-family-mono)"
-										}
+									/* @__PURE__ */ d("p", {
+										style: m,
+										children: y("bigconsole.widget.actions.outcome.emit.hint", "For integrations configured in Webhooks / Events.")
 									}),
-									/* @__PURE__ */ m("p", {
-										style: _,
+									/* @__PURE__ */ f("div", {
+										className: "mt-3",
 										children: [
-											S("bigconsole.widget.actions.advanced.emitsPrefix", "Emits"),
-											" ",
-											/* @__PURE__ */ m("code", { children: [
-												"widget:",
-												C && y ? y.name : h(D || T) || "<name>",
-												":clicked"
-											] }),
-											".",
-											" ",
-											C ? S("bigconsole.widget.actions.advanced.emitsFixed", "Fixed once created.") : S("bigconsole.widget.actions.advanced.emitsAutoDerived", "Auto-derived from the label.")
+											/* @__PURE__ */ d("label", {
+												htmlFor: `${S}-name`,
+												style: p,
+												children: y("bigconsole.widget.actions.advanced.eventNameLabel", "Event name (id)")
+											}),
+											/* @__PURE__ */ d(c, {
+												id: `${S}-name`,
+												ref: Ae,
+												value: b && g ? g.name : D,
+												onChange: (e) => {
+													O(e.target.value), A(!0), Q?.field === "name" && $(null);
+												},
+												disabled: v || b,
+												"aria-invalid": Q?.field === "name",
+												"aria-describedby": Q?.field === "name" ? `${S}-name-error` : void 0
+											}),
+											He("name"),
+											/* @__PURE__ */ d("p", {
+												style: m,
+												children: /* @__PURE__ */ f("code", { children: [
+													"widget:",
+													b && g ? g.name : n(D || T) || "<name>",
+													":clicked"
+												] })
+											})
 										]
 									})
-								] }), /* @__PURE__ */ m("div", {
-									style: {
-										display: "flex",
-										alignItems: "center",
-										gap: "var(--space-sectionGap)"
-									},
-									children: [/* @__PURE__ */ m("label", {
-										style: {
-											display: "flex",
-											alignItems: "center",
-											gap: "var(--space-controlGap)",
-											cursor: "pointer"
-										},
-										children: [/* @__PURE__ */ p(o, {
+								] }),
+								/* @__PURE__ */ f("div", {
+									className: "flex flex-wrap gap-4 text-sm",
+									children: [/* @__PURE__ */ f("label", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ d(s, {
 											checked: B,
 											onCheckedChange: (e) => V(e === !0),
-											disabled: x
-										}), /* @__PURE__ */ p("span", {
-											style: {
-												fontSize: "var(--font-size-body-sm)",
-												color: "var(--color-text-primary)"
-											},
-											children: S("bigconsole.widget.actions.advanced.disabled", "Disabled")
-										})]
-									}), /* @__PURE__ */ m("label", {
-										style: {
-											display: "flex",
-											alignItems: "center",
-											gap: "var(--space-controlGap)",
-											cursor: "pointer"
-										},
-										children: [/* @__PURE__ */ p(o, {
+											disabled: v
+										}), y("bigconsole.widget.actions.advanced.disabled", "Disabled")]
+									}), /* @__PURE__ */ f("label", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ d(s, {
 											checked: H,
 											onCheckedChange: (e) => U(e === !0),
-											disabled: x
-										}), /* @__PURE__ */ p("span", {
-											style: {
-												fontSize: "var(--font-size-body-sm)",
-												color: "var(--color-text-primary)"
-											},
-											children: S("bigconsole.widget.actions.advanced.hidden", "Hidden")
-										})]
+											disabled: v
+										}), y("bigconsole.widget.actions.advanced.hidden", "Hidden")]
 									})]
-								})]
-							})]
+								})
+							]
 						})
 					]
-				}), /* @__PURE__ */ m(fe, {
-					style: {
-						padding: "var(--space-formGap) var(--space-pagePadding)",
-						borderTop: "1px solid var(--color-border-subtle)",
-						backgroundColor: "var(--color-bg-sunken)",
-						display: "flex",
-						justifyContent: "flex-end",
-						gap: "var(--space-controlGap)"
-					},
-					children: [/* @__PURE__ */ p(ce, {
+				}), /* @__PURE__ */ f(fe, {
+					className: "shrink-0 border-t border-border-subtle bg-bg-sunken p-4",
+					children: [/* @__PURE__ */ d(ce, {
 						type: "button",
 						variant: "outline",
-						onClick: Ce,
-						disabled: x,
-						style: { height: "var(--size-controlHeight-md)" },
-						children: S("bigconsole.widget.actions.footer.cancel", "Cancel")
-					}), /* @__PURE__ */ p(ne, {
-						permission: C ? t.WIDGET_ACTION_UPDATE : t.WIDGET_ACTION_CREATE,
+						onClick: De,
+						disabled: v,
+						children: y("bigconsole.widget.actions.footer.cancel", "Cancel")
+					}), /* @__PURE__ */ d(ae, {
+						permission: b ? t.WIDGET_ACTION_UPDATE : t.WIDGET_ACTION_CREATE,
 						deniedBehavior: "disable",
-						children: /* @__PURE__ */ p(ce, {
+						children: /* @__PURE__ */ d(ce, {
 							type: "submit",
-							disabled: x || !T.trim(),
-							style: {
-								height: "var(--size-controlHeight-md)",
-								backgroundColor: "var(--color-action-primary-bg)"
-							},
-							children: x ? /* @__PURE__ */ m("span", {
-								style: {
-									display: "flex",
-									alignItems: "center",
-									gap: "var(--space-iconGap)"
-								},
-								children: [/* @__PURE__ */ p(he, { style: {
-									height: "var(--size-icon-sm)",
-									width: "var(--size-icon-sm)"
-								} }), S("bigconsole.widget.actions.footer.saving", "Saving...")]
-							}) : /* @__PURE__ */ m("span", {
-								style: {
-									display: "flex",
-									alignItems: "center",
-									gap: "var(--space-iconGap)"
-								},
-								children: [p(C ? ae : oe, { style: {
-									height: "var(--size-icon-sm)",
-									width: "var(--size-icon-sm)"
-								} }), C ? S("bigconsole.widget.actions.footer.updateButton", "Update Button") : S("bigconsole.widget.actions.footer.addButton", "Add Button")]
-							})
+							disabled: v,
+							children: v ? /* @__PURE__ */ f(be, { children: [/* @__PURE__ */ d(ve, { className: "size-4" }), y("bigconsole.widget.actions.footer.saving", "Saving...")] }) : b ? y("bigconsole.widget.actions.footer.updateButton", "Update Button") : y("bigconsole.widget.actions.footer.addButton", "Add Button")
 						})
 					})]
 				})]
@@ -820,6 +556,6 @@ var g = {
 	});
 });
 //#endregion
-export { y as default };
+export { g as default };
 
 //# sourceMappingURL=ActionConfigDialog.js.map