@epam/ai-dial-skill-editor 1.2.0-dev.176 → 1.2.0-dev.181

package/index.js

@@ -1,108 +1,633 @@
-import { MARKDOWN_EDITOR_MAX_HEIGHT_CLASS_NAME as e, MARKDOWN_EDITOR_PREVIEW_LIST_CLASS_NAME as t, TextRefinementField as n, buildCssVars as r, formatFileSize as i, mergeClasses as a, useAvailableHeightCap as o, useTextRefinement as s } from "@epam/ai-dial-chat-shared";
-import { Accordion as c, ButtonAppearance as l, ButtonDropdown as u, ButtonVariant as d, CaptionText as f, DIAL_ICON_SIZE as p, DIAL_KIT_ICON_STROKE as m, EditorThemes as h, ElementSize as g, ErrorText as _, FileDropzone as v, GhostButton as y, GhostIconButton as ee, Input as te, Label as ne, NeutralButton as re, Popup as ie, PopupSize as ae, PrimaryButton as oe, Spinner as b, Textarea as x } from "@epam/ai-dial-ui-kit";
-import { Fragment as se, jsx as S, jsxs as C } from "react/jsx-runtime";
-import { IconArrowNarrowLeft as w, IconDatabase as ce, IconFileText as T, IconFileZip as le, IconFolderPlus as E, IconPlus as ue, IconTrashX as de, IconUpload as fe } from "@tabler/icons-react";
-import { Suspense as D, lazy as O, useCallback as k, useEffect as pe, useId as me, useMemo as A, useRef as j, useState as M } from "react";
+import { 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 N } from "@epam/ai-dial-ui-kit/editors";
-a("flex flex-col", {
+import { LazyMarkdownEditor as _e } from "@epam/ai-dial-ui-kit/editors";
+c("flex flex-col", {
 	body: "_body_m2y60_2",
 	sideColumn: "_sideColumn_m2y60_6",
 	reservedColumn: "_reservedColumn_m2y60_10"
 }.sideColumn);
 //#endregion
 //#region ../builder-form/src/constants/public-class-names.ts
-var P = {
+var ve = {
 	layout: "dial-builder-form-layout",
-	section: "dial-builder-form-section"
-}, F = {
+	section: "dial-builder-form-section",
+	metadataSection: "dial-builder-form-metadata-section",
+	setupSection: "dial-builder-form-setup-section"
+}, ye = {
+	section: "_section_l1mnx_1",
+	title: "_title_l1mnx_5"
+}, be = ({ 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),
+		style: i,
+		children: [e != null && /* @__PURE__ */ F("h2", {
+			className: c("dial-h3-text", ye.title),
+			children: e
+		}), t]
+	});
+}, xe = {
 	headerBorder: "_headerBorder_1kidu_1",
 	footerBorder: "_footerBorder_1kidu_5",
 	sidebarBorder: "_sidebarBorder_1kidu_9"
-}, _e = ({ title: e, onBack: t, backAriaLabel: n = "Back", actions: i, leftContent: o, rightContent: s, isSaving: c = !1, labels: l, styles: u, dir: d }) => {
-	let f = me(), h = c ? l?.savingStatusLabel ?? "Saving" : "", g = r({
+}, Se = ({ title: e, onBack: t, backAriaLabel: n = "Back", actions: r, leftContent: i, rightContent: a, isSaving: s = !1, labels: l, styles: u, dir: d }) => {
+	let f = me(), p = s ? l?.savingStatusLabel ?? "Saving" : "", m = o({
 		"--el-header-border-color": u?.colors?.headerBorderColor,
 		"--el-sidebar-border-color": u?.colors?.sidebarBorderColor
 	});
-	return /* @__PURE__ */ C("div", {
+	return /* @__PURE__ */ I("div", {
 		dir: d,
-		className: a("flex min-h-0 flex-1 flex-col", P.layout),
-		style: g,
+		className: c("flex min-h-0 flex-1 flex-col", ve.layout),
+		style: m,
 		children: [
-			/* @__PURE__ */ S("span", {
+			/* @__PURE__ */ F("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
 				id: f,
-				children: h
+				children: p
 			}),
-			/* @__PURE__ */ C("div", {
-				className: a("flex items-center justify-between gap-2 border-b px-4 py-2 desktop:px-8 desktop:pb-3 desktop:pt-3", F.headerBorder),
-				children: [/* @__PURE__ */ C("div", {
+			/* @__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", {
 					className: "flex min-w-0 flex-1 items-center gap-2",
-					children: [/* @__PURE__ */ S(ee, {
-						icon: /* @__PURE__ */ S(w, {
-							size: p.LG,
-							stroke: m,
+					children: [/* @__PURE__ */ F(w, {
+						icon: /* @__PURE__ */ F(L, {
+							size: g.LG,
+							stroke: _,
 							"aria-hidden": !0,
 							className: "rtl:scale-x-[-1]"
 						}),
 						"aria-label": n,
 						onClick: t
-					}), /* @__PURE__ */ S("h1", {
+					}), /* @__PURE__ */ F("h1", {
 						className: "dial-h2-text min-w-0 truncate",
 						children: e
 					})]
-				}), i != null && /* @__PURE__ */ S("div", {
+				}), r != null && /* @__PURE__ */ F("div", {
 					className: "hidden shrink-0 items-center gap-2 desktop:flex",
-					children: i
+					children: r
 				})]
 			}),
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ I("div", {
 				className: "flex flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden",
-				children: [/* @__PURE__ */ S("div", {
-					className: a(s == null ? "desktop:flex-1" : "desktop:w-[400px] desktop:shrink-0 desktop:overflow-y-auto desktop:border-e", "desktop:overflow-y-auto", s == null ? void 0 : F.sidebarBorder),
-					children: o
-				}), s != null && /* @__PURE__ */ S("div", {
-					className: "desktop:flex-1 desktop:overflow-y-auto",
-					children: s
+				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.sidebarBorder),
+					children: i
+				}), a != null && /* @__PURE__ */ F("div", {
+					className: "desktop:flex desktop:flex-1 desktop:flex-col desktop:overflow-y-auto",
+					children: a
+				})]
+			}),
+			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),
+				children: r
+			})
+		]
+	});
+}, Ce = {
+	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
+	});
+	return /* @__PURE__ */ I("div", {
+		className: c("flex flex-col gap-2", l),
+		style: u,
+		children: [/* @__PURE__ */ F(E, { label: e }), /* @__PURE__ */ I("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", {
+					src: t,
+					alt: n,
+					className: "h-16 w-16 object-cover"
+				}) : /* @__PURE__ */ F(se, {
+					size: g.LG,
+					stroke: _,
+					"aria-hidden": !0,
+					className: Ce.icon
+				})
+			}), /* @__PURE__ */ I("div", {
+				className: "flex flex-col gap-3",
+				children: [/* @__PURE__ */ F(D, {
+					size: b.Small,
+					iconBefore: /* @__PURE__ */ F(ce, {
+						size: g.SM,
+						stroke: _,
+						"aria-hidden": !0
+					}),
+					className: "w-fit",
+					label: r,
+					onClick: a
+				}), /* @__PURE__ */ F("span", {
+					className: c("dial-tiny-text", Ce.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,
+				" ",
+				/* @__PURE__ */ I("span", {
+					className: "break-words text-primary",
+					children: [
+						"\"",
+						e[0].split("/").pop(),
+						"\"?"
+					]
+				})
+			] }) : /* @__PURE__ */ I(P, { children: [
+				s.deleteConfirmMultipleText,
+				" ",
+				/* @__PURE__ */ I("span", {
+					className: "text-primary",
+					children: [
+						e.length,
+						" ",
+						s.deleteConfirmItemsLabel
+					]
+				})
+			] })
+		})
+	}), [
+		s.deleteConfirmSingleText,
+		s.deleteConfirmMultipleText,
+		s.deleteConfirmItemsLabel
+	]);
+	return /* @__PURE__ */ F(de, {
+		fallback: null,
+		children: e && /* @__PURE__ */ F(i, {
+			isOpen: e,
+			onClose: t,
+			onAttach: n,
+			bucket: r,
+			allowedTypes: a,
+			maxSelectableFileSize: o,
+			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
+		})
+	});
+}, U = /* @__PURE__ */ function(e) {
+	return e.Avatar = "avatar", e.Name = "name", e.Version = "version", e.Description = "description", e.Locales = "locales", e.Tags = "tags", e;
+}({}), Ee = [
+	"avatar",
+	"name",
+	"version",
+	"description",
+	"locales",
+	"tags"
+], W = (e, t, n) => ({
+	id: e,
+	language: n.find((e) => !t.has(e.code))?.code ?? "",
+	name: "",
+	description: ""
+}), De = ({ 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 : [W(`locale-row-${++re.current}`, /* @__PURE__ */ new Set(), n)]);
+	}, [
+		ne,
+		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, W(`locale-row-${++re.current}`, e, n)]);
+	}, ue = (e, t) => {
+		L((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", {
+		className: c("flex items-center gap-2", a),
+		children: [
+			e.length > 0 && /* @__PURE__ */ F("span", {
+				className: o,
+				children: `${l}: ${e.map((e) => `[${R(e.language)}]`).join(", ")}`
+			}),
+			/* @__PURE__ */ F(D, {
+				label: e.length > 0 ? d : u,
+				iconBefore: /* @__PURE__ */ F(ce, {
+					size: g.SM,
+					"aria-hidden": !0,
+					stroke: _
+				}),
+				className: "!px-0",
+				onClick: ie
 			}),
-			i != null && /* @__PURE__ */ S("div", {
-				className: a("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 desktop:hidden [&>*]:flex-1", F.footerBorder),
-				children: i
+			/* @__PURE__ */ F(k, {
+				open: ne,
+				header: p,
+				onClose: ae,
+				mainButtons: [{
+					label: ee,
+					onClick: ae
+				}, {
+					label: A,
+					variant: m.Primary,
+					disabled: fe,
+					onClick: oe
+				}],
+				children: /* @__PURE__ */ I("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", {
+							className: "flex flex-col gap-2",
+							children: [/* @__PURE__ */ I("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ I("span", {
+									className: s,
+									children: [
+										y,
+										" ",
+										t + 1
+									]
+								}), /* @__PURE__ */ F(v, {
+									appearance: f.Ghost,
+									size: b.Small,
+									icon: /* @__PURE__ */ F(le, {
+										size: g.SM,
+										"aria-hidden": !0,
+										stroke: _
+									}),
+									"aria-label": `${O} ${t + 1}`,
+									onClick: () => de(e.id)
+								})]
+							}), /* @__PURE__ */ I("div", {
+								role: "group",
+								"aria-label": `${y} ${t + 1}`,
+								className: "flex flex-col gap-5",
+								children: [/* @__PURE__ */ I("div", {
+									className: "flex flex-col gap-5 desktop:flex-row desktop:items-start",
+									children: [/* @__PURE__ */ F(te, {
+										id: `${e.id}-language`,
+										labelProps: {
+											label: x,
+											required: !0
+										},
+										className: "desktop:shrink-0 desktop:basis-40",
+										options: n.map((e) => ({
+											value: e.code,
+											label: e.label,
+											disabled: i.has(e.code)
+										})),
+										value: e.language,
+										onChange: (t) => ue(e.id, { language: t })
+									}), /* @__PURE__ */ F(T, {
+										id: `${e.id}-name`,
+										containerClassName: "min-w-0 flex-1",
+										required: !0,
+										value: e.name,
+										onChange: (t) => ue(e.id, { name: t ?? "" }),
+										labelProps: {
+											label: S,
+											required: !0
+										},
+										placeholder: C
+									})]
+								}), /* @__PURE__ */ F(M, {
+									id: `${e.id}-description`,
+									className: r,
+									resize: N.Vertical,
+									value: e.description,
+									onChange: (t) => ue(e.id, { description: t }),
+									labelProps: { label: w },
+									placeholder: E
+								})]
+							})]
+						}, e.id);
+					}), /* @__PURE__ */ F(D, {
+						label: h,
+						iconBefore: /* @__PURE__ */ F(ce, {
+							size: g.SM,
+							"aria-hidden": !0,
+							stroke: _
+						}),
+						className: "self-start",
+						onClick: se,
+						disabled: P.length >= n.length
+					})]
+				})
 			})
 		]
 	});
-}, ve = {
+}, Oe = "Add tags, comma separated", G = "deployment-creation-form-description", ke = ({ 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(() => {
+		let e = () => {
+			t.name ? y.current?.focus() : t.version ? b.current?.focus() : t.description && x.current?.focus();
+		};
+		if (v !== void 0) {
+			v !== O.current && (O.current = v, e());
+			return;
+		}
+		D && !S.current && e(), S.current = D;
+	}, [
+		v,
+		D,
+		t.name,
+		t.version,
+		t.description
+	]);
+	let k = /* @__PURE__ */ F(M, {
+		id: G,
+		ref: x,
+		value: e.description,
+		onChange: (e) => n({ description: e }),
+		"aria-required": g || void 0,
+		labelProps: _ ? void 0 : {
+			label: u.description.label,
+			required: g
+		},
+		placeholder: u.description.placeholder,
+		error: t.description || void 0,
+		invalid: !!t.description,
+		containerClassName: _ ? void 0 : d?.field,
+		className: r,
+		resize: N.Vertical
+	});
+	return /* @__PURE__ */ I("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, {
+				label: u.iconUrl.label,
+				avatarUrl: s,
+				addAvatarLabel: u.iconUrl.addAvatarLabel,
+				captionText: u.iconUrl.captionText,
+				onAddAvatarClick: l,
+				className: d?.field
+			}),
+			(w || E) && /* @__PURE__ */ I("div", {
+				className: c("flex items-start gap-4", d?.field),
+				children: [w && /* @__PURE__ */ F(T, {
+					id: "deployment-creation-form-name",
+					inputRef: y,
+					value: e.name,
+					onChange: (e) => n({ name: e ?? "" }),
+					onBlur: a,
+					readOnly: m,
+					labelProps: {
+						label: u.name.label,
+						required: !0
+					},
+					placeholder: u.name.placeholder,
+					caption: h,
+					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, {
+					id: "deployment-creation-form-version",
+					inputRef: b,
+					value: e.version,
+					onChange: (e) => n({ version: e ?? "" }),
+					onBlur: o,
+					labelProps: { label: u.version.label },
+					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"
+				})]
+			}),
+			C(U.Description) && (_ ? /* @__PURE__ */ F("div", {
+				className: d?.field,
+				children: _(k, G)
+			}) : k),
+			C(U.Locales) && /* @__PURE__ */ F(De, {
+				value: e.otherLocales,
+				onChange: (e) => n({ otherLocales: e }),
+				availableLocaleOptions: f,
+				labels: u.otherLocales,
+				className: d?.field
+			}),
+			C(U.Tags) && /* @__PURE__ */ F("div", {
+				className: d?.field,
+				children: /* @__PURE__ */ F(j, {
+					id: "deployment-creation-form-topics",
+					labelProps: { label: u.topics.label },
+					placeholder: u.topics.placeholder ?? Oe,
+					value: e.topics,
+					onChange: (e) => n({ topics: e }),
+					tagClassName: i
+				})
+			})
+		]
+	});
+}, Ae = "border-0 p-4 desktop:p-6", 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, alert: h, metadataSectionClassName: g, setupSectionClassName: _, labels: v, styles: y, dir: b }) => {
+	let x = h == null ? null : /* @__PURE__ */ F("div", {
+		role: "alert",
+		className: Me,
+		children: h
+	}), S = p != null;
+	return /* @__PURE__ */ F(Se, {
+		title: e,
+		onBack: t,
+		backAriaLabel: v?.backAriaLabel ?? "Back",
+		isSaving: a,
+		labels: { savingStatusLabel: v?.savingStatusLabel ?? "Saving" },
+		styles: y?.layout,
+		dir: b,
+		actions: /* @__PURE__ */ I(P, { children: [s, !l && /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F(O, {
+			label: v?.cancelLabel ?? "Cancel",
+			disabled: a,
+			onClick: n
+		}), /* @__PURE__ */ F(A, {
+			label: i,
+			disabled: a || o,
+			onClick: r
+		})] })] }),
+		leftContent: /* @__PURE__ */ I(P, { children: [
+			!S && x,
+			/* @__PURE__ */ F(be, {
+				title: d === null ? void 0 : d ?? v?.metadataTitle ?? "Metadata",
+				styles: y?.section,
+				className: c(Ae, g, ve.metadataSection),
+				children: u
+			}),
+			f
+		] }),
+		rightContent: S ? /* @__PURE__ */ I(P, { children: [x, /* @__PURE__ */ F(be, {
+			title: m ?? v?.setupTitle ?? "Setup",
+			styles: y?.section,
+			className: c(Ae, je, _, ve.setupSection),
+			children: p
+		})] }) : void 0
+	});
+}), Pe = {
+	name: {
+		label: "Name",
+		placeholder: "Enter name"
+	},
+	description: {
+		label: "Description",
+		placeholder: "Enter description"
+	},
+	iconUrl: {
+		label: "Avatar",
+		addAvatarLabel: "Add avatar",
+		captionText: "PNG, JPG or SVG (max 1 MB)"
+	},
+	version: {
+		label: "Version",
+		placeholder: "e.g. 1.0.0"
+	},
+	topics: {
+		label: "Tags",
+		placeholder: "Add tags, comma separated"
+	},
+	otherLocales: {
+		summaryLabel: "Locales",
+		addLabel: "Add locales",
+		editLabel: "Edit locales",
+		popupTitle: "Add locale",
+		addLocaleLabel: "Add locale",
+		localeRowLabel: "Locale",
+		languageLabel: "Language",
+		nameLabel: "Name",
+		namePlaceholder: "Enter name",
+		descriptionLabel: "About",
+		descriptionPlaceholder: "Enter brief description",
+		deleteAriaLabel: "Delete locale",
+		cancelLabel: "Cancel",
+		saveLabel: "Save"
+	},
+	ariaLabel: "Metadata"
+}, Fe = {
+	title: "Add avatar",
+	attachLabel: "Attach",
+	emptyTitle: "This folder is empty",
+	emptyDescription: "",
+	errorMessage: "Failed to load files",
+	retryLabel: "Retry",
+	hiddenFilesLabel: "Hidden files",
+	showHiddenFilesLabel: "Show hidden files",
+	hideHiddenFilesLabel: "Hide hidden files",
+	getSelectionLabel: (e) => e === 1 ? "item selected" : "items selected",
+	uploadFilesLabel: "Files",
+	newFolderLabel: "Folder",
+	downloadLabel: "Download",
+	downloadingLabel: "Preparing download…",
+	deleteLabel: "Delete",
+	deletingLabel: "Deleting…",
+	deleteConfirmTitleSingle: "Confirm deleting",
+	deleteConfirmTitleMultiple: "Confirm deleting items",
+	deleteConfirmSingleText: "Are you sure you want to delete",
+	deleteConfirmMultipleText: "Do you want to delete following",
+	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(ke, {
+		values: e,
+		errors: t,
+		onChange: n,
+		onNameBlur: r,
+		onVersionBlur: i,
+		iconPreviewUrl: y,
+		onAddAvatarClick: b,
+		labels: p?.form ?? Pe,
+		availableLocaleOptions: o,
+		fields: g,
+		isNameReadOnly: c,
+		nameCaption: l,
+		isDescriptionRequired: u,
+		renderDescription: d,
+		focusRequestKey: f
+	}), a && /* @__PURE__ */ F(Te, {
+		isOpen: m,
+		onClose: x,
+		onAttach: C,
+		bucket: a.bucket,
+		FileManagerModal: a.FileManagerModal,
+		allowedMimeTypes: a.allowedMimeTypes,
+		maxFileSizeBytes: a.maxFileSizeBytes,
+		labels: p?.avatarPicker ?? Fe
+	})] });
+}), Le = /* @__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]);
+//#endregion
+//#region src/constants/public-class-names.ts
+var Re = {
 	root: "dial-skill-editor-root",
 	refineFeedback: "dial-skill-editor-refine-feedback"
-}, I = "SKILL.md", L = /* @__PURE__ */ function(e) {
+}, K = "SKILL.md", q = /* @__PURE__ */ function(e) {
 	return e.File = "file", e.Folder = "folder", e;
-}({}), R = /* @__PURE__ */ function(e) {
+}({}), ze = /* @__PURE__ */ function(e) {
 	return e.Header = "header", e.Child = "child", e.Sibling = "sibling", e;
-}({}), z = (e) => {
+}({}), J = (e) => {
 	let t = e.lastIndexOf("/");
 	return t === -1 ? null : e.slice(0, t);
-}, ye = (e) => {
+}, Be = (e) => {
 	let t = e.lastIndexOf("/");
 	return t === -1 ? e : e.slice(t + 1);
-}, be = (e) => {
+}, Ve = (e) => {
 	let t = /* @__PURE__ */ new Map(), n = (e) => {
 		let n = t.get(e);
 		if (n) return n;
 		let r = {
 			path: e,
-			name: ye(e),
+			name: Be(e),
 			nodeType: he.FOLDER,
-			parentPath: z(e),
+			parentPath: J(e),
 			folderId: e,
 			items: []
 		};
 		return t.set(e, r), r;
 	};
 	for (let r of e) {
-		if (r.kind === L.Folder) {
+		if (r.kind === q.Folder) {
 			n(r.path).name = r.name;
 			continue;
 		}
@@ -110,13 +635,13 @@ var P = {
 			path: r.path,
 			name: r.name,
 			nodeType: he.ITEM,
-			parentPath: z(r.path),
-			folderId: z(r.path) ?? ""
+			parentPath: J(r.path),
+			folderId: J(r.path) ?? ""
 		});
 	}
 	for (let t of [...e]) {
-		let e = z(t.path);
-		for (; e != null;) n(e), e = z(e);
+		let e = J(t.path);
+		for (; e != null;) n(e), e = J(e);
 	}
 	let r = [];
 	for (let e of t.values()) {
@@ -128,14 +653,14 @@ var P = {
 		n ? n.items = [...n.items ?? [], e] : r.push(e);
 	}
 	return r;
-}, B = (e, t) => e ? `${e}/${t}` : t, xe = (e) => z(e) ?? "", Se = (e, t) => {
+}, He = (e, t) => e ? `${e}/${t}` : t, Ue = (e) => J(e) ?? "", We = (e, t) => {
 	if (!t) return "";
 	switch (e) {
-		case R.Child: return t.path;
-		case R.Sibling: return xe(t.path);
-		case R.Header: return t.kind === L.Folder ? t.path : "";
+		case ze.Child: return t.path;
+		case ze.Sibling: return Ue(t.path);
+		case ze.Header: return t.kind === q.Folder ? t.path : "";
 	}
-}, Ce = (e, t) => {
+}, Ge = (e, t) => {
 	let n = t ? `${t}/` : "", r = /* @__PURE__ */ new Set();
 	for (let { path: i } of e) {
 		if (!i.startsWith(n) || i === t) continue;
@@ -143,29 +668,29 @@ var P = {
 		r.add(e.split("/")[0]);
 	}
 	return r;
-}, we = (e, t, n) => {
+}, Ke = (e, t, n) => {
 	let r = e.trim();
 	if (!r) return n.required;
 	if (/[/\\]/.test(r) || r === "." || r === "..") return n.invalid;
 	if (t.has(r)) return n.duplicate;
-}, Te = "\\new-folder", Ee = ({ files: e, fileActions: t, defaultName: n, messages: r, onRevealFolder: i, onCreated: a }) => {
-	let [o, s] = M(null), c = o?.parentPath ?? null, l = j([]), u = c == null ? void 0 : B(c, Te), d = A(() => u == null ? void 0 : {
+}, 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 : {
 		path: u,
 		name: n,
-		kind: L.Folder
-	}, [u, n]), f = k((n, i) => {
-		let a = Ce(e, i);
-		return i === "" && a.add(I), we(n, a, r) ?? t.validateFolderPath?.(B(i, n.trim()));
+		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()));
 	}, [
 		e,
 		r,
 		t
-	]), p = k((e, t) => {
+	]), p = z((e, t) => {
 		l.current = [], s({
 			parentPath: e,
 			pane: t
 		}), e !== "" && i(e);
-	}, [i]), m = k((e, t) => {
+	}, [i]), m = z((e, t) => {
 		if (c == null || t.path !== u) return null;
 		let n = f(e, c);
 		return l.current = [...l.current.slice(-1), {
@@ -176,16 +701,16 @@ var P = {
 		c,
 		u,
 		f
-	]), h = k(() => {
+	]), h = z(() => {
 		l.current = [], s(null);
-	}, []), g = k((e) => {
+	}, []), g = z((e) => {
 		if (c == null) return;
 		let [n] = l.current;
 		if (l.current.length === 2 && n != null && !n.isValid && n.value !== e || f(e, c) != null) {
 			h();
 			return;
 		}
-		let r = B(c, e.trim());
+		let r = He(c, e.trim());
 		h(), t.onCreateFolder?.(r), a(r);
 	}, [
 		c,
@@ -203,711 +728,707 @@ var P = {
 		handleSave: g,
 		handleCancel: h
 	};
-}, V = (e) => !!e.dataTransfer?.types.includes("Files"), De = (e) => {
-	let [t, n] = M(!1), r = j(0);
+}, Ye = (e) => !!e.dataTransfer?.types.includes("Files"), Xe = (e) => {
+	let [t, n] = H(!1), r = V(0);
 	return {
 		isDragActive: t,
 		dropZoneHandlers: {
-			onDragEnter: k((e) => {
-				V(e) && (e.preventDefault(), r.current += 1, n(!0));
+			onDragEnter: z((e) => {
+				Ye(e) && (e.preventDefault(), r.current += 1, n(!0));
 			}, []),
-			onDragLeave: k((e) => {
-				V(e) && (--r.current, r.current <= 0 && (r.current = 0, n(!1)));
+			onDragLeave: z((e) => {
+				Ye(e) && (--r.current, r.current <= 0 && (r.current = 0, n(!1)));
 			}, []),
-			onDragOver: k((e) => {
-				V(e) && e.preventDefault();
+			onDragOver: z((e) => {
+				Ye(e) && e.preventDefault();
 			}, []),
-			onDrop: k((t) => {
-				if (!V(t)) return;
+			onDrop: z((t) => {
+				if (!Ye(t)) return;
 				t.preventDefault(), r.current = 0, n(!1);
 				let i = Array.from(t.dataTransfer?.files ?? []);
 				i.length > 0 && e(i);
 			}, [e])
 		}
 	};
-}, H = /* @__PURE__ */ function(e) {
+}, Ze = /* @__PURE__ */ function(e) {
 	return e.Files = "files", e.Archive = "archive", e;
-}({}), U = /* @__PURE__ */ function(e) {
+}({}), Y = /* @__PURE__ */ function(e) {
 	return e.Mobile = "mobile", e.Desktop = "desktop", e;
-}({}), Oe = ({ isVisible: e, labels: t }) => {
+}({}), Qe = ({ isVisible: e, labels: t }) => {
 	if (!e) return null;
 	let n = t ?? {};
-	return /* @__PURE__ */ S("div", {
+	return /* @__PURE__ */ F("div", {
 		role: "status",
 		"aria-live": "polite",
-		className: a("pointer-events-none absolute inset-0 z-[100] flex items-center justify-center backdrop-blur-sm"),
-		children: /* @__PURE__ */ C("div", {
+		className: c("pointer-events-none absolute inset-0 z-[100] flex items-center justify-center backdrop-blur-sm"),
+		children: /* @__PURE__ */ I("div", {
 			className: "flex flex-col items-center text-center",
 			children: [
-				/* @__PURE__ */ S(fe, {
+				/* @__PURE__ */ F(ue, {
 					size: 100,
 					className: "text-accent-primary",
 					"aria-hidden": !0,
-					stroke: m
+					stroke: _
 				}),
-				/* @__PURE__ */ S("span", {
+				/* @__PURE__ */ F("span", {
 					className: "dial-h3-text mt-5",
 					children: n.dropOverlayTitle ?? "Upload files"
 				}),
-				/* @__PURE__ */ S("span", {
+				/* @__PURE__ */ F("span", {
 					className: "dial-small-text mt-4",
 					children: n.dropOverlaySubtitle ?? "Drop files here to add them to this skill"
 				})
 			]
 		})
 	});
-}, ke = /* @__PURE__ */ function(e) {
+}, $e = /* @__PURE__ */ function(e) {
 	return e.SupportingFile = "supporting-file", e.Manifest = "manifest", e;
-}({}), W = /* @__PURE__ */ function(e) {
+}({}), et = /* @__PURE__ */ function(e) {
 	return e.Valid = "valid", e.Invalid = "invalid", e;
-}({}), Ae = (e) => (e.webkitRelativePath || e.name).replace(/\\/g, "/"), je = ".zip,application/zip", Me = 0, Ne = () => `skill-file-candidate-${++Me}`, Pe = (e, t, n) => ({
-	id: Ne(),
+}({}), tt = (e) => (e.webkitRelativePath || e.name).replace(/\\/g, "/"), nt = ".zip,application/zip", X = 0, rt = () => `skill-file-candidate-${++X}`, it = (e, t, n) => ({
+	id: rt(),
 	file: e,
-	path: B(n, t.replace(/\\/g, "/"))
-}), Fe = ({ isOpen: e, onClose: t, fileActions: n, mode: r = H.Files, targetFolderPath: a = "", initialFiles: o, initialEntries: s, labels: c }) => {
-	let u = c ?? {}, [f, p] = M([]), [h, g] = M(/* @__PURE__ */ new Map()), [y, te] = M([]), [ne, re] = M(!1), [oe, x] = M(), [w, ce] = M(!1), [le, E] = M(), [ue, fe] = M(0), D = j(0), O = r === H.Archive, k = u.uploadArchiveErrorMessage ?? "Couldn't read this archive", A = me(), he = (e) => {
-		x(void 0), p((t) => [...t, ...e]);
-	}, ge = async (e) => {
+	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) => {
 		let { extractArchive: t } = n;
 		if (!t) return;
-		let r = D.current;
-		E(void 0), fe((e) => e + 1);
+		let r = M.current;
+		A(void 0), j((e) => e + 1);
 		try {
 			let n = await Promise.all(e.map((e) => t(e)));
-			if (r !== D.current) return;
-			let i = n.flat();
-			if (i.length === 0) {
-				E(u.uploadArchiveEmptyMessage ?? "This archive has no files");
+			if (r !== M.current) return;
+			let a = n.flat();
+			if (a.length === 0) {
+				A(l.uploadArchiveEmptyMessage ?? "This archive has no files");
 				return;
 			}
-			he(i.map((e) => Pe(e.file, e.path, a)));
+			ae(a.map((e) => it(e.file, e.path, i)));
 		} catch {
-			if (r !== D.current) return;
-			E(k);
+			if (r !== M.current) return;
+			A(L);
 		} finally {
-			r === D.current && fe((e) => e - 1);
+			r === M.current && j((e) => e - 1);
 		}
-	}, N = (e) => {
-		if (O) {
-			ge(e);
+	}, se = (e) => {
+		if (N) {
+			oe(e);
 			return;
 		}
-		he(e.map((e) => Pe(e, Ae(e), a)));
-	}, P = (e) => {
-		p((t) => t.filter((t) => t.id !== e));
+		ae(e.map((e) => it(e, tt(e), i)));
+	}, ce = (e) => {
+		d((t) => t.filter((t) => t.id !== e));
 	};
 	pe(() => {
-		e && (D.current += 1, p([...(o ?? []).map((e) => Pe(e, Ae(e), a)), ...(s ?? []).map((e) => Pe(e.file, e.path, a))]), g(/* @__PURE__ */ new Map()), te([]), x(void 0), E(void 0), fe(0));
+		e && (M.current += 1, d([...(a ?? []).map((e) => it(e, tt(e), i)), ...(o ?? []).map((e) => it(e.file, e.path, i))]), h(/* @__PURE__ */ new Map()), v([]), T(void 0), A(void 0), j(0));
 	}, [e]), pe(() => {
 		if (!e) return;
 		let t = !1;
-		if (f.length === 0) {
-			g(/* @__PURE__ */ new Map()), te([]);
+		if (u.length === 0) {
+			h(/* @__PURE__ */ new Map()), v([]);
 			return;
 		}
-		return re(!0), n.validateBatch(f).then(({ results: e, batchErrors: n }) => {
-			t || (g(new Map(e.map((e) => [e.candidateId, e]))), te(n.map((e) => e.message)));
+		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)));
 		}).finally(() => {
-			t || re(!1);
+			t || b(!1);
 		}), () => {
 			t = !0;
 		};
-	}, [f, e]);
-	let F = f.some((e) => h.get(e.id)?.status === W.Invalid), _e = f.length > 0 && f.every((e) => h.get(e.id)?.status === W.Invalid), ve = f.length > 0 && !F && y.length === 0 && !ne && !w && ue === 0, I = async () => {
-		ce(!0), x(void 0);
+	}, [u, e]);
+	let ue = u.some((e) => p.get(e.id)?.status === et.Invalid), de = u.length > 0 && u.every((e) => p.get(e.id)?.status === et.Invalid), R = u.length > 0 && !ue && g.length === 0 && !y && !E && te === 0, fe = async () => {
+		D(!0), T(void 0);
 		try {
-			let { results: e, batchErrors: r } = await n.validateBatch(f), i = new Map(e.map((e) => [e.candidateId, e]));
-			if (g(i), te(r.map((e) => e.message)), f.some((e) => i.get(e.id)?.status === W.Invalid) || r.length > 0) return;
-			let a = await n.commitBatch(f);
+			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 === et.Invalid) || r.length > 0) return;
+			let a = await n.commitBatch(u);
 			if (a.error) {
-				x(a.error);
+				T(a.error);
 				return;
 			}
 			t();
 		} finally {
-			ce(!1);
+			D(!1);
 		}
 	};
-	return /* @__PURE__ */ S(ie, {
+	return /* @__PURE__ */ F(k, {
 		open: e,
-		header: O ? u.uploadArchiveDialogTitle ?? "Upload archive from device" : u.uploadDialogTitle ?? "Upload files from device",
-		size: ae.Sm,
-		closeAriaLabel: u.uploadDialogCloseAriaLabel ?? "Close",
+		header: N ? l.uploadArchiveDialogTitle ?? "Upload archive from device" : l.uploadDialogTitle ?? "Upload files from device",
+		size: ee.Sm,
+		closeAriaLabel: l.uploadDialogCloseAriaLabel ?? "Close",
 		onClose: t,
 		mainButtons: [{
-			label: u.uploadCancelLabel ?? "Cancel",
-			variant: d.Primary,
-			appearance: l.Ghost,
+			label: l.uploadCancelLabel ?? "Cancel",
+			variant: m.Primary,
+			appearance: f.Ghost,
 			onClick: t
 		}, {
-			label: u.uploadConfirmLabel ?? "Add",
-			variant: d.Primary,
-			iconBefore: w ? /* @__PURE__ */ S(b, {
+			label: l.uploadConfirmLabel ?? "Add",
+			variant: m.Primary,
+			iconBefore: E ? /* @__PURE__ */ F(ne, {
 				size: 16,
 				ariaLabel: ""
 			}) : void 0,
-			onClick: () => void I(),
-			disabled: !ve
+			onClick: () => void fe(),
+			disabled: !R
 		}],
-		children: /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ I("div", {
 			className: "flex flex-col gap-4 px-6 py-4",
 			children: [
-				/* @__PURE__ */ S(v, {
-					label: /* @__PURE__ */ C(se, { children: [/* @__PURE__ */ S("span", {
+				/* @__PURE__ */ F(S, {
+					label: /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F("span", {
 						className: "desktop:hidden",
-						children: O ? u.uploadArchiveDropZoneMobileLabel ?? "Click here to upload a .zip archive" : u.uploadDropZoneMobileLabel ?? "Click here to upload"
-					}), /* @__PURE__ */ S("span", {
+						children: N ? l.uploadArchiveDropZoneMobileLabel ?? "Click here to upload a .zip archive" : l.uploadDropZoneMobileLabel ?? "Click here to upload"
+					}), /* @__PURE__ */ F("span", {
 						className: "hidden desktop:inline",
-						children: O ? u.uploadArchiveDropZoneLabel ?? "Drag and drop a .zip archive or click here to upload" : u.uploadDropZoneLabel ?? "Drag and drop it or click here to upload"
+						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"
 					})] }),
-					ariaLabel: u.uploadDropZoneAriaLabel ?? "Upload files",
+					ariaLabel: l.uploadDropZoneAriaLabel ?? "Upload files",
 					multiple: !0,
-					accept: O ? je : void 0,
-					className: _e ? "border-error hover:border-error" : void 0,
-					onChange: N,
-					onReject: O ? () => E(k) : void 0
+					accept: N ? nt : void 0,
+					className: de ? "border-error hover:border-error" : void 0,
+					onChange: se,
+					onReject: N ? () => A(L) : void 0
 				}),
-				ue > 0 && /* @__PURE__ */ S(b, { ariaLabel: u.uploadArchiveExtractingAriaLabel ?? "Reading archive" }),
-				/* @__PURE__ */ S("div", {
+				te > 0 && /* @__PURE__ */ F(ne, { ariaLabel: l.uploadArchiveExtractingAriaLabel ?? "Reading archive" }),
+				/* @__PURE__ */ F("div", {
 					role: "alert",
-					children: le && /* @__PURE__ */ S(_, { text: le })
+					children: O && /* @__PURE__ */ F(x, { text: O })
 				}),
-				/* @__PURE__ */ S("span", {
+				/* @__PURE__ */ F("span", {
 					role: "status",
 					"aria-live": "polite",
 					className: "sr-only",
-					id: A,
-					children: y.map((e) => `${u.uploadBatchErrorAriaPrefix ?? "Upload error: "}${e}`).join(" ")
+					id: re,
+					children: g.map((e) => `${l.uploadBatchErrorAriaPrefix ?? "Upload error: "}${e}`).join(" ")
 				}),
-				y.map((e) => /* @__PURE__ */ S(_, { text: e }, e)),
-				f.length > 0 && /* @__PURE__ */ S("ul", {
+				g.map((e) => /* @__PURE__ */ F(x, { text: e }, e)),
+				u.length > 0 && /* @__PURE__ */ F("ul", {
 					className: "flex flex-col gap-2",
-					children: f.map((e) => {
-						let t = h.get(e.id), n = t?.kind === ke.Manifest, r = t?.status === W.Invalid;
-						return /* @__PURE__ */ C("li", {
+					children: u.map((e) => {
+						let t = p.get(e.id), n = t?.kind === $e.Manifest, r = t?.status === et.Invalid;
+						return /* @__PURE__ */ I("li", {
 							className: "flex items-center gap-2 rounded-lg border border-tertiary p-2",
 							children: [
-								/* @__PURE__ */ S(T, {
+								/* @__PURE__ */ F(ie, {
 									size: 20,
 									"aria-hidden": !0,
-									stroke: m
+									stroke: _
 								}),
-								/* @__PURE__ */ C("div", {
+								/* @__PURE__ */ I("div", {
 									className: "flex min-w-0 flex-1 flex-col",
 									children: [
-										/* @__PURE__ */ S("span", {
+										/* @__PURE__ */ F("span", {
 											className: "dial-small-text truncate",
 											children: e.path
 										}),
-										/* @__PURE__ */ S("span", {
+										/* @__PURE__ */ F("span", {
 											className: "dial-tiny-text text-secondary",
-											children: i(e.file.size)
+											children: s(e.file.size)
 										}),
-										r && t?.error && /* @__PURE__ */ S(_, { text: t.error }),
-										n && !r && /* @__PURE__ */ S("span", {
+										r && t?.error && /* @__PURE__ */ F(x, { text: t.error }),
+										n && !r && /* @__PURE__ */ F("span", {
 											className: "dial-tiny-text text-secondary",
-											children: u.uploadManifestRowNote ?? "Will replace this Skill's name, description, and instructions"
+											children: l.uploadManifestRowNote ?? "Will replace this Skill's name, description, and instructions"
 										})
 									]
 								}),
-								/* @__PURE__ */ S(ee, {
-									icon: /* @__PURE__ */ S(de, {
+								/* @__PURE__ */ F(w, {
+									icon: /* @__PURE__ */ F(le, {
 										size: 16,
 										"aria-hidden": !0,
-										stroke: m
+										stroke: _
 									}),
-									"aria-label": u.uploadRemoveCandidateLabel?.(e.path) ?? `Remove ${e.path}`,
-									onClick: () => P(e.id)
+									"aria-label": l.uploadRemoveCandidateLabel?.(e.path) ?? `Remove ${e.path}`,
+									onClick: () => ce(e.id)
 								})
 							]
 						}, e.id);
 					})
 				}),
-				oe && /* @__PURE__ */ S(_, { text: oe })
+				C && /* @__PURE__ */ F(x, { text: C })
 			]
 		})
 	});
-}, G = {
+}, ot = {
 	title: "_title_1cnn4_1",
 	helperText: "_helperText_1cnn4_5",
 	refineFeedback: "_refineFeedback_1cnn4_9",
 	refineError: "_refineError_1cnn4_13"
-}, Ie = {
-	mode: H.Files,
+}, st = {
+	mode: Ze.Files,
 	targetFolderPath: ""
-}, Le = O(async () => {
-	let { MarkdownEditor: e } = await N();
+}, ct = [U.Name, U.Description], lt = 24, ut = 300, dt = "desktop:px-8 desktop:py-6", ft = "gap-4 px-4 py-6 desktop:gap-5 desktop:px-8 desktop:py-6", pt = R(async () => {
+	let { MarkdownEditor: e } = await _e();
 	return { default: e };
-}), Re = ({ initialValues: i, files: v, selectedPath: ee, onSelectedPathChange: ie, expandedPaths: ae, onExpandedPathsChange: w, isLoading: T = !1, hasLoadError: O = !1, isSubmitting: N = !1, errors: P, submitError: F, conflict: z, onReloadLatest: ye, isNameReadOnly: B = !1, onDirtyChange: xe, onValuesChange: Ce, onRefineDescription: we, onRefineInstructions: Te, fileActions: V, supportingFileContent: ke, onSubmit: W, onCancel: Ae, onBack: je, backAriaLabel: Me, title: Ne, onRetry: Pe, onRetrySubmit: Re, labels: ze, styles: Be, dir: Ve, instructionsEditorTheme: He = h.light }) => {
-	let [K, Ue] = M({
-		name: i?.name ?? "",
-		description: i?.description ?? "",
-		instructions: i?.instructions ?? ""
-	}), We = me(), Ge = me(), q = j(void 0), Ke = o(), qe = j(K), Je = (e) => {
+}), mt = ({ initialValues: r, files: i, selectedPath: s, onSelectedPathChange: v, expandedPaths: S, onExpandedPathsChange: w, 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, onSubmit: _e, onCancel: ve, onBack: ye, backAriaLabel: be, title: xe, onRetry: Se, onRetrySubmit: Ce, labels: we, styles: Te, dir: U, instructionsEditorTheme: Ee = y.light }) => {
+	let [W, De] = H({
+		name: r?.name ?? "",
+		description: r?.description ?? "",
+		instructions: r?.instructions ?? ""
+	}), Oe = me(), G = V(void 0), ke = l({
+		bottomGap: lt,
+		minHeight: ut
+	}), Ae = V(W), je = (e) => {
 		let t = {
-			...qe.current,
+			...Ae.current,
 			...e
 		};
-		qe.current = t, Ue(t), Ce?.(t);
-	}, Ye = (e) => e ? async (t, n) => {
-		if (q.current && !q.current.aborted) throw new DOMException("Busy", "AbortError");
-		q.current = n;
+		Ae.current = t, De(t), L?.(t);
+	}, Me = (e) => e ? async (t, n) => {
+		if (G.current && !G.current.aborted) throw new DOMException("Busy", "AbortError");
+		G.current = n;
 		try {
 			return await e(t, n);
 		} finally {
-			q.current === n && (q.current = void 0);
+			G.current === n && (G.current = void 0);
 		}
-	} : void 0, Xe = s({
-		value: K.description,
-		onChange: (e) => Je({ description: e }),
-		onRefine: Ye(we),
-		disabled: N || T || O,
-		resetKey: i
-	}), Ze = s({
-		value: K.instructions,
-		onChange: (e) => Je({ instructions: e }),
-		onRefine: Ye(Te),
-		disabled: N || T || O,
-		resetKey: i
-	}), Qe = Xe.isPending || Ze.isPending, $e = () => {
-		Xe.reset(), Ze.reset();
-	}, et = () => {
-		$e(), Ae();
-	}, tt = () => {
-		$e(), je();
-	}, nt = () => {
-		N || T || O || q.current && !q.current.aborted || W(K);
-	}, rt = j(i), it = rt.current !== i, at = j(v);
+	} : void 0, Fe = u({
+		value: W.description,
+		onChange: (e) => je({ description: e }),
+		onRefine: Me(ie),
+		disabled: O || T || D,
+		resetKey: r
+	}), Le = u({
+		value: W.instructions,
+		onChange: (e) => je({ instructions: e }),
+		onRefine: Me(se),
+		disabled: O || T || D,
+		resetKey: r
+	}), J = Fe.isPending || Le.isPending, Be = () => {
+		Fe.reset(), Le.reset();
+	}, He = () => {
+		Be(), ve();
+	}, Ue = () => {
+		Be(), ye();
+	}, Ge = () => {
+		O || T || D || G.current && !G.current.aborted || _e(W);
+	}, Ke = V(r), qe = Ke.current !== r, Ye = V(i);
 	pe(() => {
-		rt.current = i;
+		Ke.current = r;
 		let e = {
-			name: i?.name ?? "",
-			description: i?.description ?? "",
-			instructions: i?.instructions ?? ""
+			name: r?.name ?? "",
+			description: r?.description ?? "",
+			instructions: r?.instructions ?? ""
 		};
-		qe.current = e, Ue(e), at.current = v;
-	}, [i]);
-	let ot = (e) => JSON.stringify([...e].sort((e, t) => e.path.localeCompare(t.path))), st = j(!1);
+		Ae.current = e, De(e), Ye.current = i;
+	}, [r]);
+	let $e = (e) => JSON.stringify([...e].sort((e, t) => e.path.localeCompare(t.path))), et = V(!1);
 	pe(() => {
-		if (it) return;
+		if (qe) return;
 		let e = {
-			name: i?.name ?? "",
-			description: i?.description ?? "",
-			instructions: i?.instructions ?? ""
-		}, t = JSON.stringify(K) !== JSON.stringify(e) || ot(v) !== ot(at.current);
-		t !== st.current && (st.current = t, xe?.(t));
+			name: r?.name ?? "",
+			description: r?.description ?? "",
+			instructions: r?.instructions ?? ""
+		}, t = JSON.stringify(W) !== JSON.stringify(e) || $e(i) !== $e(Ye.current);
+		t !== et.current && (et.current = t, N?.(t));
 	}, [
-		K,
-		v,
+		W,
 		i,
-		it,
-		xe
+		r,
+		qe,
+		N
 	]);
-	let [ct, lt] = M(I), J = ee ?? ct, ut = k((e) => {
-		lt(e), ie?.(e);
-	}, [ie]), [dt, ft] = M([]), pt = ae ?? dt, mt = A(() => new Set(pt), [pt]), ht = k((e) => {
+	let [tt, nt] = H(K), X = s ?? tt, rt = z((e) => {
+		nt(e), v?.(e);
+	}, [v]), [it, mt] = H([]), ht = S ?? it, gt = B(() => new Set(ht), [ht]), _t = z((e) => {
 		let t = [...e];
-		ft(t), w?.(t);
-	}, [w]), [gt, _t] = M(!1), [vt, yt] = M(Ie), Y = k((e) => {
-		yt(e), _t(!0);
-	}, []), [bt, xt] = M(!1), { isDragActive: St, dropZoneHandlers: Ct } = De(k((e) => {
-		gt || Y({
-			...Ie,
+		mt(t), w?.(t);
+	}, [w]), [vt, yt] = H(!1), [bt, xt] = H(st), Z = z((e) => {
+		xt(e), yt(!0);
+	}, []), [St, Ct] = H(!1), { isDragActive: wt, dropZoneHandlers: Tt } = Xe(z((e) => {
+		vt || Z({
+			...st,
 			initialFiles: e
 		});
-	}, [gt, Y])), X = ze ?? {}, Z = Be?.colors, wt = Be?.typography ?? {}, Tt = wt.titleClassName ?? "dial-body-semi-text", Et = wt.helperTextClassName ?? "dial-tiny-semi-text", Dt = wt.removeIconClassName ?? "text-secondary", Ot = wt.menuIconClassName ?? "text-secondary", kt = r({
-		"--se-title-color": Z?.title,
-		"--se-helper-text-color": Z?.helperText,
-		"--se-refine-action-text": Z?.refineActionText,
-		"--se-refine-error-text": Z?.refineErrorText
-	}), At = {
-		feedbackClassName: a(G.refineFeedback, wt.refineFeedbackClassName ?? "dial-small-text", ve.refineFeedback),
-		errorClassName: G.refineError
-	}, jt = Z?.border ? { colors: {
-		headerBorderColor: Z.border,
-		sidebarBorderColor: Z.border
-	} } : void 0, Mt = A(() => ({
-		required: X.folderNameRequiredError ?? "Enter a folder name",
-		invalid: X.folderNameInvalidError ?? "Folder name can't contain / or \\, or be . or ..",
-		duplicate: X.folderNameDuplicateError ?? "An item with this name already exists here"
+	}, [vt, Z])), Q = we ?? {}, $ = Te?.colors, Et = Te?.typography ?? {}, Dt = Et.titleClassName ?? "dial-body-semi-text", Ot = Et.helperTextClassName ?? "dial-tiny-semi-text", kt = Et.removeIconClassName ?? "text-secondary", At = Et.menuIconClassName ?? "text-secondary", jt = o({
+		"--se-title-color": $?.title,
+		"--se-helper-text-color": $?.helperText,
+		"--se-refine-action-text": $?.refineActionText,
+		"--se-refine-error-text": $?.refineErrorText
+	}), Mt = {
+		feedbackClassName: c(ot.refineFeedback, Et.refineFeedbackClassName ?? "dial-small-text", Re.refineFeedback),
+		errorClassName: ot.refineError
+	}, Nt = {
+		layout: $?.border ? { colors: {
+			headerBorderColor: $.border,
+			sidebarBorderColor: $.border
+		} } : void 0,
+		section: $?.title ? { colors: { titleColor: $.title } } : void 0
+	}, Pt = 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"
 	}), [
-		X.folderNameRequiredError,
-		X.folderNameInvalidError,
-		X.folderNameDuplicateError
-	]), Nt = k((e) => {
-		mt.has(e) || ht(new Set([...mt, e]));
-	}, [mt, ht]), Q = Ee({
-		files: v,
-		fileActions: V,
-		defaultName: X.newFolderDefaultName ?? "New folder",
-		messages: Mt,
-		onRevealFolder: Nt,
-		onCreated: ut
-	}), { draftNode: Pt, draftPath: Ft, draftPane: It } = Q, Lt = A(() => be([{
-		path: I,
-		name: I,
-		kind: L.File
-	}, ...v]), [v]), Rt = A(() => Pt ? be([
+		Q.folderNameRequiredError,
+		Q.folderNameInvalidError,
+		Q.folderNameDuplicateError
+	]), Ft = z((e) => {
+		gt.has(e) || _t(new Set([...gt, e]));
+	}, [gt, _t]), It = Je({
+		files: i,
+		fileActions: R,
+		defaultName: Q.newFolderDefaultName ?? "New folder",
+		messages: Pt,
+		onRevealFolder: Ft,
+		onCreated: rt
+	}), { draftNode: Lt, draftPath: Rt, draftPane: zt } = It, Bt = B(() => Ve([{
+		path: K,
+		name: K,
+		kind: q.File
+	}, ...i]), [i]), Vt = B(() => Lt ? Ve([
 		{
-			path: I,
-			name: I,
-			kind: L.File
+			path: K,
+			name: K,
+			kind: q.File
 		},
-		...v,
-		Pt
-	]) : Lt, [
-		v,
-		Pt,
+		...i,
 		Lt
-	]), zt = A(() => v.find((e) => e.path === J), [v, J]), Bt = k((e) => {
-		e.path !== Ft && ut(e.path);
-	}, [ut, Ft]), Vt = k((e) => {
-		V.onRemoveNode(e), J === e && ut(I);
+	]) : Bt, [
+		i,
+		Lt,
+		Bt
+	]), Ht = B(() => i.find((e) => e.path === X), [i, X]), Ut = z((e) => {
+		e.path !== Rt && rt(e.path);
+	}, [rt, Rt]), Wt = z((e) => {
+		R.onRemoveNode(e), X === e && rt(K);
 	}, [
-		V,
-		J,
-		ut
-	]), { startDraft: Ht } = Q, { onCreateFolder: Ut, extractArchive: Wt, pickFromFileSystem: Gt } = V, Kt = k(async (e) => {
-		if (!Gt) return;
-		let t = await Gt();
-		t?.length && Y({
-			mode: H.Files,
+		R,
+		X,
+		rt
+	]), { startDraft: Gt } = It, { onCreateFolder: Kt, extractArchive: qt, pickFromFileSystem: Jt } = R, Yt = z(async (e) => {
+		if (!Jt) return;
+		let t = await Jt();
+		t?.length && Z({
+			mode: Ze.Files,
 			targetFolderPath: e,
 			initialEntries: t
 		});
-	}, [Gt, Y]), $ = k((e, t) => {
-		let n = (e) => /* @__PURE__ */ S(e, {
-			size: p.SM,
-			className: Ot,
+	}, [Jt, Z]), Xt = z((e, t) => {
+		let n = (e) => /* @__PURE__ */ F(e, {
+			size: g.SM,
+			className: At,
 			"aria-hidden": !0,
-			stroke: m
+			stroke: _
 		}), r = [];
-		return Ut && r.push({
+		return Kt && r.push({
 			key: "create-folder",
-			label: X.createFolderLabel ?? "Create folder",
-			icon: n(E),
-			onClick: () => Ht(e, t)
+			label: Q.createFolderLabel ?? "Create folder",
+			icon: n(oe),
+			onClick: () => Gt(e, t)
 		}), r.push({
 			key: "upload-files",
-			label: X.uploadFilesLabel ?? X.addUploadLabel ?? "Upload files from device",
-			icon: n(fe),
-			onClick: () => Y({
-				mode: H.Files,
+			label: Q.uploadFilesLabel ?? Q.addUploadLabel ?? "Upload files from device",
+			icon: n(ue),
+			onClick: () => Z({
+				mode: Ze.Files,
 				targetFolderPath: e
 			})
-		}), Wt && r.push({
+		}), qt && r.push({
 			key: "upload-archive",
-			label: X.uploadArchiveLabel ?? "Upload archive from device",
-			icon: n(le),
-			onClick: () => Y({
-				mode: H.Archive,
+			label: Q.uploadArchiveLabel ?? "Upload archive from device",
+			icon: n(ae),
+			onClick: () => Z({
+				mode: Ze.Archive,
 				targetFolderPath: e
 			})
-		}), Gt && r.push({
+		}), Jt && r.push({
 			key: "open-file-system",
-			label: X.openFileSystemLabel ?? "Open DIAL file system",
-			icon: n(ce),
-			onClick: () => void Kt(e)
+			label: Q.openFileSystemLabel ?? "Open DIAL file system",
+			icon: n(re),
+			onClick: () => void Yt(e)
 		}), r;
 	}, [
-		Ot,
-		Ut,
-		Wt,
+		At,
+		Kt,
+		qt,
+		Jt,
+		Q.createFolderLabel,
+		Q.uploadFilesLabel,
+		Q.addUploadLabel,
+		Q.uploadArchiveLabel,
+		Q.openFileSystemLabel,
 		Gt,
-		X.createFolderLabel,
-		X.uploadFilesLabel,
-		X.addUploadLabel,
-		X.uploadArchiveLabel,
-		X.openFileSystemLabel,
-		Ht,
-		Y,
-		Kt
-	]), qt = A(() => {
-		let e = Se(R.Header, v.find((e) => e.path === J));
+		Z,
+		Yt
+	]), Zt = B(() => {
+		let e = We(ze.Header, i.find((e) => e.path === X));
 		return {
-			[U.Mobile]: $(e, U.Mobile),
-			[U.Desktop]: $(e, U.Desktop)
+			[Y.Mobile]: Xt(e, Y.Mobile),
+			[Y.Desktop]: Xt(e, Y.Desktop)
 		};
 	}, [
-		$,
-		v,
-		J
-	]), Jt = k((e, t) => {
-		if (e.path === "SKILL.md" || e.path === Ft) return [];
+		Xt,
+		i,
+		X
+	]), Qt = z((e, t) => {
+		if (e.path === "SKILL.md" || e.path === Rt) return [];
 		let n = {
 			path: e.path,
 			name: e.name,
-			kind: e.nodeType === he.FOLDER ? L.Folder : L.File
+			kind: e.nodeType === he.FOLDER ? q.Folder : q.File
 		}, r = [];
-		return n.kind === L.Folder && r.push({
+		return n.kind === q.Folder && r.push({
 			key: "add-child",
-			label: X.addChildLabel ?? "Add child",
-			children: $(Se(R.Child, n), t)
+			label: Q.addChildLabel ?? "Add child",
+			children: Xt(We(ze.Child, n), t)
 		}), r.push({
 			key: "add-sibling",
-			label: X.addSiblingLabel ?? "Add sibling",
-			children: $(Se(R.Sibling, n), t)
+			label: Q.addSiblingLabel ?? "Add sibling",
+			children: Xt(We(ze.Sibling, n), t)
 		}, {
 			key: "delete",
-			label: X.deleteLabel ?? X.removeLabel ?? "Delete",
-			icon: /* @__PURE__ */ S(de, {
-				size: p.SM,
-				className: Dt,
+			label: Q.deleteLabel ?? Q.removeLabel ?? "Delete",
+			icon: /* @__PURE__ */ F(le, {
+				size: g.SM,
+				className: kt,
 				"aria-hidden": !0,
-				stroke: m
+				stroke: _
 			}),
-			onClick: () => Vt(e.path)
+			onClick: () => Wt(e.path)
 		}), r;
 	}, [
-		Ft,
-		X.addChildLabel,
-		X.addSiblingLabel,
-		X.deleteLabel,
-		X.removeLabel,
-		Dt,
-		$,
-		Vt
-	]), Yt = A(() => ({
-		[U.Mobile]: (e) => Jt(e, U.Mobile),
-		[U.Desktop]: (e) => Jt(e, U.Desktop)
-	}), [Jt]), Xt = (e) => /* @__PURE__ */ C("div", {
+		Rt,
+		Q.addChildLabel,
+		Q.addSiblingLabel,
+		Q.deleteLabel,
+		Q.removeLabel,
+		kt,
+		Xt,
+		Wt
+	]), $t = B(() => ({
+		[Y.Mobile]: (e) => Qt(e, Y.Mobile),
+		[Y.Desktop]: (e) => Qt(e, Y.Desktop)
+	}), [Qt]), en = (e) => /* @__PURE__ */ I("div", {
 		className: "flex flex-col gap-2 desktop:gap-5",
-		children: [/* @__PURE__ */ C("div", {
+		children: [/* @__PURE__ */ I("div", {
 			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ S("span", {
-				className: a(G.title, Tt),
-				children: X.filesHeading ?? "Files"
-			}), /* @__PURE__ */ S(u, {
-				label: X.addLabel ?? "Add",
-				variant: d.Neutral,
-				appearance: l.Solid,
-				size: g.Small,
-				iconBefore: /* @__PURE__ */ S(ue, {
-					size: p.SM,
+			children: [/* @__PURE__ */ F("span", {
+				className: c(ot.title, Dt),
+				children: Q.filesHeading ?? "Files"
+			}), /* @__PURE__ */ F(p, {
+				label: Q.addLabel ?? "Add",
+				variant: m.Neutral,
+				appearance: f.Solid,
+				size: b.Small,
+				iconBefore: /* @__PURE__ */ F(ce, {
+					size: g.SM,
 					"aria-hidden": !0,
-					stroke: m
+					stroke: _
 				}),
-				items: qt[e]
+				items: Zt[e]
 			})]
-		}), /* @__PURE__ */ S("div", {
+		}), /* @__PURE__ */ F("div", {
 			role: "tree",
-			"aria-label": X.filesTreeAriaLabel ?? "Skill files",
-			children: /* @__PURE__ */ S(ge, {
-				items: It === e ? Rt : Lt,
+			"aria-label": Q.filesTreeAriaLabel ?? "Skill files",
+			children: /* @__PURE__ */ F(ge, {
+				items: zt === e ? Vt : Bt,
 				showFiles: !0,
-				selectedPath: J,
-				expandedPaths: mt,
-				onExpandedPathsChange: ht,
-				onItemClick: Bt,
-				getContextMenuItems: Yt[e],
-				renamedPath: It === e ? Ft : void 0,
-				onRenameSave: Q.handleSave,
-				onRenameCancel: Q.handleCancel,
-				onRenameValidate: Q.handleValidate,
+				selectedPath: X,
+				expandedPaths: gt,
+				onExpandedPathsChange: _t,
+				onItemClick: Ut,
+				getContextMenuItems: $t[e],
+				renamedPath: zt === e ? Rt : void 0,
+				onRenameSave: It.handleSave,
+				onRenameCancel: It.handleCancel,
+				onRenameValidate: It.handleValidate,
 				rootItemPath: ""
 			})
 		})]
-	}), Zt = /* @__PURE__ */ C(se, { children: [/* @__PURE__ */ S(re, {
-		label: X.cancelLabel ?? "Cancel",
-		onClick: et,
-		disabled: N
-	}), /* @__PURE__ */ S(oe, {
-		label: X.createLabel ?? "Create",
-		iconBefore: N ? /* @__PURE__ */ S(b, {
-			size: 16,
-			ariaLabel: ""
-		}) : void 0,
-		onClick: nt,
-		disabled: N || Qe || T || O
-	})] });
-	return T ? /* @__PURE__ */ S("div", {
-		dir: Ve,
+	}), tn = B(() => ({
+		name: W.name,
+		description: W.description,
+		iconUrl: "",
+		version: "",
+		topics: [],
+		otherLocales: []
+	}), [W.name, W.description]), nn = B(() => ({
+		name: k?.name,
+		description: k?.description
+	}), [k?.name, k?.description]), rn = B(() => ({ form: {
+		...Pe,
+		name: {
+			label: Q.nameLabel ?? "Name",
+			placeholder: Q.namePlaceholder ?? "good-morning-breakfast"
+		},
+		description: {
+			label: Q.descriptionLabel ?? "Description",
+			placeholder: Q.descriptionPlaceholder ?? "What this skill does and when to use it"
+		},
+		ariaLabel: void 0
+	} }), [
+		Q.nameLabel,
+		Q.namePlaceholder,
+		Q.descriptionLabel,
+		Q.descriptionPlaceholder
+	]), an = (e) => {
+		e.name !== void 0 && je({ name: e.name }), e.description !== void 0 && (Fe.reset(), je({ description: e.description }));
+	}, on = ie ? (e, t) => /* @__PURE__ */ F(a, {
+		isEnabled: !0,
+		fieldId: t,
+		required: !0,
+		label: Q.descriptionLabel ?? "Description",
+		labels: Q,
+		refinement: Fe,
+		disabled: J || O,
+		...Mt,
+		children: e
+	}) : void 0, sn = {
+		title: xe,
+		onBack: Ue,
+		onCancel: He,
+		onSubmit: Ge,
+		submitLabel: Q.createLabel ?? "Create",
+		isSubmitDisabled: J || T || D,
+		labels: {
+			cancelLabel: Q.cancelLabel ?? "Cancel",
+			backAriaLabel: be ?? "Back",
+			savingStatusLabel: Q.savingStatusLabel ?? "Saving"
+		},
+		styles: Nt,
+		metadataTitle: null
+	};
+	if (T) return /* @__PURE__ */ F("div", {
+		dir: U,
 		className: "relative flex min-h-0 flex-1 flex-col",
-		children: /* @__PURE__ */ S(_e, {
-			title: Ne,
-			onBack: tt,
-			backAriaLabel: Me,
-			actions: Zt,
-			isSaving: !1,
-			labels: { savingStatusLabel: X.savingStatusLabel },
-			styles: jt,
-			leftContent: /* @__PURE__ */ S("div", {
+		children: /* @__PURE__ */ F(Ne, {
+			...sn,
+			metadata: /* @__PURE__ */ F("div", {
 				role: "status",
-				"aria-label": X.loadingAriaLabel ?? "Loading skill",
+				"aria-label": Q.loadingAriaLabel ?? "Loading skill",
 				className: "flex flex-1 items-center justify-center p-8",
-				children: /* @__PURE__ */ S(b, {})
+				children: /* @__PURE__ */ F(ne, {})
 			})
 		})
-	}) : O ? /* @__PURE__ */ S("div", {
-		dir: Ve,
+	});
+	if (D) return /* @__PURE__ */ F("div", {
+		dir: U,
 		className: "relative flex min-h-0 flex-1 flex-col",
-		children: /* @__PURE__ */ S(_e, {
-			title: Ne,
-			onBack: tt,
-			backAriaLabel: Me,
-			actions: Zt,
-			isSaving: !1,
-			labels: { savingStatusLabel: X.savingStatusLabel },
-			styles: jt,
-			leftContent: /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ F(Ne, {
+			...sn,
+			metadata: /* @__PURE__ */ I("div", {
 				role: "alert",
 				className: "flex flex-col items-center gap-4 p-8",
-				children: [/* @__PURE__ */ S(_, { text: X.loadErrorMessage ?? "Couldn't load this skill. Please try again." }), /* @__PURE__ */ S(oe, {
-					label: X.retryLabel ?? "Retry",
-					onClick: Pe
+				children: [/* @__PURE__ */ F(x, { text: Q.loadErrorMessage ?? "Couldn't load this skill. Please try again." }), /* @__PURE__ */ F(A, {
+					label: Q.retryLabel ?? "Retry",
+					onClick: Se
 				})]
 			})
 		})
-	}) : /* @__PURE__ */ C("div", {
-		dir: Ve,
-		className: a("relative flex min-h-0 flex-1 flex-col", ve.root),
-		style: kt,
-		...Ct,
+	});
+	let cn = X === K, ln = cn ? K : Q.selectedFileHeading?.(Ht?.name ?? X) ?? Ht?.name ?? X, un = ee != null || te != null ? /* @__PURE__ */ I("div", {
+		className: "flex flex-col gap-2",
+		children: [ee != null && /* @__PURE__ */ I("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ F(x, { text: ee }), Ce != null && /* @__PURE__ */ F(C, {
+				label: Q.retryLabel ?? "Retry",
+				onClick: Ce
+			})]
+		}), te != null && /* @__PURE__ */ I("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ F(x, { text: te.message }), /* @__PURE__ */ F(C, {
+				label: Q.reloadLatestLabel ?? "Reload latest",
+				onClick: j
+			})]
+		})]
+	}) : void 0, dn = /* @__PURE__ */ F(a, {
+		isEnabled: !!se,
+		fieldId: Oe,
+		required: !0,
+		labelClassName: c(ot.helperText, Ot),
+		label: Q.instructionsLabel ?? "Instructions",
+		labels: Q,
+		refinement: Le,
+		disabled: J || O,
+		...Mt,
+		children: /* @__PURE__ */ I("div", {
+			className: "flex flex-1 flex-col gap-2",
+			children: [
+				!se && /* @__PURE__ */ F(E, {
+					htmlFor: Oe,
+					className: c(ot.helperText, Ot),
+					label: Q.instructionsLabel ?? "Instructions",
+					required: !0
+				}),
+				/* @__PURE__ */ F("div", {
+					ref: ke,
+					className: c(t, e, n),
+					children: /* @__PURE__ */ F(de, {
+						fallback: /* @__PURE__ */ F(ne, { ariaLabel: Q.instructionsLoadingAriaLabel ?? "Loading" }),
+						children: /* @__PURE__ */ F(pt, {
+							id: Oe,
+							ariaLabel: Q.instructionsLabel ?? "Instructions",
+							value: W.instructions,
+							onChange: (e) => {
+								Le.reset(), je({ instructions: e });
+							},
+							theme: Ee,
+							placeholder: Q.instructionsPlaceholder ?? "Write the skill instructions in Markdown"
+						})
+					})
+				}),
+				k?.instructions != null && /* @__PURE__ */ F(x, { text: k.instructions })
+			]
+		})
+	});
+	return /* @__PURE__ */ I("div", {
+		dir: U,
+		className: c("relative flex min-h-0 flex-1 flex-col", Re.root),
+		style: jt,
+		...Tt,
 		children: [
-			/* @__PURE__ */ S(Oe, {
-				isVisible: St && !gt,
-				labels: ze
+			/* @__PURE__ */ F(Qe, {
+				isVisible: wt && !vt,
+				labels: we
 			}),
-			/* @__PURE__ */ S(_e, {
-				title: Ne,
-				onBack: tt,
-				backAriaLabel: Me,
-				actions: Zt,
-				isSaving: N,
-				labels: { savingStatusLabel: X.savingStatusLabel },
-				styles: jt,
-				leftContent: /* @__PURE__ */ C(se, { children: [/* @__PURE__ */ S("div", {
-					className: "px-4 py-4 desktop:hidden",
-					children: /* @__PURE__ */ S(c, {
-						title: X.editingFileLabel ?? "Editing file",
-						description: zt?.name ?? "SKILL.md",
-						expanded: bt,
-						onToggle: xt,
-						ariaLabel: X.editingFileLabel ?? "Editing file",
-						children: Xt(U.Mobile)
+			/* @__PURE__ */ F(Ne, {
+				...sn,
+				isSubmitting: O,
+				metadataSectionClassName: dt,
+				metadata: /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F("div", {
+					className: "desktop:hidden",
+					children: /* @__PURE__ */ F(d, {
+						title: Q.editingFileLabel ?? "Editing file",
+						description: Ht?.name ?? "SKILL.md",
+						expanded: St,
+						onToggle: Ct,
+						ariaLabel: Q.editingFileLabel ?? "Editing file",
+						children: en(Y.Mobile)
 					})
-				}), /* @__PURE__ */ S("div", {
-					className: "hidden px-8 py-6 desktop:block",
-					children: Xt(U.Desktop)
+				}), /* @__PURE__ */ F("div", {
+					className: "hidden desktop:block",
+					children: en(Y.Desktop)
 				})] }),
-				rightContent: /* @__PURE__ */ C("div", {
-					className: "flex flex-1 flex-col gap-4 px-4 py-6 desktop:gap-5 desktop:px-8",
-					children: [
-						F != null && /* @__PURE__ */ C("div", {
-							role: "alert",
-							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ S(_, { text: F }), Re != null && /* @__PURE__ */ S(y, {
-								label: X.retryLabel ?? "Retry",
-								onClick: Re
-							})]
-						}),
-						z != null && /* @__PURE__ */ C("div", {
-							role: "alert",
-							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ S(_, { text: z.message }), /* @__PURE__ */ S(y, {
-								label: X.reloadLatestLabel ?? "Reload latest",
-								onClick: ye
-							})]
-						}),
-						/* @__PURE__ */ S("h2", {
-							className: a(G.title, Tt),
-							children: J === "SKILL.md" ? I : X.selectedFileHeading?.(zt?.name ?? J) ?? zt?.name ?? J
-						}),
-						J === "SKILL.md" ? /* @__PURE__ */ C(se, { children: [
-							/* @__PURE__ */ S(te, {
-								labelProps: {
-									label: X.nameLabel ?? "Name",
-									required: !0
-								},
-								value: K.name,
-								onChange: (e) => Je({ name: e ?? "" }),
-								placeholder: X.namePlaceholder ?? "good-morning-breakfast",
-								caption: P?.name ? void 0 : X.nameCaption ?? "Lowercase letters and hyphens only, no spaces. We'll reformat automatically if needed.",
-								error: P?.name,
-								invalid: !!P?.name,
-								disabled: B
-							}),
-							/* @__PURE__ */ S(n, {
-								isEnabled: !!we,
-								fieldId: We,
-								required: !0,
-								label: X.descriptionLabel ?? "Description",
-								labels: X,
-								refinement: Xe,
-								disabled: Qe || N,
-								...At,
-								children: /* @__PURE__ */ S(x, {
-									id: We,
-									"aria-required": !0,
-									labelProps: we ? void 0 : {
-										label: X.descriptionLabel ?? "Description",
-										required: !0
-									},
-									value: K.description,
-									placeholder: X.descriptionPlaceholder ?? "What this skill does and when to use it",
-									onChange: (e) => {
-										Xe.reset(), Je({ description: e });
-									},
-									error: P?.description,
-									invalid: !!P?.description
-								})
-							}),
-							/* @__PURE__ */ S(n, {
-								isEnabled: !!Te,
-								fieldId: Ge,
-								required: !0,
-								labelClassName: a(G.helperText, Et),
-								label: X.instructionsLabel ?? "Instructions",
-								labels: X,
-								refinement: Ze,
-								disabled: Qe || N,
-								...At,
-								children: /* @__PURE__ */ C("div", {
-									className: "flex flex-1 flex-col gap-2",
-									children: [
-										!Te && /* @__PURE__ */ S(ne, {
-											htmlFor: Ge,
-											className: a(G.helperText, Et),
-											label: X.instructionsLabel ?? "Instructions",
-											required: !0
-										}),
-										/* @__PURE__ */ S("div", {
-											ref: Ke,
-											className: a(e, t),
-											children: /* @__PURE__ */ S(D, {
-												fallback: /* @__PURE__ */ S(b, { ariaLabel: X.instructionsLoadingAriaLabel ?? "Loading" }),
-												children: /* @__PURE__ */ S(Le, {
-													id: Ge,
-													ariaLabel: X.instructionsLabel ?? "Instructions",
-													value: K.instructions,
-													onChange: (e) => {
-														Ze.reset(), Je({ instructions: e });
-													},
-													theme: He,
-													placeholder: X.instructionsPlaceholder ?? "Write the skill instructions in Markdown"
-												})
-											})
-										}),
-										P?.instructions != null && /* @__PURE__ */ S(_, { text: P.instructions })
-									]
-								})
-							})
-						] }) : zt?.kind === L.File && (ke ?? /* @__PURE__ */ S(f, { text: X.supportingFileNote ?? "This supporting file is included in the skill package as-is. Remove it from the Files panel to replace its content." }))
-					]
-				})
+				alert: un,
+				setupTitle: ln,
+				setupSectionClassName: ft,
+				setup: cn ? /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F(Ie, {
+					values: tn,
+					errors: nn,
+					onChange: an,
+					fields: ct,
+					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: on,
+					labels: rn
+				}), dn] }) : /* @__PURE__ */ F(P, { children: Ht?.kind === q.File && (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." })) })
 			}),
-			/* @__PURE__ */ S(Fe, {
-				isOpen: gt,
-				onClose: () => _t(!1),
-				fileActions: V,
-				mode: vt.mode,
-				targetFolderPath: vt.targetFolderPath,
-				initialFiles: vt.initialFiles,
-				initialEntries: vt.initialEntries,
-				labels: ze
+			/* @__PURE__ */ F(at, {
+				isOpen: vt,
+				onClose: () => yt(!1),
+				fileActions: R,
+				mode: bt.mode,
+				targetFolderPath: bt.targetFolderPath,
+				initialFiles: bt.initialFiles,
+				initialEntries: bt.initialEntries,
+				labels: we
 			})
 		]
 	});
 };
 //#endregion
-export { ve as SKILL_EDITOR_CLASS, Re as SkillEditor, ke as SkillFileCandidateKind, L as SkillFileNodeKind, H as SkillFileUploadMode, W as SkillFileValidationStatus };
+export { Re as SKILL_EDITOR_CLASS, mt as SkillEditor, $e as SkillFileCandidateKind, q as SkillFileNodeKind, Ze as SkillFileUploadMode, et as SkillFileValidationStatus };