@epam/ai-dial-skill-editor 1.0.0 → 1.0.2

package/components/SkillEditor/SkillEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkillEditor.d.ts","sourceRoot":"","sources":["../../../src/components/SkillEditor/SkillEditor.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAEL,EAAE,EASH,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EACV,gBAAgB,EAGjB,MAAM,iCAAiC,CAAC;AAqBzC,qFAAqF;AACrF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAwc5C,CAAC"}
+{"version":3,"file":"SkillEditor.d.ts","sourceRoot":"","sources":["../../../src/components/SkillEditor/SkillEditor.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAEL,EAAE,EASH,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EACV,gBAAgB,EAGjB,MAAM,iCAAiC,CAAC;AAqBzC,qFAAqF;AACrF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA2c5C,CAAC"}

package/components/SkillFileDropOverlay/SkillFileDropOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkillFileDropOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/SkillFileDropOverlay/SkillFileDropOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAEzE,wCAAwC;AACxC,MAAM,WAAW,yBAAyB;IACxC,oCAAoC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,MAAM,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,kBAAkB,GAAG,qBAAqB,CAAC,CAAC;CAC9E;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA0B9D,CAAC"}
+{"version":3,"file":"SkillFileDropOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/SkillFileDropOverlay/SkillFileDropOverlay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAEzE,wCAAwC;AACxC,MAAM,WAAW,yBAAyB;IACxC,oCAAoC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,MAAM,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,kBAAkB,GAAG,qBAAqB,CAAC,CAAC;CAC9E;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA+B9D,CAAC"}

package/components/SkillFileUploadDialog/SkillFileUploadDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkillFileUploadDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SkillFileUploadDialog/SkillFileUploadDialog.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,KAAK,EACV,sBAAsB,EACtB,iBAAiB,EAGlB,MAAM,iCAAiC,CAAC;AAOzC,yCAAyC;AACzC,MAAM,WAAW,0BAA0B;IACzC,kCAAkC;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,0FAA0F;IAC1F,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sDAAsD;IACtD,WAAW,EAAE,IAAI,CAAC,sBAAsB,EAAE,eAAe,GAAG,aAAa,CAAC,CAAC;IAC3E;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,sBAAsB;IACtB,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAWD;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAoQhE,CAAC"}
+{"version":3,"file":"SkillFileUploadDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SkillFileUploadDialog/SkillFileUploadDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EACV,sBAAsB,EACtB,iBAAiB,EAGlB,MAAM,iCAAiC,CAAC;AAOzC,yCAAyC;AACzC,MAAM,WAAW,0BAA0B;IACzC,kCAAkC;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,0FAA0F;IAC1F,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sDAAsD;IACtD,WAAW,EAAE,IAAI,CAAC,sBAAsB,EAAE,eAAe,GAAG,aAAa,CAAC,CAAC;IAC3E;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,sBAAsB;IACtB,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAWD;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAoPhE,CAAC"}

package/index.js

@@ -1,38 +1,38 @@
 import { buildCssVars as e, formatFileSize as t, mergeClasses as n } from "@epam/ai-dial-chat-shared";
 import { DialFileNodeType as r, DialFoldersTree as i } from "@epam/ai-dial-react-file-manager";
-import { Accordion as a, CaptionText as ee, DIAL_ICON_SIZE as o, EditorThemes as s, ErrorText as c, GhostButton as l, GhostIconButton as te, Input as u, LazyMarkdownEditor as d, NeutralButton as f, Popup as ne, PopupSize as p, PrimaryButton as m, Spinner as h, Textarea as g } from "@epam/ai-dial-ui-kit";
-import { IconFileText as re, IconPlus as _, IconTrashX as ie, IconUpload as v } from "@tabler/icons-react";
-import { Suspense as y, lazy as b, useCallback as x, useEffect as S, useId as C, useMemo as w, useRef as T, useState as E } from "react";
-import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
+import { Accordion as a, CaptionText as o, DIAL_ICON_SIZE as s, DIAL_KIT_ICON_STROKE as c, EditorThemes as l, ErrorText as u, FileDropzone as ee, GhostButton as d, GhostIconButton as f, Input as p, LazyMarkdownEditor as m, NeutralButton as h, Popup as g, PopupSize as te, PrimaryButton as _, Spinner as v, Textarea as y } from "@epam/ai-dial-ui-kit";
+import { IconFileText as ne, IconPlus as re, IconTrashX as ie, IconUpload as b } from "@tabler/icons-react";
+import { Suspense as x, lazy as S, useCallback as C, useEffect as w, useId as T, useMemo as E, useRef as D, useState as O } from "react";
+import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
 //#region src/hooks/useSkillFileDropZone.ts
-var A = (e) => !!e.dataTransfer?.types.includes("Files"), ae = (e) => {
-	let [t, n] = E(!1), r = T(0);
+var M = (e) => !!e.dataTransfer?.types.includes("Files"), ae = (e) => {
+	let [t, n] = O(!1), r = D(0);
 	return {
 		isDragActive: t,
 		dropZoneHandlers: {
-			onDragEnter: x((e) => {
-				A(e) && (e.preventDefault(), r.current += 1, n(!0));
+			onDragEnter: C((e) => {
+				M(e) && (e.preventDefault(), r.current += 1, n(!0));
 			}, []),
-			onDragLeave: x((e) => {
-				A(e) && (--r.current, r.current <= 0 && (r.current = 0, n(!1)));
+			onDragLeave: C((e) => {
+				M(e) && (--r.current, r.current <= 0 && (r.current = 0, n(!1)));
 			}, []),
-			onDragOver: x((e) => {
-				A(e) && e.preventDefault();
+			onDragOver: C((e) => {
+				M(e) && e.preventDefault();
 			}, []),
-			onDrop: x((t) => {
-				if (!A(t)) return;
+			onDrop: C((t) => {
+				if (!M(t)) return;
 				t.preventDefault(), r.current = 0, n(!1);
 				let i = Array.from(t.dataTransfer?.files ?? []);
 				i.length > 0 && e(i);
 			}, [e])
 		}
 	};
-}, j = "SKILL.md", M = /* @__PURE__ */ function(e) {
+}, N = "SKILL.md", P = /* @__PURE__ */ function(e) {
 	return e.File = "file", e.Folder = "folder", e;
-}({}), N = (e) => {
+}({}), F = (e) => {
 	let t = e.lastIndexOf("/");
 	return t === -1 ? null : e.slice(0, t);
-}, P = (e) => {
+}, I = (e) => {
 	let t = e.lastIndexOf("/");
 	return t === -1 ? e : e.slice(t + 1);
 }, oe = (e) => {
@@ -41,16 +41,16 @@ var A = (e) => !!e.dataTransfer?.types.includes("Files"), ae = (e) => {
 		if (n) return n;
 		let i = {
 			path: e,
-			name: P(e),
+			name: I(e),
 			nodeType: r.FOLDER,
-			parentPath: N(e),
+			parentPath: F(e),
 			folderId: e,
 			items: []
 		};
 		return t.set(e, i), i;
 	};
 	for (let i of e) {
-		if (i.kind === M.Folder) {
+		if (i.kind === P.Folder) {
 			n(i.path);
 			continue;
 		}
@@ -58,13 +58,13 @@ var A = (e) => !!e.dataTransfer?.types.includes("Files"), ae = (e) => {
 			path: i.path,
 			name: i.name,
 			nodeType: r.ITEM,
-			parentPath: N(i.path),
-			folderId: N(i.path) ?? ""
+			parentPath: F(i.path),
+			folderId: F(i.path) ?? ""
 		});
 	}
 	for (let t of [...e]) {
-		let e = N(t.path);
-		for (; e != null;) n(e), e = N(e);
+		let e = F(t.path);
+		for (; e != null;) n(e), e = F(e);
 	}
 	let i = [];
 	for (let e of t.values()) {
@@ -79,385 +79,369 @@ var A = (e) => !!e.dataTransfer?.types.includes("Files"), ae = (e) => {
 }, se = ({ isVisible: e, labels: t }) => {
 	if (!e) return null;
 	let r = t ?? {};
-	return /* @__PURE__ */ O("div", {
+	return /* @__PURE__ */ A("div", {
 		role: "status",
 		"aria-live": "polite",
 		className: n("pointer-events-none absolute inset-0 z-[100] flex items-center justify-center backdrop-blur-sm"),
-		children: /* @__PURE__ */ k("div", {
+		children: /* @__PURE__ */ j("div", {
 			className: "flex flex-col items-center text-center",
 			children: [
-				/* @__PURE__ */ O(v, {
+				/* @__PURE__ */ A(b, {
 					size: 100,
 					className: "text-accent-primary",
-					"aria-hidden": !0
+					"aria-hidden": !0,
+					stroke: c
 				}),
-				/* @__PURE__ */ O("span", {
+				/* @__PURE__ */ A("span", {
 					className: "dial-h3-text mt-5",
 					children: r.dropOverlayTitle ?? "Upload files"
 				}),
-				/* @__PURE__ */ O("span", {
+				/* @__PURE__ */ A("span", {
 					className: "dial-small-text mt-4",
 					children: r.dropOverlaySubtitle ?? "Drop files here to add them to this skill"
 				})
 			]
 		})
 	});
-}, F = /* @__PURE__ */ function(e) {
+}, L = /* @__PURE__ */ function(e) {
 	return e.SupportingFile = "supporting-file", e.Manifest = "manifest", e;
-}({}), I = /* @__PURE__ */ function(e) {
+}({}), R = /* @__PURE__ */ function(e) {
 	return e.Valid = "valid", e.Invalid = "invalid", e;
-}({}), L = (e) => (e.webkitRelativePath || e.name).replace(/\\/g, "/"), R = 0, z = () => `skill-file-candidate-${++R}`, ce = ({ isOpen: e, onClose: r, fileActions: i, initialFiles: a, labels: ee }) => {
-	let o = ee ?? {}, s = T(null), [u, d] = E([]), [f, g] = E(/* @__PURE__ */ new Map()), [_, y] = E([]), [b, x] = E(!1), [w, D] = E(), [A, j] = E(!1), M = C(), N = (e) => {
+}({}), z = (e) => (e.webkitRelativePath || e.name).replace(/\\/g, "/"), ce = 0, B = () => `skill-file-candidate-${++ce}`, le = ({ isOpen: e, onClose: n, fileActions: r, initialFiles: i, labels: a }) => {
+	let o = a ?? {}, [s, l] = O([]), [p, m] = O(/* @__PURE__ */ new Map()), [h, y] = O([]), [re, b] = O(!1), [x, S] = O(), [C, E] = O(!1), D = T(), M = (e) => {
 		let t = e.map((e) => ({
-			id: z(),
+			id: B(),
 			file: e,
-			path: L(e)
+			path: z(e)
 		}));
-		D(void 0), d((e) => [...e, ...t]);
-	}, P = (e) => {
-		d((t) => t.filter((t) => t.id !== e));
-	}, { isDragActive: oe, dropZoneHandlers: se } = ae(N);
-	S(() => {
-		e && (d((a ?? []).map((e) => ({
-			id: z(),
+		S(void 0), l((e) => [...e, ...t]);
+	}, ae = (e) => {
+		l((t) => t.filter((t) => t.id !== e));
+	};
+	w(() => {
+		e && (l((i ?? []).map((e) => ({
+			id: B(),
 			file: e,
-			path: L(e)
-		}))), g(/* @__PURE__ */ new Map()), y([]), D(void 0));
-	}, [e]), S(() => {
+			path: z(e)
+		}))), m(/* @__PURE__ */ new Map()), y([]), S(void 0));
+	}, [e]), w(() => {
 		if (!e) return;
 		let t = !1;
-		if (u.length === 0) {
-			g(/* @__PURE__ */ new Map()), y([]);
+		if (s.length === 0) {
+			m(/* @__PURE__ */ new Map()), y([]);
 			return;
 		}
-		return x(!0), i.validateBatch(u).then(({ results: e, batchErrors: n }) => {
-			t || (g(new Map(e.map((e) => [e.candidateId, e]))), y(n.map((e) => e.message)));
+		return b(!0), r.validateBatch(s).then(({ results: e, batchErrors: n }) => {
+			t || (m(new Map(e.map((e) => [e.candidateId, e]))), y(n.map((e) => e.message)));
 		}).finally(() => {
-			t || x(!1);
+			t || b(!1);
 		}), () => {
 			t = !0;
 		};
-	}, [u, e]);
-	let R = (e) => {
-		let t = Array.from(e.target.files ?? []);
-		e.target.value = "", t.length > 0 && N(t);
-	}, ce = u.some((e) => f.get(e.id)?.status === I.Invalid), B = u.length > 0 && u.every((e) => f.get(e.id)?.status === I.Invalid), le = u.length > 0 && !ce && _.length === 0 && !b && !A, V = async () => {
-		j(!0), D(void 0);
+	}, [s, e]);
+	let N = s.some((e) => p.get(e.id)?.status === R.Invalid), P = s.length > 0 && s.every((e) => p.get(e.id)?.status === R.Invalid), F = s.length > 0 && !N && h.length === 0 && !re && !C, I = async () => {
+		E(!0), S(void 0);
 		try {
-			let { results: e, batchErrors: t } = await i.validateBatch(u), n = new Map(e.map((e) => [e.candidateId, e]));
-			if (g(n), y(t.map((e) => e.message)), u.some((e) => n.get(e.id)?.status === I.Invalid) || t.length > 0) return;
-			let a = await i.commitBatch(u);
+			let { results: e, batchErrors: t } = await r.validateBatch(s), i = new Map(e.map((e) => [e.candidateId, e]));
+			if (m(i), y(t.map((e) => e.message)), s.some((e) => i.get(e.id)?.status === R.Invalid) || t.length > 0) return;
+			let a = await r.commitBatch(s);
 			if (a.error) {
-				D(a.error);
+				S(a.error);
 				return;
 			}
-			r();
+			n();
 		} finally {
-			j(!1);
+			E(!1);
 		}
 	};
-	return /* @__PURE__ */ O(ne, {
+	return /* @__PURE__ */ A(g, {
 		open: e,
 		header: o.uploadDialogTitle ?? "Upload files from device",
-		size: p.Sm,
+		size: te.Sm,
 		closeAriaLabel: o.uploadDialogCloseAriaLabel ?? "Close",
-		onClose: r,
-		footer: /* @__PURE__ */ k("div", {
+		onClose: n,
+		footer: /* @__PURE__ */ j("div", {
 			className: "flex min-h-[44px] items-center justify-end gap-2 px-6 py-4",
-			children: [/* @__PURE__ */ O(l, {
+			children: [/* @__PURE__ */ A(d, {
 				label: o.uploadCancelLabel ?? "Cancel",
-				onClick: r
-			}), /* @__PURE__ */ O(m, {
+				onClick: n
+			}), /* @__PURE__ */ A(_, {
 				label: o.uploadConfirmLabel ?? "Add",
-				iconBefore: A ? /* @__PURE__ */ O(h, {
+				iconBefore: C ? /* @__PURE__ */ A(v, {
 					size: 16,
 					ariaLabel: ""
 				}) : void 0,
-				onClick: () => void V(),
-				disabled: !le
+				onClick: () => void I(),
+				disabled: !F
 			})]
 		}),
-		children: /* @__PURE__ */ k("div", {
+		children: /* @__PURE__ */ j("div", {
 			className: "flex flex-col gap-4 px-6 py-4",
 			children: [
-				/* @__PURE__ */ k("div", {
-					role: "button",
-					tabIndex: 0,
-					"aria-label": o.uploadDropZoneAriaLabel ?? "Upload files",
-					className: n("bg-layer-2 flex min-h-[164px] cursor-pointer flex-col items-center justify-center gap-4 rounded-lg border border-dashed border-secondary px-6 py-9 focus-visible:outline focus-visible:outline-focus", oe && "bg-layer-3 border-accent-primary", B && "border-error"),
-					onClick: () => s.current?.click(),
-					onKeyDown: (e) => {
-						(e.key === "Enter" || e.key === " ") && (e.preventDefault(), s.current?.click());
-					},
-					...se,
-					children: [/* @__PURE__ */ O(v, {
-						size: 32,
-						"aria-hidden": !0
-					}), /* @__PURE__ */ k("div", {
-						className: "flex flex-col items-center gap-2 text-center",
-						children: [/* @__PURE__ */ O("span", {
-							className: "dial-small-text desktop:hidden",
-							children: o.uploadDropZoneMobileLabel ?? "Click here to upload"
-						}), /* @__PURE__ */ O("span", {
-							className: "dial-small-text hidden desktop:inline",
-							children: o.uploadDropZoneLabel ?? "Drag and drop it or click here to upload"
-						})]
-					})]
-				}),
-				/* @__PURE__ */ O("input", {
-					ref: s,
-					type: "file",
+				/* @__PURE__ */ A(ee, {
+					label: /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A("span", {
+						className: "desktop:hidden",
+						children: o.uploadDropZoneMobileLabel ?? "Click here to upload"
+					}), /* @__PURE__ */ A("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: "hidden",
-					onChange: R
+					className: P ? "border-error hover:border-error" : void 0,
+					onChange: M
 				}),
-				/* @__PURE__ */ O("span", {
+				/* @__PURE__ */ A("span", {
 					role: "status",
 					"aria-live": "polite",
 					className: "sr-only",
-					id: M,
-					children: _.map((e) => `${o.uploadBatchErrorAriaPrefix ?? "Upload error: "}${e}`).join(" ")
+					id: D,
+					children: h.map((e) => `${o.uploadBatchErrorAriaPrefix ?? "Upload error: "}${e}`).join(" ")
 				}),
-				_.map((e) => /* @__PURE__ */ O(c, { text: e }, e)),
-				u.length > 0 && /* @__PURE__ */ O("ul", {
+				h.map((e) => /* @__PURE__ */ A(u, { text: e }, e)),
+				s.length > 0 && /* @__PURE__ */ A("ul", {
 					className: "flex flex-col gap-2",
-					children: u.map((e) => {
-						let n = f.get(e.id), r = n?.kind === F.Manifest, i = n?.status === I.Invalid;
-						return /* @__PURE__ */ k("li", {
+					children: s.map((e) => {
+						let n = p.get(e.id), r = n?.kind === L.Manifest, i = n?.status === R.Invalid;
+						return /* @__PURE__ */ j("li", {
 							className: "flex items-center gap-2 rounded-lg border border-tertiary p-2",
 							children: [
-								/* @__PURE__ */ O(re, {
+								/* @__PURE__ */ A(ne, {
 									size: 20,
-									"aria-hidden": !0
+									"aria-hidden": !0,
+									stroke: c
 								}),
-								/* @__PURE__ */ k("div", {
+								/* @__PURE__ */ j("div", {
 									className: "flex min-w-0 flex-1 flex-col",
 									children: [
-										/* @__PURE__ */ O("span", {
+										/* @__PURE__ */ A("span", {
 											className: "dial-small-text truncate",
 											children: e.path
 										}),
-										/* @__PURE__ */ O("span", {
+										/* @__PURE__ */ A("span", {
 											className: "dial-tiny-text text-secondary",
 											children: t(e.file.size)
 										}),
-										i && n?.error && /* @__PURE__ */ O(c, { text: n.error }),
-										r && !i && /* @__PURE__ */ O("span", {
+										i && n?.error && /* @__PURE__ */ A(u, { text: n.error }),
+										r && !i && /* @__PURE__ */ A("span", {
 											className: "dial-tiny-text text-secondary",
 											children: o.uploadManifestRowNote ?? "Will replace this Skill's name, description, and instructions"
 										})
 									]
 								}),
-								/* @__PURE__ */ O(te, {
-									icon: /* @__PURE__ */ O(ie, {
+								/* @__PURE__ */ A(f, {
+									icon: /* @__PURE__ */ A(ie, {
 										size: 16,
-										"aria-hidden": !0
+										"aria-hidden": !0,
+										stroke: c
 									}),
 									"aria-label": o.uploadRemoveCandidateLabel?.(e.path) ?? `Remove ${e.path}`,
-									onClick: () => P(e.id)
+									onClick: () => ae(e.id)
 								})
 							]
 						}, e.id);
 					})
 				}),
-				w && /* @__PURE__ */ O(c, { text: w })
+				x && /* @__PURE__ */ A(u, { text: x })
 			]
 		})
 	});
-}, B = {
+}, V = {
 	title: "_title_l82ak_1",
 	helperText: "_helperText_l82ak_5",
 	headerBorder: "_headerBorder_l82ak_9",
 	sidebarBorder: "_sidebarBorder_l82ak_13",
 	actionBarBorder: "_actionBarBorder_l82ak_17"
-}, le = b(async () => {
-	let { MarkdownEditor: e } = await d();
+}, ue = S(async () => {
+	let { MarkdownEditor: e } = await m();
 	return { default: e };
-}), V = ({ initialValues: t, files: r, selectedPath: te, onSelectedPathChange: d, expandedPaths: ne, onExpandedPathsChange: p, isLoading: re = !1, hasLoadError: v = !1, isSubmitting: b = !1, errors: A, submitError: N, conflict: P, onReloadLatest: F, isNameReadOnly: I = !1, onDirtyChange: L, fileActions: R, headerContent: z, supportingFileContent: V, onSubmit: ue, onCancel: de, onRetry: fe, labels: H, styles: pe, dir: me, instructionsEditorTheme: he = s.light }) => {
-	let [U, W] = E({
+}), de = ({ initialValues: t, files: r, selectedPath: ee, onSelectedPathChange: f, expandedPaths: m, onExpandedPathsChange: g, isLoading: te = !1, hasLoadError: ne = !1, isSubmitting: b = !1, errors: S, submitError: M, conflict: F, onReloadLatest: I, isNameReadOnly: L = !1, onDirtyChange: R, fileActions: z, headerContent: ce, supportingFileContent: B, onSubmit: de, onCancel: fe, onRetry: pe, labels: H, styles: me, dir: he, instructionsEditorTheme: ge = l.light }) => {
+	let [U, W] = O({
 		name: t?.name ?? "",
 		description: t?.description ?? "",
 		instructions: t?.instructions ?? ""
-	}), ge = T(t), _e = ge.current !== t, ve = T(r);
-	S(() => {
-		ge.current = t, W({
+	}), _e = D(t), ve = _e.current !== t, ye = D(r);
+	w(() => {
+		_e.current = t, W({
 			name: t?.name ?? "",
 			description: t?.description ?? "",
 			instructions: t?.instructions ?? ""
-		}), ve.current = r;
+		}), ye.current = r;
 	}, [t]);
-	let ye = (e) => JSON.stringify([...e].sort((e, t) => e.path.localeCompare(t.path))), be = T(!1);
-	S(() => {
-		if (_e) return;
+	let be = (e) => JSON.stringify([...e].sort((e, t) => e.path.localeCompare(t.path))), xe = D(!1);
+	w(() => {
+		if (ve) return;
 		let e = {
 			name: t?.name ?? "",
 			description: t?.description ?? "",
 			instructions: t?.instructions ?? ""
-		}, n = JSON.stringify(U) !== JSON.stringify(e) || ye(r) !== ye(ve.current);
-		n !== be.current && (be.current = n, L?.(n));
+		}, n = JSON.stringify(U) !== JSON.stringify(e) || be(r) !== be(ye.current);
+		n !== xe.current && (xe.current = n, R?.(n));
 	}, [
 		U,
 		r,
 		t,
-		_e,
-		L
+		ve,
+		R
 	]);
-	let [xe, Se] = E(j), G = te ?? xe, K = x((e) => {
-		Se(e), d?.(e);
-	}, [d]), [Ce, we] = E([]), Te = ne ?? Ce, Ee = w(() => new Set(Te), [Te]), De = x((e) => {
+	let [Se, Ce] = O(N), G = ee ?? Se, K = C((e) => {
+		Ce(e), f?.(e);
+	}, [f]), [we, Te] = O([]), Ee = m ?? we, De = E(() => new Set(Ee), [Ee]), Oe = C((e) => {
 		let t = [...e];
-		we(t), p?.(t);
-	}, [p]), [q, J] = E(!1), [Oe, Y] = E(), [ke, Ae] = E(!0), { isDragActive: je, dropZoneHandlers: Me } = ae(x((e) => {
+		Te(t), g?.(t);
+	}, [g]), [q, J] = O(!1), [ke, Y] = O(), [Ae, je] = O(!0), { isDragActive: Me, dropZoneHandlers: Ne } = ae(C((e) => {
 		q || (Y(e), J(!0));
-	}, [q])), X = H ?? {}, Z = pe?.colors, Q = pe?.typography ?? {}, Ne = Q.titleClassName ?? "dial-body-semi-text", Pe = Q.helperTextClassName ?? "dial-tiny-semi-text", Fe = Q.removeIconClassName ?? "text-secondary", Ie = e({
+	}, [q])), X = H ?? {}, Z = me?.colors, Q = me?.typography ?? {}, Pe = Q.titleClassName ?? "dial-body-semi-text", Fe = Q.helperTextClassName ?? "dial-tiny-semi-text", Ie = Q.removeIconClassName ?? "text-secondary", Le = e({
 		"--se-title-color": Z?.title,
 		"--se-helper-text-color": Z?.helperText,
 		"--se-border-color": Z?.border
-	}), Le = w(() => oe([{
-		path: j,
-		name: j,
-		kind: M.File
-	}, ...r]), [r]), $ = w(() => r.find((e) => e.path === G), [r, G]), Re = x((e) => {
+	}), Re = E(() => oe([{
+		path: N,
+		name: N,
+		kind: P.File
+	}, ...r]), [r]), $ = E(() => r.find((e) => e.path === G), [r, G]), ze = C((e) => {
 		K(e.path);
-	}, [K]), ze = x((e) => {
-		R.onRemoveNode(e), G === e && K(j);
+	}, [K]), Be = C((e) => {
+		z.onRemoveNode(e), G === e && K(N);
 	}, [
-		R,
+		z,
 		G,
 		K
-	]), Be = x((e) => e.path === "SKILL.md" ? [] : [{
+	]), Ve = C((e) => e.path === "SKILL.md" ? [] : [{
 		key: "remove",
 		label: X.removeLabel ?? "Remove",
-		icon: /* @__PURE__ */ O(ie, {
-			size: o.SM,
-			className: Fe,
-			"aria-hidden": !0
+		icon: /* @__PURE__ */ A(ie, {
+			size: s.SM,
+			className: Ie,
+			"aria-hidden": !0,
+			stroke: c
 		}),
-		onClick: () => ze(e.path)
+		onClick: () => Be(e.path)
 	}], [
 		X.removeLabel,
-		Fe,
-		ze
-	]), Ve = C(), He = C(), Ue = /* @__PURE__ */ k("div", {
+		Ie,
+		Be
+	]), He = T(), Ue = T(), We = /* @__PURE__ */ j("div", {
 		className: "flex flex-col gap-2 desktop:gap-5",
-		children: [/* @__PURE__ */ k("div", {
+		children: [/* @__PURE__ */ j("div", {
 			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ O("span", {
-				className: n(B.title, Ne),
+			children: [/* @__PURE__ */ A("span", {
+				className: n(V.title, Pe),
 				children: X.filesHeading ?? "Files"
-			}), /* @__PURE__ */ O(f, {
+			}), /* @__PURE__ */ A(h, {
 				label: X.addUploadLabel ?? "Upload from device",
-				iconBefore: /* @__PURE__ */ O(_, {
+				iconBefore: /* @__PURE__ */ A(re, {
 					size: 16,
-					"aria-hidden": !0
+					"aria-hidden": !0,
+					stroke: c
 				}),
 				onClick: () => {
 					Y(void 0), J(!0);
 				}
 			})]
-		}), /* @__PURE__ */ O("div", {
-			id: Ve,
+		}), /* @__PURE__ */ A("div", {
+			id: He,
 			role: "tree",
 			"aria-label": X.filesTreeAriaLabel ?? "Skill files",
-			children: /* @__PURE__ */ O(i, {
-				items: Le,
+			children: /* @__PURE__ */ A(i, {
+				items: Re,
 				showFiles: !0,
 				selectedPath: G,
-				expandedPaths: Ee,
-				onExpandedPathsChange: De,
-				onItemClick: Re,
-				getContextMenuItems: Be,
+				expandedPaths: De,
+				onExpandedPathsChange: Oe,
+				onItemClick: ze,
+				getContextMenuItems: Ve,
 				rootItemPath: ""
 			})
 		})]
-	}), We = b ? X.savingStatusLabel ?? "Saving" : "", Ge = /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(l, {
+	}), Ge = b ? X.savingStatusLabel ?? "Saving" : "", Ke = /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(d, {
 		label: X.cancelLabel ?? "Cancel",
-		onClick: de,
+		onClick: fe,
 		disabled: b
-	}), /* @__PURE__ */ O(m, {
+	}), /* @__PURE__ */ A(_, {
 		label: X.createLabel ?? "Create",
-		iconBefore: b ? /* @__PURE__ */ O(h, {
+		iconBefore: b ? /* @__PURE__ */ A(v, {
 			size: 16,
 			ariaLabel: ""
 		}) : void 0,
-		onClick: () => ue(U),
+		onClick: () => de(U),
 		disabled: b
 	})] });
-	return re ? /* @__PURE__ */ O("div", {
+	return te ? /* @__PURE__ */ A("div", {
 		className: "flex h-full items-center justify-center",
-		children: /* @__PURE__ */ O(h, { ariaLabel: X.loadingAriaLabel ?? "Loading skill" })
-	}) : v ? /* @__PURE__ */ k("div", {
+		children: /* @__PURE__ */ A(v, { ariaLabel: X.loadingAriaLabel ?? "Loading skill" })
+	}) : ne ? /* @__PURE__ */ j("div", {
 		role: "alert",
 		className: "flex flex-col items-center gap-4 p-8",
-		children: [/* @__PURE__ */ O(c, { text: X.loadErrorMessage ?? "Couldn't load this skill. Please try again." }), /* @__PURE__ */ O(m, {
+		children: [/* @__PURE__ */ A(u, { text: X.loadErrorMessage ?? "Couldn't load this skill. Please try again." }), /* @__PURE__ */ A(_, {
 			label: X.retryLabel ?? "Retry",
-			onClick: fe
+			onClick: pe
 		})]
-	}) : /* @__PURE__ */ k("div", {
-		dir: me,
+	}) : /* @__PURE__ */ j("div", {
+		dir: he,
 		className: "relative flex h-full flex-col",
-		style: Ie,
-		...Me,
+		style: Le,
+		...Ne,
 		children: [
-			/* @__PURE__ */ O(se, {
-				isVisible: je && !q,
+			/* @__PURE__ */ A(se, {
+				isVisible: Me && !q,
 				labels: H
 			}),
-			/* @__PURE__ */ O("span", {
+			/* @__PURE__ */ A("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
-				id: He,
-				children: We
+				id: Ue,
+				children: Ge
 			}),
-			N && /* @__PURE__ */ O("div", {
+			M && /* @__PURE__ */ A("div", {
 				role: "alert",
 				className: "px-4 pt-2",
-				children: /* @__PURE__ */ O(c, { text: N })
+				children: /* @__PURE__ */ A(u, { text: M })
 			}),
-			P && /* @__PURE__ */ k("div", {
+			F && /* @__PURE__ */ j("div", {
 				role: "alert",
 				className: "flex items-center gap-2 px-4 pt-2",
-				children: [/* @__PURE__ */ O(c, { text: P.message }), /* @__PURE__ */ O(l, {
+				children: [/* @__PURE__ */ A(u, { text: F.message }), /* @__PURE__ */ A(d, {
 					label: X.reloadLatestLabel ?? "Reload latest",
-					onClick: F
+					onClick: I
 				})]
 			}),
-			/* @__PURE__ */ k("div", {
-				className: n("hidden items-center justify-between gap-2 border-b px-4 py-2 desktop:flex desktop:px-8 desktop:pb-3 desktop:pt-3", B.headerBorder),
-				children: [/* @__PURE__ */ O("div", {
+			/* @__PURE__ */ j("div", {
+				className: n("hidden items-center justify-between gap-2 border-b px-4 py-2 desktop:flex desktop:px-8 desktop:pb-3 desktop:pt-3", V.headerBorder),
+				children: [/* @__PURE__ */ A("div", {
 					className: "flex min-w-0 flex-1 items-center gap-2",
-					children: z
-				}), /* @__PURE__ */ O("div", {
+					children: ce
+				}), /* @__PURE__ */ A("div", {
 					className: "flex shrink-0 items-center gap-2",
-					children: Ge
+					children: Ke
 				})]
 			}),
-			/* @__PURE__ */ k("div", {
+			/* @__PURE__ */ j("div", {
 				className: "flex flex-1 flex-col gap-4 overflow-y-auto px-4 pb-20 desktop:flex-row desktop:gap-0 desktop:px-0 desktop:pb-0",
 				children: [
-					/* @__PURE__ */ O("div", {
+					/* @__PURE__ */ A("div", {
 						className: "desktop:hidden",
-						children: /* @__PURE__ */ O(a, {
+						children: /* @__PURE__ */ A(a, {
 							title: X.editingFileLabel ?? "Editing file",
 							description: $?.name ?? "SKILL.md",
-							expanded: ke,
-							onToggle: Ae,
+							expanded: Ae,
+							onToggle: je,
 							ariaLabel: X.editingFileLabel ?? "Editing file",
-							children: Ue
+							children: We
 						})
 					}),
-					/* @__PURE__ */ O("div", {
-						className: n("hidden border-e desktop:block desktop:w-[360px] desktop:shrink-0 desktop:px-8 desktop:py-6", B.sidebarBorder),
-						children: Ue
+					/* @__PURE__ */ A("div", {
+						className: n("hidden border-e desktop:block desktop:w-[360px] desktop:shrink-0 desktop:px-8 desktop:py-6", V.sidebarBorder),
+						children: We
 					}),
-					/* @__PURE__ */ k("div", {
+					/* @__PURE__ */ j("div", {
 						className: "flex min-w-0 flex-1 flex-col gap-4 desktop:gap-5 desktop:px-8 desktop:py-6",
-						children: [/* @__PURE__ */ O("h2", {
-							className: n(B.title, Ne),
-							children: G === "SKILL.md" ? j : X.selectedFileHeading?.($?.name ?? G) ?? $?.name ?? G
-						}), G === "SKILL.md" ? /* @__PURE__ */ k(D, { children: [
-							/* @__PURE__ */ O(u, {
+						children: [/* @__PURE__ */ A("h2", {
+							className: n(V.title, Pe),
+							children: G === "SKILL.md" ? N : X.selectedFileHeading?.($?.name ?? G) ?? $?.name ?? G
+						}), G === "SKILL.md" ? /* @__PURE__ */ j(k, { children: [
+							/* @__PURE__ */ A(p, {
 								labelProps: {
 									label: X.nameLabel ?? "Name",
 									required: !0
@@ -468,12 +452,12 @@ var A = (e) => !!e.dataTransfer?.types.includes("Files"), ae = (e) => {
 									name: e ?? ""
 								})),
 								placeholder: X.namePlaceholder ?? "good-morning-breakfast",
-								caption: A?.name ? void 0 : X.nameCaption ?? "Lowercase letters and hyphens only, no spaces. We'll reformat automatically if needed.",
-								error: A?.name,
-								invalid: !!A?.name,
-								disabled: I
+								caption: S?.name ? void 0 : X.nameCaption ?? "Lowercase letters and hyphens only, no spaces. We'll reformat automatically if needed.",
+								error: S?.name,
+								invalid: !!S?.name,
+								disabled: L
 							}),
-							/* @__PURE__ */ O(g, {
+							/* @__PURE__ */ A(y, {
 								labelProps: {
 									label: X.descriptionLabel ?? "Description",
 									required: !0
@@ -484,56 +468,56 @@ var A = (e) => !!e.dataTransfer?.types.includes("Files"), ae = (e) => {
 									...t,
 									description: e
 								})),
-								error: A?.description,
-								invalid: !!A?.description
+								error: S?.description,
+								invalid: !!S?.description
 							}),
-							/* @__PURE__ */ k("div", {
+							/* @__PURE__ */ j("div", {
 								className: "flex flex-1 flex-col gap-2",
 								children: [
-									/* @__PURE__ */ k("span", {
+									/* @__PURE__ */ j("span", {
 										className: "flex items-center gap-0.5",
-										children: [/* @__PURE__ */ O("span", {
-											className: n(B.helperText, Pe),
+										children: [/* @__PURE__ */ A("span", {
+											className: n(V.helperText, Fe),
 											children: X.instructionsLabel ?? "Instructions"
-										}), /* @__PURE__ */ O("span", {
+										}), /* @__PURE__ */ A("span", {
 											className: "dial-tiny-text text-error",
 											children: "*"
 										})]
 									}),
-									/* @__PURE__ */ O(y, {
-										fallback: /* @__PURE__ */ O(h, { ariaLabel: X.instructionsLoadingAriaLabel ?? "Loading" }),
-										children: /* @__PURE__ */ O(le, {
+									/* @__PURE__ */ A(x, {
+										fallback: /* @__PURE__ */ A(v, { ariaLabel: X.instructionsLoadingAriaLabel ?? "Loading" }),
+										children: /* @__PURE__ */ A(ue, {
 											value: U.instructions,
 											onChange: (e) => W((t) => ({
 												...t,
 												instructions: e
 											})),
-											theme: he,
+											theme: ge,
 											placeholder: X.instructionsPlaceholder ?? "Write the skill instructions in Markdown"
 										})
 									}),
-									A?.instructions && /* @__PURE__ */ O(c, { text: A.instructions })
+									S?.instructions && /* @__PURE__ */ A(u, { text: S.instructions })
 								]
 							})
-						] }) : $?.kind === M.File && (V ?? /* @__PURE__ */ O(ee, { text: X.supportingFileNote ?? "This supporting file is included in the skill package as-is. Remove it from the Files panel to replace its content." }))]
+						] }) : $?.kind === P.File && (B ?? /* @__PURE__ */ A(o, { 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__ */ O("div", {
-				className: n("fixed inset-x-0 bottom-0 flex items-center gap-2 border-t p-3 desktop:hidden", B.actionBarBorder),
-				children: Ge
+			/* @__PURE__ */ A("div", {
+				className: n("fixed inset-x-0 bottom-0 flex items-center gap-2 border-t p-3 desktop:hidden", V.actionBarBorder),
+				children: Ke
 			}),
-			/* @__PURE__ */ O(ce, {
+			/* @__PURE__ */ A(le, {
 				isOpen: q,
 				onClose: () => {
 					J(!1), Y(void 0);
 				},
-				fileActions: R,
-				initialFiles: Oe,
+				fileActions: z,
+				initialFiles: ke,
 				labels: H
 			})
 		]
 	});
 };
 //#endregion
-export { V as SkillEditor, F as SkillFileCandidateKind, M as SkillFileNodeKind, I as SkillFileValidationStatus };
+export { de as SkillEditor, L as SkillFileCandidateKind, P as SkillFileNodeKind, R as SkillFileValidationStatus };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-skill-editor",
   "description": "Host-agnostic form for authoring a DIAL Skill, with an inline supporting-file tree",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -16,9 +16,9 @@
     }
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.0.0",
+    "@epam/ai-dial-chat-shared": "1.0.2",
     "@epam/ai-dial-ui-kit": "*",
-    "@epam/ai-dial-react-file-manager": "^0.2.0-dev.3",
+    "@epam/ai-dial-react-file-manager": "^0.2.0-dev.9",
     "@tabler/icons-react": "^3.0.0",
     "react": "^19.0.0"
   },