@epam/ai-dial-skill-editor 1.3.0-dev.28 → 1.3.0-dev.288

package/index.js

@@ -1,10 +1,10 @@
-import { MARKDOWN_EDITOR_FILL_HEIGHT_CLASS_NAME as e, MARKDOWN_EDITOR_MAX_HEIGHT_CLASS_NAME as t, MARKDOWN_EDITOR_PREVIEW_LIST_CLASS_NAME as n, RESIZABLE_TEXTAREA_CLASS_NAME as r, TAG_INPUT_TAG_CLASS_NAME as i, TextRefinementField as a, buildCssVars as o, formatFileSize as s, mergeClasses as c, useAvailableHeightCap as l, useTextRefinement as u } from "@epam/ai-dial-chat-shared";
-import { Accordion as d, ButtonAppearance as f, ButtonDropdown as p, ButtonVariant as m, CaptionText as h, DIAL_ICON_SIZE as g, DIAL_KIT_ICON_STROKE as _, DangerIconButton as v, EditorThemes as y, ElementSize as b, ErrorText as x, FileDropzone as S, GhostButton as C, GhostIconButton as w, Input as T, Label as E, LinkButton as D, NeutralButton as O, Popup as k, PopupSize as ee, PrimaryButton as A, Select as te, Spinner as ne, TagInput as j, Textarea as M, TextareaResize as N } from "@epam/ai-dial-ui-kit";
-import { Fragment as P, jsx as F, jsxs as I } from "react/jsx-runtime";
-import { IconArrowNarrowLeft as L, IconDatabase as re, IconFileText as ie, IconFileZip as ae, IconFolderPlus as oe, IconPhoto as se, IconPlus as ce, IconTrashX as le, IconUpload as ue } from "@tabler/icons-react";
-import { Suspense as de, lazy as R, memo as fe, useCallback as z, useEffect as pe, useId as me, useMemo as B, useRef as V, useState as H } from "react";
-import { DialFileNodeType as he, DialFoldersTree as ge } from "@epam/ai-dial-react-file-manager";
-import { LazyMarkdownEditor as _e } from "@epam/ai-dial-ui-kit/editors";
+import { MARKDOWN_EDITOR_FILL_HEIGHT_CLASS_NAME as e, MARKDOWN_EDITOR_MAX_HEIGHT_CLASS_NAME as t, MARKDOWN_EDITOR_PREVIEW_LIST_CLASS_NAME as n, RESIZABLE_TEXTAREA_CLASS_NAME as r, TAG_INPUT_TAG_CLASS_NAME as i, TextRefinementField as a, buildCssVars as o, formatFileSize as s, mergeClasses as c, useAvailableHeightCap as l, useControlErrorAssociation as u, useIsMobile as d, useTextRefinement as f } from "@epam/ai-dial-chat-shared";
+import { Accordion as p, BottomSheet as m, ButtonAppearance as h, ButtonDropdown as g, ButtonVariant as _, CaptionText as v, DIAL_ICON_SIZE as y, DIAL_KIT_ICON_STROKE as b, DangerIconButton as x, EditorThemes as S, ElementSize as C, ErrorMessageNotification as w, ErrorText as T, FileDropzone as E, FileName as D, GhostButton as O, GhostIconButton as ee, Input as k, Label as A, LinkButton as te, LiveRegion as ne, LiveRegionElement as re, LiveRegionPoliteness as ie, NeutralButton as j, Popup as ae, PopupSize as oe, PrimaryButton as se, RadioGroup as ce, ResizeHandle as M, Select as le, Spinner as ue, TagInput as de, Textarea as fe, TextareaResize as pe } from "@epam/ai-dial-ui-kit";
+import { Fragment as N, jsx as P, jsxs as F } from "react/jsx-runtime";
+import { IconArrowNarrowLeft as me, IconDatabase as he, IconFileZip as ge, IconFolderPlus as _e, IconPhoto as I, IconPlus as ve, IconTrashX as ye, IconUpload as be } from "@tabler/icons-react";
+import { Suspense as xe, lazy as Se, memo as Ce, useCallback as L, useEffect as R, useId as we, useMemo as z, useRef as B, useState as V } from "react";
+import { DialFileNodeType as Te, DialFoldersTree as Ee } from "@epam/ai-dial-react-file-manager";
+import { LazyMarkdownEditor as De } from "@epam/ai-dial-ui-kit/editors";
 c("flex flex-col desktop:min-h-0 desktop:overflow-y-auto", {
 	body: "_body_1xd7h_2",
 	sideColumn: "_sideColumn_1xd7h_6",
@@ -12,310 +12,355 @@ c("flex flex-col desktop:min-h-0 desktop:overflow-y-auto", {
 }.sideColumn);
 //#endregion
 //#region ../builder-form/src/constants/public-class-names.ts
-var ve = {
+var H = {
 	layout: "dial-builder-form-layout",
 	section: "dial-builder-form-section",
 	metadataSection: "dial-builder-form-metadata-section",
 	setupSection: "dial-builder-form-setup-section",
 	asideSection: "dial-builder-form-aside-section"
-}, ye = {
+}, Oe = {
 	section: "_section_l1mnx_1",
 	title: "_title_l1mnx_5"
-}, be = ({ title: e, children: t, styles: n, className: r }) => {
+}, ke = ({ title: e, children: t, styles: n, className: r }) => {
 	let i = o({
 		"--es-border-color": n?.colors?.borderColor,
 		"--es-title-color": n?.colors?.titleColor
 	});
-	return /* @__PURE__ */ I("section", {
-		className: c("flex h-full flex-col gap-4 rounded border p-6", ye.section, r, ve.section),
+	return /* @__PURE__ */ F("section", {
+		className: c("flex h-full flex-col gap-4 rounded border p-6", Oe.section, r, H.section),
 		style: i,
-		children: [e != null && /* @__PURE__ */ F("h2", {
-			className: c("dial-h3-text", ye.title),
+		children: [e != null && /* @__PURE__ */ P("h2", {
+			className: c(n?.typography?.titleClassName ?? "dial-h3-text", Oe.title),
 			children: e
 		}), t]
 	});
-}, xe = {
+}, U = (e, { min: t = 280, max: n = 640, containerWidth: r } = {}) => {
+	let i = r != null && r > 0 ? r - 360 : n;
+	return Math.round(Math.min(Math.max(t, Math.min(n, i)), Math.max(t, Number.isFinite(e) ? e : t)));
+}, Ae = {
 	headerBorder: "_headerBorder_1adw2_1",
 	footerBorder: "_footerBorder_1adw2_5",
 	columnBorder: "_columnBorder_1adw2_10"
-}, Se = ({ title: e, onBack: t, backAriaLabel: n = "Back", actions: r, leftContent: i, centerContent: a, rightContent: s, isSaving: l = !1, labels: u, styles: d, dir: f }) => {
-	let p = me(), m = l ? u?.savingStatusLabel ?? "Saving" : "", h = o({
-		"--el-header-border-color": d?.colors?.headerBorderColor,
-		"--el-sidebar-border-color": d?.colors?.sidebarBorderColor
+}, je = ({ title: e, onBack: t, backAriaLabel: n = "Back", actions: r, leftContent: i, centerContent: a, rightContent: s, resizableLeftColumn: l, isSaving: u = !1, labels: d, styles: f, dir: p }) => {
+	let m = we(), h = u ? d?.savingStatusLabel ?? "Saving" : "", g = B(null), [_, v] = V(), x = l != null && a != null, S = l?.minWidth, C = l?.maxWidth, w = {
+		min: S,
+		max: C,
+		containerWidth: _
+	}, T = x ? U(l.width, w) : void 0, E = U(C ?? 640, w);
+	R(() => {
+		let e = g.current;
+		if (!x || e == null || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(() => v(e.clientWidth));
+		return t.observe(e), () => t.disconnect();
+	}, [x]);
+	let D = o({
+		"--el-header-border-color": f?.colors?.headerBorderColor,
+		"--el-sidebar-border-color": f?.colors?.sidebarBorderColor
 	});
-	return /* @__PURE__ */ I("div", {
-		dir: f,
-		className: c("flex min-h-0 flex-1 flex-col", ve.layout),
-		style: h,
+	return /* @__PURE__ */ F("div", {
+		dir: p,
+		className: c("flex min-h-0 flex-1 flex-col", H.layout),
+		style: D,
 		children: [
-			/* @__PURE__ */ F("span", {
-				role: "status",
-				"aria-live": "polite",
-				className: "sr-only",
-				id: p,
-				children: m
+			/* @__PURE__ */ P(ne, {
+				visuallyHidden: !0,
+				as: re.Span,
+				id: m,
+				children: h
 			}),
-			/* @__PURE__ */ I("div", {
-				className: c("flex items-center justify-between gap-2 border-b px-4 py-2 desktop:px-8 desktop:pb-3 desktop:pt-3", xe.headerBorder),
-				children: [/* @__PURE__ */ I("div", {
+			/* @__PURE__ */ F("div", {
+				className: c("flex items-center justify-between gap-2 border-b px-4 py-2 desktop:px-8 desktop:pt-3 desktop:pb-3", Ae.headerBorder),
+				children: [/* @__PURE__ */ F("div", {
 					className: "flex min-w-0 flex-1 items-center gap-2",
-					children: [/* @__PURE__ */ F(w, {
-						icon: /* @__PURE__ */ F(L, {
-							size: g.LG,
-							stroke: _,
+					children: [/* @__PURE__ */ P(ee, {
+						icon: /* @__PURE__ */ P(me, {
+							size: y.LG,
+							stroke: b,
 							"aria-hidden": !0,
 							className: "rtl:scale-x-[-1]"
 						}),
 						"aria-label": n,
 						onClick: t
-					}), /* @__PURE__ */ F("h1", {
-						className: "dial-h2-text min-w-0 truncate",
+					}), /* @__PURE__ */ P("h1", {
+						className: c(f?.typography?.titleClassName ?? "dial-h2-text", "min-w-0 truncate"),
 						children: e
 					})]
-				}), r != null && /* @__PURE__ */ F("div", {
+				}), r != null && /* @__PURE__ */ P("div", {
 					className: "hidden shrink-0 items-center gap-2 desktop:flex",
 					children: r
 				})]
 			}),
-			/* @__PURE__ */ I("div", {
+			/* @__PURE__ */ F("div", {
+				ref: g,
 				className: "flex flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden",
 				children: [
-					/* @__PURE__ */ F("div", {
-						className: c(a == null ? "desktop:flex-1" : "desktop:w-[400px] desktop:shrink-0 desktop:overflow-y-auto desktop:border-e", "desktop:overflow-y-auto", a == null ? void 0 : xe.columnBorder),
+					/* @__PURE__ */ P("div", {
+						className: c(a == null ? "desktop:flex-1" : "desktop:shrink-0 desktop:overflow-y-auto desktop:border-e", a != null && !x && "desktop:w-[400px]", x && "desktop:relative desktop:w-(--el-left-width)", "desktop:overflow-y-auto", a == null ? void 0 : Ae.columnBorder),
+						style: T == null ? void 0 : { "--el-left-width": `${T}px` },
 						children: i
 					}),
-					a != null && /* @__PURE__ */ F("div", {
+					x && T != null && /* @__PURE__ */ P("div", {
+						className: "relative hidden w-0 shrink-0 desktop:block",
+						children: /* @__PURE__ */ P(M, {
+							width: T,
+							minWidth: S ?? 280,
+							maxWidth: E,
+							defaultWidth: l.defaultWidth ?? 400,
+							onWidthChange: l.onWidthChange,
+							label: d?.resizeHandleLabel ?? "Resize columns",
+							tooltip: d?.resizeHandleTooltip ?? "Drag to resize"
+						})
+					}),
+					a != null && /* @__PURE__ */ P("div", {
 						className: "desktop:flex desktop:min-h-0 desktop:flex-1 desktop:flex-col desktop:overflow-y-auto",
 						children: a
 					}),
-					s != null && /* @__PURE__ */ F("div", {
-						className: c("desktop:w-[400px] desktop:shrink-0 desktop:overflow-y-auto desktop:border-s", xe.columnBorder),
+					s != null && /* @__PURE__ */ P("div", {
+						className: c("desktop:w-[400px] desktop:shrink-0 desktop:overflow-y-auto desktop:border-s", Ae.columnBorder),
 						children: s
 					})
 				]
 			}),
-			r != null && /* @__PURE__ */ F("div", {
-				className: c("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 desktop:hidden [&>*]:flex-1", xe.footerBorder),
+			r != null && /* @__PURE__ */ P("div", {
+				className: c("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 *:flex-1 desktop:hidden", Ae.footerBorder),
 				children: r
 			})
 		]
 	});
-}, Ce = {
+}, Me = {
 	box: "_box_c9as8_1",
 	icon: "_icon_c9as8_6",
 	caption: "_caption_c9as8_10"
-}, we = ({ label: e, avatarUrl: t, avatarAlt: n = "", addAvatarLabel: r = "Add avatar", captionText: i = "PNG, JPG or SVG (max 1 MB)", onAddAvatarClick: a, styles: s, className: l }) => {
-	let u = o({
-		"--aa-box-bg": s?.colors?.boxBackgroundColor,
-		"--aa-box-border": s?.colors?.boxBorderColor,
-		"--aa-icon": s?.colors?.placeholderIconColor,
-		"--aa-caption": s?.colors?.captionColor
+}, W = ({ label: e, avatarUrl: t, avatarAlt: n = "", addAvatarLabel: r = "Add avatar", captionText: i = "PNG, JPG or SVG (max 1 MB)", onAddAvatarClick: a, captionClassName: s = "dial-tiny-text", styles: l, className: u }) => {
+	let d = o({
+		"--aa-box-bg": l?.colors?.boxBackgroundColor,
+		"--aa-box-border": l?.colors?.boxBorderColor,
+		"--aa-icon": l?.colors?.placeholderIconColor,
+		"--aa-caption": l?.colors?.captionColor
 	});
-	return /* @__PURE__ */ I("div", {
-		className: c("flex flex-col gap-2", l),
-		style: u,
-		children: [/* @__PURE__ */ F(E, { label: e }), /* @__PURE__ */ I("div", {
+	return /* @__PURE__ */ F("div", {
+		className: c("flex flex-col gap-2", u),
+		style: d,
+		children: [/* @__PURE__ */ P(A, { label: e }), /* @__PURE__ */ F("div", {
 			className: "flex items-start gap-3",
-			children: [/* @__PURE__ */ F("div", {
-				className: c("flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg border", Ce.box),
-				children: t ? /* @__PURE__ */ F("img", {
+			children: [/* @__PURE__ */ P("div", {
+				className: c("flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg border", Me.box),
+				children: t ? /* @__PURE__ */ P("img", {
 					src: t,
 					alt: n,
 					className: "h-16 w-16 object-cover"
-				}) : /* @__PURE__ */ F(se, {
-					size: g.LG,
-					stroke: _,
+				}) : /* @__PURE__ */ P(I, {
+					size: y.LG,
+					stroke: b,
 					"aria-hidden": !0,
-					className: Ce.icon
+					className: Me.icon
 				})
-			}), /* @__PURE__ */ I("div", {
+			}), /* @__PURE__ */ F("div", {
 				className: "flex flex-col gap-3",
-				children: [/* @__PURE__ */ F(C, {
-					size: b.Small,
-					iconBefore: /* @__PURE__ */ F(ce, {
-						size: g.SM,
-						stroke: _,
+				children: [/* @__PURE__ */ P(O, {
+					size: C.Small,
+					iconBefore: /* @__PURE__ */ P(ve, {
+						size: y.SM,
+						stroke: b,
 						"aria-hidden": !0
 					}),
 					className: "w-fit",
 					label: r,
 					onClick: a
-				}), /* @__PURE__ */ F("span", {
-					className: c("dial-tiny-text", Ce.caption),
+				}), /* @__PURE__ */ P("span", {
+					className: c(s, Me.caption),
 					children: i
 				})]
 			})]
 		})]
 	});
-}, Te = ({ isOpen: e, onClose: t, onAttach: n, bucket: r, FileManagerModal: i, allowedMimeTypes: a, maxFileSizeBytes: o, labels: s }) => {
-	let c = z((e) => e.length === 1 ? s.deleteConfirmTitleSingle : s.deleteConfirmTitleMultiple, [s.deleteConfirmTitleSingle, s.deleteConfirmTitleMultiple]), l = z((e) => /* @__PURE__ */ F("div", {
-		className: "dial-small-text px-6 py-3",
-		children: /* @__PURE__ */ F("p", {
-			className: "mb-3 text-secondary",
-			children: e.length === 1 ? /* @__PURE__ */ I(P, { children: [
-				s.deleteConfirmSingleText,
+}, Ne = {
+	confirmText: "_confirmText_19ec1_1",
+	confirmItem: "_confirmItem_19ec1_5"
+}, Pe = ({ isOpen: e, onClose: t, onAttach: n, bucket: r, FileManagerModal: i, allowedMimeTypes: a, maxFileSizeBytes: s, labels: l, confirmBodyClassName: u = "dial-small-text", styles: d }) => {
+	let f = d?.colors?.confirmText, p = d?.colors?.confirmItemText, m = L((e) => e.length === 1 ? l.deleteConfirmTitleSingle : l.deleteConfirmTitleMultiple, [l.deleteConfirmTitleSingle, l.deleteConfirmTitleMultiple]), h = L((e) => /* @__PURE__ */ P("div", {
+		className: c(u, "px-6 py-3"),
+		style: o({
+			"--apm-confirm-text": f,
+			"--apm-confirm-item-text": p
+		}),
+		children: /* @__PURE__ */ P("p", {
+			className: c("mb-3", Ne.confirmText),
+			children: e.length === 1 ? /* @__PURE__ */ F(N, { children: [
+				l.deleteConfirmSingleText,
 				" ",
-				/* @__PURE__ */ I("span", {
-					className: "break-words text-primary",
+				/* @__PURE__ */ F("span", {
+					className: c("wrap-break-word", Ne.confirmItem),
 					children: [
 						"\"",
 						e[0].split("/").pop(),
 						"\"?"
 					]
 				})
-			] }) : /* @__PURE__ */ I(P, { children: [
-				s.deleteConfirmMultipleText,
+			] }) : /* @__PURE__ */ F(N, { children: [
+				l.deleteConfirmMultipleText,
 				" ",
-				/* @__PURE__ */ I("span", {
-					className: "text-primary",
+				/* @__PURE__ */ F("span", {
+					className: Ne.confirmItem,
 					children: [
 						e.length,
 						" ",
-						s.deleteConfirmItemsLabel
+						l.deleteConfirmItemsLabel
 					]
 				})
 			] })
 		})
 	}), [
-		s.deleteConfirmSingleText,
-		s.deleteConfirmMultipleText,
-		s.deleteConfirmItemsLabel
+		l.deleteConfirmSingleText,
+		l.deleteConfirmMultipleText,
+		l.deleteConfirmItemsLabel,
+		f,
+		p,
+		u
 	]);
-	return /* @__PURE__ */ F(de, {
+	return /* @__PURE__ */ P(xe, {
 		fallback: null,
-		children: e && /* @__PURE__ */ F(i, {
+		children: e && /* @__PURE__ */ P(i, {
 			isOpen: e,
 			onClose: t,
 			onAttach: n,
 			bucket: r,
 			allowedTypes: a,
-			maxSelectableFileSize: o,
+			maxSelectableFileSize: s,
 			maximumAttachmentsAmount: 1,
 			canAttachFolders: !1,
-			title: s.title,
-			attachLabel: s.attachLabel,
-			emptyTitle: s.emptyTitle,
-			emptyDescription: s.emptyDescription,
-			errorMessage: s.errorMessage,
-			retryLabel: s.retryLabel,
-			hiddenFilesLabel: s.hiddenFilesLabel,
-			showHiddenFilesLabel: s.showHiddenFilesLabel,
-			hideHiddenFilesLabel: s.hideHiddenFilesLabel,
-			getSelectionLabel: s.getSelectionLabel,
-			uploadFilesLabel: s.uploadFilesLabel,
-			newFolderLabel: s.newFolderLabel,
-			downloadLabel: s.downloadLabel,
-			downloadingLabel: s.downloadingLabel,
-			deleteLabel: s.deleteLabel,
-			deletingLabel: s.deletingLabel,
-			deleteConfirmTitle: c,
-			deleteConfirmBody: l,
-			deleteConfirmLabel: s.deleteConfirmLabel,
-			deleteCancelLabel: s.deleteCancelLabel
+			title: l.title,
+			attachLabel: l.attachLabel,
+			emptyTitle: l.emptyTitle,
+			emptyDescription: l.emptyDescription,
+			errorMessage: l.errorMessage,
+			retryLabel: l.retryLabel,
+			hiddenFilesLabel: l.hiddenFilesLabel,
+			showHiddenFilesLabel: l.showHiddenFilesLabel,
+			hideHiddenFilesLabel: l.hideHiddenFilesLabel,
+			getSelectionLabel: l.getSelectionLabel,
+			uploadFilesLabel: l.uploadFilesLabel,
+			newFolderLabel: l.newFolderLabel,
+			downloadLabel: l.downloadLabel,
+			downloadingLabel: l.downloadingLabel,
+			deleteLabel: l.deleteLabel,
+			deletingLabel: l.deletingLabel,
+			deleteConfirmTitle: m,
+			deleteConfirmBody: h,
+			deleteConfirmLabel: l.deleteConfirmLabel,
+			deleteCancelLabel: l.deleteCancelLabel
 		})
 	});
-}, U = /* @__PURE__ */ function(e) {
+}, G = /* @__PURE__ */ function(e) {
 	return e.Avatar = "avatar", e.Name = "name", e.Version = "version", e.Description = "description", e.Locales = "locales", e.Tags = "tags", e;
-}({}), Ee = [
+}({}), Fe = [
 	"avatar",
 	"name",
 	"version",
 	"description",
 	"locales",
 	"tags"
-], De = (e, t, n) => ({
+], Ie = {
+	summary: "_summary_1hlc9_1",
+	rowLabel: "_rowLabel_1hlc9_5"
+}, Le = (e, t, n) => ({
 	id: e,
 	language: n.find((e) => !t.has(e.code))?.code ?? "",
 	name: "",
 	description: ""
-}), W = ({ value: e, onChange: t, availableLocaleOptions: n = [], labels: i, className: a, summaryClassName: o = "dial-body-text text-secondary", rowLabelClassName: s = "dial-tiny-lead-text text-secondary" }) => {
-	let { summaryLabel: l, addLabel: u, editLabel: d, popupTitle: p, addLocaleLabel: h, localeRowLabel: y = "Locale", languageLabel: x, nameLabel: S, namePlaceholder: C, descriptionLabel: w, descriptionPlaceholder: E, deleteAriaLabel: O, cancelLabel: ee = "Cancel", saveLabel: A = "Save" } = i, [ne, j] = H(!1), [P, L] = H([]), re = V(0);
-	pe(() => {
-		ne && L(e.length > 0 ? e : [De(`locale-row-${++re.current}`, /* @__PURE__ */ new Set(), n)]);
+}), Re = ({ value: e, onChange: t, availableLocaleOptions: n = [], labels: i, className: a, summaryClassName: s = "dial-body-text", rowLabelClassName: l = "dial-tiny-lead-text", colors: u }) => {
+	let d = o({
+		"--dlf-summary-text": u?.summaryText,
+		"--dlf-row-label-text": u?.rowLabelText
+	}), { summaryLabel: f, addLabel: p, editLabel: m, popupTitle: g, addLocaleLabel: v, localeRowLabel: S = "Locale", languageLabel: w, nameLabel: T, namePlaceholder: E, descriptionLabel: D, descriptionPlaceholder: O, deleteAriaLabel: ee, cancelLabel: A = "Cancel", saveLabel: ne = "Save" } = i, [re, ie] = V(!1), [j, oe] = V([]), se = B(0);
+	R(() => {
+		re && oe(e.length > 0 ? e : [Le(`locale-row-${++se.current}`, /* @__PURE__ */ new Set(), n)]);
 	}, [
-		ne,
+		re,
 		e,
 		n
 	]);
-	let ie = () => j(!0), ae = () => j(!1), oe = () => {
-		t(P.filter((e) => e.language && e.name)), j(!1);
-	}, se = () => {
-		let e = new Set(P.map((e) => e.language).filter(Boolean));
-		L((t) => [...t, De(`locale-row-${++re.current}`, e, n)]);
-	}, ue = (e, t) => {
-		L((n) => n.map((n) => n.id === e ? {
+	let ce = () => ie(!0), M = () => ie(!1), ue = () => {
+		t(j.filter((e) => e.language && e.name)), ie(!1);
+	}, de = () => {
+		let e = new Set(j.map((e) => e.language).filter(Boolean));
+		oe((t) => [...t, Le(`locale-row-${++se.current}`, e, n)]);
+	}, N = (e, t) => {
+		oe((n) => n.map((n) => n.id === e ? {
 			...n,
 			...t
 		} : n));
-	}, de = (e) => {
-		L((t) => t.filter((t) => t.id !== e));
-	}, R = (e) => n.find((t) => t.code === e)?.label ?? e.toUpperCase(), fe = P.some((e) => !e.language || !e.name);
-	return n.length === 0 ? null : /* @__PURE__ */ I("div", {
+	}, me = (e) => {
+		oe((t) => t.filter((t) => t.id !== e));
+	}, he = (e) => n.find((t) => t.code === e)?.label ?? e.toUpperCase(), ge = j.some((e) => !e.language || !e.name);
+	return n.length === 0 ? null : /* @__PURE__ */ F("div", {
 		className: c("flex items-center gap-2", a),
+		style: d,
 		children: [
-			e.length > 0 && /* @__PURE__ */ F("span", {
-				className: o,
-				children: `${l}: ${e.map((e) => `[${R(e.language)}]`).join(", ")}`
+			e.length > 0 && /* @__PURE__ */ P("span", {
+				className: c(Ie.summary, s),
+				children: `${f}: ${e.map((e) => `[${he(e.language)}]`).join(", ")}`
 			}),
-			/* @__PURE__ */ F(D, {
-				label: e.length > 0 ? d : u,
-				iconBefore: /* @__PURE__ */ F(ce, {
-					size: g.SM,
+			/* @__PURE__ */ P(te, {
+				label: e.length > 0 ? m : p,
+				iconBefore: /* @__PURE__ */ P(ve, {
+					size: y.SM,
 					"aria-hidden": !0,
-					stroke: _
+					stroke: b
 				}),
-				className: "!px-0",
-				onClick: ie
+				className: "px-0!",
+				onClick: ce
 			}),
-			/* @__PURE__ */ F(k, {
-				open: ne,
-				header: p,
-				onClose: ae,
+			/* @__PURE__ */ P(ae, {
+				open: re,
+				header: g,
+				onClose: M,
 				mainButtons: [{
-					label: ee,
-					onClick: ae
-				}, {
 					label: A,
-					variant: m.Primary,
-					disabled: fe,
-					onClick: oe
+					onClick: M
+				}, {
+					label: ne,
+					variant: _.Primary,
+					disabled: ge,
+					onClick: ue
 				}],
-				children: /* @__PURE__ */ I("div", {
+				children: /* @__PURE__ */ F("div", {
 					className: "flex flex-col gap-8 px-6 py-3",
-					children: [P.map((e, t) => {
-						let i = new Set(P.filter((t) => t.id !== e.id).map((e) => e.language).filter(Boolean));
-						return /* @__PURE__ */ I("div", {
+					style: d,
+					children: [j.map((e, t) => {
+						let i = new Set(j.filter((t) => t.id !== e.id).map((e) => e.language).filter(Boolean));
+						return /* @__PURE__ */ F("div", {
 							className: "flex flex-col gap-2",
-							children: [/* @__PURE__ */ I("div", {
+							children: [/* @__PURE__ */ F("div", {
 								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ I("span", {
-									className: s,
+								children: [/* @__PURE__ */ F("span", {
+									className: c(Ie.rowLabel, l),
 									children: [
-										y,
+										S,
 										" ",
 										t + 1
 									]
-								}), /* @__PURE__ */ F(v, {
-									appearance: f.Ghost,
-									size: b.Small,
-									icon: /* @__PURE__ */ F(le, {
-										size: g.SM,
+								}), /* @__PURE__ */ P(x, {
+									appearance: h.Ghost,
+									size: C.Small,
+									icon: /* @__PURE__ */ P(ye, {
+										size: y.SM,
 										"aria-hidden": !0,
-										stroke: _
+										stroke: b
 									}),
-									"aria-label": `${O} ${t + 1}`,
-									onClick: () => de(e.id)
+									"aria-label": `${ee} ${t + 1}`,
+									onClick: () => me(e.id)
 								})]
-							}), /* @__PURE__ */ I("div", {
+							}), /* @__PURE__ */ F("div", {
 								role: "group",
-								"aria-label": `${y} ${t + 1}`,
+								"aria-label": `${S} ${t + 1}`,
 								className: "flex flex-col gap-5",
-								children: [/* @__PURE__ */ I("div", {
+								children: [/* @__PURE__ */ F("div", {
 									className: "flex flex-col gap-5 desktop:flex-row desktop:items-start",
-									children: [/* @__PURE__ */ F(te, {
+									children: [/* @__PURE__ */ P(le, {
 										id: `${e.id}-language`,
 										labelProps: {
-											label: x,
+											label: w,
 											required: !0
 										},
 										className: "desktop:shrink-0 desktop:basis-40",
@@ -325,86 +370,83 @@ var ve = {
 											disabled: i.has(e.code)
 										})),
 										value: e.language,
-										onChange: (t) => ue(e.id, { language: t })
-									}), /* @__PURE__ */ F(T, {
+										onChange: (t) => N(e.id, { language: t })
+									}), /* @__PURE__ */ P(k, {
 										id: `${e.id}-name`,
 										containerClassName: "min-w-0 flex-1",
 										required: !0,
 										value: e.name,
-										onChange: (t) => ue(e.id, { name: t ?? "" }),
+										onChange: (t) => N(e.id, { name: t ?? "" }),
 										labelProps: {
-											label: S,
+											label: T,
 											required: !0
 										},
-										placeholder: C
+										placeholder: E
 									})]
-								}), /* @__PURE__ */ F(M, {
+								}), /* @__PURE__ */ P(fe, {
 									id: `${e.id}-description`,
 									className: r,
-									resize: N.Vertical,
+									resize: pe.Vertical,
 									value: e.description,
-									onChange: (t) => ue(e.id, { description: t }),
-									labelProps: { label: w },
-									placeholder: E
+									onChange: (t) => N(e.id, { description: t }),
+									labelProps: { label: D },
+									placeholder: O
 								})]
 							})]
 						}, e.id);
-					}), /* @__PURE__ */ F(D, {
-						label: h,
-						iconBefore: /* @__PURE__ */ F(ce, {
-							size: g.SM,
+					}), /* @__PURE__ */ P(te, {
+						label: v,
+						iconBefore: /* @__PURE__ */ P(ve, {
+							size: y.SM,
 							"aria-hidden": !0,
-							stroke: _
+							stroke: b
 						}),
 						className: "self-start",
-						onClick: se,
-						disabled: P.length >= n.length
+						onClick: de,
+						disabled: j.length >= n.length
 					})]
 				})
 			})
 		]
 	});
-}, Oe = "Add tags, comma separated", ke = "deployment-creation-form-description", G = ({ values: e, errors: t, onChange: n, onNameBlur: a, onVersionBlur: o, iconPreviewUrl: s, onAddAvatarClick: l, labels: u, styles: d, availableLocaleOptions: f = [], fields: p = Ee, isNameReadOnly: m = !1, nameCaption: h, isDescriptionRequired: g = !1, renderDescription: _, focusRequestKey: v }) => {
-	let y = V(null), b = V(null), x = V(null), S = V(!1), C = (e) => p.includes(e), w = C(U.Name), E = C(U.Version), D = !!(t.name || t.version || t.description), O = V(v);
-	pe(() => {
+}, ze = "Add tags, comma separated", Be = "deployment-creation-form-description", Ve = ({ values: e, errors: t, onChange: n, onNameBlur: a, onVersionBlur: o, iconPreviewUrl: s, onAddAvatarClick: l, labels: u, styles: d, availableLocaleOptions: f = [], fields: p = Fe, isNameReadOnly: m = !1, nameReadOnlyTooltip: h, nameCaption: g, isDescriptionRequired: _ = !1, descriptionCaption: v, renderDescription: y, focusRequestKey: b }) => {
+	let x = B(null), S = B(null), C = B(null), w = B(!1), T = (e) => p.includes(e), E = T(G.Name), D = T(G.Version), O = !!(t.name || t.version || t.description), ee = B(b);
+	R(() => {
 		let e = () => {
-			t.name ? y.current?.focus() : t.version ? b.current?.focus() : t.description && x.current?.focus();
+			t.name ? x.current?.focus() : t.version ? S.current?.focus() : t.description && C.current?.focus();
 		};
-		if (v !== void 0) {
-			v !== O.current && (O.current = v, e());
-			return;
-		}
-		D && !S.current && e(), S.current = D;
+		b === void 0 ? (O && !w.current && e(), w.current = O) : b !== ee.current && (ee.current = b, e());
 	}, [
-		v,
-		D,
+		b,
+		O,
 		t.name,
 		t.version,
 		t.description
 	]);
-	let k = /* @__PURE__ */ F(M, {
-		id: ke,
-		ref: x,
+	let A = /* @__PURE__ */ P(fe, {
+		id: Be,
+		ref: C,
 		value: e.description,
 		onChange: (e) => n({ description: e }),
-		"aria-required": g || void 0,
-		labelProps: _ ? void 0 : {
+		"aria-required": _ || void 0,
+		labelProps: y ? void 0 : {
 			label: u.description.label,
-			required: g
+			required: _
 		},
 		placeholder: u.description.placeholder,
+		caption: v,
 		error: t.description || void 0,
 		invalid: !!t.description,
-		containerClassName: _ ? void 0 : d?.field,
+		containerClassName: y ? void 0 : d?.field,
 		className: r,
-		resize: N.Vertical
+		resize: pe.Vertical
 	});
-	return /* @__PURE__ */ I("div", {
+	return /* @__PURE__ */ F("div", {
 		role: u.ariaLabel ? "group" : void 0,
 		"aria-label": u.ariaLabel,
 		className: c("flex flex-col gap-4", d?.root),
 		children: [
-			C(U.Avatar) && /* @__PURE__ */ F(we, {
+			T(G.Avatar) && /* @__PURE__ */ P(W, {
 				label: u.iconUrl.label,
 				avatarUrl: s,
 				addAvatarLabel: u.iconUrl.addAvatarLabel,
@@ -412,27 +454,28 @@ var ve = {
 				onAddAvatarClick: l,
 				className: d?.field
 			}),
-			(w || E) && /* @__PURE__ */ I("div", {
+			(E || D) && /* @__PURE__ */ F("div", {
 				className: c("flex items-start gap-4", d?.field),
-				children: [w && /* @__PURE__ */ F(T, {
+				children: [E && /* @__PURE__ */ P(k, {
 					id: "deployment-creation-form-name",
-					inputRef: y,
+					inputRef: x,
 					value: e.name,
 					onChange: (e) => n({ name: e ?? "" }),
 					onBlur: a,
-					readOnly: m,
+					disabled: m,
+					tooltipText: m ? h : void 0,
 					labelProps: {
 						label: u.name.label,
 						required: !0
 					},
 					placeholder: u.name.placeholder,
-					caption: h,
+					caption: g,
 					error: t.name || void 0,
 					invalid: !!t.name,
-					containerClassName: E ? "min-w-0 basis-0 grow-[2]" : "min-w-0 flex-1"
-				}), E && /* @__PURE__ */ F(T, {
+					containerClassName: D ? "min-w-0 basis-0 grow-[2]" : "min-w-0 flex-1"
+				}), D && /* @__PURE__ */ P(k, {
 					id: "deployment-creation-form-version",
-					inputRef: b,
+					inputRef: S,
 					value: e.version,
 					onChange: (e) => n({ version: e ?? "" }),
 					onBlur: o,
@@ -440,26 +483,27 @@ var ve = {
 					placeholder: u.version.placeholder,
 					error: t.version || void 0,
 					invalid: !!t.version,
-					containerClassName: w ? "min-w-0 basis-0 grow-[1]" : "min-w-0 flex-1"
+					containerClassName: E ? "min-w-0 basis-0 grow-[1]" : "min-w-0 flex-1"
 				})]
 			}),
-			C(U.Description) && (_ ? /* @__PURE__ */ F("div", {
+			T(G.Description) && (y ? /* @__PURE__ */ P("div", {
 				className: d?.field,
-				children: _(k, ke)
-			}) : k),
-			C(U.Locales) && /* @__PURE__ */ F(W, {
+				children: y(A, Be)
+			}) : A),
+			T(G.Locales) && /* @__PURE__ */ P(Re, {
 				value: e.otherLocales,
 				onChange: (e) => n({ otherLocales: e }),
 				availableLocaleOptions: f,
 				labels: u.otherLocales,
-				className: d?.field
+				className: d?.field,
+				colors: d?.localesColors
 			}),
-			C(U.Tags) && /* @__PURE__ */ F("div", {
+			T(G.Tags) && /* @__PURE__ */ P("div", {
 				className: d?.field,
-				children: /* @__PURE__ */ F(j, {
+				children: /* @__PURE__ */ P(de, {
 					id: "deployment-creation-form-topics",
 					labelProps: { label: u.topics.label },
-					placeholder: u.topics.placeholder ?? Oe,
+					placeholder: u.topics.placeholder ?? ze,
 					value: e.topics,
 					onChange: (e) => n({ topics: e }),
 					tagClassName: i
@@ -467,53 +511,58 @@ var ve = {
 			})
 		]
 	});
-}, Ae = "border-0 p-4 desktop:p-8", je = "desktop:flex-1", Me = "px-4 pt-4 desktop:px-6 desktop:pt-6", Ne = fe(({ title: e, onBack: t, onCancel: n, onSubmit: r, submitLabel: i, isSubmitting: a = !1, isSubmitDisabled: o = !1, extraActions: s, hideStandardActions: l = !1, metadata: u, metadataTitle: d, metadataFooter: f, setup: p, setupTitle: m, asideData: h, asideTitle: g, asideSectionClassName: _, alert: v, metadataSectionClassName: y, setupSectionClassName: b, labels: x, styles: S, dir: C }) => {
-	let w = v == null ? null : /* @__PURE__ */ F("div", {
-		role: "alert",
-		className: Me,
+}, He = "border-0 p-4 desktop:p-8", Ue = "desktop:flex-1", We = "px-4 pt-4 desktop:px-6 desktop:pt-6", Ge = Ce(({ title: e, onBack: t, onCancel: n, onSubmit: r, submitLabel: i, isSubmitting: a = !1, isSubmitDisabled: o = !1, extraActions: s, hideStandardActions: l = !1, metadata: u, metadataTitle: d, metadataFooter: f, setup: p, setupTitle: m, asideData: h, asideTitle: g, asideSectionClassName: _, alert: v, resizableLeftColumn: y, metadataSectionClassName: b, setupSectionClassName: x, labels: S, styles: C, dir: w }) => {
+	let T = /* @__PURE__ */ P(ne, {
+		politeness: ie.Assertive,
+		className: v == null ? void 0 : We,
 		children: v
-	}), T = p != null;
-	return /* @__PURE__ */ F(Se, {
+	}), E = p != null;
+	return /* @__PURE__ */ P(je, {
 		title: e,
 		onBack: t,
-		backAriaLabel: x?.backAriaLabel ?? "Back",
+		backAriaLabel: S?.backAriaLabel ?? "Back",
 		isSaving: a,
-		labels: { savingStatusLabel: x?.savingStatusLabel ?? "Saving" },
-		rightContent: h == null ? void 0 : /* @__PURE__ */ F(be, {
+		resizableLeftColumn: y,
+		labels: {
+			savingStatusLabel: S?.savingStatusLabel ?? "Saving",
+			resizeHandleLabel: S?.resizeHandleLabel,
+			resizeHandleTooltip: S?.resizeHandleTooltip
+		},
+		rightContent: h == null ? void 0 : /* @__PURE__ */ P(ke, {
 			title: g,
-			styles: S?.section,
-			className: c(Ae, _, ve.asideSection),
+			styles: C?.section,
+			className: c(He, _, H.asideSection),
 			children: h
 		}),
-		styles: S?.layout,
-		dir: C,
-		actions: /* @__PURE__ */ I(P, { children: [s, !l && /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F(O, {
-			label: x?.cancelLabel ?? "Cancel",
+		styles: C?.layout,
+		dir: w,
+		actions: /* @__PURE__ */ F(N, { children: [s, !l && /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P(j, {
+			label: S?.cancelLabel ?? "Cancel",
 			disabled: a,
 			onClick: n
-		}), /* @__PURE__ */ F(A, {
+		}), /* @__PURE__ */ P(se, {
 			label: i,
 			disabled: a || o,
 			onClick: r
 		})] })] }),
-		leftContent: /* @__PURE__ */ I(P, { children: [
-			!T && w,
-			/* @__PURE__ */ F(be, {
-				title: d === null ? void 0 : d ?? x?.metadataTitle ?? "Metadata",
-				styles: S?.section,
-				className: c(Ae, y, ve.metadataSection),
+		leftContent: /* @__PURE__ */ F(N, { children: [
+			!E && T,
+			/* @__PURE__ */ P(ke, {
+				title: d === null ? void 0 : d ?? S?.metadataTitle ?? "Metadata",
+				styles: C?.section,
+				className: c(He, b, H.metadataSection),
 				children: u
 			}),
 			f
 		] }),
-		centerContent: T ? /* @__PURE__ */ I(P, { children: [w, /* @__PURE__ */ F(be, {
-			title: m === null ? void 0 : m ?? x?.setupTitle ?? "Setup",
-			styles: S?.section,
-			className: c(Ae, je, b, ve.setupSection),
+		centerContent: E ? /* @__PURE__ */ F(N, { children: [T, /* @__PURE__ */ P(ke, {
+			title: m === null ? void 0 : m ?? S?.setupTitle ?? "Setup",
+			styles: C?.section,
+			className: c(He, Ue, x, H.setupSection),
 			children: p
 		})] }) : void 0
 	});
-}), Pe = {
+}), Ke = {
 	name: {
 		label: "Name",
 		placeholder: "Enter name"
@@ -552,7 +601,7 @@ var ve = {
 		saveLabel: "Save"
 	},
 	ariaLabel: "Metadata"
-}, Fe = {
+}, qe = {
 	title: "Add avatar",
 	attachLabel: "Attach",
 	emptyTitle: "This folder is empty",
@@ -576,86 +625,82 @@ var ve = {
 	deleteConfirmItemsLabel: "items?",
 	deleteConfirmLabel: "Delete",
 	deleteCancelLabel: "Cancel"
-}, Ie = fe(({ values: e, errors: t, onChange: n, onNameBlur: r, onVersionBlur: i, avatarPicker: a, availableLocaleOptions: o, fields: s = Ee, isNameReadOnly: c, nameCaption: l, isDescriptionRequired: u, renderDescription: d, focusRequestKey: f, labels: p }) => {
-	let [m, h] = H(!1), g = B(() => a ? s : s.filter((e) => e !== U.Avatar), [a, s]), _ = e.iconUrl, v = a?.resolveIconUrl, y = B(() => v ? v(_) : void 0, [_, v]), b = z(() => h(!0), []), x = z(() => h(!1), []), S = a?.resolveAttachedIconUrl, C = z((e) => {
-		let t = S?.(e);
-		t && n({ iconUrl: t }), h(!1);
-	}, [n, S]);
-	return /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F(G, {
+}, Je = Ce(({ values: e, errors: t, onChange: n, onNameBlur: r, onVersionBlur: i, avatarPicker: a, availableLocaleOptions: o, fields: s = Fe, isNameReadOnly: c, nameReadOnlyTooltip: l, nameCaption: u, isDescriptionRequired: d, descriptionCaption: f, renderDescription: p, focusRequestKey: m, labels: h }) => {
+	let [g, _] = V(!1), v = z(() => a ? s : s.filter((e) => e !== G.Avatar), [a, s]), y = e.iconUrl, b = a?.resolveIconUrl, x = z(() => b ? b(y) : void 0, [y, b]), S = L(() => _(!0), []), C = L(() => _(!1), []), w = a?.resolveAttachedIconUrl, T = L((e) => {
+		let t = w?.(e);
+		t && n({ iconUrl: t }), _(!1);
+	}, [n, w]);
+	return /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P(Ve, {
 		values: e,
 		errors: t,
 		onChange: n,
 		onNameBlur: r,
 		onVersionBlur: i,
-		iconPreviewUrl: y,
-		onAddAvatarClick: b,
-		labels: p?.form ?? Pe,
+		iconPreviewUrl: x,
+		onAddAvatarClick: S,
+		labels: h?.form ?? Ke,
 		availableLocaleOptions: o,
-		fields: g,
+		fields: v,
 		isNameReadOnly: c,
-		nameCaption: l,
-		isDescriptionRequired: u,
-		renderDescription: d,
-		focusRequestKey: f
-	}), a && /* @__PURE__ */ F(Te, {
-		isOpen: m,
-		onClose: x,
-		onAttach: C,
+		nameReadOnlyTooltip: l,
+		nameCaption: u,
+		isDescriptionRequired: d,
+		descriptionCaption: f,
+		renderDescription: p,
+		focusRequestKey: m
+	}), a && /* @__PURE__ */ P(Pe, {
+		isOpen: g,
+		onClose: C,
+		onAttach: T,
 		bucket: a.bucket,
 		FileManagerModal: a.FileManagerModal,
 		allowedMimeTypes: a.allowedMimeTypes,
 		maxFileSizeBytes: a.maxFileSizeBytes,
-		labels: p?.avatarPicker ?? Fe
+		labels: h?.avatarPicker ?? qe
 	})] });
-}), Le = /* @__PURE__ */ function(e) {
+}), Ye = /* @__PURE__ */ function(e) {
 	return e.Required = "required", e.InvalidFormat = "invalid-format", e.TooLong = "too-long", e.ControlCharacters = "control-characters", e;
 }({});
-new Set([Le.TooLong, Le.ControlCharacters]);
+Ye.TooLong, Ye.ControlCharacters;
 //#endregion
 //#region src/constants/public-class-names.ts
-var Re = {
+var Xe = {
 	root: "dial-skill-editor-root",
 	refineFeedback: "dial-skill-editor-refine-feedback"
 }, K = "SKILL.md", q = /* @__PURE__ */ function(e) {
 	return e.File = "file", e.Folder = "folder", e;
-}({}), ze = /* @__PURE__ */ function(e) {
-	return e.Header = "header", e.Child = "child", e.Sibling = "sibling", e;
-}({}), J = (e) => {
+}({}), Ze = /* @__PURE__ */ function(e) {
+	return e.Header = "header", e.Child = "child", e;
+}({}), Qe = (e) => {
 	let t = e.lastIndexOf("/");
 	return t === -1 ? null : e.slice(0, t);
-}, Be = (e) => {
+}, $e = (e) => {
 	let t = e.lastIndexOf("/");
 	return t === -1 ? e : e.slice(t + 1);
-}, Ve = (e) => {
+}, et = (e) => {
 	let t = /* @__PURE__ */ new Map(), n = (e) => {
 		let n = t.get(e);
 		if (n) return n;
 		let r = {
 			path: e,
-			name: Be(e),
-			nodeType: he.FOLDER,
-			parentPath: J(e),
+			name: $e(e),
+			nodeType: Te.FOLDER,
+			parentPath: Qe(e),
 			folderId: e,
 			items: []
 		};
 		return t.set(e, r), r;
 	};
-	for (let r of e) {
-		if (r.kind === q.Folder) {
-			n(r.path).name = r.name;
-			continue;
-		}
-		t.set(r.path, {
-			path: r.path,
-			name: r.name,
-			nodeType: he.ITEM,
-			parentPath: J(r.path),
-			folderId: J(r.path) ?? ""
-		});
-	}
+	for (let r of e) r.kind === q.Folder ? n(r.path).name = r.name : t.set(r.path, {
+		path: r.path,
+		name: r.name,
+		nodeType: Te.ITEM,
+		parentPath: Qe(r.path),
+		folderId: Qe(r.path) ?? ""
+	});
 	for (let t of [...e]) {
-		let e = J(t.path);
-		for (; e != null;) n(e), e = J(e);
+		let e = Qe(t.path);
+		for (; e != null;) n(e), e = Qe(e);
 	}
 	let r = [];
 	for (let e of t.values()) {
@@ -667,14 +712,17 @@ var Re = {
 		n ? n.items = [...n.items ?? [], e] : r.push(e);
 	}
 	return r;
-}, He = (e, t) => e ? `${e}/${t}` : t, Ue = (e) => J(e) ?? "", We = (e, t) => {
+}, tt = (e, t) => e ? `${e}/${t}` : t, nt = (e, t) => {
+	let n = e.lastIndexOf("/"), r = n === -1 ? "" : e.slice(0, n), i = e.slice(n + 1), a = i.lastIndexOf("."), o = a > 0, s = o ? i.slice(0, a) : i, c = o ? i.slice(a) : "", l = 1, u = tt(r, `${s} (${l})${c}`);
+	for (; t.has(u);) l += 1, u = tt(r, `${s} (${l})${c}`);
+	return u;
+}, rt = (e, t) => {
 	if (!t) return "";
 	switch (e) {
-		case ze.Child: return t.path;
-		case ze.Sibling: return Ue(t.path);
-		case ze.Header: return t.kind === q.Folder ? t.path : "";
+		case Ze.Child: return t.path;
+		case Ze.Header: return t.kind === q.Folder ? t.path : "";
 	}
-}, Ge = (e, t) => {
+}, it = (e, t) => {
 	let n = t ? `${t}/` : "", r = /* @__PURE__ */ new Set();
 	for (let { path: i } of e) {
 		if (!i.startsWith(n) || i === t) continue;
@@ -682,29 +730,29 @@ var Re = {
 		r.add(e.split("/")[0]);
 	}
 	return r;
-}, Ke = (e, t, n) => {
+}, J = (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;
-}, qe = "\\new-folder", Je = ({ files: e, fileActions: t, defaultName: n, messages: r, onRevealFolder: i, onCreated: a }) => {
-	let [o, s] = H(null), c = o?.parentPath ?? null, l = V([]), u = c == null ? void 0 : He(c, qe), d = B(() => u == null ? void 0 : {
+}, at = "\\new-folder", ot = ({ files: e, fileActions: t, defaultName: n, messages: r, onRevealFolder: i, onCreated: a }) => {
+	let [o, s] = V(null), c = o?.parentPath ?? null, l = B([]), u = c == null ? void 0 : tt(c, at), d = z(() => u == null ? void 0 : {
 		path: u,
 		name: n,
 		kind: q.Folder
-	}, [u, n]), f = z((n, i) => {
-		let a = Ge(e, i);
-		return i === "" && a.add(K), Ke(n, a, r) ?? t.validateFolderPath?.(He(i, n.trim()));
+	}, [u, n]), f = L((n, i) => {
+		let a = it(e, i);
+		return i === "" && a.add(K), J(n, a, r) ?? t.validateFolderPath?.(tt(i, n.trim()));
 	}, [
 		e,
 		r,
 		t
-	]), p = z((e, t) => {
+	]), p = L((e, t) => {
 		l.current = [], s({
 			parentPath: e,
 			pane: t
 		}), e !== "" && i(e);
-	}, [i]), m = z((e, t) => {
+	}, [i]), m = L((e, t) => {
 		if (c == null || t.path !== u) return null;
 		let n = f(e, c);
 		return l.current = [...l.current.slice(-1), {
@@ -715,23 +763,24 @@ var Re = {
 		c,
 		u,
 		f
-	]), h = z(() => {
+	]), h = L(() => {
 		l.current = [], s(null);
-	}, []), g = z((e) => {
+	}, []), g = L((e, n) => {
+		let r = tt(n, e.trim());
+		t.onCreateFolder?.(r), n !== "" && i(n), a(r);
+	}, [
+		t,
+		i,
+		a
+	]), _ = L((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 = He(c, e.trim());
-		h(), t.onCreateFolder?.(r), a(r);
+		let [t] = l.current;
+		l.current.length === 2 && t != null && !t.isValid && t.value !== e || f(e, c) != null ? h() : (h(), g(e, c));
 	}, [
 		c,
 		f,
 		h,
-		t,
-		a
+		g
 	]);
 	return {
 		draftNode: d,
@@ -739,711 +788,933 @@ var Re = {
 		draftPane: o?.pane,
 		startDraft: p,
 		handleValidate: m,
-		handleSave: g,
-		handleCancel: h
+		handleSave: _,
+		handleCancel: h,
+		validateNewFolder: f,
+		createFolder: g
 	};
-}, Ye = (e) => !!e.dataTransfer?.types.includes("Files"), Xe = (e) => {
-	let [t, n] = H(!1), r = V(0);
+}, st = (e) => !!e.dataTransfer?.types.includes("Files"), ct = (e) => {
+	let [t, n] = V(!1), r = B(0);
 	return {
 		isDragActive: t,
 		dropZoneHandlers: {
-			onDragEnter: z((e) => {
-				Ye(e) && (e.preventDefault(), r.current += 1, n(!0));
+			onDragEnter: L((e) => {
+				st(e) && (e.preventDefault(), r.current += 1, n(!0));
 			}, []),
-			onDragLeave: z((e) => {
-				Ye(e) && (--r.current, r.current <= 0 && (r.current = 0, n(!1)));
+			onDragLeave: L((e) => {
+				st(e) && (--r.current, r.current <= 0 && (r.current = 0, n(!1)));
 			}, []),
-			onDragOver: z((e) => {
-				Ye(e) && e.preventDefault();
+			onDragOver: L((e) => {
+				st(e) && e.preventDefault();
 			}, []),
-			onDrop: z((t) => {
-				if (!Ye(t)) return;
+			onDrop: L((t) => {
+				if (!st(t)) return;
 				t.preventDefault(), r.current = 0, n(!1);
 				let i = Array.from(t.dataTransfer?.files ?? []);
 				i.length > 0 && e(i);
 			}, [e])
 		}
 	};
-}, Ze = /* @__PURE__ */ function(e) {
+}, lt = /* @__PURE__ */ function(e) {
 	return e.Files = "files", e.Archive = "archive", e;
 }({}), Y = /* @__PURE__ */ function(e) {
 	return e.Mobile = "mobile", e.Desktop = "desktop", e;
-}({}), Qe = (e, t, n = g.MD) => /* @__PURE__ */ F(e, {
+}({}), ut = (e, t, n = y.MD, r) => /* @__PURE__ */ P(e, {
 	size: n,
 	className: t,
+	style: r,
 	"aria-hidden": !0,
-	stroke: _
-}), $e = ({ isVisible: e, labels: t }) => {
-	if (!e) return null;
-	let n = t ?? {};
-	return /* @__PURE__ */ F("div", {
-		role: "status",
-		"aria-live": "polite",
-		className: c("pointer-events-none absolute inset-0 z-[100] flex items-center justify-center backdrop-blur-sm"),
-		children: /* @__PURE__ */ I("div", {
+	stroke: b
+}), dt = { footer: "_footer_hn1ri_7" }, ft = ({ isOpen: e, title: t, closeAriaLabel: n, onClose: r, confirmLabel: i, onConfirm: a, cancelLabel: s, onCancel: l, isConfirmDisabled: u = !1, isConfirming: f = !1, children: p, colors: g }) => {
+	let v = d(), y = f ? /* @__PURE__ */ P(ue, {
+		size: 16,
+		ariaLabel: ""
+	}) : void 0;
+	if (v) {
+		let d = o({
+			"--se-dialog-footer-bg": g?.footerBackground,
+			"--se-dialog-footer-border": g?.footerBorder
+		});
+		return /* @__PURE__ */ F(m, {
+			open: e,
+			title: t,
+			closeAriaLabel: n,
+			onClose: r,
+			children: [p, /* @__PURE__ */ F("div", {
+				className: c("sticky bottom-0 flex gap-3 border-t p-4", dt.footer),
+				style: d,
+				children: [/* @__PURE__ */ P(se, {
+					className: "flex-1",
+					label: i,
+					iconBefore: y,
+					disabled: u,
+					onClick: a
+				}), /* @__PURE__ */ P(j, {
+					className: "flex-1",
+					label: s,
+					onClick: l
+				})]
+			})]
+		});
+	}
+	return /* @__PURE__ */ P(ae, {
+		open: e,
+		header: t,
+		size: oe.Sm,
+		closeAriaLabel: n,
+		onClose: r,
+		mainButtons: [{
+			label: s,
+			variant: _.Primary,
+			appearance: h.Ghost,
+			onClick: l
+		}, {
+			label: i,
+			variant: _.Primary,
+			iconBefore: y,
+			onClick: a,
+			disabled: u
+		}],
+		children: p
+	});
+}, pt = ({ isOpen: e, onClose: t, validateName: n, onCreate: r, title: i, nameLabel: a, namePlaceholder: o, createLabel: s, cancelLabel: c, closeAriaLabel: l, dialogColors: u }) => {
+	let d = we(), [f, p] = V(""), [m, h] = V(!1);
+	R(() => {
+		e && (p(""), h(!1));
+	}, [e]);
+	let g = m ? n(f) : void 0, _ = () => {
+		h(!0), n(f) ?? (r(f), t());
+	};
+	return /* @__PURE__ */ P(ft, {
+		isOpen: e,
+		title: i,
+		closeAriaLabel: l,
+		onClose: t,
+		confirmLabel: s,
+		onConfirm: _,
+		cancelLabel: c,
+		onCancel: t,
+		colors: u,
+		children: /* @__PURE__ */ P("form", {
+			className: "px-4 py-4 desktop:px-6",
+			onSubmit: (e) => {
+				e.preventDefault(), _();
+			},
+			children: /* @__PURE__ */ P(k, {
+				id: d,
+				labelProps: {
+					label: a,
+					htmlFor: d,
+					required: !0
+				},
+				value: f,
+				placeholder: o,
+				error: g,
+				invalid: g != null,
+				onChange: (e) => p(e ?? "")
+			})
+		})
+	});
+}, mt = { icon: "_icon_1p1f5_1" }, ht = ({ isVisible: e, labels: t, titleClassName: n = "dial-h3-text", subtitleClassName: r = "dial-small-text" }) => {
+	let i = t ?? {}, a = i.dropOverlayTitle ?? "Upload files", o = i.dropOverlaySubtitle ?? "Drop files here to add them to this skill", s = /* @__PURE__ */ P(ne, {
+		visuallyHidden: !0,
+		as: re.Span,
+		children: e ? `${a}. ${o}` : ""
+	});
+	return e ? /* @__PURE__ */ F(N, { children: [s, /* @__PURE__ */ P("div", {
+		className: c("pointer-events-none absolute inset-0 z-100 flex items-center justify-center backdrop-blur-sm"),
+		children: /* @__PURE__ */ F("div", {
+			"aria-hidden": !0,
 			className: "flex flex-col items-center text-center",
 			children: [
-				/* @__PURE__ */ F(ue, {
+				/* @__PURE__ */ P(be, {
 					size: 100,
-					className: "text-accent-primary",
+					className: mt.icon,
 					"aria-hidden": !0,
-					stroke: _
+					stroke: b
 				}),
-				/* @__PURE__ */ F("span", {
-					className: "dial-h3-text mt-5",
-					children: n.dropOverlayTitle ?? "Upload files"
+				/* @__PURE__ */ P("span", {
+					className: c("mt-5", n),
+					children: a
 				}),
-				/* @__PURE__ */ F("span", {
-					className: "dial-small-text mt-4",
-					children: n.dropOverlaySubtitle ?? "Drop files here to add them to this skill"
+				/* @__PURE__ */ P("span", {
+					className: c("mt-4", r),
+					children: o
 				})
 			]
 		})
-	});
-}, et = /* @__PURE__ */ function(e) {
+	})] }) : s;
+}, gt = {
+	card: "_card_1tr87_2",
+	label: "_label_1tr87_7",
+	fileName: "_fileName_1tr87_11",
+	header: "_header_1tr87_16"
+}, _t = ({ label: e, fileName: t, isExpanded: n, onToggle: r, children: i, labelClassName: a = "dial-tiny-lead-text", fileNameClassName: o = "dial-small-text" }) => /* @__PURE__ */ P(p, {
+	expanded: n,
+	onToggle: r,
+	title: /* @__PURE__ */ P("span", {
+		className: c("block", gt.label, a),
+		children: e
+	}),
+	description: /* @__PURE__ */ P(D, {
+		name: t,
+		nameClassName: c(gt.fileName, o)
+	}),
+	className: c("rounded-lg border py-0 shadow-xs", gt.card),
+	headerClassName: c("gap-4 rounded-lg py-2 ps-3 pe-2 text-start [&>span]:flex-1 [&>span]:gap-1 [&>svg]:size-6", n ? "[&>svg]:-rotate-90" : "[&>svg]:rotate-90", gt.header),
+	contentClassName: "max-h-[416px] overflow-y-auto pt-4 pb-2 ps-3 pe-2",
+	children: i
+}), vt = /* @__PURE__ */ function(e) {
 	return e.SupportingFile = "supporting-file", e.Manifest = "manifest", e;
-}({}), tt = /* @__PURE__ */ function(e) {
+}({}), yt = /* @__PURE__ */ function(e) {
 	return e.Valid = "valid", e.Invalid = "invalid", e;
-}({}), nt = (e) => (e.webkitRelativePath || e.name).replace(/\\/g, "/"), rt = ".zip,application/zip", it = 0, X = () => `skill-file-candidate-${++it}`, Z = (e, t, n) => ({
-	id: X(),
+}({}), X = /* @__PURE__ */ function(e) {
+	return e.Replace = "replace", e.Duplicate = "duplicate", e;
+}({}), bt = (e) => (e.webkitRelativePath || e.name).replace(/\\/g, "/"), xt = {
+	invalidDropZone: "_invalidDropZone_j9j9q_1",
+	row: "_row_j9j9q_5"
+}, St = ".zip,application/zip", Ct = [], wt = 0, Tt = () => `skill-file-candidate-${++wt}`, Z = (e, t, n) => ({
+	id: Tt(),
 	file: e,
-	path: He(n, t.replace(/\\/g, "/"))
-}), at = ({ isOpen: e, onClose: t, fileActions: n, mode: r = Ze.Files, targetFolderPath: i = "", initialFiles: a, initialEntries: o, labels: c }) => {
-	let l = c ?? {}, [u, d] = H([]), [p, h] = H(/* @__PURE__ */ new Map()), [g, v] = H([]), [y, b] = H(!1), [C, T] = H(), [E, D] = H(!1), [O, A] = H(), [te, j] = H(0), M = V(0), N = r === Ze.Archive, L = l.uploadArchiveErrorMessage ?? "Couldn't read this archive", re = me(), ae = (e) => {
-		T(void 0), d((t) => [...t, ...e]);
-	}, oe = async (e) => {
+	path: tt(n, t.replace(/\\/g, "/"))
+}), Et = ({ isOpen: e, onClose: t, fileActions: n, mode: r = lt.Files, targetFolderPath: i = "", initialFiles: a, initialEntries: l, existingFilePaths: u = Ct, onCommitted: d, messageClassName: f = "dial-small-text", rowCaptionClassName: p, labels: m, dialogColors: h, colors: g }) => {
+	let _ = m ?? {}, [y, x] = V([]), [S, C] = V([]), [w, O] = V(X.Replace), k = z(() => new Set(u), [u]), [A, te] = V(/* @__PURE__ */ new Map()), [j, ae] = V([]), [oe, se] = V(!1), [M, le] = V(), [de, fe] = V(!1), [pe, me] = V(), [he, ge] = V(0), _e = B(0), I = r === lt.Archive, ve = _.uploadArchiveErrorMessage ?? "Couldn't read this archive", be = we(), xe = we(), Se = we(), Ce = B(null), L = B(!1), Te = S[0]?.id;
+	R(() => {
+		e && (Te == null ? L.current && (L.current = !1, document.getElementById(xe)?.focus()) : (L.current = !0, Ce.current?.focus()));
+	}, [
+		Te,
+		e,
+		xe
+	]);
+	let Ee = (e) => e.path !== "SKILL.md" && k.has(e.path), De = (e) => {
+		le(void 0), x((t) => [...t, ...e.filter((e) => !Ee(e))]), C((t) => [...t, ...e.filter(Ee)]);
+	}, H = (e) => {
+		let [t, ...n] = S;
+		t && (C(n), O(X.Replace), e != null && (le(void 0), x((r) => {
+			if (e === X.Replace) return [...r, {
+				...t,
+				replacesExisting: !0
+			}];
+			let i = /* @__PURE__ */ new Set([
+				...u,
+				...r.map((e) => e.path),
+				...n.map((e) => e.path)
+			]);
+			return [...r, {
+				...t,
+				path: nt(t.path, i)
+			}];
+		})));
+	}, Oe = async (e) => {
 		let { extractArchive: t } = n;
 		if (!t) return;
-		let r = M.current;
-		A(void 0), j((e) => e + 1);
+		let r = _e.current;
+		me(void 0), ge((e) => e + 1);
 		try {
 			let n = await Promise.all(e.map((e) => t(e)));
-			if (r !== M.current) return;
+			if (r !== _e.current) return;
 			let a = n.flat();
 			if (a.length === 0) {
-				A(l.uploadArchiveEmptyMessage ?? "This archive has no files");
+				me(_.uploadArchiveEmptyMessage ?? "This archive has no files");
 				return;
 			}
-			ae(a.map((e) => Z(e.file, e.path, i)));
+			De(a.map((e) => Z(e.file, e.path, i)));
 		} catch {
-			if (r !== M.current) return;
-			A(L);
+			if (r !== _e.current) return;
+			me(ve);
 		} finally {
-			r === M.current && j((e) => e - 1);
+			r === _e.current && ge((e) => e - 1);
 		}
-	}, se = (e) => {
-		if (N) {
-			oe(e);
-			return;
-		}
-		ae(e.map((e) => Z(e, nt(e), i)));
-	}, ce = (e) => {
-		d((t) => t.filter((t) => t.id !== e));
+	}, ke = (e) => {
+		I ? Oe(e) : De(e.map((e) => Z(e, bt(e), i)));
+	}, U = (e) => {
+		x((t) => t.filter((t) => t.id !== e));
 	};
-	pe(() => {
-		e && (M.current += 1, d([...(a ?? []).map((e) => Z(e, nt(e), i)), ...(o ?? []).map((e) => Z(e.file, e.path, i))]), h(/* @__PURE__ */ new Map()), v([]), T(void 0), A(void 0), j(0));
-	}, [e]), pe(() => {
+	R(() => {
+		if (!e) return;
+		_e.current += 1;
+		let t = [...(a ?? []).map((e) => Z(e, bt(e), i)), ...(l ?? []).map((e) => Z(e.file, e.path, i))];
+		x(t.filter((e) => !Ee(e))), C(t.filter(Ee)), O(X.Replace), te(/* @__PURE__ */ new Map()), ae([]), le(void 0), me(void 0), ge(0);
+	}, [e]), R(() => {
 		if (!e) return;
 		let t = !1;
-		if (u.length === 0) {
-			h(/* @__PURE__ */ new Map()), v([]);
-			return;
-		}
-		return b(!0), n.validateBatch(u).then(({ results: e, batchErrors: n }) => {
-			t || (h(new Map(e.map((e) => [e.candidateId, e]))), v(n.map((e) => e.message)));
+		if (y.length === 0) te(/* @__PURE__ */ new Map()), ae([]);
+		else return se(!0), n.validateBatch(y).then(({ results: e, batchErrors: n }) => {
+			t || (te(new Map(e.map((e) => [e.candidateId, e]))), ae(n.map((e) => e.message)));
 		}).finally(() => {
-			t || b(!1);
+			t || se(!1);
 		}), () => {
 			t = !0;
 		};
-	}, [u, e]);
-	let ue = u.some((e) => p.get(e.id)?.status === tt.Invalid), de = u.length > 0 && u.every((e) => p.get(e.id)?.status === tt.Invalid), R = u.length > 0 && !ue && g.length === 0 && !y && !E && te === 0, fe = async () => {
-		D(!0), T(void 0);
+	}, [y, e]);
+	let Ae = y.some((e) => A.get(e.id)?.status === yt.Invalid), je = y.length > 0 && y.every((e) => A.get(e.id)?.status === yt.Invalid), Me = [...j, ...y.flatMap((e) => {
+		let t = A.get(e.id);
+		return t?.status === yt.Invalid && t.error ? [`${e.path}: ${t.error}`] : [];
+	})], W = y.length > 0 && !Ae && j.length === 0 && !oe && !de && he === 0, Ne = async () => {
+		fe(!0), le(void 0);
 		try {
-			let { results: e, batchErrors: r } = await n.validateBatch(u), i = new Map(e.map((e) => [e.candidateId, e]));
-			if (h(i), v(r.map((e) => e.message)), u.some((e) => i.get(e.id)?.status === tt.Invalid) || r.length > 0) return;
-			let a = await n.commitBatch(u);
+			let { results: e, batchErrors: r } = await n.validateBatch(y), i = new Map(e.map((e) => [e.candidateId, e]));
+			if (te(i), ae(r.map((e) => e.message)), y.some((e) => i.get(e.id)?.status === yt.Invalid) || r.length > 0) return;
+			let a = await n.commitBatch(y);
 			if (a.error) {
-				T(a.error);
+				le(a.error);
 				return;
 			}
-			t();
+			d?.(y), t();
 		} finally {
-			D(!1);
+			fe(!1);
 		}
-	};
-	return /* @__PURE__ */ F(k, {
-		open: e,
-		header: N ? l.uploadArchiveDialogTitle ?? "Upload archive from device" : l.uploadDialogTitle ?? "Upload files from device",
-		size: ee.Sm,
-		closeAriaLabel: l.uploadDialogCloseAriaLabel ?? "Close",
+	}, Pe = _.uploadDialogCloseAriaLabel ?? "Close", G = _.uploadCancelLabel ?? "Cancel", [Fe] = S;
+	if (Fe) {
+		let t = _.uploadConflictTitle ?? "Replace or duplicate it?";
+		return /* @__PURE__ */ P(ft, {
+			isOpen: e,
+			title: t,
+			closeAriaLabel: Pe,
+			onClose: () => H(null),
+			confirmLabel: _.uploadConflictConfirmLabel ?? "Confirm",
+			onConfirm: () => H(w),
+			cancelLabel: G,
+			onCancel: () => H(null),
+			colors: h,
+			children: /* @__PURE__ */ F("div", {
+				className: "flex flex-col gap-4 px-4 py-4 desktop:px-6",
+				children: [/* @__PURE__ */ P("p", {
+					ref: Ce,
+					tabIndex: -1,
+					className: c("outline-hidden", f),
+					children: _.uploadConflictMessage?.(Fe.path) ?? `Item with the same name "${Fe.path}" already exists.`
+				}), /* @__PURE__ */ P(ce, {
+					ariaLabel: t,
+					value: w,
+					onChange: (e) => O(e === X.Duplicate ? X.Duplicate : X.Replace),
+					items: [{
+						value: X.Replace,
+						label: _.uploadConflictReplaceLabel ?? "Replace"
+					}, {
+						value: X.Duplicate,
+						label: _.uploadConflictDuplicateLabel ?? "Duplicate"
+					}]
+				})]
+			})
+		});
+	}
+	return /* @__PURE__ */ P(ft, {
+		isOpen: e,
+		title: I ? _.uploadArchiveDialogTitle ?? "Upload archive from device" : _.uploadDialogTitle ?? "Upload files from device",
+		closeAriaLabel: Pe,
 		onClose: t,
-		mainButtons: [{
-			label: l.uploadCancelLabel ?? "Cancel",
-			variant: m.Primary,
-			appearance: f.Ghost,
-			onClick: t
-		}, {
-			label: l.uploadConfirmLabel ?? "Add",
-			variant: m.Primary,
-			iconBefore: E ? /* @__PURE__ */ F(ne, {
-				size: 16,
-				ariaLabel: ""
-			}) : void 0,
-			onClick: () => void fe(),
-			disabled: !R
-		}],
-		children: /* @__PURE__ */ I("div", {
-			className: "flex flex-col gap-4 px-6 py-4",
+		confirmLabel: _.uploadConfirmLabel ?? "Add",
+		onConfirm: () => void Ne(),
+		isConfirmDisabled: !W,
+		isConfirming: de,
+		cancelLabel: G,
+		onCancel: t,
+		colors: h,
+		children: /* @__PURE__ */ F("div", {
+			className: "flex flex-col gap-4 px-4 py-4 desktop:px-6",
+			style: o({
+				"--se-upload-invalid-dropzone-border": g?.invalidDropZoneBorder,
+				"--se-upload-row-border": g?.rowBorder
+			}),
 			children: [
-				/* @__PURE__ */ F(S, {
-					label: /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F("span", {
+				/* @__PURE__ */ P(E, {
+					label: /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P("span", {
 						className: "desktop:hidden",
-						children: N ? l.uploadArchiveDropZoneMobileLabel ?? "Click here to upload a .zip archive" : l.uploadDropZoneMobileLabel ?? "Click here to upload"
-					}), /* @__PURE__ */ F("span", {
+						children: I ? _.uploadArchiveDropZoneMobileLabel ?? "Click here to upload a .zip archive" : _.uploadDropZoneMobileLabel ?? "Click here to upload"
+					}), /* @__PURE__ */ P("span", {
 						className: "hidden desktop:inline",
-						children: N ? l.uploadArchiveDropZoneLabel ?? "Drag and drop a .zip archive or click here to upload" : l.uploadDropZoneLabel ?? "Drag and drop it or click here to upload"
+						children: I ? _.uploadArchiveDropZoneLabel ?? "Drag and drop a .zip archive or click here to upload" : _.uploadDropZoneLabel ?? "Drag and drop it or click here to upload"
 					})] }),
-					ariaLabel: l.uploadDropZoneAriaLabel ?? "Upload files",
+					description: I ? _.uploadArchiveDropZoneDescription : _.uploadDropZoneDescription,
+					id: xe,
+					ariaLabel: _.uploadDropZoneAriaLabel ?? "Upload files",
 					multiple: !0,
-					accept: N ? rt : void 0,
-					className: de ? "border-error hover:border-error" : void 0,
-					onChange: se,
-					onReject: N ? () => A(L) : void 0
+					accept: I ? St : void 0,
+					className: je ? xt.invalidDropZone : void 0,
+					onChange: ke,
+					onReject: I ? () => me(ve) : void 0
 				}),
-				te > 0 && /* @__PURE__ */ F(ne, { ariaLabel: l.uploadArchiveExtractingAriaLabel ?? "Reading archive" }),
-				/* @__PURE__ */ F("div", {
-					role: "alert",
-					children: O && /* @__PURE__ */ F(x, { text: O })
+				he > 0 && /* @__PURE__ */ P(ue, { ariaLabel: _.uploadArchiveExtractingAriaLabel ?? "Reading archive" }),
+				/* @__PURE__ */ P(T, {
+					text: pe,
+					announce: ie.Assertive
 				}),
-				/* @__PURE__ */ F("span", {
-					role: "status",
-					"aria-live": "polite",
-					className: "sr-only",
-					id: re,
-					children: g.map((e) => `${l.uploadBatchErrorAriaPrefix ?? "Upload error: "}${e}`).join(" ")
+				/* @__PURE__ */ P(ne, {
+					visuallyHidden: !0,
+					as: re.Span,
+					id: be,
+					children: Me.map((e) => `${_.uploadBatchErrorAriaPrefix ?? "Upload error: "}${e}`).join(" ")
 				}),
-				g.map((e) => /* @__PURE__ */ F(x, { text: e }, e)),
-				u.length > 0 && /* @__PURE__ */ F("ul", {
+				j.map((e) => /* @__PURE__ */ P(T, { text: e }, e)),
+				y.length > 0 && /* @__PURE__ */ P("ul", {
 					className: "flex flex-col gap-2",
-					children: u.map((e) => {
-						let t = p.get(e.id), n = t?.kind === et.Manifest, r = t?.status === tt.Invalid;
-						return /* @__PURE__ */ I("li", {
-							className: "flex items-center gap-2 rounded-lg border border-tertiary p-2",
-							children: [
-								/* @__PURE__ */ F(ie, {
-									size: 20,
+					children: y.map((e) => {
+						let t = A.get(e.id), n = t?.kind === vt.Manifest, r = t?.status === yt.Invalid, i = r ? t?.error : void 0, a = `${Se}${e.id}`;
+						return /* @__PURE__ */ F("li", {
+							className: c("flex items-center gap-2 rounded-lg border p-2", xt.row),
+							children: [/* @__PURE__ */ P(D, {
+								name: e.path,
+								className: "min-w-0 flex-1",
+								details: /* @__PURE__ */ F(N, { children: [
+									/* @__PURE__ */ P(v, {
+										className: p,
+										text: s(e.file.size)
+									}),
+									/* @__PURE__ */ P(T, {
+										id: a,
+										text: i
+									}),
+									n && !r && /* @__PURE__ */ P(v, {
+										className: p,
+										text: _.uploadManifestRowNote ?? "Will replace this Skill's name, description, and instructions"
+									}),
+									e.replacesExisting && !r && /* @__PURE__ */ P(v, {
+										className: p,
+										text: _.uploadReplaceRowNote ?? "Will replace the existing file"
+									})
+								] })
+							}), /* @__PURE__ */ P(ee, {
+								icon: /* @__PURE__ */ P(ye, {
+									size: 16,
 									"aria-hidden": !0,
-									stroke: _
+									stroke: b
 								}),
-								/* @__PURE__ */ I("div", {
-									className: "flex min-w-0 flex-1 flex-col",
-									children: [
-										/* @__PURE__ */ F("span", {
-											className: "dial-small-text truncate",
-											children: e.path
-										}),
-										/* @__PURE__ */ F("span", {
-											className: "dial-tiny-text text-secondary",
-											children: s(e.file.size)
-										}),
-										r && t?.error && /* @__PURE__ */ F(x, { text: t.error }),
-										n && !r && /* @__PURE__ */ F("span", {
-											className: "dial-tiny-text text-secondary",
-											children: l.uploadManifestRowNote ?? "Will replace this Skill's name, description, and instructions"
-										})
-									]
-								}),
-								/* @__PURE__ */ F(w, {
-									icon: /* @__PURE__ */ F(le, {
-										size: 16,
-										"aria-hidden": !0,
-										stroke: _
-									}),
-									"aria-label": l.uploadRemoveCandidateLabel?.(e.path) ?? `Remove ${e.path}`,
-									onClick: () => ce(e.id)
-								})
-							]
+								"aria-label": _.uploadRemoveCandidateLabel?.(e.path) ?? `Remove ${e.path}`,
+								"aria-describedby": i ? a : void 0,
+								onClick: () => U(e.id)
+							})]
 						}, e.id);
 					})
 				}),
-				C && /* @__PURE__ */ F(x, { text: C })
+				/* @__PURE__ */ P(T, {
+					text: M,
+					announce: ie.Assertive
+				})
 			]
 		})
 	});
-}, ot = {
-	title: "_title_5md1a_1",
-	helperText: "_helperText_5md1a_5",
-	refineFeedback: "_refineFeedback_5md1a_9",
-	refineError: "_refineError_5md1a_13"
-}, st = {
-	mode: Ze.Files,
+}, Dt = {
+	title: "_title_lgmx6_1",
+	helperText: "_helperText_lgmx6_5",
+	refineFeedback: "_refineFeedback_lgmx6_9",
+	refineError: "_refineError_lgmx6_13",
+	menuIcon: "_menuIcon_lgmx6_17"
+}, Ot = {
+	mode: lt.Files,
 	targetFolderPath: ""
-}, ct = [U.Name, U.Description], lt = 24, ut = 300, dt = "desktop:px-8 desktop:py-6", ft = "desktop:px-8 desktop:py-6", pt = "gap-4 px-4 py-6 desktop:gap-5 desktop:px-8 desktop:py-6", mt = R(async () => {
-	let { MarkdownEditor: e } = await _e();
+}, kt = [G.Name, G.Description], At = 24, jt = 300, Mt = "pb-0 desktop:px-8 desktop:py-6", Nt = "desktop:px-8 desktop:py-6", Pt = "gap-4 px-4 pt-5 pb-6 desktop:gap-5 desktop:px-8 desktop:py-6", Ft = Se(async () => {
+	let { MarkdownEditor: e } = await De();
 	return { default: e };
-}), ht = ({ initialValues: r, files: i, selectedPath: s, onSelectedPathChange: _, expandedPaths: v, onExpandedPathsChange: S, isLoading: T = !1, hasLoadError: D = !1, isSubmitting: O = !1, errors: k, submitError: ee, conflict: te, onReloadLatest: j, isNameReadOnly: M = !1, onDirtyChange: N, onValuesChange: L, onRefineDescription: ie, onRefineInstructions: se, fileActions: R, supportingFileContent: fe, asideData: _e, onSubmit: ve, onCancel: ye, onBack: be, backAriaLabel: xe, title: Se, onRetry: Ce, onRetrySubmit: we, labels: Te, styles: U, dir: Ee, instructionsEditorTheme: De = y.light }) => {
-	let [W, Oe] = H({
+}), Q = ({ initialValues: r, files: i, selectedPath: s, onSelectedPathChange: d, expandedPaths: p, onExpandedPathsChange: m, isLoading: x = !1, hasLoadError: E = !1, isSubmitting: D = !1, errors: k, submitError: te, conflict: ne, onReloadLatest: re, isNameReadOnly: ie = !1, onDirtyChange: j, onValuesChange: ae, onRefineDescription: oe, onRefineInstructions: ce, fileActions: M, supportingFileContent: le, asideData: de, onSubmit: fe, onCancel: pe, onBack: me, backAriaLabel: I, title: ve, onRetry: Se, onRetrySubmit: Ce, labels: De, styles: H, dir: Oe, instructionsEditorTheme: ke = S.light }) => {
+	let [U, Ae] = V({
 		name: r?.name ?? "",
 		description: r?.description ?? "",
 		instructions: r?.instructions ?? ""
-	}), ke = me(), G = V(void 0), Ae = l({
-		bottomGap: lt,
-		minHeight: ut
-	}), je = V(W), Me = (e) => {
+	}), je = we(), Me = we();
+	u(() => document.getElementById(je), Me, !!k?.instructions);
+	let W = B(void 0), Ne = l({
+		bottomGap: At,
+		minHeight: jt
+	}), Pe = B(U), G = (e) => {
 		let t = {
-			...je.current,
+			...Pe.current,
 			...e
 		};
-		je.current = t, Oe(t), L?.(t);
+		Pe.current = t, Ae(t), ae?.(t);
 	}, Fe = (e) => e ? async (t, n) => {
-		if (G.current && !G.current.aborted) throw new DOMException("Busy", "AbortError");
-		G.current = n;
+		if (W.current && !W.current.aborted) throw new DOMException("Busy", "AbortError");
+		W.current = n;
 		try {
 			return await e(t, n);
 		} finally {
-			G.current === n && (G.current = void 0);
+			W.current === n && (W.current = void 0);
 		}
-	} : void 0, Le = u({
-		value: W.description,
-		onChange: (e) => Me({ description: e }),
-		onRefine: Fe(ie),
-		disabled: O || T || D,
+	} : void 0, Ie = f({
+		value: U.description,
+		onChange: (e) => G({ description: e }),
+		onRefine: Fe(oe),
+		disabled: D || x || E,
 		resetKey: r
-	}), J = u({
-		value: W.instructions,
-		onChange: (e) => Me({ instructions: e }),
-		onRefine: Fe(se),
-		disabled: O || T || D,
+	}), Le = f({
+		value: U.instructions,
+		onChange: (e) => G({ instructions: e }),
+		onRefine: Fe(ce),
+		disabled: D || x || E,
 		resetKey: r
-	}), Be = Le.isPending || J.isPending, He = () => {
-		Le.reset(), J.reset();
-	}, Ue = () => {
-		He(), ye();
-	}, Ge = () => {
-		He(), be();
-	}, Ke = () => {
-		O || T || D || G.current && !G.current.aborted || ve(W);
-	}, qe = V(r), Ye = qe.current !== r, et = V(i);
-	pe(() => {
-		qe.current = r;
+	}), Re = Ie.isPending || Le.isPending, ze = () => {
+		Ie.reset(), Le.reset();
+	}, Be = () => {
+		ze(), pe();
+	}, Ve = () => {
+		ze(), me();
+	}, He = () => {
+		D || x || E || W.current && !W.current.aborted || fe(U);
+	}, Ue = B(r), We = Ue.current !== r, qe = B(i), [Ye, Qe] = V(!1);
+	R(() => {
+		Ue.current = r;
 		let e = {
 			name: r?.name ?? "",
 			description: r?.description ?? "",
 			instructions: r?.instructions ?? ""
 		};
-		je.current = e, Oe(e), et.current = i;
+		Pe.current = e, Ae(e), qe.current = i, Qe(!1);
 	}, [r]);
-	let tt = (e) => JSON.stringify([...e].sort((e, t) => e.path.localeCompare(t.path))), nt = V(!1);
-	pe(() => {
-		if (Ye) return;
+	let $e = (e) => JSON.stringify([...e].sort((e, t) => e.path.localeCompare(t.path))), tt = B(!1);
+	R(() => {
+		if (We) return;
 		let e = {
 			name: r?.name ?? "",
 			description: r?.description ?? "",
 			instructions: r?.instructions ?? ""
-		}, t = JSON.stringify(W) !== JSON.stringify(e) || tt(i) !== tt(et.current);
-		t !== nt.current && (nt.current = t, N?.(t));
+		}, t = JSON.stringify(U) !== JSON.stringify(e) || $e(i) !== $e(qe.current) || Ye;
+		t !== tt.current && (tt.current = t, j?.(t));
 	}, [
-		W,
+		U,
 		i,
 		r,
+		We,
 		Ye,
-		N
+		j
 	]);
-	let [rt, it] = H(K), X = s ?? rt, Z = z((e) => {
-		it(e), _?.(e);
-	}, [_]), [ht, gt] = H([]), _t = v ?? ht, vt = B(() => new Set(_t), [_t]), yt = z((e) => {
+	let [nt, it] = V(K), J = s ?? nt, at = L((e) => {
+		it(e), d?.(e);
+	}, [d]), [st, dt] = V([]), ft = p ?? st, mt = z(() => new Set(ft), [ft]), gt = L((e) => {
 		let t = [...e];
-		gt(t), S?.(t);
-	}, [S]), [bt, xt] = H(!1), [St, Ct] = H(st), wt = z((e) => {
-		Ct(e), xt(!0);
-	}, []), [Tt, Et] = H(!1), { isDragActive: Dt, dropZoneHandlers: Ot } = Xe(z((e) => {
-		bt || wt({
-			...st,
+		dt(t), m?.(t);
+	}, [m]), [vt, yt] = V(!1), [X, bt] = V(Ot), xt = L((e) => {
+		bt(e), yt(!0);
+	}, []), [St, Ct] = V(!1), { isDragActive: wt, dropZoneHandlers: Tt } = ct(L((e) => {
+		vt || xt({
+			...Ot,
 			initialFiles: e
 		});
-	}, [bt, wt])), Q = Te ?? {}, $ = U?.colors, kt = U?.typography ?? {}, At = kt.titleClassName ?? "dial-body-semi-text", jt = kt.helperTextClassName ?? "dial-tiny-semi-text", Mt = kt.removeIconClassName, Nt = kt.menuIconClassName ?? "text-secondary", Pt = o({
-		"--se-title-color": $?.title,
-		"--se-helper-text-color": $?.helperText,
-		"--se-refine-action-text": $?.refineActionText,
-		"--se-refine-error-text": $?.refineErrorText
-	}), Ft = {
-		feedbackClassName: c($?.refineActionText && ot.refineFeedback, kt.refineFeedbackClassName, Re.refineFeedback),
-		errorClassName: ot.refineError
-	}, It = {
-		layout: $?.border ? { colors: {
-			headerBorderColor: $.border,
-			sidebarBorderColor: $.border
+	}, [vt, xt])), Z = De ?? {}, Q = H?.colors, $ = H?.typography ?? {}, It = $.titleClassName ?? "dial-body-semi-text", Lt = $.helperTextClassName ?? "dial-tiny-semi-text", Rt = $.removeIconClassName, zt = z(() => o({ "--se-menu-icon": Q?.menuIcon }), [Q?.menuIcon]), Bt = o({
+		"--se-title-color": Q?.title,
+		"--se-helper-text-color": Q?.helperText,
+		"--se-refine-action-text": Q?.refineActionText,
+		"--se-refine-error-text": Q?.refineErrorText,
+		"--se-files-card-bg": Q?.filesCardBackground,
+		"--se-files-card-border": Q?.filesCardBorder,
+		"--se-drop-overlay-icon": Q?.dropOverlayIcon
+	}), Vt = {
+		footerBackground: Q?.dialogFooterBackground,
+		footerBorder: Q?.dialogFooterBorder
+	}, Ht = {
+		feedbackClassName: c(Q?.refineActionText && Dt.refineFeedback, $.refineFeedbackClassName, Xe.refineFeedback),
+		errorClassName: Dt.refineError
+	}, Ut = {
+		layout: Q?.border ? { colors: {
+			headerBorderColor: Q.border,
+			sidebarBorderColor: Q.border
 		} } : void 0,
-		section: $?.title ? { colors: { titleColor: $.title } } : void 0
-	}, Lt = B(() => ({
-		required: Q.folderNameRequiredError ?? "Enter a folder name",
-		invalid: Q.folderNameInvalidError ?? "Folder name can't contain / or \\, or be . or ..",
-		duplicate: Q.folderNameDuplicateError ?? "An item with this name already exists here"
+		section: Q?.title ? { colors: { titleColor: Q.title } } : void 0
+	}, Wt = z(() => ({
+		required: Z.folderNameRequiredError ?? "Enter a folder name",
+		invalid: Z.folderNameInvalidError ?? "Folder name can't contain / or \\, or be . or ..",
+		duplicate: Z.folderNameDuplicateError ?? "An item with this name already exists here"
+	}), [
+		Z.folderNameRequiredError,
+		Z.folderNameInvalidError,
+		Z.folderNameDuplicateError
+	]), Gt = L((e) => {
+		mt.has(e) || gt(/* @__PURE__ */ new Set([...mt, e]));
+	}, [mt, gt]), Kt = X.targetFolderPath, qt = z(() => ({
+		...M,
+		commitBatch: async (e) => {
+			let t = await M.commitBatch(e);
+			return !t.error && Kt !== "" && Gt(Kt), t;
+		}
 	}), [
-		Q.folderNameRequiredError,
-		Q.folderNameInvalidError,
-		Q.folderNameDuplicateError
-	]), Rt = z((e) => {
-		vt.has(e) || yt(new Set([...vt, e]));
-	}, [vt, yt]), zt = Je({
+		M,
+		Kt,
+		Gt
+	]), Jt = ot({
 		files: i,
-		fileActions: R,
-		defaultName: Q.newFolderDefaultName ?? "New folder",
-		messages: Lt,
-		onRevealFolder: Rt,
-		onCreated: Z
-	}), { draftNode: Bt, draftPath: Vt, draftPane: Ht } = zt, Ut = B(() => Ve([{
+		fileActions: M,
+		defaultName: Z.newFolderDefaultName ?? "New folder",
+		messages: Wt,
+		onRevealFolder: Gt,
+		onCreated: at
+	}), { draftNode: Yt, draftPath: Xt, draftPane: Zt } = Jt, Qt = z(() => et([{
 		path: K,
 		name: K,
 		kind: q.File
-	}, ...i]), [i]), Wt = B(() => Bt ? Ve([
+	}, ...i]), [i]), $t = z(() => Yt ? et([
 		{
 			path: K,
 			name: K,
 			kind: q.File
 		},
 		...i,
-		Bt
-	]) : Ut, [
+		Yt
+	]) : Qt, [
 		i,
-		Bt,
-		Ut
-	]), Gt = B(() => i.find((e) => e.path === X), [i, X]), Kt = z((e) => {
-		e.path !== Vt && Z(e.path);
-	}, [Z, Vt]), qt = z((e) => {
-		R.onRemoveNode(e), X === e && Z(K);
+		Yt,
+		Qt
+	]), en = z(() => i.find((e) => e.path === J), [i, J]), tn = L((e) => {
+		e.path !== Xt && at(e.path);
+	}, [at, Xt]), nn = L((e) => {
+		M.onRemoveNode(e), J === e && at(K);
 	}, [
-		R,
-		X,
-		Z
-	]), { startDraft: Jt } = zt, { onCreateFolder: Yt, extractArchive: Xt, pickFromFileSystem: Zt } = R, Qt = z(async (e) => {
-		if (!Zt) return;
-		let t = await Zt();
-		t?.length && wt({
-			mode: Ze.Files,
+		M,
+		J,
+		at
+	]), { startDraft: rn } = Jt, { onCreateFolder: an, extractArchive: on, pickFromFileSystem: sn } = M, [cn, ln] = V(null), un = L((e, t) => {
+		t === Y.Mobile ? ln(e) : rn(e, t);
+	}, [rn]), dn = z(() => i.filter((e) => e.kind === q.File).map((e) => e.path), [i]), fn = L(async (e) => {
+		if (!sn) return;
+		let t = await sn();
+		t?.length && xt({
+			mode: lt.Files,
 			targetFolderPath: e,
 			initialEntries: t
 		});
-	}, [Zt, wt]), $t = z((e, t) => {
-		let n = (e) => Qe(e, Nt), r = [];
-		return Yt && r.push({
+	}, [sn, xt]), pn = L((e, t) => {
+		let n = (e) => ut(e, Dt.menuIcon, void 0, zt), r = [];
+		return an && r.push({
 			key: "create-folder",
-			label: Q.createFolderLabel ?? "Create folder",
-			icon: n(oe),
-			onClick: () => Jt(e, t)
+			label: Z.createFolderLabel ?? "Create folder",
+			icon: n(_e),
+			onClick: () => un(e, t)
 		}), r.push({
 			key: "upload-files",
-			label: Q.uploadFilesLabel ?? "Upload files from device",
-			icon: n(ue),
-			onClick: () => wt({
-				mode: Ze.Files,
+			label: Z.uploadFilesLabel ?? "Upload files from device",
+			icon: n(be),
+			onClick: () => xt({
+				mode: lt.Files,
 				targetFolderPath: e
 			})
-		}), Xt && r.push({
+		}), on && r.push({
 			key: "upload-archive",
-			label: Q.uploadArchiveLabel ?? "Upload archive from device",
-			icon: n(ae),
-			onClick: () => wt({
-				mode: Ze.Archive,
+			label: Z.uploadArchiveLabel ?? "Upload archive from device",
+			icon: n(ge),
+			onClick: () => xt({
+				mode: lt.Archive,
 				targetFolderPath: e
 			})
-		}), Zt && r.push({
+		}), sn && r.push({
 			key: "open-file-system",
-			label: Q.openFileSystemLabel ?? "Open DIAL file system",
-			icon: n(re),
-			onClick: () => void Qt(e)
+			label: Z.openFileSystemLabel ?? "Open DIAL file system",
+			icon: n(he),
+			onClick: () => void fn(e)
 		}), r;
 	}, [
-		Nt,
-		Yt,
-		Xt,
-		Zt,
-		Q.createFolderLabel,
-		Q.uploadFilesLabel,
-		Q.uploadArchiveLabel,
-		Q.openFileSystemLabel,
-		Jt,
-		wt,
-		Qt
-	]), en = B(() => {
-		let e = We(ze.Header, i.find((e) => e.path === X));
+		zt,
+		an,
+		on,
+		sn,
+		Z.createFolderLabel,
+		Z.uploadFilesLabel,
+		Z.uploadArchiveLabel,
+		Z.openFileSystemLabel,
+		un,
+		xt,
+		fn
+	]), mn = z(() => {
+		let e = rt(Ze.Header, i.find((e) => e.path === J));
 		return {
-			[Y.Mobile]: $t(e, Y.Mobile),
-			[Y.Desktop]: $t(e, Y.Desktop)
+			[Y.Mobile]: pn(e, Y.Mobile),
+			[Y.Desktop]: pn(e, Y.Desktop)
 		};
 	}, [
-		$t,
+		pn,
 		i,
-		X
-	]), tn = z((e, t) => {
-		if (e.path === Vt || e.nodeType !== he.FOLDER) return [];
+		J
+	]), hn = L((e, t) => {
+		if (e.path === Xt || e.nodeType !== Te.FOLDER) return [];
 		let n = {
 			path: e.path,
 			name: e.name,
 			kind: q.Folder
-		}, r = $t(We(ze.Child, n), t);
+		}, r = pn(rt(Ze.Child, n), t);
 		return r.push({
-			key: "add-sibling",
-			icon: Qe(ce),
-			label: Q.addSiblingLabel ?? "Add sibling",
-			children: $t(We(ze.Sibling, n), t)
-		}, {
 			key: "delete",
-			label: Q.deleteLabel ?? "Delete",
+			label: Z.deleteLabel ?? "Delete",
 			danger: !0,
-			icon: Qe(le, Mt),
-			onClick: () => qt(e.path)
+			icon: ut(ye, Rt),
+			onClick: () => nn(e.path)
 		}), r;
 	}, [
-		Vt,
-		Q.addSiblingLabel,
-		Q.deleteLabel,
-		Mt,
-		$t,
-		qt
-	]), nn = B(() => ({
-		[Y.Mobile]: (e) => tn(e, Y.Mobile),
-		[Y.Desktop]: (e) => tn(e, Y.Desktop)
-	}), [tn]), rn = z((e) => e.nodeType === he.FOLDER || e.path === "SKILL.md" ? null : /* @__PURE__ */ F(w, {
-		size: b.Small,
-		icon: Qe(le, Mt, g.SM),
-		"aria-label": Q.deleteLabel ?? "Delete",
-		onClick: () => qt(e.path)
+		Xt,
+		Z.deleteLabel,
+		Rt,
+		pn,
+		nn
+	]), gn = z(() => ({
+		[Y.Mobile]: (e) => hn(e, Y.Mobile),
+		[Y.Desktop]: (e) => hn(e, Y.Desktop)
+	}), [hn]), _n = L((e) => e.nodeType === Te.FOLDER || e.path === "SKILL.md" ? null : /* @__PURE__ */ P(ee, {
+		size: C.Small,
+		icon: ut(ye, Rt, y.SM),
+		"aria-label": Z.deleteLabel ?? "Delete",
+		onClick: () => nn(e.path)
 	}), [
-		Q.deleteLabel,
-		Mt,
-		qt
-	]), an = (e) => /* @__PURE__ */ I("div", {
+		Z.deleteLabel,
+		Rt,
+		nn
+	]), vn = (e) => /* @__PURE__ */ F("div", {
 		className: "flex flex-col gap-2 desktop:gap-5",
-		children: [/* @__PURE__ */ I("div", {
+		children: [/* @__PURE__ */ F("div", {
 			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ F("span", {
-				className: c(ot.title, At),
-				children: Q.filesHeading ?? "Files"
-			}), /* @__PURE__ */ F(p, {
-				label: Q.addLabel ?? "Add",
-				variant: m.Neutral,
-				appearance: f.Solid,
-				size: b.Small,
-				items: en[e]
+			children: [/* @__PURE__ */ P("span", {
+				className: c(Dt.title, It),
+				children: Z.filesHeading ?? "Files"
+			}), /* @__PURE__ */ P(g, {
+				label: Z.addLabel ?? "Add",
+				variant: _.Neutral,
+				appearance: h.Solid,
+				size: C.Small,
+				items: mn[e]
 			})]
-		}), /* @__PURE__ */ F("div", {
+		}), /* @__PURE__ */ P("div", {
 			role: "tree",
-			"aria-label": Q.filesTreeAriaLabel ?? "Skill files",
-			children: /* @__PURE__ */ F(ge, {
-				items: Ht === e ? Wt : Ut,
+			"aria-label": Z.filesTreeAriaLabel ?? "Skill files",
+			children: /* @__PURE__ */ P(Ee, {
+				items: Zt === e ? $t : Qt,
 				showFiles: !0,
-				selectedPath: X,
-				expandedPaths: vt,
-				onExpandedPathsChange: yt,
-				onItemClick: Kt,
-				getContextMenuItems: nn[e],
-				renderItemActions: rn,
-				renamedPath: Ht === e ? Vt : void 0,
-				onRenameSave: zt.handleSave,
-				onRenameCancel: zt.handleCancel,
-				onRenameValidate: zt.handleValidate,
+				selectedPath: J,
+				expandedPaths: mt,
+				onExpandedPathsChange: gt,
+				onItemClick: tn,
+				getContextMenuItems: gn[e],
+				renderItemActions: _n,
+				renamedPath: Zt === e ? Xt : void 0,
+				onRenameSave: Jt.handleSave,
+				onRenameCancel: Jt.handleCancel,
+				onRenameValidate: Jt.handleValidate,
 				rootItemPath: ""
 			})
 		})]
-	}), on = B(() => ({
-		name: W.name,
-		description: W.description,
+	}), yn = z(() => ({
+		name: U.name,
+		description: U.description,
 		iconUrl: "",
 		version: "",
 		topics: [],
 		otherLocales: []
-	}), [W.name, W.description]), sn = B(() => ({
+	}), [U.name, U.description]), bn = z(() => ({
 		name: k?.name,
 		description: k?.description
-	}), [k?.name, k?.description]), cn = B(() => ({ form: {
-		...Pe,
+	}), [k?.name, k?.description]), xn = z(() => ({ form: {
+		...Ke,
 		name: {
-			label: Q.nameLabel ?? "Name",
-			placeholder: Q.namePlaceholder ?? "good-morning-breakfast"
+			label: Z.nameLabel ?? "Name",
+			placeholder: Z.namePlaceholder ?? "good-morning-breakfast"
 		},
 		description: {
-			label: Q.descriptionLabel ?? "Description",
-			placeholder: Q.descriptionPlaceholder ?? "What this skill does and when to use it"
+			label: Z.descriptionLabel ?? "Description",
+			placeholder: Z.descriptionPlaceholder ?? "What this skill does and when to use it"
 		},
 		ariaLabel: void 0
 	} }), [
-		Q.nameLabel,
-		Q.namePlaceholder,
-		Q.descriptionLabel,
-		Q.descriptionPlaceholder
-	]), ln = (e) => {
-		e.name !== void 0 && Me({ name: e.name }), e.description !== void 0 && (Le.reset(), Me({ description: e.description }));
-	}, un = ie ? (e, t) => /* @__PURE__ */ F(a, {
+		Z.nameLabel,
+		Z.namePlaceholder,
+		Z.descriptionLabel,
+		Z.descriptionPlaceholder
+	]), Sn = (e) => {
+		e.name !== void 0 && G({ name: e.name }), e.description !== void 0 && (Ie.reset(), G({ description: e.description }));
+	}, Cn = oe ? (e, t) => /* @__PURE__ */ P(a, {
 		isEnabled: !0,
 		fieldId: t,
 		required: !0,
-		label: Q.descriptionLabel ?? "Description",
-		labels: Q,
-		refinement: Le,
-		disabled: Be || O,
-		...Ft,
+		label: Z.descriptionLabel ?? "Description",
+		labels: Z,
+		refinement: Ie,
+		disabled: Re || D,
+		...Ht,
 		children: e
-	}) : void 0, dn = {
-		title: Se,
-		onBack: Ge,
-		onCancel: Ue,
-		onSubmit: Ke,
-		submitLabel: Q.createLabel ?? "Create",
-		isSubmitDisabled: Be || T || D,
+	}) : void 0, wn = {
+		title: ve,
+		onBack: Ve,
+		onCancel: Be,
+		onSubmit: He,
+		submitLabel: Z.createLabel ?? "Create",
+		isSubmitDisabled: Re || x || E,
 		labels: {
-			cancelLabel: Q.cancelLabel ?? "Cancel",
-			backAriaLabel: xe ?? "Back",
-			savingStatusLabel: Q.savingStatusLabel ?? "Saving"
+			cancelLabel: Z.cancelLabel ?? "Cancel",
+			backAriaLabel: I ?? "Back",
+			savingStatusLabel: Z.savingStatusLabel ?? "Saving"
 		},
-		styles: It,
+		styles: Ut,
 		metadataTitle: null
 	};
-	if (T) return /* @__PURE__ */ F("div", {
-		dir: Ee,
+	if (x) return /* @__PURE__ */ P("div", {
+		dir: Oe,
 		className: "relative flex min-h-0 flex-1 flex-col",
-		children: /* @__PURE__ */ F(Ne, {
-			...dn,
-			metadata: /* @__PURE__ */ F("div", {
-				role: "status",
-				"aria-label": Q.loadingAriaLabel ?? "Loading skill",
+		children: /* @__PURE__ */ P(Ge, {
+			...wn,
+			metadata: /* @__PURE__ */ P("div", {
 				className: "flex flex-1 items-center justify-center p-8",
-				children: /* @__PURE__ */ F(ne, {})
+				children: /* @__PURE__ */ P(ue, { ariaLabel: Z.loadingAriaLabel ?? "Loading skill" })
 			})
 		})
 	});
-	if (D) return /* @__PURE__ */ F("div", {
-		dir: Ee,
+	if (E) return /* @__PURE__ */ P("div", {
+		dir: Oe,
 		className: "relative flex min-h-0 flex-1 flex-col",
-		children: /* @__PURE__ */ F(Ne, {
-			...dn,
-			metadata: /* @__PURE__ */ I("div", {
-				role: "alert",
-				className: "flex flex-col items-center gap-4 p-8",
-				children: [/* @__PURE__ */ F(x, { text: Q.loadErrorMessage ?? "Couldn't load this skill. Please try again." }), /* @__PURE__ */ F(A, {
-					label: Q.retryLabel ?? "Retry",
-					onClick: Ce
-				})]
+		children: /* @__PURE__ */ P(Ge, {
+			...wn,
+			metadata: /* @__PURE__ */ P("div", {
+				className: "p-8",
+				children: /* @__PURE__ */ P(w, {
+					message: Z.loadErrorMessage ?? "Couldn't load this skill. Please try again.",
+					iconStroke: b,
+					action: /* @__PURE__ */ P(se, {
+						label: Z.retryLabel ?? "Retry",
+						onClick: Se
+					})
+				})
 			})
 		})
 	});
-	let fn = X === K, pn = fn ? K : Q.selectedFileHeading?.(Gt?.name ?? X) ?? Gt?.name ?? X, mn = ee != null || te != null ? /* @__PURE__ */ I("div", {
+	let Tn = J === K, En = Tn ? K : Z.selectedFileHeading?.(en?.name ?? J) ?? en?.name ?? J, Dn = te != null || ne != null ? /* @__PURE__ */ F("div", {
 		className: "flex flex-col gap-2",
-		children: [ee != null && /* @__PURE__ */ I("div", {
+		children: [te != null && /* @__PURE__ */ F("div", {
 			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ F(x, { text: ee }), we != null && /* @__PURE__ */ F(C, {
-				label: Q.retryLabel ?? "Retry",
-				onClick: we
+			children: [/* @__PURE__ */ P(T, { text: te }), Ce != null && /* @__PURE__ */ P(O, {
+				label: Z.retryLabel ?? "Retry",
+				onClick: Ce
 			})]
-		}), te != null && /* @__PURE__ */ I("div", {
+		}), ne != null && /* @__PURE__ */ F("div", {
 			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ F(x, { text: te.message }), /* @__PURE__ */ F(C, {
-				label: Q.reloadLatestLabel ?? "Reload latest",
-				onClick: j
+			children: [/* @__PURE__ */ P(T, { text: ne.message }), /* @__PURE__ */ P(O, {
+				label: Z.reloadLatestLabel ?? "Reload latest",
+				onClick: re
 			})]
 		})]
-	}) : void 0, hn = /* @__PURE__ */ F(a, {
-		isEnabled: !!se,
-		fieldId: ke,
+	}) : void 0, On = /* @__PURE__ */ P(a, {
+		isEnabled: !!ce,
+		fieldId: je,
 		required: !0,
-		labelClassName: c(ot.helperText, jt),
-		label: Q.instructionsLabel ?? "Instructions",
-		labels: Q,
-		refinement: J,
-		disabled: Be || O,
-		...Ft,
-		children: /* @__PURE__ */ I("div", {
+		labelClassName: c(Dt.helperText, Lt),
+		label: Z.instructionsLabel ?? "Instructions",
+		labels: Z,
+		refinement: Le,
+		disabled: Re || D,
+		...Ht,
+		children: /* @__PURE__ */ F("div", {
 			className: "flex flex-1 flex-col gap-2",
 			children: [
-				!se && /* @__PURE__ */ F(E, {
-					htmlFor: ke,
-					className: c(ot.helperText, jt),
-					label: Q.instructionsLabel ?? "Instructions",
+				!ce && /* @__PURE__ */ P(A, {
+					htmlFor: je,
+					className: c(Dt.helperText, Lt),
+					label: Z.instructionsLabel ?? "Instructions",
 					required: !0
 				}),
-				/* @__PURE__ */ F("div", {
-					ref: Ae,
+				/* @__PURE__ */ P("div", {
+					ref: Ne,
 					className: c(t, e, n),
-					children: /* @__PURE__ */ F(de, {
-						fallback: /* @__PURE__ */ F(ne, { ariaLabel: Q.instructionsLoadingAriaLabel ?? "Loading" }),
-						children: /* @__PURE__ */ F(mt, {
-							id: ke,
-							ariaLabel: Q.instructionsLabel ?? "Instructions",
-							value: W.instructions,
+					children: /* @__PURE__ */ P(xe, {
+						fallback: /* @__PURE__ */ P(ue, { ariaLabel: Z.instructionsLoadingAriaLabel ?? "Loading" }),
+						children: /* @__PURE__ */ P(Ft, {
+							id: je,
+							ariaLabel: Z.instructionsLabel ?? "Instructions",
+							value: U.instructions,
 							onChange: (e) => {
-								J.reset(), Me({ instructions: e });
+								Le.reset(), G({ instructions: e });
 							},
-							theme: De,
+							theme: ke,
 							showDragbar: !1,
-							placeholder: Q.instructionsPlaceholder ?? "Write the skill instructions in Markdown"
+							placeholder: Z.instructionsPlaceholder ?? "Write the skill instructions in Markdown"
 						})
 					})
 				}),
-				k?.instructions != null && /* @__PURE__ */ F(x, { text: k.instructions })
+				k?.instructions != null && /* @__PURE__ */ P(T, {
+					id: Me,
+					text: k.instructions
+				})
 			]
 		})
 	});
-	return /* @__PURE__ */ I("div", {
-		dir: Ee,
-		className: c("relative flex min-h-0 flex-1 flex-col", Re.root),
-		style: Pt,
-		...Ot,
+	return /* @__PURE__ */ F("div", {
+		dir: Oe,
+		className: c("relative flex min-h-0 min-w-0 flex-1 flex-col", Xe.root),
+		style: Bt,
+		...Tt,
 		children: [
-			/* @__PURE__ */ F($e, {
-				isVisible: Dt && !bt,
-				labels: Te
+			/* @__PURE__ */ P(ht, {
+				isVisible: wt && !vt,
+				labels: De,
+				titleClassName: $.dropOverlayTitleClassName,
+				subtitleClassName: $.dropOverlaySubtitleClassName
 			}),
-			/* @__PURE__ */ F(Ne, {
-				...dn,
-				asideData: _e,
-				asideSectionClassName: ft,
-				isSubmitting: O,
-				metadataSectionClassName: dt,
-				metadata: /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F("div", {
+			/* @__PURE__ */ P(Ge, {
+				...wn,
+				asideData: de,
+				asideSectionClassName: Nt,
+				isSubmitting: D,
+				metadataSectionClassName: Mt,
+				metadata: /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P("div", {
 					className: "desktop:hidden",
-					children: /* @__PURE__ */ F(d, {
-						title: Q.editingFileLabel ?? "Editing file",
-						description: Gt?.name ?? "SKILL.md",
-						expanded: Tt,
-						onToggle: Et,
-						ariaLabel: Q.editingFileLabel ?? "Editing file",
-						children: an(Y.Mobile)
+					children: /* @__PURE__ */ P(_t, {
+						label: Z.editingFileLabel ?? "Editing file",
+						fileName: en?.name ?? "SKILL.md",
+						isExpanded: St,
+						onToggle: Ct,
+						labelClassName: $.editingFileLabelClassName,
+						fileNameClassName: $.editingFileNameClassName,
+						children: vn(Y.Mobile)
 					})
-				}), /* @__PURE__ */ F("div", {
+				}), /* @__PURE__ */ P("div", {
 					className: "hidden desktop:block",
-					children: an(Y.Desktop)
+					children: vn(Y.Desktop)
 				})] }),
-				alert: mn,
-				setupTitle: pn,
-				setupSectionClassName: pt,
-				setup: fn ? /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F(Ie, {
-					values: on,
-					errors: sn,
-					onChange: ln,
-					fields: ct,
+				alert: Dn,
+				setupTitle: En,
+				setupSectionClassName: Pt,
+				setup: Tn ? /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P(Je, {
+					values: yn,
+					errors: bn,
+					onChange: Sn,
+					fields: kt,
 					isDescriptionRequired: !0,
-					isNameReadOnly: M,
-					nameCaption: k?.name ? void 0 : Q.nameCaption ?? "Lowercase letters and hyphens only, no spaces. We'll reformat automatically if needed.",
-					renderDescription: un,
-					labels: cn
-				}), hn] }) : /* @__PURE__ */ F(P, { children: Gt?.kind === q.File && /* @__PURE__ */ F("div", {
-					className: "flex min-h-0 flex-1 flex-col",
-					children: fe ?? /* @__PURE__ */ F(h, { text: Q.supportingFileNote ?? "This supporting file is included in the skill package as-is. Remove it from the Files panel to replace its content." })
+					isNameReadOnly: ie,
+					nameReadOnlyTooltip: Z.nameReadOnlyTooltip ?? "The skill name can't be changed after creation",
+					nameCaption: k?.name ? void 0 : Z.nameCaption ?? "Lowercase letters and hyphens only, no spaces. We'll reformat automatically if needed.",
+					renderDescription: Cn,
+					labels: xn
+				}), On] }) : /* @__PURE__ */ P(N, { children: en?.kind === q.File && /* @__PURE__ */ P("div", {
+					className: "flex h-[max(320px,60dvh)] min-h-0 min-w-0 flex-none flex-col desktop:h-auto desktop:flex-1",
+					children: le ?? /* @__PURE__ */ P(v, { text: Z.supportingFileNote ?? "This supporting file is included in the skill package as-is. Remove it from the Files panel to replace its content." })
 				}) })
 			}),
-			/* @__PURE__ */ F(at, {
-				isOpen: bt,
-				onClose: () => xt(!1),
-				fileActions: R,
-				mode: St.mode,
-				targetFolderPath: St.targetFolderPath,
-				initialFiles: St.initialFiles,
-				initialEntries: St.initialEntries,
-				labels: Te
+			/* @__PURE__ */ P(Et, {
+				isOpen: vt,
+				onClose: () => yt(!1),
+				fileActions: qt,
+				mode: X.mode,
+				targetFolderPath: X.targetFolderPath,
+				initialFiles: X.initialFiles,
+				initialEntries: X.initialEntries,
+				existingFilePaths: dn,
+				onCommitted: (e) => {
+					e.some((e) => e.replacesExisting) && Qe(!0);
+				},
+				messageClassName: $.uploadMessageClassName,
+				rowCaptionClassName: $.uploadRowCaptionClassName,
+				labels: De,
+				dialogColors: Vt,
+				colors: {
+					invalidDropZoneBorder: Q?.uploadInvalidDropZoneBorder,
+					rowBorder: Q?.uploadRowBorder
+				}
+			}),
+			/* @__PURE__ */ P(pt, {
+				isOpen: cn != null,
+				onClose: () => ln(null),
+				validateName: (e) => Jt.validateNewFolder(e, cn ?? ""),
+				onCreate: (e) => Jt.createFolder(e, cn ?? ""),
+				title: Z.createFolderLabel ?? "Create folder",
+				nameLabel: Z.createFolderNameLabel ?? "Name",
+				namePlaceholder: Z.createFolderNamePlaceholder ?? "Enter folder name",
+				createLabel: Z.createFolderConfirmLabel ?? "Create",
+				cancelLabel: Z.cancelLabel ?? "Cancel",
+				closeAriaLabel: Z.createFolderCloseAriaLabel ?? "Close",
+				dialogColors: Vt
 			})
 		]
 	});
 };
 //#endregion
-export { Re as SKILL_EDITOR_CLASS, ht as SkillEditor, et as SkillFileCandidateKind, q as SkillFileNodeKind, Ze as SkillFileUploadMode, tt as SkillFileValidationStatus };
+export { Xe as SKILL_EDITOR_CLASS, Q as SkillEditor, vt as SkillFileCandidateKind, q as SkillFileNodeKind, lt as SkillFileUploadMode, yt as SkillFileValidationStatus };