@epam/ai-dial-skill-editor 1.2.0-dev.48 → 1.2.0-dev.58

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

@@ -1 +1 @@
-{"version":3,"file":"SkillEditor.d.ts","sourceRoot":"","sources":["../../../src/components/SkillEditor/SkillEditor.tsx"],"names":[],"mappings":"AAiCA,OAAO,0CAA0C,CAAC;AAClD,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAEL,EAAE,EAQH,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EACV,gBAAgB,EAGjB,MAAM,iCAAiC,CAAC;AAsBzC,qFAAqF;AACrF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA2e5C,CAAC"}
+{"version":3,"file":"SkillEditor.d.ts","sourceRoot":"","sources":["../../../src/components/SkillEditor/SkillEditor.tsx"],"names":[],"mappings":"AAiCA,OAAO,0CAA0C,CAAC;AAClD,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAEL,EAAE,EAQH,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,gBAAgB,EAGjB,MAAM,iCAAiC,CAAC;AAsBzC,qFAAqF;AACrF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA8e5C,CAAC"}

package/constants/public-class-names.d.ts

@@ -0,0 +1,5 @@
+export declare const SKILL_EDITOR_CLASS: {
+    /** The editor's root surface, which is also the file drop zone. */
+    readonly root: "dial-skill-editor-root";
+};
+//# sourceMappingURL=public-class-names.d.ts.map

package/constants/public-class-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-class-names.d.ts","sourceRoot":"","sources":["../../src/constants/public-class-names.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,kBAAkB;IAC7B,mEAAmE;;CAE3D,CAAC"}

package/index.d.ts

@@ -2,4 +2,5 @@ export { SkillEditor } from './components/SkillEditor/SkillEditor';
 export type { SkillEditorColors, SkillEditorConflict, SkillEditorErrors, SkillEditorFileActions, SkillEditorLabels, SkillEditorProps, SkillEditorStyles, SkillEditorTypography, SkillEditorValues, SkillFileBatchError, SkillFileCommitResult, SkillFileTreeNode, SkillFileUploadCandidate, SkillFileValidationResult, } from './models/skill-editor-props';
 export { SkillFileCandidateKind, SkillFileValidationStatus, } from './models/skill-editor-props';
 export { SkillFileNodeKind } from './types/skill-file-node-kind';
+export { SKILL_EDITOR_CLASS } from './constants/public-class-names';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,qBAAqB,EACrB,iBAAiB,EACjB,mBAAmB,EACnB,qBAAqB,EACrB,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,GAC1B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,sBAAsB,EACtB,yBAAyB,GAC1B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,qBAAqB,EACrB,iBAAiB,EACjB,mBAAmB,EACnB,qBAAqB,EACrB,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,GAC1B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,sBAAsB,EACtB,yBAAyB,GAC1B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC"}

package/index.js

@@ -1,37 +1,41 @@
 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 ee, GhostIconButton as te, Input as p, NeutralButton as m, Popup as ne, PopupSize as re, PrimaryButton as ie, Spinner as h, Textarea as g } from "@epam/ai-dial-ui-kit";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
-import { IconArrowNarrowLeft as b, IconFileText as ae, IconPlus as oe, IconTrashX as se, IconUpload as x } from "@tabler/icons-react";
-import { Suspense as S, lazy as C, useCallback as w, useEffect as T, useId as E, useMemo as D, useRef as O, useState as k } from "react";
-import { DialFileNodeType as A, DialFoldersTree as ce } from "@epam/ai-dial-react-file-manager";
-import { LazyMarkdownEditor as j } from "@epam/ai-dial-ui-kit/editors";
-var M = {
+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 ee, GhostIconButton as p, 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 ie, IconTrashX as ae, IconUpload as C } from "@tabler/icons-react";
+import { Suspense as w, lazy as T, useCallback as E, useEffect as D, useId as O, useMemo as k, useRef as A, useState as j } from "react";
+import { DialFileNodeType as M, DialFoldersTree as oe } from "@epam/ai-dial-react-file-manager";
+import { LazyMarkdownEditor as N } from "@epam/ai-dial-ui-kit/editors";
+//#region ../builder-form/src/constants/public-class-names.ts
+var se = {
+	layout: "dial-builder-form-layout",
+	section: "dial-builder-form-section"
+}, P = {
 	headerBorder: "_headerBorder_1kidu_1",
 	footerBorder: "_footerBorder_1kidu_5",
 	sidebarBorder: "_sidebarBorder_1kidu_9"
-}, N = ({ title: e, onBack: t, backAriaLabel: r = "Back", actions: a, leftContent: o, rightContent: s, isSaving: u = !1, labels: d, styles: f, dir: ee }) => {
-	let p = E(), m = u ? d?.savingStatusLabel ?? "Saving" : "";
-	return /* @__PURE__ */ y("div", {
+}, ce = ({ title: e, onBack: t, backAriaLabel: r = "Back", actions: a, leftContent: o, rightContent: s, isSaving: u = !1, labels: d, styles: f, dir: ee }) => {
+	let m = O(), h = u ? d?.savingStatusLabel ?? "Saving" : "", g = n({
+		"--el-header-border-color": f?.colors?.headerBorderColor,
+		"--el-sidebar-border-color": f?.colors?.sidebarBorderColor
+	});
+	return /* @__PURE__ */ x("div", {
 		dir: ee,
-		className: "flex min-h-0 flex-1 flex-col",
-		style: n({
-			"--el-header-border-color": f?.colors?.headerBorderColor,
-			"--el-sidebar-border-color": f?.colors?.sidebarBorderColor
-		}),
+		className: i("flex min-h-0 flex-1 flex-col", se.layout),
+		style: g,
 		children: [
-			/* @__PURE__ */ v("span", {
+			/* @__PURE__ */ b("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
-				id: p,
-				children: m
+				id: m,
+				children: h
 			}),
-			/* @__PURE__ */ y("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", M.headerBorder),
-				children: [/* @__PURE__ */ y("div", {
+			/* @__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", P.headerBorder),
+				children: [/* @__PURE__ */ x("div", {
 					className: "flex min-w-0 flex-1 items-center gap-2",
-					children: [/* @__PURE__ */ v(te, {
-						icon: /* @__PURE__ */ v(b, {
+					children: [/* @__PURE__ */ b(p, {
+						icon: /* @__PURE__ */ b(S, {
 							size: c.LG,
 							stroke: l,
 							"aria-hidden": !0,
@@ -39,91 +43,91 @@ var M = {
 						}),
 						"aria-label": r,
 						onClick: t
-					}), /* @__PURE__ */ v("h1", {
+					}), /* @__PURE__ */ b("h1", {
 						className: "dial-h2-text min-w-0 truncate",
 						children: e
 					})]
-				}), a != null && /* @__PURE__ */ v("div", {
+				}), a != null && /* @__PURE__ */ b("div", {
 					className: "hidden shrink-0 items-center gap-2 desktop:flex",
 					children: a
 				})]
 			}),
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ x("div", {
 				className: "flex flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden",
-				children: [/* @__PURE__ */ v("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 : M.sidebarBorder),
+				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 : P.sidebarBorder),
 					children: o
-				}), s != null && /* @__PURE__ */ v("div", {
+				}), s != null && /* @__PURE__ */ b("div", {
 					className: "desktop:flex-1 desktop:overflow-y-auto",
 					children: s
 				})]
 			}),
-			a != null && /* @__PURE__ */ v("div", {
-				className: i("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 desktop:hidden [&>*]:flex-1", M.footerBorder),
+			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", P.footerBorder),
 				children: a
 			})
 		]
 	});
-}, P = (e) => !!e.dataTransfer?.types.includes("Files"), le = (e) => {
-	let [t, n] = k(!1), r = O(0);
+}, le = { root: "dial-skill-editor-root" }, F = (e) => !!e.dataTransfer?.types.includes("Files"), ue = (e) => {
+	let [t, n] = j(!1), r = A(0);
 	return {
 		isDragActive: t,
 		dropZoneHandlers: {
-			onDragEnter: w((e) => {
-				P(e) && (e.preventDefault(), r.current += 1, n(!0));
+			onDragEnter: E((e) => {
+				F(e) && (e.preventDefault(), r.current += 1, n(!0));
 			}, []),
-			onDragLeave: w((e) => {
-				P(e) && (--r.current, r.current <= 0 && (r.current = 0, n(!1)));
+			onDragLeave: E((e) => {
+				F(e) && (--r.current, r.current <= 0 && (r.current = 0, n(!1)));
 			}, []),
-			onDragOver: w((e) => {
-				P(e) && e.preventDefault();
+			onDragOver: E((e) => {
+				F(e) && e.preventDefault();
 			}, []),
-			onDrop: w((t) => {
-				if (!P(t)) return;
+			onDrop: E((t) => {
+				if (!F(t)) return;
 				t.preventDefault(), r.current = 0, n(!1);
 				let i = Array.from(t.dataTransfer?.files ?? []);
 				i.length > 0 && e(i);
 			}, [e])
 		}
 	};
-}, F = "SKILL.md", I = /* @__PURE__ */ function(e) {
+}, I = "SKILL.md", L = /* @__PURE__ */ function(e) {
 	return e.File = "file", e.Folder = "folder", e;
-}({}), L = (e) => {
+}({}), R = (e) => {
 	let t = e.lastIndexOf("/");
 	return t === -1 ? null : e.slice(0, t);
-}, R = (e) => {
+}, de = (e) => {
 	let t = e.lastIndexOf("/");
 	return t === -1 ? e : e.slice(t + 1);
-}, ue = (e) => {
+}, fe = (e) => {
 	let t = /* @__PURE__ */ new Map(), n = (e) => {
 		let n = t.get(e);
 		if (n) return n;
 		let r = {
 			path: e,
-			name: R(e),
-			nodeType: A.FOLDER,
-			parentPath: L(e),
+			name: de(e),
+			nodeType: M.FOLDER,
+			parentPath: R(e),
 			folderId: e,
 			items: []
 		};
 		return t.set(e, r), r;
 	};
 	for (let r of e) {
-		if (r.kind === I.Folder) {
+		if (r.kind === L.Folder) {
 			n(r.path);
 			continue;
 		}
 		t.set(r.path, {
 			path: r.path,
 			name: r.name,
-			nodeType: A.ITEM,
-			parentPath: L(r.path),
-			folderId: L(r.path) ?? ""
+			nodeType: M.ITEM,
+			parentPath: R(r.path),
+			folderId: R(r.path) ?? ""
 		});
 	}
 	for (let t of [...e]) {
-		let e = L(t.path);
-		for (; e != null;) n(e), e = L(e);
+		let e = R(t.path);
+		for (; e != null;) n(e), e = R(e);
 	}
 	let r = [];
 	for (let e of t.values()) {
@@ -135,462 +139,462 @@ var M = {
 		n ? n.items = [...n.items ?? [], e] : r.push(e);
 	}
 	return r;
-}, de = ({ isVisible: e, labels: t }) => {
+}, pe = ({ isVisible: e, labels: t }) => {
 	if (!e) return null;
 	let n = t ?? {};
-	return /* @__PURE__ */ v("div", {
+	return /* @__PURE__ */ b("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__ */ y("div", {
+		children: /* @__PURE__ */ x("div", {
 			className: "flex flex-col items-center text-center",
 			children: [
-				/* @__PURE__ */ v(x, {
+				/* @__PURE__ */ b(C, {
 					size: 100,
 					className: "text-accent-primary",
 					"aria-hidden": !0,
 					stroke: l
 				}),
-				/* @__PURE__ */ v("span", {
+				/* @__PURE__ */ b("span", {
 					className: "dial-h3-text mt-5",
 					children: n.dropOverlayTitle ?? "Upload files"
 				}),
-				/* @__PURE__ */ v("span", {
+				/* @__PURE__ */ b("span", {
 					className: "dial-small-text mt-4",
 					children: n.dropOverlaySubtitle ?? "Drop files here to add them to this skill"
 				})
 			]
 		})
 	});
-}, fe = /* @__PURE__ */ function(e) {
+}, z = /* @__PURE__ */ function(e) {
 	return e.SupportingFile = "supporting-file", e.Manifest = "manifest", e;
-}({}), z = /* @__PURE__ */ function(e) {
+}({}), B = /* @__PURE__ */ function(e) {
 	return e.Valid = "valid", e.Invalid = "invalid", e;
-}({}), B = (e) => (e.webkitRelativePath || e.name).replace(/\\/g, "/"), V = 0, H = () => `skill-file-candidate-${++V}`, pe = ({ isOpen: e, onClose: t, fileActions: n, initialFiles: i, labels: a }) => {
-	let o = a ?? {}, [s, c] = k([]), [u, p] = k(/* @__PURE__ */ new Map()), [m, g] = k([]), [b, oe] = k(!1), [x, S] = k(), [C, w] = k(!1), D = E(), O = (e) => {
+}({}), V = (e) => (e.webkitRelativePath || e.name).replace(/\\/g, "/"), H = 0, U = () => `skill-file-candidate-${++H}`, me = ({ isOpen: e, onClose: t, fileActions: n, initialFiles: i, labels: a }) => {
+	let o = a ?? {}, [s, c] = j([]), [u, m] = j(/* @__PURE__ */ new Map()), [h, v] = j([]), [S, ie] = j(!1), [C, w] = j(), [T, E] = j(!1), k = O(), A = (e) => {
 		let t = e.map((e) => ({
-			id: H(),
+			id: U(),
 			file: e,
-			path: B(e)
+			path: V(e)
 		}));
-		S(void 0), c((e) => [...e, ...t]);
-	}, A = (e) => {
+		w(void 0), c((e) => [...e, ...t]);
+	}, M = (e) => {
 		c((t) => t.filter((t) => t.id !== e));
 	};
-	T(() => {
+	D(() => {
 		e && (c((i ?? []).map((e) => ({
-			id: H(),
+			id: U(),
 			file: e,
-			path: B(e)
-		}))), p(/* @__PURE__ */ new Map()), g([]), S(void 0));
-	}, [e]), T(() => {
+			path: V(e)
+		}))), m(/* @__PURE__ */ new Map()), v([]), w(void 0));
+	}, [e]), D(() => {
 		if (!e) return;
 		let t = !1;
 		if (s.length === 0) {
-			p(/* @__PURE__ */ new Map()), g([]);
+			m(/* @__PURE__ */ new Map()), v([]);
 			return;
 		}
-		return oe(!0), n.validateBatch(s).then(({ results: e, batchErrors: n }) => {
-			t || (p(new Map(e.map((e) => [e.candidateId, e]))), g(n.map((e) => e.message)));
+		return ie(!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)));
 		}).finally(() => {
-			t || oe(!1);
+			t || ie(!1);
 		}), () => {
 			t = !0;
 		};
 	}, [s, e]);
-	let ce = s.some((e) => u.get(e.id)?.status === z.Invalid), j = s.length > 0 && s.every((e) => u.get(e.id)?.status === z.Invalid), M = s.length > 0 && !ce && m.length === 0 && !b && !C, N = async () => {
-		w(!0), S(void 0);
+	let oe = s.some((e) => u.get(e.id)?.status === B.Invalid), N = s.length > 0 && s.every((e) => u.get(e.id)?.status === B.Invalid), se = s.length > 0 && !oe && h.length === 0 && !S && !T, P = async () => {
+		E(!0), w(void 0);
 		try {
 			let { results: e, batchErrors: r } = await n.validateBatch(s), i = new Map(e.map((e) => [e.candidateId, e]));
-			if (p(i), g(r.map((e) => e.message)), s.some((e) => i.get(e.id)?.status === z.Invalid) || r.length > 0) return;
+			if (m(i), v(r.map((e) => e.message)), s.some((e) => i.get(e.id)?.status === B.Invalid) || r.length > 0) return;
 			let a = await n.commitBatch(s);
 			if (a.error) {
-				S(a.error);
+				w(a.error);
 				return;
 			}
 			t();
 		} finally {
-			w(!1);
+			E(!1);
 		}
 	};
-	return /* @__PURE__ */ v(ne, {
+	return /* @__PURE__ */ b(g, {
 		open: e,
 		header: o.uploadDialogTitle ?? "Upload files from device",
-		size: re.Sm,
+		size: te.Sm,
 		closeAriaLabel: o.uploadDialogCloseAriaLabel ?? "Close",
 		onClose: t,
-		footer: /* @__PURE__ */ y("div", {
+		footer: /* @__PURE__ */ x("div", {
 			className: "flex min-h-[44px] items-center justify-end gap-2 px-6 py-4",
-			children: [/* @__PURE__ */ v(ee, {
+			children: [/* @__PURE__ */ b(ee, {
 				label: o.uploadCancelLabel ?? "Cancel",
 				onClick: t
-			}), /* @__PURE__ */ v(ie, {
+			}), /* @__PURE__ */ b(ne, {
 				label: o.uploadConfirmLabel ?? "Add",
-				iconBefore: C ? /* @__PURE__ */ v(h, {
+				iconBefore: T ? /* @__PURE__ */ b(_, {
 					size: 16,
 					ariaLabel: ""
 				}) : void 0,
-				onClick: () => void N(),
-				disabled: !M
+				onClick: () => void P(),
+				disabled: !se
 			})]
 		}),
-		children: /* @__PURE__ */ y("div", {
+		children: /* @__PURE__ */ x("div", {
 			className: "flex flex-col gap-4 px-6 py-4",
 			children: [
-				/* @__PURE__ */ v(f, {
-					label: /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("span", {
+				/* @__PURE__ */ b(f, {
+					label: /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("span", {
 						className: "desktop:hidden",
 						children: o.uploadDropZoneMobileLabel ?? "Click here to upload"
-					}), /* @__PURE__ */ v("span", {
+					}), /* @__PURE__ */ b("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: j ? "border-error hover:border-error" : void 0,
-					onChange: O
+					className: N ? "border-error hover:border-error" : void 0,
+					onChange: A
 				}),
-				/* @__PURE__ */ v("span", {
+				/* @__PURE__ */ b("span", {
 					role: "status",
 					"aria-live": "polite",
 					className: "sr-only",
-					id: D,
-					children: m.map((e) => `${o.uploadBatchErrorAriaPrefix ?? "Upload error: "}${e}`).join(" ")
+					id: k,
+					children: h.map((e) => `${o.uploadBatchErrorAriaPrefix ?? "Upload error: "}${e}`).join(" ")
 				}),
-				m.map((e) => /* @__PURE__ */ v(d, { text: e }, e)),
-				s.length > 0 && /* @__PURE__ */ v("ul", {
+				h.map((e) => /* @__PURE__ */ b(d, { text: e }, e)),
+				s.length > 0 && /* @__PURE__ */ b("ul", {
 					className: "flex flex-col gap-2",
 					children: s.map((e) => {
-						let t = u.get(e.id), n = t?.kind === fe.Manifest, i = t?.status === z.Invalid;
-						return /* @__PURE__ */ y("li", {
+						let t = u.get(e.id), n = t?.kind === z.Manifest, i = t?.status === B.Invalid;
+						return /* @__PURE__ */ x("li", {
 							className: "flex items-center gap-2 rounded-lg border border-tertiary p-2",
 							children: [
-								/* @__PURE__ */ v(ae, {
+								/* @__PURE__ */ b(re, {
 									size: 20,
 									"aria-hidden": !0,
 									stroke: l
 								}),
-								/* @__PURE__ */ y("div", {
+								/* @__PURE__ */ x("div", {
 									className: "flex min-w-0 flex-1 flex-col",
 									children: [
-										/* @__PURE__ */ v("span", {
+										/* @__PURE__ */ b("span", {
 											className: "dial-small-text truncate",
 											children: e.path
 										}),
-										/* @__PURE__ */ v("span", {
+										/* @__PURE__ */ b("span", {
 											className: "dial-tiny-text text-secondary",
 											children: r(e.file.size)
 										}),
-										i && t?.error && /* @__PURE__ */ v(d, { text: t.error }),
-										n && !i && /* @__PURE__ */ v("span", {
+										i && t?.error && /* @__PURE__ */ b(d, { text: t.error }),
+										n && !i && /* @__PURE__ */ b("span", {
 											className: "dial-tiny-text text-secondary",
 											children: o.uploadManifestRowNote ?? "Will replace this Skill's name, description, and instructions"
 										})
 									]
 								}),
-								/* @__PURE__ */ v(te, {
-									icon: /* @__PURE__ */ v(se, {
+								/* @__PURE__ */ b(p, {
+									icon: /* @__PURE__ */ b(ae, {
 										size: 16,
 										"aria-hidden": !0,
 										stroke: l
 									}),
 									"aria-label": o.uploadRemoveCandidateLabel?.(e.path) ?? `Remove ${e.path}`,
-									onClick: () => A(e.id)
+									onClick: () => M(e.id)
 								})
 							]
 						}, e.id);
 					})
 				}),
-				x && /* @__PURE__ */ v(d, { text: x })
+				C && /* @__PURE__ */ b(d, { text: C })
 			]
 		})
 	});
-}, U = {
+}, he = {
 	title: "_title_65glc_1",
 	helperText: "_helperText_65glc_5"
-}, me = C(async () => {
-	let { MarkdownEditor: e } = await j();
+}, ge = T(async () => {
+	let { MarkdownEditor: e } = await N();
 	return { default: e };
-}), W = ({ initialValues: r, files: f, selectedPath: te, onSelectedPathChange: ne, expandedPaths: re, onExpandedPathsChange: b, isLoading: ae = !1, hasLoadError: x = !1, isSubmitting: C = !1, errors: E, submitError: A, conflict: j, onReloadLatest: M, isNameReadOnly: P = !1, onDirtyChange: L, fileActions: R, supportingFileContent: fe, onSubmit: z, onCancel: B, onBack: V, backAriaLabel: H, title: W, onRetry: he, labels: ge, styles: _e, dir: ve, instructionsEditorTheme: ye = u.light }) => {
-	let [G, K] = k({
+}), _e = ({ initialValues: r, files: f, selectedPath: p, onSelectedPathChange: g, expandedPaths: te, onExpandedPathsChange: S, isLoading: re = !1, hasLoadError: C = !1, isSubmitting: T = !1, errors: O, submitError: M, conflict: N, onReloadLatest: se, isNameReadOnly: P = !1, onDirtyChange: F, fileActions: R, supportingFileContent: de, onSubmit: z, onCancel: B, onBack: V, backAriaLabel: H, title: U, onRetry: _e, labels: ve, styles: ye, dir: be, instructionsEditorTheme: xe = u.light }) => {
+	let [W, G] = j({
 		name: r?.name ?? "",
 		description: r?.description ?? "",
 		instructions: r?.instructions ?? ""
-	}), be = a(), xe = O(r), Se = xe.current !== r, Ce = O(f);
-	T(() => {
-		xe.current = r, K({
+	}), Se = a(), Ce = A(r), we = Ce.current !== r, Te = A(f);
+	D(() => {
+		Ce.current = r, G({
 			name: r?.name ?? "",
 			description: r?.description ?? "",
 			instructions: r?.instructions ?? ""
-		}), Ce.current = f;
+		}), Te.current = f;
 	}, [r]);
-	let we = (e) => JSON.stringify([...e].sort((e, t) => e.path.localeCompare(t.path))), Te = O(!1);
-	T(() => {
-		if (Se) return;
+	let Ee = (e) => JSON.stringify([...e].sort((e, t) => e.path.localeCompare(t.path))), De = A(!1);
+	D(() => {
+		if (we) return;
 		let e = {
 			name: r?.name ?? "",
 			description: r?.description ?? "",
 			instructions: r?.instructions ?? ""
-		}, t = JSON.stringify(G) !== JSON.stringify(e) || we(f) !== we(Ce.current);
-		t !== Te.current && (Te.current = t, L?.(t));
+		}, t = JSON.stringify(W) !== JSON.stringify(e) || Ee(f) !== Ee(Te.current);
+		t !== De.current && (De.current = t, F?.(t));
 	}, [
-		G,
+		W,
 		f,
 		r,
-		Se,
-		L
+		we,
+		F
 	]);
-	let [Ee, De] = k(F), q = te ?? Ee, J = w((e) => {
-		De(e), ne?.(e);
-	}, [ne]), [Oe, ke] = k([]), Ae = re ?? Oe, je = D(() => new Set(Ae), [Ae]), Me = w((e) => {
+	let [Oe, ke] = j(I), K = p ?? Oe, q = E((e) => {
+		ke(e), g?.(e);
+	}, [g]), [Ae, je] = j([]), Me = te ?? Ae, Ne = k(() => new Set(Me), [Me]), Pe = E((e) => {
 		let t = [...e];
-		ke(t), b?.(t);
-	}, [b]), [Y, Ne] = k(!1), [Pe, Fe] = k(), [Ie, Le] = k(!1), { isDragActive: Re, dropZoneHandlers: ze } = le(w((e) => {
-		Y || (Fe(e), Ne(!0));
-	}, [Y])), X = ge ?? {}, Z = _e?.colors, Q = _e?.typography ?? {}, Be = Q.titleClassName ?? "dial-body-semi-text", Ve = Q.helperTextClassName ?? "dial-tiny-semi-text", He = Q.removeIconClassName ?? "text-secondary", Ue = n({
-		"--se-title-color": Z?.title,
-		"--se-helper-text-color": Z?.helperText
-	}), We = Z?.border ? { colors: {
-		headerBorderColor: Z.border,
-		sidebarBorderColor: Z.border
-	} } : void 0, Ge = D(() => ue([{
-		path: F,
-		name: F,
-		kind: I.File
-	}, ...f]), [f]), $ = D(() => f.find((e) => e.path === q), [f, q]), Ke = w((e) => {
-		J(e.path);
-	}, [J]), qe = w((e) => {
-		R.onRemoveNode(e), q === e && J(F);
+		je(t), S?.(t);
+	}, [S]), [J, Fe] = j(!1), [Ie, Le] = j(), [Re, ze] = j(!1), { isDragActive: Be, dropZoneHandlers: Ve } = ue(E((e) => {
+		J || (Le(e), Fe(!0));
+	}, [J])), Y = ve ?? {}, X = ye?.colors, He = ye?.typography ?? {}, Ue = He.titleClassName ?? "dial-body-semi-text", We = He.helperTextClassName ?? "dial-tiny-semi-text", Ge = He.removeIconClassName ?? "text-secondary", Ke = n({
+		"--se-title-color": X?.title,
+		"--se-helper-text-color": X?.helperText
+	}), Z = X?.border ? { colors: {
+		headerBorderColor: X.border,
+		sidebarBorderColor: X.border
+	} } : void 0, qe = k(() => fe([{
+		path: I,
+		name: I,
+		kind: L.File
+	}, ...f]), [f]), Q = k(() => f.find((e) => e.path === K), [f, K]), Je = E((e) => {
+		q(e.path);
+	}, [q]), Ye = E((e) => {
+		R.onRemoveNode(e), K === e && q(I);
 	}, [
 		R,
-		q,
-		J
-	]), Je = w((e) => e.path === "SKILL.md" ? [] : [{
+		K,
+		q
+	]), Xe = E((e) => e.path === "SKILL.md" ? [] : [{
 		key: "remove",
-		label: X.removeLabel ?? "Remove",
-		icon: /* @__PURE__ */ v(se, {
+		label: Y.removeLabel ?? "Remove",
+		icon: /* @__PURE__ */ b(ae, {
 			size: c.SM,
-			className: He,
+			className: Ge,
 			"aria-hidden": !0,
 			stroke: l
 		}),
-		onClick: () => qe(e.path)
+		onClick: () => Ye(e.path)
 	}], [
-		X.removeLabel,
-		He,
-		qe
-	]), Ye = /* @__PURE__ */ y("div", {
+		Y.removeLabel,
+		Ge,
+		Ye
+	]), Ze = /* @__PURE__ */ x("div", {
 		className: "flex flex-col gap-2 desktop:gap-5",
-		children: [/* @__PURE__ */ y("div", {
+		children: [/* @__PURE__ */ x("div", {
 			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ v("span", {
-				className: i(U.title, Be),
-				children: X.filesHeading ?? "Files"
-			}), /* @__PURE__ */ v(m, {
-				label: X.addUploadLabel ?? "Upload from device",
-				iconBefore: /* @__PURE__ */ v(oe, {
+			children: [/* @__PURE__ */ b("span", {
+				className: i(he.title, Ue),
+				children: Y.filesHeading ?? "Files"
+			}), /* @__PURE__ */ b(h, {
+				label: Y.addUploadLabel ?? "Upload from device",
+				iconBefore: /* @__PURE__ */ b(ie, {
 					size: 16,
 					"aria-hidden": !0,
 					stroke: l
 				}),
 				onClick: () => {
-					Fe(void 0), Ne(!0);
+					Le(void 0), Fe(!0);
 				}
 			})]
-		}), /* @__PURE__ */ v("div", {
+		}), /* @__PURE__ */ b("div", {
 			role: "tree",
-			"aria-label": X.filesTreeAriaLabel ?? "Skill files",
-			children: /* @__PURE__ */ v(ce, {
-				items: Ge,
+			"aria-label": Y.filesTreeAriaLabel ?? "Skill files",
+			children: /* @__PURE__ */ b(oe, {
+				items: qe,
 				showFiles: !0,
-				selectedPath: q,
-				expandedPaths: je,
-				onExpandedPathsChange: Me,
-				onItemClick: Ke,
-				getContextMenuItems: Je,
+				selectedPath: K,
+				expandedPaths: Ne,
+				onExpandedPathsChange: Pe,
+				onItemClick: Je,
+				getContextMenuItems: Xe,
 				rootItemPath: ""
 			})
 		})]
-	}), Xe = /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(m, {
-		label: X.cancelLabel ?? "Cancel",
+	}), $ = /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(h, {
+		label: Y.cancelLabel ?? "Cancel",
 		onClick: B,
-		disabled: C
-	}), /* @__PURE__ */ v(ie, {
-		label: X.createLabel ?? "Create",
-		iconBefore: C ? /* @__PURE__ */ v(h, {
+		disabled: T
+	}), /* @__PURE__ */ b(ne, {
+		label: Y.createLabel ?? "Create",
+		iconBefore: T ? /* @__PURE__ */ b(_, {
 			size: 16,
 			ariaLabel: ""
 		}) : void 0,
-		onClick: () => z(G),
-		disabled: C
+		onClick: () => z(W),
+		disabled: T
 	})] });
-	return ae ? /* @__PURE__ */ v("div", {
-		dir: ve,
+	return re ? /* @__PURE__ */ b("div", {
+		dir: be,
 		className: "relative flex min-h-0 flex-1 flex-col",
-		children: /* @__PURE__ */ v(N, {
-			title: W,
+		children: /* @__PURE__ */ b(ce, {
+			title: U,
 			onBack: V,
 			backAriaLabel: H,
-			actions: Xe,
+			actions: $,
 			isSaving: !1,
-			labels: { savingStatusLabel: X.savingStatusLabel },
-			styles: We,
-			leftContent: /* @__PURE__ */ v("div", {
+			labels: { savingStatusLabel: Y.savingStatusLabel },
+			styles: Z,
+			leftContent: /* @__PURE__ */ b("div", {
 				role: "status",
-				"aria-label": X.loadingAriaLabel ?? "Loading skill",
+				"aria-label": Y.loadingAriaLabel ?? "Loading skill",
 				className: "flex flex-1 items-center justify-center p-8",
-				children: /* @__PURE__ */ v(h, {})
+				children: /* @__PURE__ */ b(_, {})
 			})
 		})
-	}) : x ? /* @__PURE__ */ v("div", {
-		dir: ve,
+	}) : C ? /* @__PURE__ */ b("div", {
+		dir: be,
 		className: "relative flex min-h-0 flex-1 flex-col",
-		children: /* @__PURE__ */ v(N, {
-			title: W,
+		children: /* @__PURE__ */ b(ce, {
+			title: U,
 			onBack: V,
 			backAriaLabel: H,
-			actions: Xe,
+			actions: $,
 			isSaving: !1,
-			labels: { savingStatusLabel: X.savingStatusLabel },
-			styles: We,
-			leftContent: /* @__PURE__ */ y("div", {
+			labels: { savingStatusLabel: Y.savingStatusLabel },
+			styles: Z,
+			leftContent: /* @__PURE__ */ x("div", {
 				role: "alert",
 				className: "flex flex-col items-center gap-4 p-8",
-				children: [/* @__PURE__ */ v(d, { text: X.loadErrorMessage ?? "Couldn't load this skill. Please try again." }), /* @__PURE__ */ v(ie, {
-					label: X.retryLabel ?? "Retry",
-					onClick: he
+				children: [/* @__PURE__ */ b(d, { text: Y.loadErrorMessage ?? "Couldn't load this skill. Please try again." }), /* @__PURE__ */ b(ne, {
+					label: Y.retryLabel ?? "Retry",
+					onClick: _e
 				})]
 			})
 		})
-	}) : /* @__PURE__ */ y("div", {
-		dir: ve,
-		className: "relative flex min-h-0 flex-1 flex-col",
-		style: Ue,
-		...ze,
+	}) : /* @__PURE__ */ x("div", {
+		dir: be,
+		className: i("relative flex min-h-0 flex-1 flex-col", le.root),
+		style: Ke,
+		...Ve,
 		children: [
-			/* @__PURE__ */ v(de, {
-				isVisible: Re && !Y,
-				labels: ge
+			/* @__PURE__ */ b(pe, {
+				isVisible: Be && !J,
+				labels: ve
 			}),
-			/* @__PURE__ */ v(N, {
-				title: W,
+			/* @__PURE__ */ b(ce, {
+				title: U,
 				onBack: V,
 				backAriaLabel: H,
-				actions: Xe,
-				isSaving: C,
-				labels: { savingStatusLabel: X.savingStatusLabel },
-				styles: We,
-				leftContent: /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("div", {
+				actions: $,
+				isSaving: T,
+				labels: { savingStatusLabel: Y.savingStatusLabel },
+				styles: Z,
+				leftContent: /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", {
 					className: "px-4 py-4 desktop:hidden",
-					children: /* @__PURE__ */ v(o, {
-						title: X.editingFileLabel ?? "Editing file",
-						description: $?.name ?? "SKILL.md",
-						expanded: Ie,
-						onToggle: Le,
-						ariaLabel: X.editingFileLabel ?? "Editing file",
-						children: Ye
+					children: /* @__PURE__ */ b(o, {
+						title: Y.editingFileLabel ?? "Editing file",
+						description: Q?.name ?? "SKILL.md",
+						expanded: Re,
+						onToggle: ze,
+						ariaLabel: Y.editingFileLabel ?? "Editing file",
+						children: Ze
 					})
-				}), /* @__PURE__ */ v("div", {
+				}), /* @__PURE__ */ b("div", {
 					className: "hidden px-8 py-6 desktop:block",
-					children: Ye
+					children: Ze
 				})] }),
-				rightContent: /* @__PURE__ */ y("div", {
+				rightContent: /* @__PURE__ */ x("div", {
 					className: "flex flex-1 flex-col gap-4 px-4 py-6 desktop:gap-5 desktop:px-8",
 					children: [
-						A != null && /* @__PURE__ */ v("div", {
+						M != null && /* @__PURE__ */ b("div", {
 							role: "alert",
-							children: /* @__PURE__ */ v(d, { text: A })
+							children: /* @__PURE__ */ b(d, { text: M })
 						}),
-						j != null && /* @__PURE__ */ y("div", {
+						N != null && /* @__PURE__ */ x("div", {
 							role: "alert",
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ v(d, { text: j.message }), /* @__PURE__ */ v(ee, {
-								label: X.reloadLatestLabel ?? "Reload latest",
-								onClick: M
+							children: [/* @__PURE__ */ b(d, { text: N.message }), /* @__PURE__ */ b(ee, {
+								label: Y.reloadLatestLabel ?? "Reload latest",
+								onClick: se
 							})]
 						}),
-						/* @__PURE__ */ v("h2", {
-							className: i(U.title, Be),
-							children: q === "SKILL.md" ? F : X.selectedFileHeading?.($?.name ?? q) ?? $?.name ?? q
+						/* @__PURE__ */ b("h2", {
+							className: i(he.title, Ue),
+							children: K === "SKILL.md" ? I : Y.selectedFileHeading?.(Q?.name ?? K) ?? Q?.name ?? K
 						}),
-						q === "SKILL.md" ? /* @__PURE__ */ y(_, { children: [
-							/* @__PURE__ */ v(p, {
+						K === "SKILL.md" ? /* @__PURE__ */ x(y, { children: [
+							/* @__PURE__ */ b(m, {
 								labelProps: {
-									label: X.nameLabel ?? "Name",
+									label: Y.nameLabel ?? "Name",
 									required: !0
 								},
-								value: G.name,
-								onChange: (e) => K((t) => ({
+								value: W.name,
+								onChange: (e) => G((t) => ({
 									...t,
 									name: e ?? ""
 								})),
-								placeholder: X.namePlaceholder ?? "good-morning-breakfast",
-								caption: E?.name ? void 0 : X.nameCaption ?? "Lowercase letters and hyphens only, no spaces. We'll reformat automatically if needed.",
-								error: E?.name,
-								invalid: !!E?.name,
+								placeholder: Y.namePlaceholder ?? "good-morning-breakfast",
+								caption: O?.name ? void 0 : Y.nameCaption ?? "Lowercase letters and hyphens only, no spaces. We'll reformat automatically if needed.",
+								error: O?.name,
+								invalid: !!O?.name,
 								disabled: P
 							}),
-							/* @__PURE__ */ v(g, {
+							/* @__PURE__ */ b(v, {
 								labelProps: {
-									label: X.descriptionLabel ?? "Description",
+									label: Y.descriptionLabel ?? "Description",
 									required: !0
 								},
-								value: G.description,
-								placeholder: X.descriptionPlaceholder ?? "What this skill does and when to use it",
-								onChange: (e) => K((t) => ({
+								value: W.description,
+								placeholder: Y.descriptionPlaceholder ?? "What this skill does and when to use it",
+								onChange: (e) => G((t) => ({
 									...t,
 									description: e
 								})),
-								error: E?.description,
-								invalid: !!E?.description
+								error: O?.description,
+								invalid: !!O?.description
 							}),
-							/* @__PURE__ */ y("div", {
+							/* @__PURE__ */ x("div", {
 								className: "flex flex-1 flex-col gap-2",
 								children: [
-									/* @__PURE__ */ y("span", {
+									/* @__PURE__ */ x("span", {
 										className: "flex items-center gap-0.5",
-										children: [/* @__PURE__ */ v("span", {
-											className: i(U.helperText, Ve),
-											children: X.instructionsLabel ?? "Instructions"
-										}), /* @__PURE__ */ v("span", {
+										children: [/* @__PURE__ */ b("span", {
+											className: i(he.helperText, We),
+											children: Y.instructionsLabel ?? "Instructions"
+										}), /* @__PURE__ */ b("span", {
 											className: "dial-tiny-text text-error",
 											children: "*"
 										})]
 									}),
-									/* @__PURE__ */ v("div", {
-										ref: be,
+									/* @__PURE__ */ b("div", {
+										ref: Se,
 										className: i(e, t),
-										children: /* @__PURE__ */ v(S, {
-											fallback: /* @__PURE__ */ v(h, { ariaLabel: X.instructionsLoadingAriaLabel ?? "Loading" }),
-											children: /* @__PURE__ */ v(me, {
-												value: G.instructions,
-												onChange: (e) => K((t) => ({
+										children: /* @__PURE__ */ b(w, {
+											fallback: /* @__PURE__ */ b(_, { ariaLabel: Y.instructionsLoadingAriaLabel ?? "Loading" }),
+											children: /* @__PURE__ */ b(ge, {
+												value: W.instructions,
+												onChange: (e) => G((t) => ({
 													...t,
 													instructions: e
 												})),
-												theme: ye,
-												placeholder: X.instructionsPlaceholder ?? "Write the skill instructions in Markdown"
+												theme: xe,
+												placeholder: Y.instructionsPlaceholder ?? "Write the skill instructions in Markdown"
 											})
 										})
 									}),
-									E?.instructions != null && /* @__PURE__ */ v(d, { text: E.instructions })
+									O?.instructions != null && /* @__PURE__ */ b(d, { text: O.instructions })
 								]
 							})
-						] }) : $?.kind === I.File && (fe ?? /* @__PURE__ */ v(s, { text: X.supportingFileNote ?? "This supporting file is included in the skill package as-is. Remove it from the Files panel to replace its content." }))
+						] }) : Q?.kind === L.File && (de ?? /* @__PURE__ */ b(s, { text: Y.supportingFileNote ?? "This supporting file is included in the skill package as-is. Remove it from the Files panel to replace its content." }))
 					]
 				})
 			}),
-			/* @__PURE__ */ v(pe, {
-				isOpen: Y,
+			/* @__PURE__ */ b(me, {
+				isOpen: J,
 				onClose: () => {
-					Ne(!1), Fe(void 0);
+					Fe(!1), Le(void 0);
 				},
 				fileActions: R,
-				initialFiles: Pe,
-				labels: ge
+				initialFiles: Ie,
+				labels: ve
 			})
 		]
 	});
 };
 //#endregion
-export { W as SkillEditor, fe as SkillFileCandidateKind, I as SkillFileNodeKind, z as SkillFileValidationStatus };
+export { le as SKILL_EDITOR_CLASS, _e as SkillEditor, z as SkillFileCandidateKind, L as SkillFileNodeKind, B 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.2.0-dev.48",
+  "version": "1.2.0-dev.58",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -20,11 +20,11 @@
     "@tabler/icons-react": "^3.44.0",
     "@uiw/react-markdown-preview": "^5.2.1",
     "@uiw/react-md-editor": "^4.1.1",
-    "@epam/ai-dial-builder-form": "1.2.0-dev.48"
+    "@epam/ai-dial-builder-form": "1.2.0-dev.58"
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.2.0-dev.48",
-    "@epam/ai-dial-ui-kit": "^0.15.0-dev.7",
+    "@epam/ai-dial-chat-shared": "1.2.0-dev.58",
+    "@epam/ai-dial-ui-kit": "^0.15.0-dev.9",
     "@epam/ai-dial-react-file-manager": "^0.3.0-dev.2",
     "react": "^19.2.8"
   },