@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

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

@@ -1,228 +1,235 @@
-import { BIGCONSOLE_PERMISSIONS as e } from "../../../constants/permissions.js";
-import { memo as t, useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
-import { PermissionButton as ee } from "@burdenoff/fe-libs/shared/components";
-import { ChevronDown as te, ChevronRight as ne, Pencil as re, Plus as ie, Zap as ae } from "lucide-react";
-import { Button as oe, Checkbox as se, Dialog as ce, DialogContent as le, DialogDescription as ue, DialogFooter as de, DialogHeader as fe, DialogTitle as pe, Input as o, Select as s, SelectContent as c, SelectItem as l, SelectTrigger as u, SelectValue as d, Spinner as me, Textarea as he } from "@burdenoff/fe-libs/ui";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+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 { useI18n as ce } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Button as le, Checkbox as o, Dialog as ue, DialogContent as de, DialogDescription as fe, DialogFooter as pe, DialogHeader as me, DialogTitle as he, Input as s, Select as c, SelectContent as l, SelectItem as u, SelectTrigger as d, SelectValue as f, Spinner as ge, Textarea as _e } from "@burdenoff/fe-libs/ui";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/ActionConfigDialog.tsx
-var ge = [{
-	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."
-}], _e = [
+var ve = [
 	"POST",
 	"GET",
 	"PUT",
 	"PATCH",
 	"DELETE"
-], ve = [
+], ye = [
 	{
 		value: "PRIMARY",
-		label: "Primary",
 		color: "var(--color-action-primary-bg)"
 	},
 	{
 		value: "SECONDARY",
-		label: "Secondary",
 		color: "var(--color-action-secondary-bg)"
 	},
 	{
 		value: "SUCCESS",
-		label: "Success",
 		color: "var(--color-status-success-bg)"
 	},
 	{
 		value: "WARNING",
-		label: "Warning",
 		color: "var(--color-status-warning-bg)"
 	},
 	{
 		value: "DANGER",
-		label: "Danger",
 		color: "var(--color-action-danger-bg)"
 	}
-], ye = [
-	{
-		value: "",
-		label: "No icon"
-	},
-	{
-		value: "refresh",
-		label: "Refresh"
-	},
-	{
-		value: "download",
-		label: "Download"
-	},
-	{
-		value: "upload",
-		label: "Upload"
-	},
-	{
-		value: "trash",
-		label: "Trash"
-	},
-	{
-		value: "edit",
-		label: "Edit"
-	},
-	{
-		value: "plus",
-		label: "Plus"
-	},
-	{
-		value: "check",
-		label: "Check"
-	},
-	{
-		value: "eye",
-		label: "View"
-	},
-	{
-		value: "copy",
-		label: "Copy"
-	},
-	{
-		value: "share",
-		label: "Share"
-	},
-	{
-		value: "settings",
-		label: "Settings"
-	},
-	{
-		value: "filter",
-		label: "Filter"
-	},
-	{
-		value: "search",
-		label: "Search"
-	}
+], be = [
+	"",
+	"refresh",
+	"download",
+	"upload",
+	"trash",
+	"edit",
+	"plus",
+	"check",
+	"eye",
+	"copy",
+	"share",
+	"settings",
+	"filter",
+	"search"
 ];
-function m(e) {
+function h(e) {
 	return e.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
 }
-var h = {
+var g = {
 	display: "block",
 	fontSize: "var(--font-size-body-sm)",
-	fontWeight: "var(--font-weight-semibold)",
+	fontWeight: "var(--font-weight-medium)",
 	color: "var(--color-text-primary)",
 	marginBottom: "var(--space-controlGap)"
-}, g = {
+}, xe = {
+	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)"
+}, _ = {
 	fontSize: "var(--font-size-body-sm)",
 	color: "var(--color-text-muted)",
 	marginTop: "var(--space-controlGap)"
-}, _ = {
+}, v = {
 	zIndex: 9999,
 	backgroundColor: "var(--color-overlay-popoverBg, var(--color-bg-surface))",
-	border: "1px solid var(--color-border)",
+	border: "1px solid var(--color-border-subtle)",
 	boxShadow: "var(--shadow-elevation-3)",
 	borderRadius: "var(--radius-button)"
-}, v = t(function({ isOpen: t, action: v, initialWebhook: y, isLoading: b = !1, saveError: be, onClose: xe, onSave: Se }) {
-	let x = !!v, S = i(null), C = i(!1), [w, T] = a(""), [E, D] = a(""), [O, k] = a(!1), [A, j] = a("PRIMARY"), [M, N] = a(""), [P, F] = a("WEBHOOK"), [I, L] = a(""), [R, z] = a("POST"), [B, V] = a(!1), [H, U] = a(!1), [Ce, we] = a(!1), [W, G] = a(!1), [Te, K] = a("Confirm Action"), [Ee, q] = a("Are you sure you want to proceed?"), [J, Y] = a("Confirm"), [X, Z] = a("Cancel"), [Q, $] = a(null);
-	r(() => {
-		if (!t) 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 ? (K(v.confirmation.title), q(v.confirmation.message), Y(v.confirmation.confirmLabel || "Confirm"), Z(v.confirmation.cancelLabel || "Cancel")) : (K("Confirm Action"), q("Are you sure you want to proceed?"), Y("Confirm"), Z("Cancel"))) : (T(""), D(""), k(!1), j("PRIMARY"), N(""), F("WEBHOOK"), V(!1), U(!1), G(!1), K("Confirm Action"), q("Are you sure you want to proceed?"), Y("Confirm"), Z("Cancel")), we(!1), $(null);
-		let e = requestAnimationFrame(() => requestAnimationFrame(() => S.current?.focus()));
+}, y = n(function({ isOpen: n, action: y, initialWebhook: b, isLoading: x = !1, saveError: Se, onClose: Ce, onSave: we }) {
+	let { t: S } = ce(), 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(() => {
+		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")
+		};
+		return ye.map((t) => ({
+			value: t.value,
+			label: e[t.value],
+			color: t.color
+		}));
+	}, [S]), Ne = i(() => {
+		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")
+		};
+		return be.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()));
 		return () => cancelAnimationFrame(e);
-	}, [t, v]), r(() => {
-		!t || !y || C.current || (F("WEBHOOK"), L(y.url), z(y.method));
-	}, [t, y]);
-	let De = n((e) => {
-		T(e), O || D(m(e)), Q && $(null);
-	}, [O, Q]), Oe = n((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) => {
 		e.preventDefault();
-		let t = w.trim();
+		let t = T.trim();
 		if (!t) {
-			$("Button label is required"), S.current?.focus();
+			$(S("bigconsole.widget.actions.validation.labelRequired", "Button label is required")), Te.current?.focus();
 			return;
 		}
-		let n = x && v ? v.name : m(O ? E : w) || m(w);
+		let n = C && y ? y.name : h(k ? D : T) || h(T);
 		if (!n) {
-			$("Enter a label using letters or numbers");
+			$(S("bigconsole.widget.actions.validation.labelLettersOrNumbers", "Enter a label using letters or numbers"));
 			return;
 		}
 		if (P === "WEBHOOK") {
 			let e = I.trim();
 			if (!e) {
-				$("Enter the URL to call when the button is clicked");
+				$(S("bigconsole.widget.actions.validation.urlRequired", "Enter the URL to call when the button is clicked"));
 				return;
 			}
 			if (!/^https?:\/\//i.test(e)) {
-				$("Webhook URL must start with http:// or https://");
+				$(S("bigconsole.widget.actions.validation.urlScheme", "Webhook URL must start with http:// or https://"));
 				return;
 			}
 		}
-		let r = W ? {
-			title: Te.trim() || "Confirm Action",
-			message: Ee.trim() || "Are you sure?",
-			confirmLabel: J.trim() || "Confirm",
-			cancelLabel: X.trim() || "Cancel"
-		} : void 0, i = P === "WEBHOOK" ? {
+		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;
-		Se(x && v ? {
-			id: v.id,
+		we(C && y ? {
+			id: y.id,
 			name: n,
 			label: t,
 			type: "BUTTON",
-			style: A,
-			icon: M || void 0,
-			confirmation: W ? r : null,
+			style: j,
+			icon: N || void 0,
+			confirmation: G ? r : null,
 			disabled: B,
 			hidden: H
 		} : {
 			name: n,
 			label: t,
 			type: "BUTTON",
-			style: A,
-			icon: M || void 0,
+			style: j,
+			icon: N || void 0,
 			confirmation: r,
 			disabled: B,
 			hidden: H
-		}, i);
+		}, ee);
 	}, [
-		w,
-		E,
-		O,
+		T,
+		D,
+		k,
 		P,
 		I,
 		R,
-		A,
-		M,
+		j,
+		N,
 		B,
 		H,
-		W,
-		Te,
-		Ee,
-		J,
-		X,
-		x,
-		v,
-		Se
-	]), ke = (e) => ve.find((t) => t.value === e)?.color || "var(--color-action-primary-bg)", Ae = ge.find((e) => e.value === P);
-	return /* @__PURE__ */ f(ce, {
-		open: t,
-		onOpenChange: (e) => !e && !b && xe(),
-		children: /* @__PURE__ */ p(le, {
+		G,
+		q,
+		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(ue, {
+		open: n,
+		onOpenChange: (e) => !e && !x && Ce(),
+		children: /* @__PURE__ */ m(de, {
 			style: {
-				maxWidth: "500px",
+				width: "min(500px, calc(100vw - 2rem))",
+				maxWidth: "calc(100vw - 2rem)",
 				padding: 0
 			},
-			children: [/* @__PURE__ */ f(fe, {
-				style: { padding: "var(--space-pagePadding) var(--space-pagePadding) 0" },
-				children: /* @__PURE__ */ p("div", {
+			children: [/* @__PURE__ */ p(me, {
+				style: { padding: "var(--space-cardPadding) var(--space-cardPadding) 0" },
+				children: /* @__PURE__ */ m("div", {
 					style: {
 						display: "flex",
+						flexWrap: "wrap",
 						alignItems: "center",
-						gap: "var(--space-formGap)"
+						gap: "var(--space-controlGap)",
+						minWidth: 0
 					},
-					children: [/* @__PURE__ */ f("div", {
+					children: [/* @__PURE__ */ p("div", {
 						style: {
 							display: "flex",
 							height: "var(--size-controlHeight-lg)",
@@ -233,134 +240,139 @@ var h = {
 							backgroundColor: "var(--color-action-primary-bg)",
 							boxShadow: "var(--shadow-elevation-2)"
 						},
-						children: f(x ? re : ae, { style: {
+						children: p(C ? ae : se, { style: {
 							height: "var(--size-icon-lg)",
 							width: "var(--size-icon-lg)",
 							color: "var(--color-action-primary-text)"
 						} })
-					}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f(pe, {
+					}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p(he, {
 						style: {
-							fontSize: "var(--font-size-heading-h4)",
+							fontSize: "var(--font-size-body-md)",
 							fontWeight: "var(--font-weight-bold)",
 							color: "var(--color-text-primary)",
 							margin: 0
 						},
-						children: x ? "Edit Button" : "Add Button"
-					}), /* @__PURE__ */ f(ue, {
+						children: C ? S("bigconsole.widget.actions.header.editTitle", "Edit Button") : S("bigconsole.widget.actions.header.addTitle", "Add Button")
+					}), /* @__PURE__ */ p(fe, {
 						style: {
 							fontSize: "var(--font-size-body-sm)",
 							color: "var(--color-text-secondary)",
 							margin: "var(--space-controlGap) 0 0 0"
 						},
-						children: x ? "Update the button and what it does" : "Add a button and choose what it does"
+						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__ */ p("form", {
-				onSubmit: Oe,
-				children: [/* @__PURE__ */ p("div", {
+			}), /* @__PURE__ */ m("form", {
+				onSubmit: Fe,
+				children: [/* @__PURE__ */ m("div", {
 					style: {
-						padding: "var(--space-pagePadding)",
-						maxHeight: "60vh",
+						padding: "var(--space-cardPadding)",
+						maxHeight: "65vh",
+						minWidth: 0,
 						overflowY: "auto"
 					},
 					children: [
-						(Q || be) && /* @__PURE__ */ f("div", {
-							style: {
-								padding: "var(--space-controlGap)",
-								backgroundColor: "var(--color-status-error-bgSubtle)",
-								border: "1px solid var(--color-status-error-border)",
-								borderRadius: "var(--radius-button)",
-								marginBottom: "var(--space-formGap)"
-							},
-							children: /* @__PURE__ */ f("p", {
-								style: {
-									fontSize: "var(--font-size-body-sm)",
-									color: "var(--color-status-error-text)",
-									margin: 0
-								},
-								children: Q || be
+						(Q || Se) && /* @__PURE__ */ p(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", {
+								role: "alert",
+								className: "break-words text-sm text-[var(--color-status-error-text)]",
+								children: Q || Se
 							})
 						}),
-						/* @__PURE__ */ p("div", {
+						/* @__PURE__ */ p("h3", {
+							style: xe,
+							children: "Appearance"
+						}),
+						/* @__PURE__ */ m("div", {
 							style: { marginBottom: "var(--space-formGap)" },
 							children: [
-								/* @__PURE__ */ p("label", {
-									style: h,
-									children: ["Button label ", /* @__PURE__ */ f("span", {
-										style: { color: "var(--color-status-error-text)" },
-										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(o, {
-									ref: S,
-									value: w,
-									onChange: (e) => De(e.target.value),
-									placeholder: "e.g., Refresh Data, Export CSV",
-									disabled: b,
+								/* @__PURE__ */ p(s, {
+									ref: Te,
+									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)"
 									}
 								}),
-								/* @__PURE__ */ f("p", {
-									style: g,
-									children: "Text shown on the button"
+								/* @__PURE__ */ p("p", {
+									style: _,
+									children: S("bigconsole.widget.actions.field.buttonLabelHint", "Text shown on the button")
 								})
 							]
 						}),
-						/* @__PURE__ */ p("div", {
+						/* @__PURE__ */ m("div", {
 							style: {
 								display: "grid",
-								gridTemplateColumns: "1fr 1fr",
+								gridTemplateColumns: "repeat(auto-fit, minmax(11rem, 1fr))",
 								gap: "var(--space-formGap)",
 								marginBottom: "var(--space-formGap)"
 							},
-							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, {
+							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__ */ f(d, {})
-								}), /* @__PURE__ */ f(c, {
-									style: _,
-									children: ve.map((e) => /* @__PURE__ */ f(l, {
+									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__ */ p("div", { children: [/* @__PURE__ */ f("label", {
-								style: h,
-								children: "Icon"
-							}), /* @__PURE__ */ p(s, {
-								value: M,
-								onValueChange: N,
-								disabled: b,
-								children: [/* @__PURE__ */ f(u, {
+							})] }), /* @__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__ */ f(d, { placeholder: "No icon" })
-								}), /* @__PURE__ */ f(c, {
+									children: /* @__PURE__ */ p(f, { placeholder: S("bigconsole.widget.actions.icon.none", "No icon") })
+								}), /* @__PURE__ */ p(l, {
 									style: {
-										..._,
+										...v,
 										maxHeight: "200px"
 									},
-									children: ye.map((e) => /* @__PURE__ */ f(l, {
+									children: Ne.map((e) => /* @__PURE__ */ p(u, {
 										value: e.value || "none",
 										children: e.label
 									}, e.value || "none"))
 								})]
 							})] })]
 						}),
-						/* @__PURE__ */ p("div", {
+						/* @__PURE__ */ m("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
@@ -370,140 +382,157 @@ var h = {
 								backgroundColor: "var(--color-bg-sunken)",
 								borderRadius: "var(--radius-button)"
 							},
-							children: [/* @__PURE__ */ f("span", {
+							children: [/* @__PURE__ */ p("span", {
 								style: {
 									fontSize: "var(--font-size-body-sm)",
 									color: "var(--color-text-muted)"
 								},
-								children: "Preview:"
-							}), /* @__PURE__ */ f("button", {
+								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: ke(A),
+									backgroundColor: Ie(j),
 									color: "var(--color-action-primary-text)",
 									border: "none",
 									cursor: "default"
 								},
-								children: w || "Button"
+								children: T || S("bigconsole.widget.actions.preview.buttonFallback", "Button")
 							})]
 						}),
-						/* @__PURE__ */ p("div", {
+						/* @__PURE__ */ p("h3", {
+							style: {
+								...xe,
+								marginTop: "var(--space-formGap)"
+							},
+							children: "Behaviour"
+						}),
+						/* @__PURE__ */ m("div", {
 							style: { marginBottom: "var(--space-formGap)" },
 							children: [
-								/* @__PURE__ */ f("label", {
-									style: h,
-									children: "When clicked"
+								/* @__PURE__ */ p("label", {
+									style: g,
+									children: S("bigconsole.widget.actions.field.whenClicked", "When clicked")
 								}),
-								/* @__PURE__ */ p(s, {
+								/* @__PURE__ */ m(c, {
 									value: P,
 									onValueChange: (e) => {
-										C.current = !0, F(e);
+										w.current = !0, F(e);
 									},
-									disabled: b,
-									children: [/* @__PURE__ */ f(u, {
+									disabled: x,
+									children: [/* @__PURE__ */ p(d, {
 										style: {
 											height: "var(--size-controlHeight-md)",
 											fontSize: "var(--font-size-body-sm)"
 										},
-										children: /* @__PURE__ */ f(d, {})
-									}), /* @__PURE__ */ f(c, {
-										style: _,
-										children: ge.map((e) => /* @__PURE__ */ f(l, {
+										children: /* @__PURE__ */ p(f, {})
+									}), /* @__PURE__ */ p(l, {
+										style: v,
+										children: je.map((e) => /* @__PURE__ */ p(u, {
 											value: e.value,
 											children: e.label
 										}, e.value))
 									})]
 								}),
-								Ae && /* @__PURE__ */ f("p", {
-									style: g,
-									children: Ae.hint
+								Le && /* @__PURE__ */ p("p", {
+									style: _,
+									children: Le.hint
 								})
 							]
 						}),
-						P === "WEBHOOK" && /* @__PURE__ */ p("div", {
+						P === "WEBHOOK" && /* @__PURE__ */ m("div", {
 							style: {
 								marginBottom: "var(--space-formGap)",
 								paddingLeft: "var(--space-formGap)",
-								borderLeft: "2px solid var(--color-border)",
+								borderLeft: "2px solid var(--color-border-subtle)",
 								display: "flex",
 								flexDirection: "column",
 								gap: "var(--space-controlGap)"
 							},
 							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, {
+								/* @__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) => {
-										C.current = !0, L(e.target.value), Q && $(null);
+										w.current = !0, L(e.target.value), Q && $(null);
 									},
-									placeholder: "https://your-service.com/hook",
-									disabled: b,
+									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__ */ p("div", {
-									style: { maxWidth: "160px" },
-									children: [/* @__PURE__ */ f("label", {
-										style: h,
-										children: "Method"
-									}), /* @__PURE__ */ p(s, {
+								/* @__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) => {
-											C.current = !0, z(e);
+											w.current = !0, z(e);
 										},
-										disabled: b,
-										children: [/* @__PURE__ */ f(u, {
+										disabled: x,
+										children: [/* @__PURE__ */ p(d, {
 											style: {
 												height: "var(--size-controlHeight-md)",
 												fontSize: "var(--font-size-body-sm)"
 											},
-											children: /* @__PURE__ */ f(d, {})
-										}), /* @__PURE__ */ f(c, {
-											style: _,
-											children: _e.map((e) => /* @__PURE__ */ f(l, {
+											children: /* @__PURE__ */ p(f, {})
+										}), /* @__PURE__ */ p(l, {
+											style: v,
+											children: ve.map((e) => /* @__PURE__ */ p(u, {
 												value: e,
 												children: e
 											}, e))
 										})]
 									})]
 								}),
-								/* @__PURE__ */ f("p", {
-									style: g,
-									children: "The widget's current data is sent as the request payload."
+								/* @__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__ */ p("p", {
+								/^http:\/\//i.test(I.trim()) && /* @__PURE__ */ m("p", {
 									style: {
-										...g,
+										..._,
 										color: "var(--color-status-warning-text)"
 									},
 									children: [
-										"Warning: ",
-										/* @__PURE__ */ f("code", { children: "http://" }),
-										" is unencrypted — the widget's data will be sent in plaintext. Use",
+										S("bigconsole.widget.actions.webhook.insecureWarningPrefix", "Warning:"),
+										" ",
+										/* @__PURE__ */ p("code", { children: "http://" }),
 										" ",
-										/* @__PURE__ */ f("code", { children: "https://" }),
-										" if it may contain anything sensitive."
+										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__ */ p("div", {
+						/* @__PURE__ */ m("div", {
 							style: {
 								paddingTop: "var(--space-formGap)",
-								borderTop: "1px solid var(--color-border)"
+								borderTop: "1px solid var(--color-border-subtle)"
 							},
-							children: [/* @__PURE__ */ p("label", {
+							children: [/* @__PURE__ */ m("label", {
 								style: {
 									display: "flex",
 									alignItems: "center",
@@ -511,28 +540,28 @@ var h = {
 									cursor: "pointer",
 									marginBottom: "var(--space-formGap)"
 								},
-								children: [/* @__PURE__ */ f(se, {
-									checked: W,
-									onCheckedChange: (e) => G(e === !0),
-									disabled: b
-								}), /* @__PURE__ */ f("span", {
+								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: "Ask for confirmation first"
+									children: S("bigconsole.widget.actions.confirm.toggleLabel", "Ask for confirmation first")
 								})]
-							}), W && /* @__PURE__ */ p("div", {
+							}), G && /* @__PURE__ */ m("div", {
 								style: {
 									paddingLeft: "var(--space-formGap)",
-									borderLeft: "2px solid var(--color-border)",
+									borderLeft: "2px solid var(--color-border-subtle)",
 									display: "flex",
 									flexDirection: "column",
 									gap: "var(--space-controlGap)"
 								},
 								children: [
-									/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+									/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
 										style: {
 											display: "block",
 											fontSize: "var(--font-size-body-sm)",
@@ -540,17 +569,17 @@ var h = {
 											color: "var(--color-text-secondary)",
 											marginBottom: "var(--space-controlGap)"
 										},
-										children: "Dialog Title"
-									}), /* @__PURE__ */ f(o, {
-										value: Te,
-										onChange: (e) => K(e.target.value),
-										disabled: b,
+										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__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+									/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
 										style: {
 											display: "block",
 											fontSize: "var(--font-size-body-sm)",
@@ -558,24 +587,24 @@ var h = {
 											color: "var(--color-text-secondary)",
 											marginBottom: "var(--space-controlGap)"
 										},
-										children: "Message"
-									}), /* @__PURE__ */ f(he, {
-										value: Ee,
-										onChange: (e) => q(e.target.value),
+										children: S("bigconsole.widget.actions.confirm.messageLabel", "Message")
+									}), /* @__PURE__ */ p(_e, {
+										value: Oe,
+										onChange: (e) => Y(e.target.value),
 										rows: 2,
-										disabled: b,
+										disabled: x,
 										style: {
 											fontSize: "var(--font-size-body-sm)",
 											resize: "none"
 										}
 									})] }),
-									/* @__PURE__ */ p("div", {
+									/* @__PURE__ */ m("div", {
 										style: {
 											display: "grid",
-											gridTemplateColumns: "1fr 1fr",
+											gridTemplateColumns: "repeat(auto-fit, minmax(11rem, 1fr))",
 											gap: "var(--space-controlGap)"
 										},
-										children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+										children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
 											style: {
 												display: "block",
 												fontSize: "var(--font-size-body-sm)",
@@ -583,16 +612,16 @@ var h = {
 												color: "var(--color-text-secondary)",
 												marginBottom: "var(--space-controlGap)"
 											},
-											children: "Confirm Button"
-										}), /* @__PURE__ */ f(o, {
-											value: J,
-											onChange: (e) => Y(e.target.value),
-											disabled: b,
+											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__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+										})] }), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
 											style: {
 												display: "block",
 												fontSize: "var(--font-size-body-sm)",
@@ -600,11 +629,11 @@ var h = {
 												color: "var(--color-text-secondary)",
 												marginBottom: "var(--space-controlGap)"
 											},
-											children: "Cancel Button"
-										}), /* @__PURE__ */ f(o, {
-											value: X,
+											children: S("bigconsole.widget.actions.confirm.cancelButtonLabel", "Cancel Button")
+										}), /* @__PURE__ */ p(s, {
+											value: Ae,
 											onChange: (e) => Z(e.target.value),
-											disabled: b,
+											disabled: x,
 											style: {
 												height: "var(--size-controlHeight-sm)",
 												fontSize: "var(--font-size-body-sm)"
@@ -614,162 +643,174 @@ var h = {
 								]
 							})]
 						}),
-						/* @__PURE__ */ p("div", {
+						/* @__PURE__ */ m("div", {
 							style: {
 								paddingTop: "var(--space-formGap)",
-								borderTop: "1px solid var(--color-border)"
+								borderTop: "1px solid var(--color-border-subtle)"
 							},
-							children: [/* @__PURE__ */ p("button", {
-								type: "button",
-								onClick: () => we((e) => !e),
+							children: [/* @__PURE__ */ p("h3", {
 								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)"
+									...xe,
+									margin: 0
 								},
-								children: [f(Ce ? te : ne, { style: {
-									height: "14px",
-									width: "14px"
-								} }), "Advanced"]
-							}), Ce && /* @__PURE__ */ p("div", {
+								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__ */ p("div", { children: [
-									/* @__PURE__ */ f("label", {
-										style: h,
-										children: "Event name (id)"
+								children: [/* @__PURE__ */ m("div", { children: [
+									/* @__PURE__ */ p("label", {
+										style: g,
+										children: S("bigconsole.widget.actions.advanced.eventNameLabel", "Event name (id)")
 									}),
-									/* @__PURE__ */ f(o, {
-										value: x && v ? v.name : E,
+									/* @__PURE__ */ p(s, {
+										value: C && y ? y.name : D,
 										onChange: (e) => {
-											D(e.target.value), k(!0);
+											O(e.target.value), A(!0);
 										},
-										placeholder: "auto from label",
-										disabled: b || x,
+										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__ */ p("p", {
-										style: g,
+									/* @__PURE__ */ m("p", {
+										style: _,
 										children: [
-											"Emits",
+											S("bigconsole.widget.actions.advanced.emitsPrefix", "Emits"),
 											" ",
-											/* @__PURE__ */ p("code", { children: [
+											/* @__PURE__ */ m("code", { children: [
 												"widget:",
-												x && v ? v.name : m(E || w) || "<name>",
+												C && y ? y.name : h(D || T) || "<name>",
 												":clicked"
 											] }),
-											". ",
-											x ? "Fixed once created." : "Auto-derived from the label."
+											".",
+											" ",
+											C ? S("bigconsole.widget.actions.advanced.emitsFixed", "Fixed once created.") : S("bigconsole.widget.actions.advanced.emitsAutoDerived", "Auto-derived from the label.")
 										]
 									})
-								] }), /* @__PURE__ */ p("div", {
+								] }), /* @__PURE__ */ m("div", {
 									style: {
 										display: "flex",
 										alignItems: "center",
 										gap: "var(--space-sectionGap)"
 									},
-									children: [/* @__PURE__ */ p("label", {
+									children: [/* @__PURE__ */ m("label", {
 										style: {
 											display: "flex",
 											alignItems: "center",
 											gap: "var(--space-controlGap)",
 											cursor: "pointer"
 										},
-										children: [/* @__PURE__ */ f(se, {
+										children: [/* @__PURE__ */ p(o, {
 											checked: B,
 											onCheckedChange: (e) => V(e === !0),
-											disabled: b
-										}), /* @__PURE__ */ f("span", {
+											disabled: x
+										}), /* @__PURE__ */ p("span", {
 											style: {
 												fontSize: "var(--font-size-body-sm)",
 												color: "var(--color-text-primary)"
 											},
-											children: "Disabled"
+											children: S("bigconsole.widget.actions.advanced.disabled", "Disabled")
 										})]
-									}), /* @__PURE__ */ p("label", {
+									}), /* @__PURE__ */ m("label", {
 										style: {
 											display: "flex",
 											alignItems: "center",
 											gap: "var(--space-controlGap)",
 											cursor: "pointer"
 										},
-										children: [/* @__PURE__ */ f(se, {
+										children: [/* @__PURE__ */ p(o, {
 											checked: H,
 											onCheckedChange: (e) => U(e === !0),
-											disabled: b
-										}), /* @__PURE__ */ f("span", {
+											disabled: x
+										}), /* @__PURE__ */ p("span", {
 											style: {
 												fontSize: "var(--font-size-body-sm)",
 												color: "var(--color-text-primary)"
 											},
-											children: "Hidden"
+											children: S("bigconsole.widget.actions.advanced.hidden", "Hidden")
 										})]
 									})]
 								})]
 							})]
 						})
 					]
-				}), /* @__PURE__ */ p(de, {
+				}), /* @__PURE__ */ m(pe, {
 					style: {
 						padding: "var(--space-formGap) var(--space-pagePadding)",
-						borderTop: "1px solid var(--color-border)",
+						borderTop: "1px solid var(--color-border-subtle)",
 						backgroundColor: "var(--color-bg-sunken)",
 						display: "flex",
 						justifyContent: "flex-end",
 						gap: "var(--space-controlGap)"
 					},
-					children: [/* @__PURE__ */ f(oe, {
+					children: [/* @__PURE__ */ p(le, {
 						type: "button",
 						variant: "outline",
-						onClick: xe,
-						disabled: b,
+						onClick: Ce,
+						disabled: x,
 						style: { height: "var(--size-controlHeight-md)" },
-						children: "Cancel"
-					}), /* @__PURE__ */ f(ee, {
-						permission: x ? e.WIDGET_ACTION_UPDATE : e.WIDGET_ACTION_CREATE,
+						children: S("bigconsole.widget.actions.footer.cancel", "Cancel")
+					}), /* @__PURE__ */ p(ne, {
+						permission: C ? t.WIDGET_ACTION_UPDATE : t.WIDGET_ACTION_CREATE,
 						deniedBehavior: "disable",
-						children: /* @__PURE__ */ f(oe, {
+						children: /* @__PURE__ */ p(le, {
 							type: "submit",
-							disabled: b || !w.trim(),
+							disabled: x || !T.trim(),
 							style: {
 								height: "var(--size-controlHeight-md)",
 								backgroundColor: "var(--color-action-primary-bg)"
 							},
-							children: b ? /* @__PURE__ */ p("span", {
+							children: x ? /* @__PURE__ */ m("span", {
 								style: {
 									display: "flex",
 									alignItems: "center",
 									gap: "var(--space-iconGap)"
 								},
-								children: [/* @__PURE__ */ f(me, { style: {
+								children: [/* @__PURE__ */ p(ge, { style: {
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
-								} }), "Saving..."]
-							}) : /* @__PURE__ */ p("span", {
+								} }), S("bigconsole.widget.actions.footer.saving", "Saving...")]
+							}) : /* @__PURE__ */ m("span", {
 								style: {
 									display: "flex",
 									alignItems: "center",
 									gap: "var(--space-iconGap)"
 								},
-								children: [f(x ? re : ie, { style: {
+								children: [p(C ? ae : oe, { style: {
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
-								} }), x ? "Update Button" : "Add Button"]
+								} }), C ? S("bigconsole.widget.actions.footer.updateButton", "Update Button") : S("bigconsole.widget.actions.footer.addButton", "Add Button")]
 							})
 						})
 					})]
@@ -779,6 +820,6 @@ var h = {
 	});
 });
 //#endregion
-export { v as default };
+export { y as default };
 
 //# sourceMappingURL=ActionConfigDialog.js.map