@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/customWidget/CustomWidgetProposalPanel.js

@@ -1,15 +1,23 @@
-import e from "../components/widgets/WidgetErrorBoundary.js";
-import t from "../renderers/adapters/BigConsoleRenderer.js";
-import { PROPOSABLE_WIDGET_TYPES as n, derivePreviewState as r, validateProposal as i } from "./proposalContract.js";
-import { localProposalSource as a } from "./proposalSource.js";
-import { memo as o, useCallback as s, useEffect as c, useMemo as l, useState as u } from "react";
-import { AlertTriangle as ee, Check as d, Loader2 as f, RefreshCw as p, Sparkles as m, X as te } from "lucide-react";
-import { useI18n as h } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Button as g, Input as _, Label as v, Textarea as y } from "@burdenoff/fe-libs/ui";
-import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { Section as e, SectionStack as t } from "../components/common/Section.js";
+import "../components/common/index.js";
+import n from "../components/widgets/WidgetErrorBoundary.js";
+import ee from "../renderers/adapters/BigConsoleRenderer.js";
+import { PROPOSABLE_WIDGET_TYPES as te, derivePreviewState as r, validateProposal as i } from "./proposalContract.js";
+import { localProposalSource as ne } from "./proposalSource.js";
+import { memo as a, useCallback as o, useEffect as re, useMemo as s, useState as c } from "react";
+import { AlertTriangle as l, Check as u, Loader2 as d, RefreshCw as ie, Sparkles as ae, X as oe } from "lucide-react";
+import { useI18n as se } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Button as f, Input as p, Label as m, Textarea as ce } from "@burdenoff/fe-libs/ui";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/bigconsole/customWidget/CustomWidgetProposalPanel.tsx
-var ne = "w-full";
-function C(e, t) {
+var v = "w-full", y = {
+	loading: "neutral",
+	valid: "neutral",
+	"no-data": "warning",
+	"field-mismatch": "warning",
+	"access-error": "danger"
+};
+function b(e, t) {
 	let n = (/* @__PURE__ */ new Date(0)).toISOString();
 	return {
 		id: `preview-${e.id}`,
@@ -37,14 +45,14 @@ function C(e, t) {
 		updatedAt: n
 	};
 }
-function re(e) {
+function x(e) {
 	if (Array.isArray(e)) {
 		let t = e.find((e) => e && typeof e == "object");
 		return t ? Object.keys(t) : [];
 	}
 	if (e && typeof e == "object") return Object.keys(e);
 }
-function ie(e) {
+function S(e) {
 	if (Array.isArray(e)) return e.length;
 	if (e && typeof e == "object") {
 		let t = e.cells;
@@ -52,400 +60,414 @@ function ie(e) {
 	}
 	return 0;
 }
-var w = o(function({ sinks: o, parsers: w, resolvePreviewData: T, onApprove: E, onClose: D, source: O = a }) {
-	let { t: k } = h(), A = l(() => ({
+var C = a(function({ sinks: a, parsers: C, resolvePreviewData: w, onApprove: T, onClose: E, source: D = ne }) {
+	let { t: O } = se(), k = s(() => ({
 		loading: {
-			title: k("bigconsole.widget.customWidget.preview.loading.title", "Building preview…"),
-			body: k("bigconsole.widget.customWidget.preview.loading.body", "Running the parser against the selected DataSink.")
+			title: O("bigconsole.widget.customWidget.preview.loading.title", "Building preview…"),
+			body: O("bigconsole.widget.customWidget.preview.loading.body", "Running the parser against the selected DataSink.")
 		},
 		valid: {
-			title: k("bigconsole.widget.customWidget.preview.valid.title", "Preview"),
+			title: O("bigconsole.widget.customWidget.preview.valid.title", "Preview"),
 			body: ""
 		},
 		"no-data": {
-			title: k("bigconsole.widget.customWidget.preview.noData.title", "No data returned"),
-			body: k("bigconsole.widget.customWidget.preview.noData.body", "The binding is valid but the parser returned no rows. The widget will render empty until the sink has data.")
+			title: O("bigconsole.widget.customWidget.preview.noData.title", "No data returned"),
+			body: O("bigconsole.widget.customWidget.preview.noData.body", "The binding is valid but the parser returned no rows. The widget will render empty until the sink has data.")
 		},
 		"field-mismatch": {
-			title: k("bigconsole.widget.customWidget.preview.fieldMismatch.title", "Field mismatch"),
-			body: k("bigconsole.widget.customWidget.preview.fieldMismatch.body", "Some mapped fields are not present in the parser output. Fix the mapping below before approving.")
+			title: O("bigconsole.widget.customWidget.preview.fieldMismatch.title", "Field mismatch"),
+			body: O("bigconsole.widget.customWidget.preview.fieldMismatch.body", "Some mapped fields are not present in the parser output. Fix the mapping below before approving.")
 		},
 		"access-error": {
-			title: k("bigconsole.widget.customWidget.preview.accessError.title", "Cannot read this data"),
-			body: k("bigconsole.widget.customWidget.preview.accessError.body", "You do not have access to the proposed DataSink or parser in this workspace.")
+			title: O("bigconsole.widget.customWidget.preview.accessError.title", "Cannot read this data"),
+			body: O("bigconsole.widget.customWidget.preview.accessError.body", "You do not have access to the proposed DataSink or parser in this workspace.")
 		}
-	}), [k]), [j, ae] = u(""), [M, N] = u(null), [P, F] = u(!1), [I, L] = u(!1), [R, z] = u(null), [B, V] = u(void 0), [H, U] = u(!1), [W, G] = u(!1), K = l(() => o.map((e) => e.id), [o]), q = l(() => w.map((e) => e.id), [w]), J = l(() => re(B), [B]), Y = l(() => M ? i(M, {
-		permittedDataSinkIds: K,
-		permittedParserIds: q,
-		availableFields: J
+	}), [O]), [A, le] = c(""), [j, M] = c(null), [N, P] = c(!1), [F, I] = c(!1), [L, R] = c(null), [z, B] = c(void 0), [V, H] = c(!1), [U, W] = c(!1), G = s(() => a.map((e) => e.id), [a]), K = s(() => C.map((e) => e.id), [C]), q = s(() => x(z), [z]), J = s(() => j ? i(j, {
+		permittedDataSinkIds: G,
+		permittedParserIds: K,
+		availableFields: q
 	}) : {
 		issues: [],
 		canApprove: !1
 	}, [
-		M,
+		j,
+		G,
 		K,
-		q,
-		J
-	]), X = l(() => r(Y, {
-		loading: H,
-		accessError: W,
-		rowCount: ie(B)
+		q
+	]), Y = s(() => r(J, {
+		loading: V,
+		accessError: U,
+		rowCount: S(z)
 	}), [
-		Y,
-		H,
-		W,
-		B
+		J,
+		V,
+		U,
+		z
 	]);
-	c(() => {
-		if (!M || !M.binding.dataSinkId) {
-			V(void 0);
+	re(() => {
+		if (!j || !j.binding.dataSinkId) {
+			B(void 0);
 			return;
 		}
 		let e = !1;
-		return U(!0), G(!1), T(M).then((t) => {
-			e || V(t);
+		return H(!0), W(!1), w(j).then((t) => {
+			e || B(t);
 		}).catch(() => {
-			e || (V(void 0), G(!0));
+			e || (B(void 0), W(!0));
 		}).finally(() => {
-			e || U(!1);
+			e || H(!1);
 		}), () => {
 			e = !0;
 		};
-	}, [M ? `${M.binding.dataSinkId}|${M.binding.parserId ?? ""}|${M.binding.dataPath ?? ""}` : "", T]);
-	let oe = s(async () => {
-		if (j.trim()) {
-			F(!0), z(null);
+	}, [j ? `${j.binding.dataSinkId}|${j.binding.parserId ?? ""}|${j.binding.dataPath ?? ""}` : "", w]);
+	let ue = o(async () => {
+		if (A.trim()) {
+			P(!0), R(null);
 			try {
-				N(await O.propose({
-					prompt: j.trim(),
-					sinks: o,
-					parsers: w
+				M(await D.propose({
+					prompt: A.trim(),
+					sinks: a,
+					parsers: C
 				}));
 			} finally {
-				F(!1);
+				P(!1);
 			}
 		}
 	}, [
-		j,
-		O,
-		o,
-		w
-	]), Z = s((e) => {
-		N((t) => t && e(t));
-	}, []), se = s(() => {
-		N(null), V(void 0), G(!1), z(null);
-	}, []), ce = s(async () => {
-		if (!(!M || !Y.canApprove)) {
-			L(!0), z(null);
+		A,
+		D,
+		a,
+		C
+	]), X = o((e) => {
+		M((t) => t && e(t));
+	}, []), de = o(() => {
+		M(null), B(void 0), W(!1), R(null);
+	}, []), Z = o(async () => {
+		if (!(!j || !J.canApprove)) {
+			I(!0), R(null);
 			try {
-				await E(M), D();
+				await T(j), E();
 			} catch (e) {
-				z(e instanceof Error ? e.message : k("bigconsole.widget.customWidget.error.couldNotSaveWidget", "Could not save the widget."));
+				R(e instanceof Error ? e.message : O("bigconsole.widget.customWidget.error.couldNotSaveWidget", "Could not save the widget."));
 			} finally {
-				L(!1);
+				I(!1);
 			}
 		}
 	}, [
-		M,
-		Y.canApprove,
+		j,
+		J.canApprove,
+		T,
 		E,
-		D,
-		k
-	]), Q = Y.issues.filter((e) => e.severity === "error"), $ = Y.issues.filter((e) => e.severity === "warning");
-	return /* @__PURE__ */ S("section", {
+		O
+	]), Q = J.issues.filter((e) => e.severity === "error"), $ = J.issues.filter((e) => e.severity === "warning");
+	return /* @__PURE__ */ g("section", {
 		"data-testid": "custom-widget-proposal-panel",
-		"aria-label": k("bigconsole.widget.customWidget.panel.ariaLabel", "AI custom widget builder"),
-		className: "flex h-full w-full flex-col gap-4 overflow-y-auto p-4",
-		children: [/* @__PURE__ */ S("div", {
-			className: "flex flex-col gap-2",
-			children: [
-				/* @__PURE__ */ S(v, {
-					htmlFor: "custom-widget-prompt",
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ x(m, {
-						className: "size-4",
+		"aria-label": O("bigconsole.widget.customWidget.panel.ariaLabel", "AI custom widget builder"),
+		className: "flex h-full w-full min-w-0 flex-col overflow-y-auto p-4",
+		children: /* @__PURE__ */ _(t, { children: [/* @__PURE__ */ g(e, {
+			title: O("bigconsole.widget.customWidget.prompt.label", "Describe the widget you need"),
+			description: "Plain English. The assistant proposes a typed widget you can edit before anything is saved.",
+			icon: /* @__PURE__ */ g(ae, {
+				className: "size-4",
+				"aria-hidden": "true"
+			}),
+			actions: /* @__PURE__ */ _("div", {
+				className: "flex flex-wrap gap-2",
+				children: [/* @__PURE__ */ _(f, {
+					"data-testid": "custom-widget-generate",
+					onClick: ue,
+					disabled: !A.trim() || N,
+					children: [N ? /* @__PURE__ */ g(d, {
+						className: "mr-2 size-4 animate-spin",
 						"aria-hidden": "true"
-					}), k("bigconsole.widget.customWidget.prompt.label", "Describe the widget you need")]
-				}),
-				/* @__PURE__ */ x(y, {
+					}) : null, j ? O("bigconsole.widget.customWidget.action.regenerate", "Regenerate") : O("bigconsole.widget.customWidget.action.generateProposal", "Generate proposal")]
+				}), j ? /* @__PURE__ */ _(f, {
+					variant: "outline",
+					"data-testid": "custom-widget-reject",
+					onClick: de,
+					children: [/* @__PURE__ */ g(oe, {
+						className: "mr-1 size-4",
+						"aria-hidden": "true"
+					}), O("bigconsole.widget.customWidget.action.reject", "Reject")]
+				}) : null]
+			}),
+			children: /* @__PURE__ */ _("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ g(m, {
+					htmlFor: "custom-widget-prompt",
+					children: "What should it show?"
+				}), /* @__PURE__ */ g(ce, {
 					id: "custom-widget-prompt",
 					"data-testid": "custom-widget-prompt",
-					value: j,
-					onChange: (e) => ae(e.target.value),
-					placeholder: k("bigconsole.widget.customWidget.prompt.placeholder", "e.g. a funnel of signup conversion stages"),
+					value: A,
+					onChange: (e) => le(e.target.value),
+					placeholder: O("bigconsole.widget.customWidget.prompt.placeholder", "e.g. a funnel of signup conversion stages"),
 					rows: 3
+				})]
+			})
+		}), j ? /* @__PURE__ */ _(h, { children: [
+			/* @__PURE__ */ _(e, {
+				emphasis: "primary",
+				tone: y[Y],
+				title: k[Y].title,
+				description: "Rendered by the real widget renderer against the real parser output — what you approve is what you get.",
+				meta: /* @__PURE__ */ g("span", {
+					"data-testid": "custom-widget-preview-state",
+					"data-state": Y,
+					className: "rounded-pill bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary",
+					children: Y
 				}),
-				/* @__PURE__ */ S("div", {
-					className: "flex flex-wrap gap-2",
-					children: [/* @__PURE__ */ S(g, {
-						"data-testid": "custom-widget-generate",
-						onClick: oe,
-						disabled: !j.trim() || P,
-						children: [P ? /* @__PURE__ */ x(f, {
+				children: [/* @__PURE__ */ g("div", {
+					"data-testid": "custom-widget-preview",
+					className: "min-h-[220px] min-w-0 rounded-card border border-[var(--color-border-subtle)] bg-bg-surface p-2",
+					children: Y === "loading" ? /* @__PURE__ */ _("div", {
+						className: "flex h-[200px] items-center justify-center text-text-secondary",
+						children: [/* @__PURE__ */ g(d, {
 							className: "mr-2 size-4 animate-spin",
 							"aria-hidden": "true"
-						}) : null, M ? k("bigconsole.widget.customWidget.action.regenerate", "Regenerate") : k("bigconsole.widget.customWidget.action.generateProposal", "Generate proposal")]
-					}), M ? /* @__PURE__ */ S(g, {
-						variant: "outline",
-						"data-testid": "custom-widget-reject",
-						onClick: se,
-						children: [/* @__PURE__ */ x(te, {
-							className: "mr-1 size-4",
-							"aria-hidden": "true"
-						}), k("bigconsole.widget.customWidget.action.reject", "Reject")]
-					}) : null]
-				})
-			]
-		}), M ? /* @__PURE__ */ S(b, { children: [
-			/* @__PURE__ */ S("div", {
-				className: "flex flex-col gap-2",
-				children: [
-					/* @__PURE__ */ S("div", {
-						className: "flex items-center justify-between gap-2",
-						children: [/* @__PURE__ */ x("h3", {
-							className: "text-sm font-semibold text-text-primary",
-							children: A[X].title
-						}), /* @__PURE__ */ x("span", {
-							"data-testid": "custom-widget-preview-state",
-							"data-state": X,
-							className: "rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary",
-							children: X
+						}), /* @__PURE__ */ g("span", {
+							className: "text-sm",
+							children: k.loading.body
 						})]
-					}),
-					/* @__PURE__ */ x("div", {
-						"data-testid": "custom-widget-preview",
-						className: "min-h-[220px] rounded-lg border border-border-default bg-bg-surface p-2",
-						children: X === "loading" ? /* @__PURE__ */ S("div", {
-							className: "flex h-[200px] items-center justify-center text-text-secondary",
-							children: [/* @__PURE__ */ x(f, {
-								className: "mr-2 size-4 animate-spin",
-								"aria-hidden": "true"
-							}), /* @__PURE__ */ x("span", {
-								className: "text-sm",
-								children: A.loading.body
-							})]
-						}) : X === "valid" ? /* @__PURE__ */ x("div", {
-							className: "h-[200px]",
-							children: /* @__PURE__ */ x(e, {
-								widgetId: `preview-${M.id}`,
-								children: /* @__PURE__ */ x(t, {
-									widget: C(M, k("bigconsole.widget.customWidget.untitledWidget", "Untitled widget")),
-									data: B
-								})
+					}) : Y === "valid" ? /* @__PURE__ */ g("div", {
+						className: "h-[200px]",
+						children: /* @__PURE__ */ g(n, {
+							widgetId: `preview-${j.id}`,
+							children: /* @__PURE__ */ g(ee, {
+								widget: b(j, O("bigconsole.widget.customWidget.untitledWidget", "Untitled widget")),
+								data: z
 							})
-						}) : /* @__PURE__ */ S("div", {
-							className: "flex h-[200px] flex-col items-center justify-center gap-2 px-4 text-center",
-							children: [
-								/* @__PURE__ */ x(ee, {
-									className: "size-5 text-status-warning-text",
-									"aria-hidden": "true"
-								}),
-								/* @__PURE__ */ x("p", {
-									className: "text-sm text-text-secondary",
-									children: A[X].body
-								}),
-								X === "access-error" ? /* @__PURE__ */ S(g, {
-									size: "sm",
-									variant: "outline",
-									onClick: () => Z((e) => ({ ...e })),
-									children: [/* @__PURE__ */ x(p, {
-										className: "mr-1 size-3.5",
-										"aria-hidden": "true"
-									}), k("bigconsole.widget.customWidget.action.retry", "Retry")]
-								}) : null
-							]
 						})
-					}),
-					M.rationale ? /* @__PURE__ */ x("p", {
-						className: "text-xs text-text-secondary",
-						"data-testid": "custom-widget-rationale",
-						children: M.rationale
-					}) : null
-				]
+					}) : /* @__PURE__ */ _("div", {
+						className: "flex h-[200px] flex-col items-center justify-center gap-2 px-4 text-center",
+						children: [
+							/* @__PURE__ */ g(l, {
+								className: "size-5 text-[var(--color-status-warning-text)]",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ g("p", {
+								className: "text-sm text-text-secondary",
+								children: k[Y].body
+							}),
+							Y === "access-error" ? /* @__PURE__ */ _(f, {
+								size: "sm",
+								variant: "outline",
+								onClick: () => X((e) => ({ ...e })),
+								children: [/* @__PURE__ */ g(ie, {
+									className: "mr-1 size-3.5",
+									"aria-hidden": "true"
+								}), O("bigconsole.widget.customWidget.action.retry", "Retry")]
+							}) : null
+						]
+					})
+				}), j.rationale ? /* @__PURE__ */ g("p", {
+					className: "mt-2 text-xs text-text-secondary",
+					"data-testid": "custom-widget-rationale",
+					children: j.rationale
+				}) : null]
 			}),
-			Q.length > 0 || $.length > 0 ? /* @__PURE__ */ x("ul", {
-				"data-testid": "custom-widget-issues",
-				className: "flex flex-col gap-1",
-				children: [...Q, ...$].map((e) => /* @__PURE__ */ x("li", {
-					"data-severity": e.severity,
-					className: `rounded-md px-2 py-1 text-xs ${e.severity === "error" ? "bg-status-error-bg/10 text-status-error-text" : "bg-status-warning-bg/10 text-status-warning-text"}`,
-					children: e.message
-				}, `${e.code}-${e.path ?? ""}`))
+			Q.length > 0 || $.length > 0 ? /* @__PURE__ */ g(e, {
+				tone: Q.length > 0 ? "danger" : "warning",
+				padding: "compact",
+				headingLevel: 3,
+				title: Q.length > 0 ? `${Q.length} ${Q.length === 1 ? "problem" : "problems"} to fix before approving` : `${$.length} ${$.length === 1 ? "warning" : "warnings"}`,
+				children: /* @__PURE__ */ g("ul", {
+					"data-testid": "custom-widget-issues",
+					className: "flex min-w-0 flex-col gap-1",
+					children: [...Q, ...$].map((e) => /* @__PURE__ */ g("li", {
+						"data-severity": e.severity,
+						className: `break-words text-xs ${e.severity === "error" ? "text-[var(--color-status-error-text)]" : "text-[var(--color-status-warning-text)]"}`,
+						children: e.message
+					}, `${e.code}-${e.path ?? ""}`))
+				})
 			}) : null,
-			/* @__PURE__ */ S("div", {
-				className: "flex flex-col gap-3",
-				children: [
-					/* @__PURE__ */ x("h3", {
-						className: "text-sm font-semibold text-text-primary",
-						children: k("bigconsole.widget.customWidget.proposal.heading", "Proposal")
-					}),
-					/* @__PURE__ */ S("div", {
-						className: "flex flex-col gap-1",
-						children: [/* @__PURE__ */ x(v, {
-							htmlFor: "custom-widget-title",
-							children: k("bigconsole.widget.customWidget.field.title", "Title")
-						}), /* @__PURE__ */ x(_, {
-							id: "custom-widget-title",
-							"data-testid": "custom-widget-title",
-							className: ne,
-							value: M.presentation.title,
-							onChange: (e) => Z((t) => ({
-								...t,
-								presentation: {
-									...t.presentation,
-									title: e.target.value
-								}
-							}))
-						})]
-					}),
-					/* @__PURE__ */ S("div", {
-						className: "flex flex-col gap-1",
-						children: [/* @__PURE__ */ x(v, {
-							htmlFor: "custom-widget-type",
-							children: k("bigconsole.widget.customWidget.field.widgetType", "Widget type")
-						}), /* @__PURE__ */ x("select", {
-							id: "custom-widget-type",
-							"data-testid": "custom-widget-type",
-							value: M.widgetType,
-							onChange: (e) => Z((t) => ({
-								...t,
-								widgetType: e.target.value
-							})),
-							className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
-							children: n.map((e) => /* @__PURE__ */ x("option", {
-								value: e,
-								children: e
-							}, e))
-						})]
-					}),
-					/* @__PURE__ */ S("div", {
-						className: "flex flex-col gap-1",
-						children: [/* @__PURE__ */ x(v, {
-							htmlFor: "custom-widget-sink",
-							children: k("bigconsole.widget.customWidget.field.dataSink", "DataSink")
-						}), /* @__PURE__ */ S("select", {
-							id: "custom-widget-sink",
-							"data-testid": "custom-widget-sink",
-							value: M.binding.dataSinkId,
-							onChange: (e) => {
-								let t = o.find((t) => t.id === e.target.value);
-								Z((n) => ({
-									...n,
-									binding: {
-										...n.binding,
-										dataSinkId: e.target.value,
-										dataSinkKey: t?.key
-									}
-								}));
-							},
-							className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
-							children: [/* @__PURE__ */ x("option", {
-								value: "",
-								children: k("bigconsole.widget.customWidget.field.selectDataSink", "Select a DataSink…")
-							}), o.map((e) => /* @__PURE__ */ x("option", {
-								value: e.id,
-								children: e.name || e.key
-							}, e.id))]
-						})]
-					}),
-					/* @__PURE__ */ S("div", {
-						className: "flex flex-col gap-1",
-						children: [/* @__PURE__ */ x(v, {
-							htmlFor: "custom-widget-parser",
-							children: k("bigconsole.widget.customWidget.field.parser", "Parser")
-						}), /* @__PURE__ */ S("select", {
-							id: "custom-widget-parser",
-							"data-testid": "custom-widget-parser",
-							value: M.binding.parserId ?? "",
-							onChange: (e) => {
-								let t = w.find((t) => t.id === e.target.value);
-								Z((n) => ({
-									...n,
-									binding: {
-										...n.binding,
-										parserId: e.target.value || void 0,
-										parserName: t?.name
+			/* @__PURE__ */ g(e, {
+				title: O("bigconsole.widget.customWidget.proposal.heading", "Proposal"),
+				description: "Every field is editable — the assistant proposes, you dispose.",
+				"data-testid": "custom-widget-proposal-fields",
+				children: /* @__PURE__ */ _("div", {
+					className: "flex flex-col gap-3",
+					children: [
+						/* @__PURE__ */ _("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ g(m, {
+								htmlFor: "custom-widget-title",
+								children: O("bigconsole.widget.customWidget.field.title", "Title")
+							}), /* @__PURE__ */ g(p, {
+								id: "custom-widget-title",
+								"data-testid": "custom-widget-title",
+								className: v,
+								value: j.presentation.title,
+								onChange: (e) => X((t) => ({
+									...t,
+									presentation: {
+										...t.presentation,
+										title: e.target.value
 									}
-								}));
-							},
-							className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
-							children: [/* @__PURE__ */ x("option", {
-								value: "",
-								children: k("bigconsole.widget.customWidget.field.noParser", "No parser")
-							}), w.map((e) => /* @__PURE__ */ x("option", {
-								value: e.id,
-								children: e.name
-							}, e.id))]
-						})]
-					}),
-					Object.keys(M.fieldMapping).length > 0 ? /* @__PURE__ */ S("fieldset", {
-						className: "flex flex-col gap-2",
-						"data-testid": "custom-widget-field-mapping",
-						children: [
-							/* @__PURE__ */ x("legend", {
-								className: "text-sm font-medium text-text-primary",
-								children: k("bigconsole.widget.customWidget.fieldMapping.legend", "Field mapping")
-							}),
-							Object.entries(M.fieldMapping).map(([e, t]) => /* @__PURE__ */ S("div", {
-								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ x(v, {
-									htmlFor: `custom-widget-field-${e}`,
+								}))
+							})]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ g(m, {
+								htmlFor: "custom-widget-type",
+								children: O("bigconsole.widget.customWidget.field.widgetType", "Widget type")
+							}), /* @__PURE__ */ g("select", {
+								id: "custom-widget-type",
+								"data-testid": "custom-widget-type",
+								value: j.widgetType,
+								onChange: (e) => X((t) => ({
+									...t,
+									widgetType: e.target.value
+								})),
+								className: "w-full rounded-md border border-[var(--color-border-default)] bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+								children: te.map((e) => /* @__PURE__ */ g("option", {
+									value: e,
 									children: e
-								}), /* @__PURE__ */ x(_, {
-									id: `custom-widget-field-${e}`,
-									"data-testid": `custom-widget-field-${e}`,
-									value: t,
-									onChange: (t) => Z((n) => ({
+								}, e))
+							})]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ g(m, {
+								htmlFor: "custom-widget-sink",
+								children: O("bigconsole.widget.customWidget.field.dataSink", "DataSink")
+							}), /* @__PURE__ */ _("select", {
+								id: "custom-widget-sink",
+								"data-testid": "custom-widget-sink",
+								value: j.binding.dataSinkId,
+								onChange: (e) => {
+									let t = a.find((t) => t.id === e.target.value);
+									X((n) => ({
 										...n,
-										fieldMapping: {
-											...n.fieldMapping,
-											[e]: t.target.value
+										binding: {
+											...n.binding,
+											dataSinkId: e.target.value,
+											dataSinkKey: t?.key
 										}
-									}))
-								})]
-							}, e)),
-							J?.length ? /* @__PURE__ */ x("p", {
-								className: "text-xs text-text-secondary",
-								children: k("bigconsole.widget.customWidget.fieldMapping.available", "Available: {{fields}}", { fields: J.join(", ") })
-							}) : null
-						]
-					}) : null
-				]
+									}));
+								},
+								className: "w-full rounded-md border border-[var(--color-border-default)] bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+								children: [/* @__PURE__ */ g("option", {
+									value: "",
+									children: O("bigconsole.widget.customWidget.field.selectDataSink", "Select a DataSink…")
+								}), a.map((e) => /* @__PURE__ */ g("option", {
+									value: e.id,
+									children: e.name || e.key
+								}, e.id))]
+							})]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ g(m, {
+								htmlFor: "custom-widget-parser",
+								children: O("bigconsole.widget.customWidget.field.parser", "Parser")
+							}), /* @__PURE__ */ _("select", {
+								id: "custom-widget-parser",
+								"data-testid": "custom-widget-parser",
+								value: j.binding.parserId ?? "",
+								onChange: (e) => {
+									let t = C.find((t) => t.id === e.target.value);
+									X((n) => ({
+										...n,
+										binding: {
+											...n.binding,
+											parserId: e.target.value || void 0,
+											parserName: t?.name
+										}
+									}));
+								},
+								className: "w-full rounded-md border border-[var(--color-border-default)] bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+								children: [/* @__PURE__ */ g("option", {
+									value: "",
+									children: O("bigconsole.widget.customWidget.field.noParser", "No parser")
+								}), C.map((e) => /* @__PURE__ */ g("option", {
+									value: e.id,
+									children: e.name
+								}, e.id))]
+							})]
+						}),
+						Object.keys(j.fieldMapping).length > 0 ? /* @__PURE__ */ _("fieldset", {
+							className: "flex flex-col gap-2",
+							"data-testid": "custom-widget-field-mapping",
+							children: [
+								/* @__PURE__ */ g("legend", {
+									className: "text-sm font-medium text-text-primary",
+									children: O("bigconsole.widget.customWidget.fieldMapping.legend", "Field mapping")
+								}),
+								Object.entries(j.fieldMapping).map(([e, t]) => /* @__PURE__ */ _("div", {
+									className: "flex flex-col gap-1",
+									children: [/* @__PURE__ */ g(m, {
+										htmlFor: `custom-widget-field-${e}`,
+										children: e
+									}), /* @__PURE__ */ g(p, {
+										id: `custom-widget-field-${e}`,
+										"data-testid": `custom-widget-field-${e}`,
+										value: t,
+										onChange: (t) => X((n) => ({
+											...n,
+											fieldMapping: {
+												...n.fieldMapping,
+												[e]: t.target.value
+											}
+										}))
+									})]
+								}, e)),
+								q?.length ? /* @__PURE__ */ g("p", {
+									className: "break-words text-xs text-text-secondary",
+									children: O("bigconsole.widget.customWidget.fieldMapping.available", "Available: {{fields}}", { fields: q.join(", ") })
+								}) : null
+							]
+						}) : null
+					]
+				})
 			}),
-			R ? /* @__PURE__ */ x("p", {
-				role: "alert",
-				className: "text-xs text-status-error-text",
-				"data-testid": "custom-widget-approve-error",
-				children: R
+			L ? /* @__PURE__ */ g(e, {
+				tone: "danger",
+				padding: "compact",
+				headingLevel: 3,
+				title: "Could not add the widget",
+				children: /* @__PURE__ */ g("p", {
+					role: "alert",
+					className: "break-words text-xs text-[var(--color-status-error-text)]",
+					"data-testid": "custom-widget-approve-error",
+					children: L
+				})
 			}) : null,
-			/* @__PURE__ */ S("div", {
-				className: "flex flex-wrap gap-2 border-t border-border-default pt-3",
-				children: [/* @__PURE__ */ S(g, {
+			/* @__PURE__ */ _("div", {
+				className: "flex flex-wrap gap-2 border-t border-[var(--color-border-subtle)] pt-3",
+				children: [/* @__PURE__ */ _(f, {
 					"data-testid": "custom-widget-approve",
-					onClick: ce,
-					disabled: !Y.canApprove || I,
-					children: [I ? /* @__PURE__ */ x(f, {
+					onClick: Z,
+					disabled: !J.canApprove || F,
+					children: [F ? /* @__PURE__ */ g(d, {
 						className: "mr-2 size-4 animate-spin",
 						"aria-hidden": "true"
-					}) : /* @__PURE__ */ x(d, {
+					}) : /* @__PURE__ */ g(u, {
 						className: "mr-1 size-4",
 						"aria-hidden": "true"
-					}), k("bigconsole.widget.customWidget.action.approveAndAdd", "Approve & add to dashboard")]
-				}), /* @__PURE__ */ x(g, {
+					}), O("bigconsole.widget.customWidget.action.approveAndAdd", "Approve & add to dashboard")]
+				}), /* @__PURE__ */ g(f, {
 					variant: "outline",
-					onClick: D,
+					onClick: E,
 					"data-testid": "custom-widget-cancel",
-					children: k("bigconsole.widget.customWidget.action.cancel", "Cancel")
+					children: O("bigconsole.widget.customWidget.action.cancel", "Cancel")
 				})]
 			})
-		] }) : /* @__PURE__ */ x("p", {
-			className: "text-sm text-text-secondary",
-			"data-testid": "custom-widget-empty",
-			children: k("bigconsole.widget.customWidget.empty", "No proposal yet. Describe a widget and the assistant will propose one for you to review — nothing is added to the dashboard until you approve it.")
-		})]
+		] }) : /* @__PURE__ */ g(e, {
+			emphasis: "muted",
+			padding: "compact",
+			title: "No proposal yet",
+			headingLevel: 3,
+			children: /* @__PURE__ */ g("p", {
+				className: "text-sm text-text-secondary",
+				"data-testid": "custom-widget-empty",
+				children: O("bigconsole.widget.customWidget.empty", "No proposal yet. Describe a widget and the assistant will propose one for you to review — nothing is added to the dashboard until you approve it.")
+			})
+		})] })
 	});
 });
 //#endregion
-export { w as default };
+export { C as default };
 
 //# sourceMappingURL=CustomWidgetProposalPanel.js.map