@epam/ai-dial-skill-editor 1.2.0-dev.112 → 1.2.0-dev.115

package/index.js

@@ -1,94 +1,98 @@
-import { MARKDOWN_EDITOR_MAX_HEIGHT_CLASS_NAME as e, MARKDOWN_EDITOR_PREVIEW_LIST_CLASS_NAME as t, buildCssVars as n, formatFileSize as r, mergeClasses as i, useAvailableHeightCap as a } from "@epam/ai-dial-chat-shared";
-import { Accordion as o, CaptionText as s, DIAL_ICON_SIZE as c, DIAL_KIT_ICON_STROKE as l, EditorThemes as u, ErrorText as d, FileDropzone as f, GhostButton as p, GhostIconButton as ee, Input as m, NeutralButton as h, Popup as g, PopupSize as te, PrimaryButton as ne, Spinner as _, Textarea as v } from "@epam/ai-dial-ui-kit";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
-import { IconArrowNarrowLeft as S, IconFileText as re, IconPlus as C, IconTrashX as ie, IconUpload as w } from "@tabler/icons-react";
-import { Suspense as T, lazy as E, useCallback as D, useEffect as O, useId as k, useMemo as A, useRef as j, useState as M } from "react";
-import { DialFileNodeType as N, DialFoldersTree as ae } from "@epam/ai-dial-react-file-manager";
-import { LazyMarkdownEditor as P } from "@epam/ai-dial-ui-kit/editors";
-i("flex flex-col", {
+import { MARKDOWN_EDITOR_MAX_HEIGHT_CLASS_NAME as e, MARKDOWN_EDITOR_PREVIEW_LIST_CLASS_NAME as t, TextRefinementState as n, buildCssVars as r, formatFileSize as i, mergeClasses as a, useAvailableHeightCap as o, useTextRefinement as s } from "@epam/ai-dial-chat-shared";
+import { Accordion as c, CaptionText as l, DIAL_ICON_SIZE as u, DIAL_KIT_ICON_STROKE as d, EditorThemes as f, ErrorText as p, FileDropzone as m, GhostButton as h, GhostIconButton as g, Input as _, NeutralButton as v, Popup as ee, PopupSize as te, PrimaryButton as ne, Spinner as y, Textarea as re } from "@epam/ai-dial-ui-kit";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { IconArrowNarrowLeft as C, IconFileText as w, IconPlus as T, IconSparkles as E, IconTrashX as ie, IconUpload as D } from "@tabler/icons-react";
+import { Suspense as ae, lazy as O, useCallback as k, useEffect as A, useId as j, useMemo as oe, useRef as M, useState as N } from "react";
+import { DialFileNodeType as P, DialFoldersTree as se } from "@epam/ai-dial-react-file-manager";
+import { LazyMarkdownEditor as ce } from "@epam/ai-dial-ui-kit/editors";
+a("flex flex-col", {
 	body: "_body_m2y60_2",
 	sideColumn: "_sideColumn_m2y60_6",
 	reservedColumn: "_reservedColumn_m2y60_10"
 }.sideColumn);
 //#endregion
 //#region ../builder-form/src/constants/public-class-names.ts
-var oe = {
+var le = {
 	layout: "dial-builder-form-layout",
 	section: "dial-builder-form-section"
 }, F = {
 	headerBorder: "_headerBorder_1kidu_1",
 	footerBorder: "_footerBorder_1kidu_5",
 	sidebarBorder: "_sidebarBorder_1kidu_9"
-}, se = ({ title: e, onBack: t, backAriaLabel: r = "Back", actions: a, leftContent: o, rightContent: s, isSaving: u = !1, labels: d, styles: f, dir: p }) => {
-	let m = k(), h = u ? d?.savingStatusLabel ?? "Saving" : "", g = n({
+}, ue = ({ title: e, onBack: t, backAriaLabel: n = "Back", actions: i, leftContent: o, rightContent: s, isSaving: c = !1, labels: l, styles: f, dir: p }) => {
+	let m = j(), h = c ? l?.savingStatusLabel ?? "Saving" : "", _ = r({
 		"--el-header-border-color": f?.colors?.headerBorderColor,
 		"--el-sidebar-border-color": f?.colors?.sidebarBorderColor
 	});
-	return /* @__PURE__ */ x("div", {
+	return /* @__PURE__ */ S("div", {
 		dir: p,
-		className: i("flex min-h-0 flex-1 flex-col", oe.layout),
-		style: g,
+		className: a("flex min-h-0 flex-1 flex-col", le.layout),
+		style: _,
 		children: [
-			/* @__PURE__ */ b("span", {
+			/* @__PURE__ */ x("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
 				id: m,
 				children: h
 			}),
-			/* @__PURE__ */ x("div", {
-				className: i("flex items-center justify-between gap-2 border-b px-4 py-2 desktop:px-8 desktop:pb-3 desktop:pt-3", F.headerBorder),
-				children: [/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ S("div", {
+				className: a("flex items-center justify-between gap-2 border-b px-4 py-2 desktop:px-8 desktop:pb-3 desktop:pt-3", F.headerBorder),
+				children: [/* @__PURE__ */ S("div", {
 					className: "flex min-w-0 flex-1 items-center gap-2",
-					children: [/* @__PURE__ */ b(ee, {
-						icon: /* @__PURE__ */ b(S, {
-							size: c.LG,
-							stroke: l,
+					children: [/* @__PURE__ */ x(g, {
+						icon: /* @__PURE__ */ x(C, {
+							size: u.LG,
+							stroke: d,
 							"aria-hidden": !0,
 							className: "rtl:scale-x-[-1]"
 						}),
-						"aria-label": r,
+						"aria-label": n,
 						onClick: t
-					}), /* @__PURE__ */ b("h1", {
+					}), /* @__PURE__ */ x("h1", {
 						className: "dial-h2-text min-w-0 truncate",
 						children: e
 					})]
-				}), a != null && /* @__PURE__ */ b("div", {
+				}), i != null && /* @__PURE__ */ x("div", {
 					className: "hidden shrink-0 items-center gap-2 desktop:flex",
-					children: a
+					children: i
 				})]
 			}),
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ S("div", {
 				className: "flex flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden",
-				children: [/* @__PURE__ */ b("div", {
-					className: i(s == null ? "desktop:flex-1" : "desktop:w-[360px] desktop:shrink-0 desktop:overflow-y-auto desktop:border-e", "desktop:overflow-y-auto", s == null ? void 0 : F.sidebarBorder),
+				children: [/* @__PURE__ */ x("div", {
+					className: a(s == null ? "desktop:flex-1" : "desktop:w-[360px] desktop:shrink-0 desktop:overflow-y-auto desktop:border-e", "desktop:overflow-y-auto", s == null ? void 0 : F.sidebarBorder),
 					children: o
-				}), s != null && /* @__PURE__ */ b("div", {
+				}), s != null && /* @__PURE__ */ x("div", {
 					className: "desktop:flex-1 desktop:overflow-y-auto",
 					children: s
 				})]
 			}),
-			a != null && /* @__PURE__ */ b("div", {
-				className: i("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 desktop:hidden [&>*]:flex-1", F.footerBorder),
-				children: a
+			i != null && /* @__PURE__ */ x("div", {
+				className: a("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 desktop:hidden [&>*]:flex-1", F.footerBorder),
+				children: i
 			})
 		]
 	});
-}, ce = { root: "dial-skill-editor-root" }, I = (e) => !!e.dataTransfer?.types.includes("Files"), le = (e) => {
-	let [t, n] = M(!1), r = j(0);
+}, de = {
+	root: "dial-skill-editor-root",
+	refineAction: "dial-skill-editor-refine-action",
+	refineFeedback: "dial-skill-editor-refine-feedback"
+}, I = (e) => !!e.dataTransfer?.types.includes("Files"), fe = (e) => {
+	let [t, n] = N(!1), r = M(0);
 	return {
 		isDragActive: t,
 		dropZoneHandlers: {
-			onDragEnter: D((e) => {
+			onDragEnter: k((e) => {
 				I(e) && (e.preventDefault(), r.current += 1, n(!0));
 			}, []),
-			onDragLeave: D((e) => {
+			onDragLeave: k((e) => {
 				I(e) && (--r.current, r.current <= 0 && (r.current = 0, n(!1)));
 			}, []),
-			onDragOver: D((e) => {
+			onDragOver: k((e) => {
 				I(e) && e.preventDefault();
 			}, []),
-			onDrop: D((t) => {
+			onDrop: k((t) => {
 				if (!I(t)) return;
 				t.preventDefault(), r.current = 0, n(!1);
 				let i = Array.from(t.dataTransfer?.files ?? []);
@@ -104,14 +108,14 @@ var oe = {
 }, B = (e) => {
 	let t = e.lastIndexOf("/");
 	return t === -1 ? e : e.slice(t + 1);
-}, ue = (e) => {
+}, pe = (e) => {
 	let t = /* @__PURE__ */ new Map(), n = (e) => {
 		let n = t.get(e);
 		if (n) return n;
 		let r = {
 			path: e,
 			name: B(e),
-			nodeType: N.FOLDER,
+			nodeType: P.FOLDER,
 			parentPath: z(e),
 			folderId: e,
 			items: []
@@ -126,7 +130,7 @@ var oe = {
 		t.set(r.path, {
 			path: r.path,
 			name: r.name,
-			nodeType: N.ITEM,
+			nodeType: P.ITEM,
 			parentPath: z(r.path),
 			folderId: z(r.path) ?? ""
 		});
@@ -145,27 +149,107 @@ var oe = {
 		n ? n.items = [...n.items ?? [], e] : r.push(e);
 	}
 	return r;
-}, de = ({ isVisible: e, labels: t }) => {
+}, me = ({ enabled: e, fieldId: t, label: r, labelClassName: i, required: o, labels: s, refinement: c, disabled: l, actionClassName: u, feedbackClassName: f, errorClassName: p, children: m }) => {
+	let g = M(null);
+	if (!e) return /* @__PURE__ */ x(b, { children: m });
+	let _ = c.state === n.Error, v = {
+		[n.Idle]: "",
+		[n.Pending]: s?.refinePendingAriaLabel ?? "Refining text",
+		[n.Success]: s?.refineSuccessAriaLabel ?? "Text refined. Undo is available.",
+		[n.Restored]: s?.refineUndoAriaLabel ?? "Original text restored.",
+		[n.Unchanged]: s?.refineUnchangedAriaLabel ?? "No changes were needed.",
+		[n.Error]: ""
+	}[c.state];
+	return /* @__PURE__ */ S("div", {
+		className: "flex min-w-0 flex-col gap-1",
+		role: "group",
+		"aria-labelledby": t + "-label",
+		"aria-describedby": _ ? t + "-refinement-error" : void 0,
+		children: [
+			/* @__PURE__ */ S("div", {
+				className: "flex min-w-0 flex-wrap items-center gap-x-3",
+				children: [/* @__PURE__ */ S("label", {
+					id: t + "-label",
+					htmlFor: t,
+					className: i,
+					children: [r, o && /* @__PURE__ */ x("span", {
+						"aria-hidden": !0,
+						children: " *"
+					})]
+				}), /* @__PURE__ */ S("div", {
+					ref: g,
+					className: "ms-auto flex min-w-0 flex-wrap items-center",
+					children: [/* @__PURE__ */ x(h, {
+						type: "button",
+						className: a("min-h-[44px] min-w-[44px] whitespace-normal", u),
+						textClassName: "[font:inherit]",
+						label: s?.refineWithAiLabel ?? "Refine with AI",
+						disabled: l || !c.canRefine,
+						onClick: () => {
+							c.refine();
+						},
+						iconBefore: c.isPending ? /* @__PURE__ */ x("span", {
+							"aria-hidden": !0,
+							children: /* @__PURE__ */ x(y, {
+								size: 16,
+								ariaLabel: ""
+							})
+						}) : /* @__PURE__ */ x(E, {
+							size: 16,
+							stroke: d,
+							"aria-hidden": !0
+						})
+					}), c.canUndo && /* @__PURE__ */ x(h, {
+						type: "button",
+						className: a("min-h-[44px] min-w-[44px] whitespace-normal", u),
+						textClassName: "[font:inherit]",
+						label: s?.refineUndoLabel ?? "Undo",
+						disabled: l,
+						onClick: () => {
+							c.undo(), g.current?.querySelector("button")?.focus();
+						}
+					})]
+				})]
+			}),
+			/* @__PURE__ */ x("div", {
+				"aria-busy": c.isPending,
+				children: m
+			}),
+			/* @__PURE__ */ x("div", {
+				role: "status",
+				"aria-live": "polite",
+				className: f,
+				children: v
+			}),
+			_ && /* @__PURE__ */ x("div", {
+				role: "alert",
+				id: t + "-refinement-error",
+				className: a(f, p),
+				children: s?.refineErrorLabel ?? "Could not refine this text. Please try again."
+			})
+		]
+	});
+}, he = ({ isVisible: e, labels: t }) => {
 	if (!e) return null;
 	let n = t ?? {};
-	return /* @__PURE__ */ b("div", {
+	return /* @__PURE__ */ x("div", {
 		role: "status",
 		"aria-live": "polite",
-		className: i("pointer-events-none absolute inset-0 z-[100] flex items-center justify-center backdrop-blur-sm"),
-		children: /* @__PURE__ */ x("div", {
+		className: a("pointer-events-none absolute inset-0 z-[100] flex items-center justify-center backdrop-blur-sm"),
+		children: /* @__PURE__ */ S("div", {
 			className: "flex flex-col items-center text-center",
 			children: [
-				/* @__PURE__ */ b(w, {
+				/* @__PURE__ */ x(D, {
 					size: 100,
 					className: "text-accent-primary",
 					"aria-hidden": !0,
-					stroke: l
+					stroke: d
 				}),
-				/* @__PURE__ */ b("span", {
+				/* @__PURE__ */ x("span", {
 					className: "dial-h3-text mt-5",
 					children: n.dropOverlayTitle ?? "Upload files"
 				}),
-				/* @__PURE__ */ b("span", {
+				/* @__PURE__ */ x("span", {
 					className: "dial-small-text mt-4",
 					children: n.dropOverlaySubtitle ?? "Drop files here to add them to this skill"
 				})
@@ -176,43 +260,43 @@ var oe = {
 	return e.SupportingFile = "supporting-file", e.Manifest = "manifest", e;
 }({}), H = /* @__PURE__ */ function(e) {
 	return e.Valid = "valid", e.Invalid = "invalid", e;
-}({}), fe = (e) => (e.webkitRelativePath || e.name).replace(/\\/g, "/"), U = 0, W = () => `skill-file-candidate-${++U}`, pe = ({ isOpen: e, onClose: t, fileActions: n, initialFiles: i, labels: a }) => {
-	let o = a ?? {}, [s, c] = M([]), [u, m] = M(/* @__PURE__ */ new Map()), [h, v] = M([]), [S, C] = M(!1), [w, T] = M(), [E, D] = M(!1), A = k(), j = (e) => {
+}({}), ge = (e) => (e.webkitRelativePath || e.name).replace(/\\/g, "/"), _e = 0, ve = () => `skill-file-candidate-${++_e}`, ye = ({ isOpen: e, onClose: t, fileActions: n, initialFiles: r, labels: a }) => {
+	let o = a ?? {}, [s, c] = N([]), [l, u] = N(/* @__PURE__ */ new Map()), [f, _] = N([]), [v, re] = N(!1), [C, T] = N(), [E, D] = N(!1), ae = j(), O = (e) => {
 		let t = e.map((e) => ({
-			id: W(),
+			id: ve(),
 			file: e,
-			path: fe(e)
+			path: ge(e)
 		}));
 		T(void 0), c((e) => [...e, ...t]);
-	}, N = (e) => {
+	}, k = (e) => {
 		c((t) => t.filter((t) => t.id !== e));
 	};
-	O(() => {
-		e && (c((i ?? []).map((e) => ({
-			id: W(),
+	A(() => {
+		e && (c((r ?? []).map((e) => ({
+			id: ve(),
 			file: e,
-			path: fe(e)
-		}))), m(/* @__PURE__ */ new Map()), v([]), T(void 0));
-	}, [e]), O(() => {
+			path: ge(e)
+		}))), u(/* @__PURE__ */ new Map()), _([]), T(void 0));
+	}, [e]), A(() => {
 		if (!e) return;
 		let t = !1;
 		if (s.length === 0) {
-			m(/* @__PURE__ */ new Map()), v([]);
+			u(/* @__PURE__ */ new Map()), _([]);
 			return;
 		}
-		return C(!0), n.validateBatch(s).then(({ results: e, batchErrors: n }) => {
-			t || (m(new Map(e.map((e) => [e.candidateId, e]))), v(n.map((e) => e.message)));
+		return re(!0), n.validateBatch(s).then(({ results: e, batchErrors: n }) => {
+			t || (u(new Map(e.map((e) => [e.candidateId, e]))), _(n.map((e) => e.message)));
 		}).finally(() => {
-			t || C(!1);
+			t || re(!1);
 		}), () => {
 			t = !0;
 		};
 	}, [s, e]);
-	let ae = s.some((e) => u.get(e.id)?.status === H.Invalid), P = s.length > 0 && s.every((e) => u.get(e.id)?.status === H.Invalid), oe = s.length > 0 && !ae && h.length === 0 && !S && !E, F = async () => {
+	let oe = s.some((e) => l.get(e.id)?.status === H.Invalid), M = s.length > 0 && s.every((e) => l.get(e.id)?.status === H.Invalid), P = s.length > 0 && !oe && f.length === 0 && !v && !E, se = async () => {
 		D(!0), T(void 0);
 		try {
 			let { results: e, batchErrors: r } = await n.validateBatch(s), i = new Map(e.map((e) => [e.candidateId, e]));
-			if (m(i), v(r.map((e) => e.message)), s.some((e) => i.get(e.id)?.status === H.Invalid) || r.length > 0) return;
+			if (u(i), _(r.map((e) => e.message)), s.some((e) => i.get(e.id)?.status === H.Invalid) || r.length > 0) return;
 			let a = await n.commitBatch(s);
 			if (a.error) {
 				T(a.error);
@@ -223,385 +307,454 @@ var oe = {
 			D(!1);
 		}
 	};
-	return /* @__PURE__ */ b(g, {
+	return /* @__PURE__ */ x(ee, {
 		open: e,
 		header: o.uploadDialogTitle ?? "Upload files from device",
 		size: te.Sm,
 		closeAriaLabel: o.uploadDialogCloseAriaLabel ?? "Close",
 		onClose: t,
-		footer: /* @__PURE__ */ x("div", {
+		footer: /* @__PURE__ */ S("div", {
 			className: "flex min-h-[44px] items-center justify-end gap-2 px-6 py-4",
-			children: [/* @__PURE__ */ b(p, {
+			children: [/* @__PURE__ */ x(h, {
 				label: o.uploadCancelLabel ?? "Cancel",
 				onClick: t
-			}), /* @__PURE__ */ b(ne, {
+			}), /* @__PURE__ */ x(ne, {
 				label: o.uploadConfirmLabel ?? "Add",
-				iconBefore: E ? /* @__PURE__ */ b(_, {
+				iconBefore: E ? /* @__PURE__ */ x(y, {
 					size: 16,
 					ariaLabel: ""
 				}) : void 0,
-				onClick: () => void F(),
-				disabled: !oe
+				onClick: () => void se(),
+				disabled: !P
 			})]
 		}),
-		children: /* @__PURE__ */ x("div", {
+		children: /* @__PURE__ */ S("div", {
 			className: "flex flex-col gap-4 px-6 py-4",
 			children: [
-				/* @__PURE__ */ b(f, {
-					label: /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("span", {
+				/* @__PURE__ */ x(m, {
+					label: /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("span", {
 						className: "desktop:hidden",
 						children: o.uploadDropZoneMobileLabel ?? "Click here to upload"
-					}), /* @__PURE__ */ b("span", {
+					}), /* @__PURE__ */ x("span", {
 						className: "hidden desktop:inline",
 						children: o.uploadDropZoneLabel ?? "Drag and drop it or click here to upload"
 					})] }),
 					ariaLabel: o.uploadDropZoneAriaLabel ?? "Upload files",
 					multiple: !0,
-					className: P ? "border-error hover:border-error" : void 0,
-					onChange: j
+					className: M ? "border-error hover:border-error" : void 0,
+					onChange: O
 				}),
-				/* @__PURE__ */ b("span", {
+				/* @__PURE__ */ x("span", {
 					role: "status",
 					"aria-live": "polite",
 					className: "sr-only",
-					id: A,
-					children: h.map((e) => `${o.uploadBatchErrorAriaPrefix ?? "Upload error: "}${e}`).join(" ")
+					id: ae,
+					children: f.map((e) => `${o.uploadBatchErrorAriaPrefix ?? "Upload error: "}${e}`).join(" ")
 				}),
-				h.map((e) => /* @__PURE__ */ b(d, { text: e }, e)),
-				s.length > 0 && /* @__PURE__ */ b("ul", {
+				f.map((e) => /* @__PURE__ */ x(p, { text: e }, e)),
+				s.length > 0 && /* @__PURE__ */ x("ul", {
 					className: "flex flex-col gap-2",
 					children: s.map((e) => {
-						let t = u.get(e.id), n = t?.kind === V.Manifest, i = t?.status === H.Invalid;
-						return /* @__PURE__ */ x("li", {
+						let t = l.get(e.id), n = t?.kind === V.Manifest, r = t?.status === H.Invalid;
+						return /* @__PURE__ */ S("li", {
 							className: "flex items-center gap-2 rounded-lg border border-tertiary p-2",
 							children: [
-								/* @__PURE__ */ b(re, {
+								/* @__PURE__ */ x(w, {
 									size: 20,
 									"aria-hidden": !0,
-									stroke: l
+									stroke: d
 								}),
-								/* @__PURE__ */ x("div", {
+								/* @__PURE__ */ S("div", {
 									className: "flex min-w-0 flex-1 flex-col",
 									children: [
-										/* @__PURE__ */ b("span", {
+										/* @__PURE__ */ x("span", {
 											className: "dial-small-text truncate",
 											children: e.path
 										}),
-										/* @__PURE__ */ b("span", {
+										/* @__PURE__ */ x("span", {
 											className: "dial-tiny-text text-secondary",
-											children: r(e.file.size)
+											children: i(e.file.size)
 										}),
-										i && t?.error && /* @__PURE__ */ b(d, { text: t.error }),
-										n && !i && /* @__PURE__ */ b("span", {
+										r && t?.error && /* @__PURE__ */ x(p, { text: t.error }),
+										n && !r && /* @__PURE__ */ x("span", {
 											className: "dial-tiny-text text-secondary",
 											children: o.uploadManifestRowNote ?? "Will replace this Skill's name, description, and instructions"
 										})
 									]
 								}),
-								/* @__PURE__ */ b(ee, {
-									icon: /* @__PURE__ */ b(ie, {
+								/* @__PURE__ */ x(g, {
+									icon: /* @__PURE__ */ x(ie, {
 										size: 16,
 										"aria-hidden": !0,
-										stroke: l
+										stroke: d
 									}),
 									"aria-label": o.uploadRemoveCandidateLabel?.(e.path) ?? `Remove ${e.path}`,
-									onClick: () => N(e.id)
+									onClick: () => k(e.id)
 								})
 							]
 						}, e.id);
 					})
 				}),
-				w && /* @__PURE__ */ b(d, { text: w })
+				C && /* @__PURE__ */ x(p, { text: C })
 			]
 		})
 	});
-}, G = {
-	title: "_title_65glc_1",
-	helperText: "_helperText_65glc_5"
-}, me = E(async () => {
-	let { MarkdownEditor: e } = await P();
+}, U = {
+	title: "_title_30npf_1",
+	helperText: "_helperText_30npf_5",
+	refineAction: "_refineAction_30npf_9",
+	refineFeedback: "_refineFeedback_30npf_10",
+	refineError: "_refineError_30npf_14"
+}, be = O(async () => {
+	let { MarkdownEditor: e } = await ce();
 	return { default: e };
-}), K = ({ initialValues: r, files: f, selectedPath: ee, onSelectedPathChange: g, expandedPaths: te, onExpandedPathsChange: S, isLoading: re = !1, hasLoadError: w = !1, isSubmitting: E = !1, errors: k, submitError: N, conflict: P, onReloadLatest: oe, isNameReadOnly: F = !1, onDirtyChange: I, onValuesChange: z, fileActions: B, supportingFileContent: V, onSubmit: H, onCancel: fe, onBack: U, backAriaLabel: W, title: K, onRetry: he, onRetrySubmit: ge, labels: _e, styles: ve, dir: ye, instructionsEditorTheme: be = u.light }) => {
-	let [q, xe] = M({
-		name: r?.name ?? "",
-		description: r?.description ?? "",
-		instructions: r?.instructions ?? ""
-	}), Se = a(), Ce = (e) => {
+}), W = ({ initialValues: n, files: i, selectedPath: m, onSelectedPathChange: g, expandedPaths: ee, onExpandedPathsChange: te, isLoading: C = !1, hasLoadError: w = !1, isSubmitting: E = !1, errors: D, submitError: O, conflict: P, onReloadLatest: ce, isNameReadOnly: le = !1, onDirtyChange: F, onValuesChange: I, onRefineDescription: z, onRefineInstructions: B, fileActions: V, supportingFileContent: H, onSubmit: ge, onCancel: _e, onBack: ve, backAriaLabel: W, title: xe, onRetry: Se, onRetrySubmit: Ce, labels: we, styles: Te, dir: Ee, instructionsEditorTheme: De = f.light }) => {
+	let [G, Oe] = N({
+		name: n?.name ?? "",
+		description: n?.description ?? "",
+		instructions: n?.instructions ?? ""
+	}), ke = j(), Ae = j(), K = M(void 0), je = o(), Me = M(G), q = (e) => {
 		let t = {
-			...q,
+			...Me.current,
 			...e
 		};
-		xe(t), z?.(t);
-	}, we = j(r), Te = we.current !== r, Ee = j(f);
-	O(() => {
-		we.current = r, xe({
-			name: r?.name ?? "",
-			description: r?.description ?? "",
-			instructions: r?.instructions ?? ""
-		}), Ee.current = f;
-	}, [r]);
-	let De = (e) => JSON.stringify([...e].sort((e, t) => e.path.localeCompare(t.path))), Oe = j(!1);
-	O(() => {
-		if (Te) return;
+		Me.current = t, Oe(t), I?.(t);
+	}, Ne = (e) => e ? async (t, n) => {
+		if (K.current && !K.current.aborted) throw new DOMException("Busy", "AbortError");
+		K.current = n;
+		try {
+			return await e(t, n);
+		} finally {
+			K.current === n && (K.current = void 0);
+		}
+	} : void 0, Pe = s({
+		value: G.description,
+		onChange: (e) => q({ description: e }),
+		onRefine: Ne(z),
+		disabled: E || C || w,
+		resetKey: n
+	}), Fe = s({
+		value: G.instructions,
+		onChange: (e) => q({ instructions: e }),
+		onRefine: Ne(B),
+		disabled: E || C || w,
+		resetKey: n
+	}), Ie = Pe.isPending || Fe.isPending, Le = () => {
+		Pe.reset(), Fe.reset();
+	}, Re = () => {
+		Le(), _e();
+	}, ze = () => {
+		Le(), ve();
+	}, Be = () => {
+		E || C || w || K.current && !K.current.aborted || ge(G);
+	}, Ve = M(n), He = Ve.current !== n, Ue = M(i);
+	A(() => {
+		Ve.current = n;
+		let e = {
+			name: n?.name ?? "",
+			description: n?.description ?? "",
+			instructions: n?.instructions ?? ""
+		};
+		Me.current = e, Oe(e), Ue.current = i;
+	}, [n]);
+	let We = (e) => JSON.stringify([...e].sort((e, t) => e.path.localeCompare(t.path))), Ge = M(!1);
+	A(() => {
+		if (He) return;
 		let e = {
-			name: r?.name ?? "",
-			description: r?.description ?? "",
-			instructions: r?.instructions ?? ""
-		}, t = JSON.stringify(q) !== JSON.stringify(e) || De(f) !== De(Ee.current);
-		t !== Oe.current && (Oe.current = t, I?.(t));
+			name: n?.name ?? "",
+			description: n?.description ?? "",
+			instructions: n?.instructions ?? ""
+		}, t = JSON.stringify(G) !== JSON.stringify(e) || We(i) !== We(Ue.current);
+		t !== Ge.current && (Ge.current = t, F?.(t));
 	}, [
-		q,
-		f,
-		r,
-		Te,
-		I
+		G,
+		i,
+		n,
+		He,
+		F
 	]);
-	let [ke, Ae] = M(L), J = ee ?? ke, Y = D((e) => {
-		Ae(e), g?.(e);
-	}, [g]), [je, Me] = M([]), Ne = te ?? je, Pe = A(() => new Set(Ne), [Ne]), Fe = D((e) => {
+	let [Ke, qe] = N(L), J = m ?? Ke, Y = k((e) => {
+		qe(e), g?.(e);
+	}, [g]), [Je, Ye] = N([]), Xe = ee ?? Je, Ze = oe(() => new Set(Xe), [Xe]), Qe = k((e) => {
 		let t = [...e];
-		Me(t), S?.(t);
-	}, [S]), [X, Ie] = M(!1), [Le, Re] = M(), [ze, Be] = M(!1), { isDragActive: Ve, dropZoneHandlers: He } = le(D((e) => {
-		X || (Re(e), Ie(!0));
-	}, [X])), Z = _e ?? {}, Q = ve?.colors, Ue = ve?.typography ?? {}, We = Ue.titleClassName ?? "dial-body-semi-text", Ge = Ue.helperTextClassName ?? "dial-tiny-semi-text", Ke = Ue.removeIconClassName ?? "text-secondary", qe = n({
-		"--se-title-color": Q?.title,
-		"--se-helper-text-color": Q?.helperText
-	}), Je = Q?.border ? { colors: {
-		headerBorderColor: Q.border,
-		sidebarBorderColor: Q.border
-	} } : void 0, Ye = A(() => ue([{
+		Ye(t), te?.(t);
+	}, [te]), [$e, et] = N(!1), [tt, nt] = N(), [rt, it] = N(!1), { isDragActive: at, dropZoneHandlers: ot } = fe(k((e) => {
+		$e || (nt(e), et(!0));
+	}, [$e])), X = we ?? {}, Z = Te?.colors, Q = Te?.typography ?? {}, st = Q.titleClassName ?? "dial-body-semi-text", ct = Q.helperTextClassName ?? "dial-tiny-semi-text", lt = Q.removeIconClassName ?? "text-secondary", ut = r({
+		"--se-title-color": Z?.title,
+		"--se-helper-text-color": Z?.helperText,
+		"--se-refine-action-text": Z?.refineActionText,
+		"--se-refine-error-text": Z?.refineErrorText
+	}), dt = {
+		actionClassName: a(U.refineAction, Q.refineActionClassName ?? "dial-small-text", de.refineAction),
+		feedbackClassName: a(U.refineFeedback, Q.refineFeedbackClassName ?? "dial-small-text", de.refineFeedback),
+		errorClassName: U.refineError
+	}, ft = Z?.border ? { colors: {
+		headerBorderColor: Z.border,
+		sidebarBorderColor: Z.border
+	} } : void 0, pt = oe(() => pe([{
 		path: L,
 		name: L,
 		kind: R.File
-	}, ...f]), [f]), $ = A(() => f.find((e) => e.path === J), [f, J]), Xe = D((e) => {
+	}, ...i]), [i]), $ = oe(() => i.find((e) => e.path === J), [i, J]), mt = k((e) => {
 		Y(e.path);
-	}, [Y]), Ze = D((e) => {
-		B.onRemoveNode(e), J === e && Y(L);
+	}, [Y]), ht = k((e) => {
+		V.onRemoveNode(e), J === e && Y(L);
 	}, [
-		B,
+		V,
 		J,
 		Y
-	]), Qe = D((e) => e.path === "SKILL.md" ? [] : [{
+	]), gt = k((e) => e.path === "SKILL.md" ? [] : [{
 		key: "remove",
-		label: Z.removeLabel ?? "Remove",
-		icon: /* @__PURE__ */ b(ie, {
-			size: c.SM,
-			className: Ke,
+		label: X.removeLabel ?? "Remove",
+		icon: /* @__PURE__ */ x(ie, {
+			size: u.SM,
+			className: lt,
 			"aria-hidden": !0,
-			stroke: l
+			stroke: d
 		}),
-		onClick: () => Ze(e.path)
+		onClick: () => ht(e.path)
 	}], [
-		Z.removeLabel,
-		Ke,
-		Ze
-	]), $e = /* @__PURE__ */ x("div", {
+		X.removeLabel,
+		lt,
+		ht
+	]), _t = /* @__PURE__ */ S("div", {
 		className: "flex flex-col gap-2 desktop:gap-5",
-		children: [/* @__PURE__ */ x("div", {
+		children: [/* @__PURE__ */ S("div", {
 			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ b("span", {
-				className: i(G.title, We),
-				children: Z.filesHeading ?? "Files"
-			}), /* @__PURE__ */ b(h, {
-				label: Z.addUploadLabel ?? "Upload from device",
-				iconBefore: /* @__PURE__ */ b(C, {
+			children: [/* @__PURE__ */ x("span", {
+				className: a(U.title, st),
+				children: X.filesHeading ?? "Files"
+			}), /* @__PURE__ */ x(v, {
+				label: X.addUploadLabel ?? "Upload from device",
+				iconBefore: /* @__PURE__ */ x(T, {
 					size: 16,
 					"aria-hidden": !0,
-					stroke: l
+					stroke: d
 				}),
 				onClick: () => {
-					Re(void 0), Ie(!0);
+					nt(void 0), et(!0);
 				}
 			})]
-		}), /* @__PURE__ */ b("div", {
+		}), /* @__PURE__ */ x("div", {
 			role: "tree",
-			"aria-label": Z.filesTreeAriaLabel ?? "Skill files",
-			children: /* @__PURE__ */ b(ae, {
-				items: Ye,
+			"aria-label": X.filesTreeAriaLabel ?? "Skill files",
+			children: /* @__PURE__ */ x(se, {
+				items: pt,
 				showFiles: !0,
 				selectedPath: J,
-				expandedPaths: Pe,
-				onExpandedPathsChange: Fe,
-				onItemClick: Xe,
-				getContextMenuItems: Qe,
+				expandedPaths: Ze,
+				onExpandedPathsChange: Qe,
+				onItemClick: mt,
+				getContextMenuItems: gt,
 				rootItemPath: ""
 			})
 		})]
-	}), et = /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(h, {
-		label: Z.cancelLabel ?? "Cancel",
-		onClick: fe,
+	}), vt = /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(v, {
+		label: X.cancelLabel ?? "Cancel",
+		onClick: Re,
 		disabled: E
-	}), /* @__PURE__ */ b(ne, {
-		label: Z.createLabel ?? "Create",
-		iconBefore: E ? /* @__PURE__ */ b(_, {
+	}), /* @__PURE__ */ x(ne, {
+		label: X.createLabel ?? "Create",
+		iconBefore: E ? /* @__PURE__ */ x(y, {
 			size: 16,
 			ariaLabel: ""
 		}) : void 0,
-		onClick: () => H(q),
-		disabled: E
+		onClick: Be,
+		disabled: E || Ie || C || w
 	})] });
-	return re ? /* @__PURE__ */ b("div", {
-		dir: ye,
+	return C ? /* @__PURE__ */ x("div", {
+		dir: Ee,
 		className: "relative flex min-h-0 flex-1 flex-col",
-		children: /* @__PURE__ */ b(se, {
-			title: K,
-			onBack: U,
+		children: /* @__PURE__ */ x(ue, {
+			title: xe,
+			onBack: ze,
 			backAriaLabel: W,
-			actions: et,
+			actions: vt,
 			isSaving: !1,
-			labels: { savingStatusLabel: Z.savingStatusLabel },
-			styles: Je,
-			leftContent: /* @__PURE__ */ b("div", {
+			labels: { savingStatusLabel: X.savingStatusLabel },
+			styles: ft,
+			leftContent: /* @__PURE__ */ x("div", {
 				role: "status",
-				"aria-label": Z.loadingAriaLabel ?? "Loading skill",
+				"aria-label": X.loadingAriaLabel ?? "Loading skill",
 				className: "flex flex-1 items-center justify-center p-8",
-				children: /* @__PURE__ */ b(_, {})
+				children: /* @__PURE__ */ x(y, {})
 			})
 		})
-	}) : w ? /* @__PURE__ */ b("div", {
-		dir: ye,
+	}) : w ? /* @__PURE__ */ x("div", {
+		dir: Ee,
 		className: "relative flex min-h-0 flex-1 flex-col",
-		children: /* @__PURE__ */ b(se, {
-			title: K,
-			onBack: U,
+		children: /* @__PURE__ */ x(ue, {
+			title: xe,
+			onBack: ze,
 			backAriaLabel: W,
-			actions: et,
+			actions: vt,
 			isSaving: !1,
-			labels: { savingStatusLabel: Z.savingStatusLabel },
-			styles: Je,
-			leftContent: /* @__PURE__ */ x("div", {
+			labels: { savingStatusLabel: X.savingStatusLabel },
+			styles: ft,
+			leftContent: /* @__PURE__ */ S("div", {
 				role: "alert",
 				className: "flex flex-col items-center gap-4 p-8",
-				children: [/* @__PURE__ */ b(d, { text: Z.loadErrorMessage ?? "Couldn't load this skill. Please try again." }), /* @__PURE__ */ b(ne, {
-					label: Z.retryLabel ?? "Retry",
-					onClick: he
+				children: [/* @__PURE__ */ x(p, { text: X.loadErrorMessage ?? "Couldn't load this skill. Please try again." }), /* @__PURE__ */ x(ne, {
+					label: X.retryLabel ?? "Retry",
+					onClick: Se
 				})]
 			})
 		})
-	}) : /* @__PURE__ */ x("div", {
-		dir: ye,
-		className: i("relative flex min-h-0 flex-1 flex-col", ce.root),
-		style: qe,
-		...He,
+	}) : /* @__PURE__ */ S("div", {
+		dir: Ee,
+		className: a("relative flex min-h-0 flex-1 flex-col", de.root),
+		style: ut,
+		...ot,
 		children: [
-			/* @__PURE__ */ b(de, {
-				isVisible: Ve && !X,
-				labels: _e
+			/* @__PURE__ */ x(he, {
+				isVisible: at && !$e,
+				labels: we
 			}),
-			/* @__PURE__ */ b(se, {
-				title: K,
-				onBack: U,
+			/* @__PURE__ */ x(ue, {
+				title: xe,
+				onBack: ze,
 				backAriaLabel: W,
-				actions: et,
+				actions: vt,
 				isSaving: E,
-				labels: { savingStatusLabel: Z.savingStatusLabel },
-				styles: Je,
-				leftContent: /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", {
+				labels: { savingStatusLabel: X.savingStatusLabel },
+				styles: ft,
+				leftContent: /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("div", {
 					className: "px-4 py-4 desktop:hidden",
-					children: /* @__PURE__ */ b(o, {
-						title: Z.editingFileLabel ?? "Editing file",
+					children: /* @__PURE__ */ x(c, {
+						title: X.editingFileLabel ?? "Editing file",
 						description: $?.name ?? "SKILL.md",
-						expanded: ze,
-						onToggle: Be,
-						ariaLabel: Z.editingFileLabel ?? "Editing file",
-						children: $e
+						expanded: rt,
+						onToggle: it,
+						ariaLabel: X.editingFileLabel ?? "Editing file",
+						children: _t
 					})
-				}), /* @__PURE__ */ b("div", {
+				}), /* @__PURE__ */ x("div", {
 					className: "hidden px-8 py-6 desktop:block",
-					children: $e
+					children: _t
 				})] }),
-				rightContent: /* @__PURE__ */ x("div", {
+				rightContent: /* @__PURE__ */ S("div", {
 					className: "flex flex-1 flex-col gap-4 px-4 py-6 desktop:gap-5 desktop:px-8",
 					children: [
-						N != null && /* @__PURE__ */ x("div", {
+						O != null && /* @__PURE__ */ S("div", {
 							role: "alert",
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ b(d, { text: N }), ge != null && /* @__PURE__ */ b(p, {
-								label: Z.retryLabel ?? "Retry",
-								onClick: ge
+							children: [/* @__PURE__ */ x(p, { text: O }), Ce != null && /* @__PURE__ */ x(h, {
+								label: X.retryLabel ?? "Retry",
+								onClick: Ce
 							})]
 						}),
-						P != null && /* @__PURE__ */ x("div", {
+						P != null && /* @__PURE__ */ S("div", {
 							role: "alert",
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ b(d, { text: P.message }), /* @__PURE__ */ b(p, {
-								label: Z.reloadLatestLabel ?? "Reload latest",
-								onClick: oe
+							children: [/* @__PURE__ */ x(p, { text: P.message }), /* @__PURE__ */ x(h, {
+								label: X.reloadLatestLabel ?? "Reload latest",
+								onClick: ce
 							})]
 						}),
-						/* @__PURE__ */ b("h2", {
-							className: i(G.title, We),
-							children: J === "SKILL.md" ? L : Z.selectedFileHeading?.($?.name ?? J) ?? $?.name ?? J
+						/* @__PURE__ */ x("h2", {
+							className: a(U.title, st),
+							children: J === "SKILL.md" ? L : X.selectedFileHeading?.($?.name ?? J) ?? $?.name ?? J
 						}),
-						J === "SKILL.md" ? /* @__PURE__ */ x(y, { children: [
-							/* @__PURE__ */ b(m, {
+						J === "SKILL.md" ? /* @__PURE__ */ S(b, { children: [
+							/* @__PURE__ */ x(_, {
 								labelProps: {
-									label: Z.nameLabel ?? "Name",
+									label: X.nameLabel ?? "Name",
 									required: !0
 								},
-								value: q.name,
-								onChange: (e) => Ce({ name: e ?? "" }),
-								placeholder: Z.namePlaceholder ?? "good-morning-breakfast",
-								caption: k?.name ? void 0 : Z.nameCaption ?? "Lowercase letters and hyphens only, no spaces. We'll reformat automatically if needed.",
-								error: k?.name,
-								invalid: !!k?.name,
-								disabled: F
+								value: G.name,
+								onChange: (e) => q({ name: e ?? "" }),
+								placeholder: X.namePlaceholder ?? "good-morning-breakfast",
+								caption: D?.name ? void 0 : X.nameCaption ?? "Lowercase letters and hyphens only, no spaces. We'll reformat automatically if needed.",
+								error: D?.name,
+								invalid: !!D?.name,
+								disabled: le
 							}),
-							/* @__PURE__ */ b(v, {
-								labelProps: {
-									label: Z.descriptionLabel ?? "Description",
-									required: !0
-								},
-								value: q.description,
-								placeholder: Z.descriptionPlaceholder ?? "What this skill does and when to use it",
-								onChange: (e) => Ce({ description: e }),
-								error: k?.description,
-								invalid: !!k?.description
+							/* @__PURE__ */ x(me, {
+								enabled: !!z,
+								fieldId: ke,
+								required: !0,
+								label: X.descriptionLabel ?? "Description",
+								labels: X,
+								refinement: Pe,
+								disabled: Ie || E,
+								...dt,
+								children: /* @__PURE__ */ x(re, {
+									id: ke,
+									"aria-required": !0,
+									labelProps: z ? void 0 : {
+										label: X.descriptionLabel ?? "Description",
+										required: !0
+									},
+									value: G.description,
+									placeholder: X.descriptionPlaceholder ?? "What this skill does and when to use it",
+									onChange: (e) => {
+										Pe.reset(), q({ description: e });
+									},
+									error: D?.description,
+									invalid: !!D?.description
+								})
 							}),
-							/* @__PURE__ */ x("div", {
-								className: "flex flex-1 flex-col gap-2",
-								children: [
-									/* @__PURE__ */ x("span", {
-										className: "flex items-center gap-0.5",
-										children: [/* @__PURE__ */ b("span", {
-											className: i(G.helperText, Ge),
-											children: Z.instructionsLabel ?? "Instructions"
-										}), /* @__PURE__ */ b("span", {
-											className: "dial-tiny-text text-error",
-											children: "*"
-										})]
-									}),
-									/* @__PURE__ */ b("div", {
-										ref: Se,
-										className: i(e, t),
-										children: /* @__PURE__ */ b(T, {
-											fallback: /* @__PURE__ */ b(_, { ariaLabel: Z.instructionsLoadingAriaLabel ?? "Loading" }),
-											children: /* @__PURE__ */ b(me, {
-												value: q.instructions,
-												onChange: (e) => Ce({ instructions: e }),
-												theme: be,
-												placeholder: Z.instructionsPlaceholder ?? "Write the skill instructions in Markdown"
+							/* @__PURE__ */ x(me, {
+								enabled: !!B,
+								fieldId: Ae,
+								required: !0,
+								labelClassName: a(U.helperText, ct),
+								label: X.instructionsLabel ?? "Instructions",
+								labels: X,
+								refinement: Fe,
+								disabled: Ie || E,
+								...dt,
+								children: /* @__PURE__ */ S("div", {
+									className: "flex flex-1 flex-col gap-2",
+									children: [
+										!B && /* @__PURE__ */ S("label", {
+											htmlFor: Ae,
+											className: "flex items-center gap-0.5",
+											children: [/* @__PURE__ */ x("span", {
+												className: a(U.helperText, ct),
+												children: X.instructionsLabel ?? "Instructions"
+											}), /* @__PURE__ */ x("span", {
+												className: "dial-tiny-text text-error",
+												children: "*"
+											})]
+										}),
+										/* @__PURE__ */ x("div", {
+											ref: je,
+											className: a(e, t),
+											children: /* @__PURE__ */ x(ae, {
+												fallback: /* @__PURE__ */ x(y, { ariaLabel: X.instructionsLoadingAriaLabel ?? "Loading" }),
+												children: /* @__PURE__ */ x(be, {
+													id: Ae,
+													ariaLabel: X.instructionsLabel ?? "Instructions",
+													value: G.instructions,
+													onChange: (e) => {
+														Fe.reset(), q({ instructions: e });
+													},
+													theme: De,
+													placeholder: X.instructionsPlaceholder ?? "Write the skill instructions in Markdown"
+												})
 											})
-										})
-									}),
-									k?.instructions != null && /* @__PURE__ */ b(d, { text: k.instructions })
-								]
+										}),
+										D?.instructions != null && /* @__PURE__ */ x(p, { text: D.instructions })
+									]
+								})
 							})
-						] }) : $?.kind === R.File && (V ?? /* @__PURE__ */ b(s, { text: Z.supportingFileNote ?? "This supporting file is included in the skill package as-is. Remove it from the Files panel to replace its content." }))
+						] }) : $?.kind === R.File && (H ?? /* @__PURE__ */ x(l, { text: X.supportingFileNote ?? "This supporting file is included in the skill package as-is. Remove it from the Files panel to replace its content." }))
 					]
 				})
 			}),
-			/* @__PURE__ */ b(pe, {
-				isOpen: X,
+			/* @__PURE__ */ x(ye, {
+				isOpen: $e,
 				onClose: () => {
-					Ie(!1), Re(void 0);
+					et(!1), nt(void 0);
 				},
-				fileActions: B,
-				initialFiles: Le,
-				labels: _e
+				fileActions: V,
+				initialFiles: tt,
+				labels: we
 			})
 		]
 	});
 };
 //#endregion
-export { ce as SKILL_EDITOR_CLASS, K as SkillEditor, V as SkillFileCandidateKind, R as SkillFileNodeKind, H as SkillFileValidationStatus };
+export { de as SKILL_EDITOR_CLASS, W as SkillEditor, V as SkillFileCandidateKind, R as SkillFileNodeKind, H as SkillFileValidationStatus };