@epam/ai-dial-skill-editor 1.2.0-dev.164 → 1.2.0-dev.173

package/index.js

@@ -1,10 +1,10 @@
 import { MARKDOWN_EDITOR_MAX_HEIGHT_CLASS_NAME as e, MARKDOWN_EDITOR_PREVIEW_LIST_CLASS_NAME as t, TextRefinementField 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, ButtonAppearance as l, ButtonVariant as u, CaptionText as d, DIAL_ICON_SIZE as f, DIAL_KIT_ICON_STROKE as p, EditorThemes as m, ErrorText as h, FileDropzone as g, GhostButton as _, GhostIconButton as ee, Input as te, Label as ne, NeutralButton as v, Popup as re, PopupSize as y, PrimaryButton as b, Spinner as x, Textarea as ie } from "@epam/ai-dial-ui-kit";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
-import { IconArrowNarrowLeft as T, IconFileText as E, IconPlus as ae, IconTrashX as oe, IconUpload as D } from "@tabler/icons-react";
-import { Suspense as se, lazy as O, useCallback as k, useEffect as A, useId as j, useMemo as M, useRef as N, useState as P } from "react";
-import { DialFileNodeType as F, DialFoldersTree as ce } from "@epam/ai-dial-react-file-manager";
-import { LazyMarkdownEditor as le } from "@epam/ai-dial-ui-kit/editors";
+import { Accordion as c, ButtonAppearance as l, ButtonDropdown as u, ButtonVariant as d, CaptionText as f, DIAL_ICON_SIZE as p, DIAL_KIT_ICON_STROKE as m, EditorThemes as h, ElementSize as g, ErrorText as _, FileDropzone as v, GhostButton as y, GhostIconButton as ee, Input as te, Label as ne, NeutralButton as re, Popup as ie, PopupSize as ae, PrimaryButton as oe, Spinner as b, Textarea as x } from "@epam/ai-dial-ui-kit";
+import { Fragment as se, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { IconArrowNarrowLeft as w, IconDatabase as ce, IconFileText as T, IconFileZip as le, IconFolderPlus as E, IconPlus as ue, IconTrashX as de, IconUpload as fe } from "@tabler/icons-react";
+import { Suspense as D, lazy as O, useCallback as k, useEffect as pe, useId as me, useMemo as A, useRef as j, useState as M } from "react";
+import { DialFileNodeType as he, DialFoldersTree as ge } from "@epam/ai-dial-react-file-manager";
+import { LazyMarkdownEditor as N } from "@epam/ai-dial-ui-kit/editors";
 a("flex flex-col", {
 	body: "_body_m2y60_2",
 	sideColumn: "_sideColumn_m2y60_6",
@@ -12,131 +12,111 @@ a("flex flex-col", {
 }.sideColumn);
 //#endregion
 //#region ../builder-form/src/constants/public-class-names.ts
-var ue = {
+var P = {
 	layout: "dial-builder-form-layout",
 	section: "dial-builder-form-section"
-}, I = {
+}, F = {
 	headerBorder: "_headerBorder_1kidu_1",
 	footerBorder: "_footerBorder_1kidu_5",
 	sidebarBorder: "_sidebarBorder_1kidu_9"
-}, de = ({ title: e, onBack: t, backAriaLabel: n = "Back", actions: i, leftContent: o, rightContent: s, isSaving: c = !1, labels: l, styles: u, dir: d }) => {
-	let m = j(), h = c ? l?.savingStatusLabel ?? "Saving" : "", g = r({
+}, _e = ({ title: e, onBack: t, backAriaLabel: n = "Back", actions: i, leftContent: o, rightContent: s, isSaving: c = !1, labels: l, styles: u, dir: d }) => {
+	let f = me(), h = c ? l?.savingStatusLabel ?? "Saving" : "", g = r({
 		"--el-header-border-color": u?.colors?.headerBorderColor,
 		"--el-sidebar-border-color": u?.colors?.sidebarBorderColor
 	});
-	return /* @__PURE__ */ w("div", {
+	return /* @__PURE__ */ C("div", {
 		dir: d,
-		className: a("flex min-h-0 flex-1 flex-col", ue.layout),
+		className: a("flex min-h-0 flex-1 flex-col", P.layout),
 		style: g,
 		children: [
-			/* @__PURE__ */ C("span", {
+			/* @__PURE__ */ S("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
-				id: m,
+				id: f,
 				children: h
 			}),
-			/* @__PURE__ */ w("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", I.headerBorder),
-				children: [/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ C("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__ */ C("div", {
 					className: "flex min-w-0 flex-1 items-center gap-2",
-					children: [/* @__PURE__ */ C(ee, {
-						icon: /* @__PURE__ */ C(T, {
-							size: f.LG,
-							stroke: p,
+					children: [/* @__PURE__ */ S(ee, {
+						icon: /* @__PURE__ */ S(w, {
+							size: p.LG,
+							stroke: m,
 							"aria-hidden": !0,
 							className: "rtl:scale-x-[-1]"
 						}),
 						"aria-label": n,
 						onClick: t
-					}), /* @__PURE__ */ C("h1", {
+					}), /* @__PURE__ */ S("h1", {
 						className: "dial-h2-text min-w-0 truncate",
 						children: e
 					})]
-				}), i != null && /* @__PURE__ */ C("div", {
+				}), i != null && /* @__PURE__ */ S("div", {
 					className: "hidden shrink-0 items-center gap-2 desktop:flex",
 					children: i
 				})]
 			}),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ C("div", {
 				className: "flex flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden",
-				children: [/* @__PURE__ */ C("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 : I.sidebarBorder),
+				children: [/* @__PURE__ */ S("div", {
+					className: a(s == null ? "desktop:flex-1" : "desktop:w-[400px] 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__ */ C("div", {
+				}), s != null && /* @__PURE__ */ S("div", {
 					className: "desktop:flex-1 desktop:overflow-y-auto",
 					children: s
 				})]
 			}),
-			i != null && /* @__PURE__ */ C("div", {
-				className: a("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 desktop:hidden [&>*]:flex-1", I.footerBorder),
+			i != null && /* @__PURE__ */ S("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
 			})
 		]
 	});
-}, fe = {
+}, ve = {
 	root: "dial-skill-editor-root",
 	refineFeedback: "dial-skill-editor-refine-feedback"
-}, L = (e) => !!e.dataTransfer?.types.includes("Files"), pe = (e) => {
-	let [t, n] = P(!1), r = N(0);
-	return {
-		isDragActive: t,
-		dropZoneHandlers: {
-			onDragEnter: k((e) => {
-				L(e) && (e.preventDefault(), r.current += 1, n(!0));
-			}, []),
-			onDragLeave: k((e) => {
-				L(e) && (--r.current, r.current <= 0 && (r.current = 0, n(!1)));
-			}, []),
-			onDragOver: k((e) => {
-				L(e) && e.preventDefault();
-			}, []),
-			onDrop: k((t) => {
-				if (!L(t)) return;
-				t.preventDefault(), r.current = 0, n(!1);
-				let i = Array.from(t.dataTransfer?.files ?? []);
-				i.length > 0 && e(i);
-			}, [e])
-		}
-	};
-}, R = "SKILL.md", z = /* @__PURE__ */ function(e) {
+}, I = "SKILL.md", L = /* @__PURE__ */ function(e) {
 	return e.File = "file", e.Folder = "folder", e;
-}({}), B = (e) => {
+}({}), R = /* @__PURE__ */ function(e) {
+	return e.Header = "header", e.Child = "child", e.Sibling = "sibling", e;
+}({}), z = (e) => {
 	let t = e.lastIndexOf("/");
 	return t === -1 ? null : e.slice(0, t);
-}, V = (e) => {
+}, ye = (e) => {
 	let t = e.lastIndexOf("/");
 	return t === -1 ? e : e.slice(t + 1);
-}, me = (e) => {
+}, be = (e) => {
 	let t = /* @__PURE__ */ new Map(), n = (e) => {
 		let n = t.get(e);
 		if (n) return n;
 		let r = {
 			path: e,
-			name: V(e),
-			nodeType: F.FOLDER,
-			parentPath: B(e),
+			name: ye(e),
+			nodeType: he.FOLDER,
+			parentPath: z(e),
 			folderId: e,
 			items: []
 		};
 		return t.set(e, r), r;
 	};
 	for (let r of e) {
-		if (r.kind === z.Folder) {
-			n(r.path);
+		if (r.kind === L.Folder) {
+			n(r.path).name = r.name;
 			continue;
 		}
 		t.set(r.path, {
 			path: r.path,
 			name: r.name,
-			nodeType: F.ITEM,
-			parentPath: B(r.path),
-			folderId: B(r.path) ?? ""
+			nodeType: he.ITEM,
+			parentPath: z(r.path),
+			folderId: z(r.path) ?? ""
 		});
 	}
 	for (let t of [...e]) {
-		let e = B(t.path);
-		for (; e != null;) n(e), e = B(e);
+		let e = z(t.path);
+		for (; e != null;) n(e), e = z(e);
 	}
 	let r = [];
 	for (let e of t.values()) {
@@ -148,196 +128,328 @@ var ue = {
 		n ? n.items = [...n.items ?? [], e] : r.push(e);
 	}
 	return r;
-}, he = ({ isVisible: e, labels: t }) => {
+}, B = (e, t) => e ? `${e}/${t}` : t, xe = (e) => z(e) ?? "", Se = (e, t) => {
+	if (!t) return "";
+	switch (e) {
+		case R.Child: return t.path;
+		case R.Sibling: return xe(t.path);
+		case R.Header: return t.kind === L.Folder ? t.path : "";
+	}
+}, Ce = (e, t) => {
+	let n = t ? `${t}/` : "", r = /* @__PURE__ */ new Set();
+	for (let { path: i } of e) {
+		if (!i.startsWith(n) || i === t) continue;
+		let e = i.slice(n.length);
+		r.add(e.split("/")[0]);
+	}
+	return r;
+}, we = (e, t, n) => {
+	let r = e.trim();
+	if (!r) return n.required;
+	if (/[/\\]/.test(r) || r === "." || r === "..") return n.invalid;
+	if (t.has(r)) return n.duplicate;
+}, Te = "\\new-folder", Ee = ({ files: e, fileActions: t, defaultName: n, messages: r, onRevealFolder: i, onCreated: a }) => {
+	let [o, s] = M(null), c = o?.parentPath ?? null, l = j([]), u = c == null ? void 0 : B(c, Te), d = A(() => u == null ? void 0 : {
+		path: u,
+		name: n,
+		kind: L.Folder
+	}, [u, n]), f = k((n, i) => {
+		let a = Ce(e, i);
+		return i === "" && a.add(I), we(n, a, r) ?? t.validateFolderPath?.(B(i, n.trim()));
+	}, [
+		e,
+		r,
+		t
+	]), p = k((e, t) => {
+		l.current = [], s({
+			parentPath: e,
+			pane: t
+		}), e !== "" && i(e);
+	}, [i]), m = k((e, t) => {
+		if (c == null || t.path !== u) return null;
+		let n = f(e, c);
+		return l.current = [...l.current.slice(-1), {
+			value: e,
+			isValid: n == null
+		}], n ?? null;
+	}, [
+		c,
+		u,
+		f
+	]), h = k(() => {
+		l.current = [], s(null);
+	}, []), g = k((e) => {
+		if (c == null) return;
+		let [n] = l.current;
+		if (l.current.length === 2 && n != null && !n.isValid && n.value !== e || f(e, c) != null) {
+			h();
+			return;
+		}
+		let r = B(c, e.trim());
+		h(), t.onCreateFolder?.(r), a(r);
+	}, [
+		c,
+		f,
+		h,
+		t,
+		a
+	]);
+	return {
+		draftNode: d,
+		draftPath: u,
+		draftPane: o?.pane,
+		startDraft: p,
+		handleValidate: m,
+		handleSave: g,
+		handleCancel: h
+	};
+}, V = (e) => !!e.dataTransfer?.types.includes("Files"), De = (e) => {
+	let [t, n] = M(!1), r = j(0);
+	return {
+		isDragActive: t,
+		dropZoneHandlers: {
+			onDragEnter: k((e) => {
+				V(e) && (e.preventDefault(), r.current += 1, n(!0));
+			}, []),
+			onDragLeave: k((e) => {
+				V(e) && (--r.current, r.current <= 0 && (r.current = 0, n(!1)));
+			}, []),
+			onDragOver: k((e) => {
+				V(e) && e.preventDefault();
+			}, []),
+			onDrop: k((t) => {
+				if (!V(t)) return;
+				t.preventDefault(), r.current = 0, n(!1);
+				let i = Array.from(t.dataTransfer?.files ?? []);
+				i.length > 0 && e(i);
+			}, [e])
+		}
+	};
+}, H = /* @__PURE__ */ function(e) {
+	return e.Files = "files", e.Archive = "archive", e;
+}({}), U = /* @__PURE__ */ function(e) {
+	return e.Mobile = "mobile", e.Desktop = "desktop", e;
+}({}), Oe = ({ isVisible: e, labels: t }) => {
 	if (!e) return null;
 	let n = t ?? {};
-	return /* @__PURE__ */ C("div", {
+	return /* @__PURE__ */ S("div", {
 		role: "status",
 		"aria-live": "polite",
 		className: a("pointer-events-none absolute inset-0 z-[100] flex items-center justify-center backdrop-blur-sm"),
-		children: /* @__PURE__ */ w("div", {
+		children: /* @__PURE__ */ C("div", {
 			className: "flex flex-col items-center text-center",
 			children: [
-				/* @__PURE__ */ C(D, {
+				/* @__PURE__ */ S(fe, {
 					size: 100,
 					className: "text-accent-primary",
 					"aria-hidden": !0,
-					stroke: p
+					stroke: m
 				}),
-				/* @__PURE__ */ C("span", {
+				/* @__PURE__ */ S("span", {
 					className: "dial-h3-text mt-5",
 					children: n.dropOverlayTitle ?? "Upload files"
 				}),
-				/* @__PURE__ */ C("span", {
+				/* @__PURE__ */ S("span", {
 					className: "dial-small-text mt-4",
 					children: n.dropOverlaySubtitle ?? "Drop files here to add them to this skill"
 				})
 			]
 		})
 	});
-}, H = /* @__PURE__ */ function(e) {
+}, ke = /* @__PURE__ */ function(e) {
 	return e.SupportingFile = "supporting-file", e.Manifest = "manifest", e;
-}({}), U = /* @__PURE__ */ function(e) {
+}({}), W = /* @__PURE__ */ function(e) {
 	return e.Valid = "valid", e.Invalid = "invalid", 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] = P([]), [d, f] = P(/* @__PURE__ */ new Map()), [m, _] = P([]), [te, ne] = P(!1), [v, b] = P(), [ie, T] = P(!1), ae = j(), D = (e) => {
-		let t = e.map((e) => ({
-			id: ve(),
-			file: e,
-			path: ge(e)
-		}));
-		b(void 0), c((e) => [...e, ...t]);
-	}, se = (e) => {
-		c((t) => t.filter((t) => t.id !== e));
+}({}), Ae = (e) => (e.webkitRelativePath || e.name).replace(/\\/g, "/"), je = ".zip,application/zip", Me = 0, Ne = () => `skill-file-candidate-${++Me}`, Pe = (e, t, n) => ({
+	id: Ne(),
+	file: e,
+	path: B(n, t.replace(/\\/g, "/"))
+}), Fe = ({ isOpen: e, onClose: t, fileActions: n, mode: r = H.Files, targetFolderPath: a = "", initialFiles: o, initialEntries: s, labels: c }) => {
+	let u = c ?? {}, [f, p] = M([]), [h, g] = M(/* @__PURE__ */ new Map()), [y, te] = M([]), [ne, re] = M(!1), [oe, x] = M(), [w, ce] = M(!1), [le, E] = M(), [ue, fe] = M(0), D = j(0), O = r === H.Archive, k = u.uploadArchiveErrorMessage ?? "Couldn't read this archive", A = me(), he = (e) => {
+		x(void 0), p((t) => [...t, ...e]);
+	}, ge = async (e) => {
+		let { extractArchive: t } = n;
+		if (!t) return;
+		let r = D.current;
+		E(void 0), fe((e) => e + 1);
+		try {
+			let n = await Promise.all(e.map((e) => t(e)));
+			if (r !== D.current) return;
+			let i = n.flat();
+			if (i.length === 0) {
+				E(u.uploadArchiveEmptyMessage ?? "This archive has no files");
+				return;
+			}
+			he(i.map((e) => Pe(e.file, e.path, a)));
+		} catch {
+			if (r !== D.current) return;
+			E(k);
+		} finally {
+			r === D.current && fe((e) => e - 1);
+		}
+	}, N = (e) => {
+		if (O) {
+			ge(e);
+			return;
+		}
+		he(e.map((e) => Pe(e, Ae(e), a)));
+	}, P = (e) => {
+		p((t) => t.filter((t) => t.id !== e));
 	};
-	A(() => {
-		e && (c((r ?? []).map((e) => ({
-			id: ve(),
-			file: e,
-			path: ge(e)
-		}))), f(/* @__PURE__ */ new Map()), _([]), b(void 0));
-	}, [e]), A(() => {
+	pe(() => {
+		e && (D.current += 1, p([...(o ?? []).map((e) => Pe(e, Ae(e), a)), ...(s ?? []).map((e) => Pe(e.file, e.path, a))]), g(/* @__PURE__ */ new Map()), te([]), x(void 0), E(void 0), fe(0));
+	}, [e]), pe(() => {
 		if (!e) return;
 		let t = !1;
-		if (s.length === 0) {
-			f(/* @__PURE__ */ new Map()), _([]);
+		if (f.length === 0) {
+			g(/* @__PURE__ */ new Map()), te([]);
 			return;
 		}
-		return ne(!0), n.validateBatch(s).then(({ results: e, batchErrors: n }) => {
-			t || (f(new Map(e.map((e) => [e.candidateId, e]))), _(n.map((e) => e.message)));
+		return re(!0), n.validateBatch(f).then(({ results: e, batchErrors: n }) => {
+			t || (g(new Map(e.map((e) => [e.candidateId, e]))), te(n.map((e) => e.message)));
 		}).finally(() => {
-			t || ne(!1);
+			t || re(!1);
 		}), () => {
 			t = !0;
 		};
-	}, [s, e]);
-	let O = s.some((e) => d.get(e.id)?.status === U.Invalid), k = s.length > 0 && s.every((e) => d.get(e.id)?.status === U.Invalid), M = s.length > 0 && !O && m.length === 0 && !te && !ie, N = async () => {
-		T(!0), b(void 0);
+	}, [f, e]);
+	let F = f.some((e) => h.get(e.id)?.status === W.Invalid), _e = f.length > 0 && f.every((e) => h.get(e.id)?.status === W.Invalid), ve = f.length > 0 && !F && y.length === 0 && !ne && !w && ue === 0, I = async () => {
+		ce(!0), x(void 0);
 		try {
-			let { results: e, batchErrors: r } = await n.validateBatch(s), i = new Map(e.map((e) => [e.candidateId, e]));
-			if (f(i), _(r.map((e) => e.message)), s.some((e) => i.get(e.id)?.status === U.Invalid) || r.length > 0) return;
-			let a = await n.commitBatch(s);
+			let { results: e, batchErrors: r } = await n.validateBatch(f), i = new Map(e.map((e) => [e.candidateId, e]));
+			if (g(i), te(r.map((e) => e.message)), f.some((e) => i.get(e.id)?.status === W.Invalid) || r.length > 0) return;
+			let a = await n.commitBatch(f);
 			if (a.error) {
-				b(a.error);
+				x(a.error);
 				return;
 			}
 			t();
 		} finally {
-			T(!1);
+			ce(!1);
 		}
 	};
-	return /* @__PURE__ */ C(re, {
+	return /* @__PURE__ */ S(ie, {
 		open: e,
-		header: o.uploadDialogTitle ?? "Upload files from device",
-		size: y.Sm,
-		closeAriaLabel: o.uploadDialogCloseAriaLabel ?? "Close",
+		header: O ? u.uploadArchiveDialogTitle ?? "Upload archive from device" : u.uploadDialogTitle ?? "Upload files from device",
+		size: ae.Sm,
+		closeAriaLabel: u.uploadDialogCloseAriaLabel ?? "Close",
 		onClose: t,
 		mainButtons: [{
-			label: o.uploadCancelLabel ?? "Cancel",
-			variant: u.Primary,
+			label: u.uploadCancelLabel ?? "Cancel",
+			variant: d.Primary,
 			appearance: l.Ghost,
 			onClick: t
 		}, {
-			label: o.uploadConfirmLabel ?? "Add",
-			variant: u.Primary,
-			iconBefore: ie ? /* @__PURE__ */ C(x, {
+			label: u.uploadConfirmLabel ?? "Add",
+			variant: d.Primary,
+			iconBefore: w ? /* @__PURE__ */ S(b, {
 				size: 16,
 				ariaLabel: ""
 			}) : void 0,
-			onClick: () => void N(),
-			disabled: !M
+			onClick: () => void I(),
+			disabled: !ve
 		}],
-		children: /* @__PURE__ */ w("div", {
+		children: /* @__PURE__ */ C("div", {
 			className: "flex flex-col gap-4 px-6 py-4",
 			children: [
-				/* @__PURE__ */ C(g, {
-					label: /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C("span", {
+				/* @__PURE__ */ S(v, {
+					label: /* @__PURE__ */ C(se, { children: [/* @__PURE__ */ S("span", {
 						className: "desktop:hidden",
-						children: o.uploadDropZoneMobileLabel ?? "Click here to upload"
-					}), /* @__PURE__ */ C("span", {
+						children: O ? u.uploadArchiveDropZoneMobileLabel ?? "Click here to upload a .zip archive" : u.uploadDropZoneMobileLabel ?? "Click here to upload"
+					}), /* @__PURE__ */ S("span", {
 						className: "hidden desktop:inline",
-						children: o.uploadDropZoneLabel ?? "Drag and drop it or click here to upload"
+						children: O ? u.uploadArchiveDropZoneLabel ?? "Drag and drop a .zip archive or click here to upload" : u.uploadDropZoneLabel ?? "Drag and drop it or click here to upload"
 					})] }),
-					ariaLabel: o.uploadDropZoneAriaLabel ?? "Upload files",
+					ariaLabel: u.uploadDropZoneAriaLabel ?? "Upload files",
 					multiple: !0,
-					className: k ? "border-error hover:border-error" : void 0,
-					onChange: D
+					accept: O ? je : void 0,
+					className: _e ? "border-error hover:border-error" : void 0,
+					onChange: N,
+					onReject: O ? () => E(k) : void 0
+				}),
+				ue > 0 && /* @__PURE__ */ S(b, { ariaLabel: u.uploadArchiveExtractingAriaLabel ?? "Reading archive" }),
+				/* @__PURE__ */ S("div", {
+					role: "alert",
+					children: le && /* @__PURE__ */ S(_, { text: le })
 				}),
-				/* @__PURE__ */ C("span", {
+				/* @__PURE__ */ S("span", {
 					role: "status",
 					"aria-live": "polite",
 					className: "sr-only",
-					id: ae,
-					children: m.map((e) => `${o.uploadBatchErrorAriaPrefix ?? "Upload error: "}${e}`).join(" ")
+					id: A,
+					children: y.map((e) => `${u.uploadBatchErrorAriaPrefix ?? "Upload error: "}${e}`).join(" ")
 				}),
-				m.map((e) => /* @__PURE__ */ C(h, { text: e }, e)),
-				s.length > 0 && /* @__PURE__ */ C("ul", {
+				y.map((e) => /* @__PURE__ */ S(_, { text: e }, e)),
+				f.length > 0 && /* @__PURE__ */ S("ul", {
 					className: "flex flex-col gap-2",
-					children: s.map((e) => {
-						let t = d.get(e.id), n = t?.kind === H.Manifest, r = t?.status === U.Invalid;
-						return /* @__PURE__ */ w("li", {
+					children: f.map((e) => {
+						let t = h.get(e.id), n = t?.kind === ke.Manifest, r = t?.status === W.Invalid;
+						return /* @__PURE__ */ C("li", {
 							className: "flex items-center gap-2 rounded-lg border border-tertiary p-2",
 							children: [
-								/* @__PURE__ */ C(E, {
+								/* @__PURE__ */ S(T, {
 									size: 20,
 									"aria-hidden": !0,
-									stroke: p
+									stroke: m
 								}),
-								/* @__PURE__ */ w("div", {
+								/* @__PURE__ */ C("div", {
 									className: "flex min-w-0 flex-1 flex-col",
 									children: [
-										/* @__PURE__ */ C("span", {
+										/* @__PURE__ */ S("span", {
 											className: "dial-small-text truncate",
 											children: e.path
 										}),
-										/* @__PURE__ */ C("span", {
+										/* @__PURE__ */ S("span", {
 											className: "dial-tiny-text text-secondary",
 											children: i(e.file.size)
 										}),
-										r && t?.error && /* @__PURE__ */ C(h, { text: t.error }),
-										n && !r && /* @__PURE__ */ C("span", {
+										r && t?.error && /* @__PURE__ */ S(_, { text: t.error }),
+										n && !r && /* @__PURE__ */ S("span", {
 											className: "dial-tiny-text text-secondary",
-											children: o.uploadManifestRowNote ?? "Will replace this Skill's name, description, and instructions"
+											children: u.uploadManifestRowNote ?? "Will replace this Skill's name, description, and instructions"
 										})
 									]
 								}),
-								/* @__PURE__ */ C(ee, {
-									icon: /* @__PURE__ */ C(oe, {
+								/* @__PURE__ */ S(ee, {
+									icon: /* @__PURE__ */ S(de, {
 										size: 16,
 										"aria-hidden": !0,
-										stroke: p
+										stroke: m
 									}),
-									"aria-label": o.uploadRemoveCandidateLabel?.(e.path) ?? `Remove ${e.path}`,
-									onClick: () => se(e.id)
+									"aria-label": u.uploadRemoveCandidateLabel?.(e.path) ?? `Remove ${e.path}`,
+									onClick: () => P(e.id)
 								})
 							]
 						}, e.id);
 					})
 				}),
-				v && /* @__PURE__ */ C(h, { text: v })
+				oe && /* @__PURE__ */ S(_, { text: oe })
 			]
 		})
 	});
-}, W = {
+}, G = {
 	title: "_title_1cnn4_1",
 	helperText: "_helperText_1cnn4_5",
 	refineFeedback: "_refineFeedback_1cnn4_9",
 	refineError: "_refineError_1cnn4_13"
-}, be = O(async () => {
-	let { MarkdownEditor: e } = await le();
+}, Ie = {
+	mode: H.Files,
+	targetFolderPath: ""
+}, Le = O(async () => {
+	let { MarkdownEditor: e } = await N();
 	return { default: e };
-}), G = ({ initialValues: i, files: l, selectedPath: u, onSelectedPathChange: g, expandedPaths: ee, onExpandedPathsChange: re, isLoading: y = !1, hasLoadError: T = !1, isSubmitting: E = !1, errors: D, submitError: O, conflict: F, onReloadLatest: le, isNameReadOnly: ue = !1, onDirtyChange: I, onValuesChange: L, onRefineDescription: B, onRefineInstructions: V, fileActions: H, supportingFileContent: U, onSubmit: ge, onCancel: _e, onBack: ve, backAriaLabel: G, title: xe, onRetry: Se, onRetrySubmit: Ce, labels: we, styles: Te, dir: Ee, instructionsEditorTheme: De = m.light }) => {
-	let [K, Oe] = P({
+}), Re = ({ initialValues: i, files: v, selectedPath: ee, onSelectedPathChange: ie, expandedPaths: ae, onExpandedPathsChange: w, isLoading: T = !1, hasLoadError: O = !1, isSubmitting: N = !1, errors: P, submitError: F, conflict: z, onReloadLatest: ye, isNameReadOnly: B = !1, onDirtyChange: xe, onValuesChange: Ce, onRefineDescription: we, onRefineInstructions: Te, fileActions: V, supportingFileContent: ke, onSubmit: W, onCancel: Ae, onBack: je, backAriaLabel: Me, title: Ne, onRetry: Pe, onRetrySubmit: Re, labels: ze, styles: Be, dir: Ve, instructionsEditorTheme: He = h.light }) => {
+	let [K, Ue] = M({
 		name: i?.name ?? "",
 		description: i?.description ?? "",
 		instructions: i?.instructions ?? ""
-	}), ke = j(), Ae = j(), q = N(void 0), je = o(), Me = N(K), J = (e) => {
+	}), We = me(), Ge = me(), q = j(void 0), Ke = o(), qe = j(K), Je = (e) => {
 		let t = {
-			...Me.current,
+			...qe.current,
 			...e
 		};
-		Me.current = t, Oe(t), L?.(t);
-	}, Ne = (e) => e ? async (t, n) => {
+		qe.current = t, Ue(t), Ce?.(t);
+	}, Ye = (e) => e ? async (t, n) => {
 		if (q.current && !q.current.aborted) throw new DOMException("Busy", "AbortError");
 		q.current = n;
 		try {
@@ -345,328 +457,457 @@ var ue = {
 		} finally {
 			q.current === n && (q.current = void 0);
 		}
-	} : void 0, Y = s({
+	} : void 0, Xe = s({
 		value: K.description,
-		onChange: (e) => J({ description: e }),
-		onRefine: Ne(B),
-		disabled: E || y || T,
+		onChange: (e) => Je({ description: e }),
+		onRefine: Ye(we),
+		disabled: N || T || O,
 		resetKey: i
-	}), Pe = s({
+	}), Ze = s({
 		value: K.instructions,
-		onChange: (e) => J({ instructions: e }),
-		onRefine: Ne(V),
-		disabled: E || y || T,
+		onChange: (e) => Je({ instructions: e }),
+		onRefine: Ye(Te),
+		disabled: N || T || O,
 		resetKey: i
-	}), Fe = Y.isPending || Pe.isPending, Ie = () => {
-		Y.reset(), Pe.reset();
-	}, Le = () => {
-		Ie(), _e();
-	}, Re = () => {
-		Ie(), ve();
-	}, ze = () => {
-		E || y || T || q.current && !q.current.aborted || ge(K);
-	}, Be = N(i), Ve = Be.current !== i, He = N(l);
-	A(() => {
-		Be.current = i;
+	}), Qe = Xe.isPending || Ze.isPending, $e = () => {
+		Xe.reset(), Ze.reset();
+	}, et = () => {
+		$e(), Ae();
+	}, tt = () => {
+		$e(), je();
+	}, nt = () => {
+		N || T || O || q.current && !q.current.aborted || W(K);
+	}, rt = j(i), it = rt.current !== i, at = j(v);
+	pe(() => {
+		rt.current = i;
 		let e = {
 			name: i?.name ?? "",
 			description: i?.description ?? "",
 			instructions: i?.instructions ?? ""
 		};
-		Me.current = e, Oe(e), He.current = l;
+		qe.current = e, Ue(e), at.current = v;
 	}, [i]);
-	let Ue = (e) => JSON.stringify([...e].sort((e, t) => e.path.localeCompare(t.path))), We = N(!1);
-	A(() => {
-		if (Ve) return;
+	let ot = (e) => JSON.stringify([...e].sort((e, t) => e.path.localeCompare(t.path))), st = j(!1);
+	pe(() => {
+		if (it) return;
 		let e = {
 			name: i?.name ?? "",
 			description: i?.description ?? "",
 			instructions: i?.instructions ?? ""
-		}, t = JSON.stringify(K) !== JSON.stringify(e) || Ue(l) !== Ue(He.current);
-		t !== We.current && (We.current = t, I?.(t));
+		}, t = JSON.stringify(K) !== JSON.stringify(e) || ot(v) !== ot(at.current);
+		t !== st.current && (st.current = t, xe?.(t));
 	}, [
 		K,
-		l,
+		v,
 		i,
-		Ve,
-		I
+		it,
+		xe
 	]);
-	let [Ge, Ke] = P(R), X = u ?? Ge, qe = k((e) => {
-		Ke(e), g?.(e);
-	}, [g]), [Je, Ye] = P([]), Xe = ee ?? Je, Ze = M(() => new Set(Xe), [Xe]), Qe = k((e) => {
+	let [ct, lt] = M(I), J = ee ?? ct, ut = k((e) => {
+		lt(e), ie?.(e);
+	}, [ie]), [dt, ft] = M([]), pt = ae ?? dt, mt = A(() => new Set(pt), [pt]), ht = k((e) => {
 		let t = [...e];
-		Ye(t), re?.(t);
-	}, [re]), [$e, et] = P(!1), [tt, nt] = P(), [rt, it] = P(!1), { isDragActive: at, dropZoneHandlers: ot } = pe(k((e) => {
-		$e || (nt(e), et(!0));
-	}, [$e])), Z = we ?? {}, Q = Te?.colors, st = Te?.typography ?? {}, ct = st.titleClassName ?? "dial-body-semi-text", lt = st.helperTextClassName ?? "dial-tiny-semi-text", ut = st.removeIconClassName ?? "text-secondary", dt = r({
-		"--se-title-color": Q?.title,
-		"--se-helper-text-color": Q?.helperText,
-		"--se-refine-action-text": Q?.refineActionText,
-		"--se-refine-error-text": Q?.refineErrorText
-	}), ft = {
-		feedbackClassName: a(W.refineFeedback, st.refineFeedbackClassName ?? "dial-small-text", fe.refineFeedback),
-		errorClassName: W.refineError
-	}, pt = Q?.border ? { colors: {
-		headerBorderColor: Q.border,
-		sidebarBorderColor: Q.border
-	} } : void 0, mt = M(() => me([{
-		path: R,
-		name: R,
-		kind: z.File
-	}, ...l]), [l]), $ = M(() => l.find((e) => e.path === X), [l, X]), ht = k((e) => {
-		qe(e.path);
-	}, [qe]), gt = k((e) => {
-		H.onRemoveNode(e), X === e && qe(R);
+		ft(t), w?.(t);
+	}, [w]), [gt, _t] = M(!1), [vt, yt] = M(Ie), Y = k((e) => {
+		yt(e), _t(!0);
+	}, []), [bt, xt] = M(!1), { isDragActive: St, dropZoneHandlers: Ct } = De(k((e) => {
+		gt || Y({
+			...Ie,
+			initialFiles: e
+		});
+	}, [gt, Y])), X = ze ?? {}, Z = Be?.colors, wt = Be?.typography ?? {}, Tt = wt.titleClassName ?? "dial-body-semi-text", Et = wt.helperTextClassName ?? "dial-tiny-semi-text", Dt = wt.removeIconClassName ?? "text-secondary", Ot = wt.menuIconClassName ?? "text-secondary", kt = r({
+		"--se-title-color": Z?.title,
+		"--se-helper-text-color": Z?.helperText,
+		"--se-refine-action-text": Z?.refineActionText,
+		"--se-refine-error-text": Z?.refineErrorText
+	}), At = {
+		feedbackClassName: a(G.refineFeedback, wt.refineFeedbackClassName ?? "dial-small-text", ve.refineFeedback),
+		errorClassName: G.refineError
+	}, jt = Z?.border ? { colors: {
+		headerBorderColor: Z.border,
+		sidebarBorderColor: Z.border
+	} } : void 0, Mt = A(() => ({
+		required: X.folderNameRequiredError ?? "Enter a folder name",
+		invalid: X.folderNameInvalidError ?? "Folder name can't contain / or \\, or be . or ..",
+		duplicate: X.folderNameDuplicateError ?? "An item with this name already exists here"
+	}), [
+		X.folderNameRequiredError,
+		X.folderNameInvalidError,
+		X.folderNameDuplicateError
+	]), Nt = k((e) => {
+		mt.has(e) || ht(new Set([...mt, e]));
+	}, [mt, ht]), Q = Ee({
+		files: v,
+		fileActions: V,
+		defaultName: X.newFolderDefaultName ?? "New folder",
+		messages: Mt,
+		onRevealFolder: Nt,
+		onCreated: ut
+	}), { draftNode: Pt, draftPath: Ft, draftPane: It } = Q, Lt = A(() => be([{
+		path: I,
+		name: I,
+		kind: L.File
+	}, ...v]), [v]), Rt = A(() => Pt ? be([
+		{
+			path: I,
+			name: I,
+			kind: L.File
+		},
+		...v,
+		Pt
+	]) : Lt, [
+		v,
+		Pt,
+		Lt
+	]), zt = A(() => v.find((e) => e.path === J), [v, J]), Bt = k((e) => {
+		e.path !== Ft && ut(e.path);
+	}, [ut, Ft]), Vt = k((e) => {
+		V.onRemoveNode(e), J === e && ut(I);
 	}, [
-		H,
-		X,
-		qe
-	]), _t = k((e) => e.path === "SKILL.md" ? [] : [{
-		key: "remove",
-		label: Z.removeLabel ?? "Remove",
-		icon: /* @__PURE__ */ C(oe, {
-			size: f.SM,
-			className: ut,
+		V,
+		J,
+		ut
+	]), { startDraft: Ht } = Q, { onCreateFolder: Ut, extractArchive: Wt, pickFromFileSystem: Gt } = V, Kt = k(async (e) => {
+		if (!Gt) return;
+		let t = await Gt();
+		t?.length && Y({
+			mode: H.Files,
+			targetFolderPath: e,
+			initialEntries: t
+		});
+	}, [Gt, Y]), $ = k((e, t) => {
+		let n = (e) => /* @__PURE__ */ S(e, {
+			size: p.SM,
+			className: Ot,
 			"aria-hidden": !0,
-			stroke: p
-		}),
-		onClick: () => gt(e.path)
-	}], [
-		Z.removeLabel,
-		ut,
-		gt
-	]), vt = /* @__PURE__ */ w("div", {
+			stroke: m
+		}), r = [];
+		return Ut && r.push({
+			key: "create-folder",
+			label: X.createFolderLabel ?? "Create folder",
+			icon: n(E),
+			onClick: () => Ht(e, t)
+		}), r.push({
+			key: "upload-files",
+			label: X.uploadFilesLabel ?? X.addUploadLabel ?? "Upload files from device",
+			icon: n(fe),
+			onClick: () => Y({
+				mode: H.Files,
+				targetFolderPath: e
+			})
+		}), Wt && r.push({
+			key: "upload-archive",
+			label: X.uploadArchiveLabel ?? "Upload archive from device",
+			icon: n(le),
+			onClick: () => Y({
+				mode: H.Archive,
+				targetFolderPath: e
+			})
+		}), Gt && r.push({
+			key: "open-file-system",
+			label: X.openFileSystemLabel ?? "Open DIAL file system",
+			icon: n(ce),
+			onClick: () => void Kt(e)
+		}), r;
+	}, [
+		Ot,
+		Ut,
+		Wt,
+		Gt,
+		X.createFolderLabel,
+		X.uploadFilesLabel,
+		X.addUploadLabel,
+		X.uploadArchiveLabel,
+		X.openFileSystemLabel,
+		Ht,
+		Y,
+		Kt
+	]), qt = A(() => {
+		let e = Se(R.Header, v.find((e) => e.path === J));
+		return {
+			[U.Mobile]: $(e, U.Mobile),
+			[U.Desktop]: $(e, U.Desktop)
+		};
+	}, [
+		$,
+		v,
+		J
+	]), Jt = k((e, t) => {
+		if (e.path === "SKILL.md" || e.path === Ft) return [];
+		let n = {
+			path: e.path,
+			name: e.name,
+			kind: e.nodeType === he.FOLDER ? L.Folder : L.File
+		}, r = [];
+		return n.kind === L.Folder && r.push({
+			key: "add-child",
+			label: X.addChildLabel ?? "Add child",
+			children: $(Se(R.Child, n), t)
+		}), r.push({
+			key: "add-sibling",
+			label: X.addSiblingLabel ?? "Add sibling",
+			children: $(Se(R.Sibling, n), t)
+		}, {
+			key: "delete",
+			label: X.deleteLabel ?? X.removeLabel ?? "Delete",
+			icon: /* @__PURE__ */ S(de, {
+				size: p.SM,
+				className: Dt,
+				"aria-hidden": !0,
+				stroke: m
+			}),
+			onClick: () => Vt(e.path)
+		}), r;
+	}, [
+		Ft,
+		X.addChildLabel,
+		X.addSiblingLabel,
+		X.deleteLabel,
+		X.removeLabel,
+		Dt,
+		$,
+		Vt
+	]), Yt = A(() => ({
+		[U.Mobile]: (e) => Jt(e, U.Mobile),
+		[U.Desktop]: (e) => Jt(e, U.Desktop)
+	}), [Jt]), Xt = (e) => /* @__PURE__ */ C("div", {
 		className: "flex flex-col gap-2 desktop:gap-5",
-		children: [/* @__PURE__ */ w("div", {
+		children: [/* @__PURE__ */ C("div", {
 			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ C("span", {
-				className: a(W.title, ct),
-				children: Z.filesHeading ?? "Files"
-			}), /* @__PURE__ */ C(v, {
-				label: Z.addUploadLabel ?? "Upload from device",
-				iconBefore: /* @__PURE__ */ C(ae, {
-					size: 16,
+			children: [/* @__PURE__ */ S("span", {
+				className: a(G.title, Tt),
+				children: X.filesHeading ?? "Files"
+			}), /* @__PURE__ */ S(u, {
+				label: X.addLabel ?? "Add",
+				variant: d.Neutral,
+				appearance: l.Solid,
+				size: g.Small,
+				iconBefore: /* @__PURE__ */ S(ue, {
+					size: p.SM,
 					"aria-hidden": !0,
-					stroke: p
+					stroke: m
 				}),
-				onClick: () => {
-					nt(void 0), et(!0);
-				}
+				items: qt[e]
 			})]
-		}), /* @__PURE__ */ C("div", {
+		}), /* @__PURE__ */ S("div", {
 			role: "tree",
-			"aria-label": Z.filesTreeAriaLabel ?? "Skill files",
-			children: /* @__PURE__ */ C(ce, {
-				items: mt,
+			"aria-label": X.filesTreeAriaLabel ?? "Skill files",
+			children: /* @__PURE__ */ S(ge, {
+				items: It === e ? Rt : Lt,
 				showFiles: !0,
-				selectedPath: X,
-				expandedPaths: Ze,
-				onExpandedPathsChange: Qe,
-				onItemClick: ht,
-				getContextMenuItems: _t,
+				selectedPath: J,
+				expandedPaths: mt,
+				onExpandedPathsChange: ht,
+				onItemClick: Bt,
+				getContextMenuItems: Yt[e],
+				renamedPath: It === e ? Ft : void 0,
+				onRenameSave: Q.handleSave,
+				onRenameCancel: Q.handleCancel,
+				onRenameValidate: Q.handleValidate,
 				rootItemPath: ""
 			})
 		})]
-	}), yt = /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(v, {
-		label: Z.cancelLabel ?? "Cancel",
-		onClick: Le,
-		disabled: E
-	}), /* @__PURE__ */ C(b, {
-		label: Z.createLabel ?? "Create",
-		iconBefore: E ? /* @__PURE__ */ C(x, {
+	}), Zt = /* @__PURE__ */ C(se, { children: [/* @__PURE__ */ S(re, {
+		label: X.cancelLabel ?? "Cancel",
+		onClick: et,
+		disabled: N
+	}), /* @__PURE__ */ S(oe, {
+		label: X.createLabel ?? "Create",
+		iconBefore: N ? /* @__PURE__ */ S(b, {
 			size: 16,
 			ariaLabel: ""
 		}) : void 0,
-		onClick: ze,
-		disabled: E || Fe || y || T
+		onClick: nt,
+		disabled: N || Qe || T || O
 	})] });
-	return y ? /* @__PURE__ */ C("div", {
-		dir: Ee,
+	return T ? /* @__PURE__ */ S("div", {
+		dir: Ve,
 		className: "relative flex min-h-0 flex-1 flex-col",
-		children: /* @__PURE__ */ C(de, {
-			title: xe,
-			onBack: Re,
-			backAriaLabel: G,
-			actions: yt,
+		children: /* @__PURE__ */ S(_e, {
+			title: Ne,
+			onBack: tt,
+			backAriaLabel: Me,
+			actions: Zt,
 			isSaving: !1,
-			labels: { savingStatusLabel: Z.savingStatusLabel },
-			styles: pt,
-			leftContent: /* @__PURE__ */ C("div", {
+			labels: { savingStatusLabel: X.savingStatusLabel },
+			styles: jt,
+			leftContent: /* @__PURE__ */ S("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__ */ C(x, {})
+				children: /* @__PURE__ */ S(b, {})
 			})
 		})
-	}) : T ? /* @__PURE__ */ C("div", {
-		dir: Ee,
+	}) : O ? /* @__PURE__ */ S("div", {
+		dir: Ve,
 		className: "relative flex min-h-0 flex-1 flex-col",
-		children: /* @__PURE__ */ C(de, {
-			title: xe,
-			onBack: Re,
-			backAriaLabel: G,
-			actions: yt,
+		children: /* @__PURE__ */ S(_e, {
+			title: Ne,
+			onBack: tt,
+			backAriaLabel: Me,
+			actions: Zt,
 			isSaving: !1,
-			labels: { savingStatusLabel: Z.savingStatusLabel },
-			styles: pt,
-			leftContent: /* @__PURE__ */ w("div", {
+			labels: { savingStatusLabel: X.savingStatusLabel },
+			styles: jt,
+			leftContent: /* @__PURE__ */ C("div", {
 				role: "alert",
 				className: "flex flex-col items-center gap-4 p-8",
-				children: [/* @__PURE__ */ C(h, { text: Z.loadErrorMessage ?? "Couldn't load this skill. Please try again." }), /* @__PURE__ */ C(b, {
-					label: Z.retryLabel ?? "Retry",
-					onClick: Se
+				children: [/* @__PURE__ */ S(_, { text: X.loadErrorMessage ?? "Couldn't load this skill. Please try again." }), /* @__PURE__ */ S(oe, {
+					label: X.retryLabel ?? "Retry",
+					onClick: Pe
 				})]
 			})
 		})
-	}) : /* @__PURE__ */ w("div", {
-		dir: Ee,
-		className: a("relative flex min-h-0 flex-1 flex-col", fe.root),
-		style: dt,
-		...ot,
+	}) : /* @__PURE__ */ C("div", {
+		dir: Ve,
+		className: a("relative flex min-h-0 flex-1 flex-col", ve.root),
+		style: kt,
+		...Ct,
 		children: [
-			/* @__PURE__ */ C(he, {
-				isVisible: at && !$e,
-				labels: we
+			/* @__PURE__ */ S(Oe, {
+				isVisible: St && !gt,
+				labels: ze
 			}),
-			/* @__PURE__ */ C(de, {
-				title: xe,
-				onBack: Re,
-				backAriaLabel: G,
-				actions: yt,
-				isSaving: E,
-				labels: { savingStatusLabel: Z.savingStatusLabel },
-				styles: pt,
-				leftContent: /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ S(_e, {
+				title: Ne,
+				onBack: tt,
+				backAriaLabel: Me,
+				actions: Zt,
+				isSaving: N,
+				labels: { savingStatusLabel: X.savingStatusLabel },
+				styles: jt,
+				leftContent: /* @__PURE__ */ C(se, { children: [/* @__PURE__ */ S("div", {
 					className: "px-4 py-4 desktop:hidden",
-					children: /* @__PURE__ */ C(c, {
-						title: Z.editingFileLabel ?? "Editing file",
-						description: $?.name ?? "SKILL.md",
-						expanded: rt,
-						onToggle: it,
-						ariaLabel: Z.editingFileLabel ?? "Editing file",
-						children: vt
+					children: /* @__PURE__ */ S(c, {
+						title: X.editingFileLabel ?? "Editing file",
+						description: zt?.name ?? "SKILL.md",
+						expanded: bt,
+						onToggle: xt,
+						ariaLabel: X.editingFileLabel ?? "Editing file",
+						children: Xt(U.Mobile)
 					})
-				}), /* @__PURE__ */ C("div", {
+				}), /* @__PURE__ */ S("div", {
 					className: "hidden px-8 py-6 desktop:block",
-					children: vt
+					children: Xt(U.Desktop)
 				})] }),
-				rightContent: /* @__PURE__ */ w("div", {
+				rightContent: /* @__PURE__ */ C("div", {
 					className: "flex flex-1 flex-col gap-4 px-4 py-6 desktop:gap-5 desktop:px-8",
 					children: [
-						O != null && /* @__PURE__ */ w("div", {
+						F != null && /* @__PURE__ */ C("div", {
 							role: "alert",
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ C(h, { text: O }), Ce != null && /* @__PURE__ */ C(_, {
-								label: Z.retryLabel ?? "Retry",
-								onClick: Ce
+							children: [/* @__PURE__ */ S(_, { text: F }), Re != null && /* @__PURE__ */ S(y, {
+								label: X.retryLabel ?? "Retry",
+								onClick: Re
 							})]
 						}),
-						F != null && /* @__PURE__ */ w("div", {
+						z != null && /* @__PURE__ */ C("div", {
 							role: "alert",
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ C(h, { text: F.message }), /* @__PURE__ */ C(_, {
-								label: Z.reloadLatestLabel ?? "Reload latest",
-								onClick: le
+							children: [/* @__PURE__ */ S(_, { text: z.message }), /* @__PURE__ */ S(y, {
+								label: X.reloadLatestLabel ?? "Reload latest",
+								onClick: ye
 							})]
 						}),
-						/* @__PURE__ */ C("h2", {
-							className: a(W.title, ct),
-							children: X === "SKILL.md" ? R : Z.selectedFileHeading?.($?.name ?? X) ?? $?.name ?? X
+						/* @__PURE__ */ S("h2", {
+							className: a(G.title, Tt),
+							children: J === "SKILL.md" ? I : X.selectedFileHeading?.(zt?.name ?? J) ?? zt?.name ?? J
 						}),
-						X === "SKILL.md" ? /* @__PURE__ */ w(S, { children: [
-							/* @__PURE__ */ C(te, {
+						J === "SKILL.md" ? /* @__PURE__ */ C(se, { children: [
+							/* @__PURE__ */ S(te, {
 								labelProps: {
-									label: Z.nameLabel ?? "Name",
+									label: X.nameLabel ?? "Name",
 									required: !0
 								},
 								value: K.name,
-								onChange: (e) => J({ name: e ?? "" }),
-								placeholder: Z.namePlaceholder ?? "good-morning-breakfast",
-								caption: D?.name ? void 0 : Z.nameCaption ?? "Lowercase letters and hyphens only, no spaces. We'll reformat automatically if needed.",
-								error: D?.name,
-								invalid: !!D?.name,
-								disabled: ue
+								onChange: (e) => Je({ name: e ?? "" }),
+								placeholder: X.namePlaceholder ?? "good-morning-breakfast",
+								caption: P?.name ? void 0 : X.nameCaption ?? "Lowercase letters and hyphens only, no spaces. We'll reformat automatically if needed.",
+								error: P?.name,
+								invalid: !!P?.name,
+								disabled: B
 							}),
-							/* @__PURE__ */ C(n, {
-								isEnabled: !!B,
-								fieldId: ke,
+							/* @__PURE__ */ S(n, {
+								isEnabled: !!we,
+								fieldId: We,
 								required: !0,
-								label: Z.descriptionLabel ?? "Description",
-								labels: Z,
-								refinement: Y,
-								disabled: Fe || E,
-								...ft,
-								children: /* @__PURE__ */ C(ie, {
-									id: ke,
+								label: X.descriptionLabel ?? "Description",
+								labels: X,
+								refinement: Xe,
+								disabled: Qe || N,
+								...At,
+								children: /* @__PURE__ */ S(x, {
+									id: We,
 									"aria-required": !0,
-									labelProps: B ? void 0 : {
-										label: Z.descriptionLabel ?? "Description",
+									labelProps: we ? void 0 : {
+										label: X.descriptionLabel ?? "Description",
 										required: !0
 									},
 									value: K.description,
-									placeholder: Z.descriptionPlaceholder ?? "What this skill does and when to use it",
+									placeholder: X.descriptionPlaceholder ?? "What this skill does and when to use it",
 									onChange: (e) => {
-										Y.reset(), J({ description: e });
+										Xe.reset(), Je({ description: e });
 									},
-									error: D?.description,
-									invalid: !!D?.description
+									error: P?.description,
+									invalid: !!P?.description
 								})
 							}),
-							/* @__PURE__ */ C(n, {
-								isEnabled: !!V,
-								fieldId: Ae,
+							/* @__PURE__ */ S(n, {
+								isEnabled: !!Te,
+								fieldId: Ge,
 								required: !0,
-								labelClassName: a(W.helperText, lt),
-								label: Z.instructionsLabel ?? "Instructions",
-								labels: Z,
-								refinement: Pe,
-								disabled: Fe || E,
-								...ft,
-								children: /* @__PURE__ */ w("div", {
+								labelClassName: a(G.helperText, Et),
+								label: X.instructionsLabel ?? "Instructions",
+								labels: X,
+								refinement: Ze,
+								disabled: Qe || N,
+								...At,
+								children: /* @__PURE__ */ C("div", {
 									className: "flex flex-1 flex-col gap-2",
 									children: [
-										!V && /* @__PURE__ */ C(ne, {
-											htmlFor: Ae,
-											className: a(W.helperText, lt),
-											label: Z.instructionsLabel ?? "Instructions",
+										!Te && /* @__PURE__ */ S(ne, {
+											htmlFor: Ge,
+											className: a(G.helperText, Et),
+											label: X.instructionsLabel ?? "Instructions",
 											required: !0
 										}),
-										/* @__PURE__ */ C("div", {
-											ref: je,
+										/* @__PURE__ */ S("div", {
+											ref: Ke,
 											className: a(e, t),
-											children: /* @__PURE__ */ C(se, {
-												fallback: /* @__PURE__ */ C(x, { ariaLabel: Z.instructionsLoadingAriaLabel ?? "Loading" }),
-												children: /* @__PURE__ */ C(be, {
-													id: Ae,
-													ariaLabel: Z.instructionsLabel ?? "Instructions",
+											children: /* @__PURE__ */ S(D, {
+												fallback: /* @__PURE__ */ S(b, { ariaLabel: X.instructionsLoadingAriaLabel ?? "Loading" }),
+												children: /* @__PURE__ */ S(Le, {
+													id: Ge,
+													ariaLabel: X.instructionsLabel ?? "Instructions",
 													value: K.instructions,
 													onChange: (e) => {
-														Pe.reset(), J({ instructions: e });
+														Ze.reset(), Je({ instructions: e });
 													},
-													theme: De,
-													placeholder: Z.instructionsPlaceholder ?? "Write the skill instructions in Markdown"
+													theme: He,
+													placeholder: X.instructionsPlaceholder ?? "Write the skill instructions in Markdown"
 												})
 											})
 										}),
-										D?.instructions != null && /* @__PURE__ */ C(h, { text: D.instructions })
+										P?.instructions != null && /* @__PURE__ */ S(_, { text: P.instructions })
 									]
 								})
 							})
-						] }) : $?.kind === z.File && (U ?? /* @__PURE__ */ C(d, { text: Z.supportingFileNote ?? "This supporting file is included in the skill package as-is. Remove it from the Files panel to replace its content." }))
+						] }) : zt?.kind === L.File && (ke ?? /* @__PURE__ */ S(f, { 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__ */ C(ye, {
-				isOpen: $e,
-				onClose: () => {
-					et(!1), nt(void 0);
-				},
-				fileActions: H,
-				initialFiles: tt,
-				labels: we
+			/* @__PURE__ */ S(Fe, {
+				isOpen: gt,
+				onClose: () => _t(!1),
+				fileActions: V,
+				mode: vt.mode,
+				targetFolderPath: vt.targetFolderPath,
+				initialFiles: vt.initialFiles,
+				initialEntries: vt.initialEntries,
+				labels: ze
 			})
 		]
 	});
 };
 //#endregion
-export { fe as SKILL_EDITOR_CLASS, G as SkillEditor, H as SkillFileCandidateKind, z as SkillFileNodeKind, U as SkillFileValidationStatus };
+export { ve as SKILL_EDITOR_CLASS, Re as SkillEditor, ke as SkillFileCandidateKind, L as SkillFileNodeKind, H as SkillFileUploadMode, W as SkillFileValidationStatus };