@alfakit/vue 0.1.10 → 0.1.12

package/dist/components/fields/FileUploadField.vue_vue_type_script_setup_true_lang.js

@@ -4,23 +4,23 @@ import { useStore as a } from "../../composables/use-store.js";
 import o from "../ui/Button2.js";
 import s from "../ui/Spinner.js";
 import { useField as c, useFormStore as ee } from "../form/form-context.js";
-import { lazyComponent as te } from "../../lib/lazy.js";
-import ne from "../schema/FieldWrapper.js";
-import { canEditImage as re, concurrencyLimiter as ie, cssAspectRatio as ae, editableImageName as oe, fetchEditableImage as se, fieldMemory as l, fileManagerSize as u, fileUploadAccept as ce, fileUploadPaths as le, filesFromClipboard as ue, insertUploadedFile as de, moveRepeaterItem as fe, panelUploadOptions as pe, requestJson as me, transformImage as he, uploadTemporaryFile as ge, uploadedFileLinks as d } from "@alfakit/core";
-import { Fragment as _e, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as _, defineComponent as v, normalizeClass as y, normalizeStyle as ve, openBlock as b, ref as x, renderList as ye, shallowRef as be, toDisplayString as S, unref as C, watch as xe, withCtx as w, withKeys as T, withModifiers as E } from "vue";
-import { ChevronDownIcon as Se, ChevronUpIcon as Ce, DownloadIcon as we, ExternalLinkIcon as Te, FileIcon as Ee, PencilIcon as De, UploadCloudIcon as Oe, XIcon as ke } from "@lucide/vue";
+import { lazyComponent as l } from "../../lib/lazy.js";
+import te from "../schema/FieldWrapper.js";
+import { canEditImage as ne, concurrencyLimiter as re, cssAspectRatio as ie, editableImageName as ae, fetchEditableImage as oe, fieldMemory as u, fileManagerSize as se, fileUploadAccept as ce, fileUploadEntries as le, fileUploadPaths as ue, filesFromClipboard as de, insertUploadedFile as fe, moveRepeaterItem as pe, panelUploadOptions as me, requestJson as he, transformImage as ge, uploadTemporaryFile as _e, uploadedFileLinks as d } from "@alfakit/core";
+import { Fragment as ve, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as _, defineComponent as v, normalizeClass as y, normalizeStyle as ye, openBlock as b, ref as x, renderList as be, shallowRef as xe, toDisplayString as S, unref as C, watch as Se, withCtx as w, withKeys as Ce, withModifiers as T } from "vue";
+import { ChevronDownIcon as we, ChevronUpIcon as Te, DownloadIcon as Ee, ExternalLinkIcon as De, FileIcon as Oe, PencilIcon as ke, UploadCloudIcon as Ae, XIcon as E } from "@lucide/vue";
 //#region src/components/fields/FileUploadField.vue?vue&type=script&setup=true&lang.ts
-var Ae = ["data-layout"], je = [
+var je = ["data-layout"], Me = [
 	"draggable",
 	"onDragstart",
 	"onDrop"
-], Me = ["src", "onError"], Ne = {
+], Ne = ["src", "onError"], Pe = {
 	key: 4,
 	class: "min-w-0 flex-1"
-}, Pe = { class: "truncate font-medium" }, Fe = ["href", "aria-label"], Ie = ["href", "aria-label"], Le = ["data-align", "aria-describedby"], Re = { key: 0 }, ze = {
+}, Fe = { class: "truncate font-medium" }, Ie = ["href", "aria-label"], Le = ["href", "aria-label"], Re = ["data-align", "aria-describedby"], ze = { key: 0 }, Be = {
 	key: 1,
 	class: "text-muted-foreground text-xs"
-}, Be = [
+}, Ve = [
 	"id",
 	"aria-invalid",
 	"aria-describedby",
@@ -28,72 +28,69 @@ var Ae = ["data-layout"], je = [
 	"multiple",
 	"accept",
 	"disabled"
-], Ve = te("ImageEditorDialog", () => import("./ImageEditorDialog.js").then((e) => e.default), v({
+], He = l("ImageEditorDialog", () => import("./ImageEditorDialog.js").then((e) => e.default), v({
 	name: "ImageEditorDialogLoading",
 	render: () => null
 })), D = /*@__PURE__*/ v({
 	__name: "FileUploadField",
 	props: { component: {} },
-	setup(te) {
-		let v = te, D = r(), O = t(), He = e(), k = n(), { value: Ue, setValue: We, error: Ge, id: Ke, disabled: qe, readOnly: Je, aria: A } = c(() => v.component), j = f(() => qe.value || Je.value), M = ee(), N = l(M, `${v.component.statePath}:uploading`, () => []), P = l(M, `${v.component.statePath}:uploaded`, () => []), Ye = a(N), Xe = a(P), F = f({
+	setup(l) {
+		let v = l, D = r(), O = t(), Ue = e(), k = n(), { value: We, setValue: Ge, error: Ke, id: A, disabled: qe, readOnly: Je, aria: j } = c(() => v.component), M = f(() => qe.value || Je.value), N = ee(), P = u(N, `${v.component.statePath}:uploading`, () => []), F = u(N, `${v.component.statePath}:uploaded`, () => []), Ye = a(P), Xe = a(F), I = f({
 			get: () => Ye.value,
-			set: (e) => N.set(e)
-		}), I = f({
-			get: () => Xe.value,
 			set: (e) => P.set(e)
-		}), L = x(!1), R = x(null), z = x(null), B = be(null), Ze = x(!1);
-		xe(B, (e) => {
+		}), L = f({
+			get: () => Xe.value,
+			set: (e) => F.set(e)
+		}), R = x(!1), z = x(null), B = x(null), V = xe(null), Ze = x(!1);
+		Se(V, (e) => {
 			e && (Ze.value = !0);
 		});
-		let V = (e) => new Promise((t) => {
-			B.value = {
+		let Qe = (e) => new Promise((t) => {
+			V.value = {
 				file: e,
 				resolve: (e) => {
-					B.value = null, t(e);
+					V.value = null, t(e);
 				}
 			};
-		}), H = l(M, `${v.component.statePath}:previews`, () => /* @__PURE__ */ new Set()).get(), U = (e) => {
-			e && H.delete(e) && URL.revokeObjectURL(e);
-		}, W = f(() => le(Ue.value)), G = f(() => W.value.map((e) => [...v.component.files, ...I.value].find((t) => t.path === e) ?? {
-			path: e,
-			name: e.replace(/^tmp:/, "")
-		})), K = f(() => v.component.multiple ? v.component.maxFiles ?? Infinity : 1), Qe = f(() => G.value.length + F.value.length < K.value), q = f(() => v.component.panelLayout === "circle" || v.component.avatar), $e = f(() => v.component.panelLayout === "integrated" && !q.value), et = f(() => v.component.positions?.removeButton === "start"), tt = f(() => v.component.positions?.progressIndicator === "start"), J = f(() => v.component.positions?.uploadButton ?? "center"), Y = (e) => We(v.component.multiple ? e : e[0] ?? null), X = async (e) => {
+		}), $e = u(N, `${v.component.statePath}:previews`, () => /* @__PURE__ */ new Set()).get(), et = (e) => {
+			e && $e.delete(e) && URL.revokeObjectURL(e);
+		}, H = f(() => ue(We.value)), U = f(() => le(H.value, v.component.files, L.value)), W = f(() => v.component.multiple ? v.component.maxFiles ?? Infinity : 1), tt = f(() => U.value.length + I.value.length < W.value), G = f(() => v.component.panelLayout === "circle" || v.component.avatar), nt = f(() => v.component.panelLayout === "integrated" && !G.value), rt = f(() => v.component.positions?.removeButton === "start"), it = f(() => v.component.positions?.progressIndicator === "start"), K = f(() => v.component.positions?.uploadButton ?? "center"), q = (e) => Ge(v.component.multiple ? e : e[0] ?? null), J = async (e) => {
 			let t = k.value.endpoints.upload;
 			if (!t) return;
-			let n = Array.from(e).slice(0, Math.max(0, K.value - G.value.length - F.value.length)), r = ie(v.component.maxParallelUploads ?? 1), i = [];
+			let n = Array.from(e).slice(0, Math.max(0, W.value - U.value.length - I.value.length)), r = re(v.component.maxParallelUploads ?? 1), i = [];
 			for (let [e, a] of n.entries()) {
-				let n = a, o = !!(v.component.imageEditor && re(a));
+				let n = a, o = !!(v.component.imageEditor && ne(a));
 				if (o) {
-					let e = await V(a);
+					let e = await Qe(a);
 					if (!e) continue;
 					n = e;
 				}
-				let s = await nt(n, o);
+				let s = await at(n, o);
 				if (!s) continue;
-				let c = rt(s, e);
-				F.value = [...F.value, c], i.push(r(() => ot(t, s, c)));
+				let c = ot(s, e);
+				I.value = [...I.value, c], i.push(r(() => Y(t, s, c)));
 			}
 			await Promise.all(i);
-		}, nt = async (e, t) => {
-			let n = v.component.imageCropAspectRatio || v.component.imageResizeTargetWidth || v.component.imageResizeTargetHeight || v.component.orientImagesFromExif ? await he(e, {
+		}, at = async (e, t) => {
+			let n = v.component.imageCropAspectRatio || v.component.imageResizeTargetWidth || v.component.imageResizeTargetHeight || v.component.orientImagesFromExif ? await ge(e, {
 				aspectRatio: t ? null : v.component.imageCropAspectRatio,
 				mode: v.component.imageResizeMode,
 				width: v.component.imageResizeTargetWidth,
 				height: v.component.imageResizeTargetHeight,
 				orient: v.component.orientImagesFromExif
 			}) : e;
-			return v.component.minSize && n.size < v.component.minSize * 1024 ? (F.value = [...F.value, {
+			return v.component.minSize && n.size < v.component.minSize * 1024 ? (I.value = [...I.value, {
 				path: n.name,
 				name: n.name,
 				size: n.size,
 				error: D("form.file_too_small", {}, "This file is too small.")
-			}], null) : v.component.maxSize && n.size > v.component.maxSize * 1024 ? (F.value = [...F.value, {
+			}], null) : v.component.maxSize && n.size > v.component.maxSize * 1024 ? (I.value = [...I.value, {
 				path: n.name,
 				name: n.name,
 				size: n.size,
 				error: D("form.file_too_large", {}, "This file is too large.")
 			}], null) : n;
-		}, rt = (e, t) => {
+		}, ot = (e, t) => {
 			let n = {
 				path: `pending:${t}:${e.lastModified}:${e.size}:${e.name}`,
 				name: e.name,
@@ -101,145 +98,145 @@ var Ae = ["data-layout"], je = [
 				progress: 0,
 				preview: e.type.startsWith("image/") ? URL.createObjectURL(e) : void 0
 			};
-			return n.preview && H.add(n.preview), n;
-		}, it = (e, t) => !!v.component.imageEditor && !j.value && t < G.value.length && !e.missing && !!(e.url ?? e.preview) && oe(e) !== null, at = async (e) => {
-			let t = k.value.endpoints.upload, n = e.url ?? e.preview, r = oe(e);
+			return n.preview && $e.add(n.preview), n;
+		}, st = (e, t) => !!v.component.imageEditor && !M.value && t < U.value.length && !e.missing && !!(e.url ?? e.preview) && ae(e) !== null, ct = async (e) => {
+			let t = k.value.endpoints.upload, n = e.url ?? e.preview, r = ae(e);
 			if (!t || !n || !r) return;
-			let i = await se(n, r);
+			let i = await oe(n, r);
 			if (!i) {
-				F.value = [...F.value, {
+				I.value = [...I.value, {
 					path: `failed:${e.path}`,
 					name: e.name,
 					error: D("image_editor.load_failed", {}, "The image could not be opened.")
 				}];
 				return;
 			}
-			let a = await V(i);
+			let a = await Qe(i);
 			if (!a || a === i) return;
-			let o = await nt(a, !0);
+			let o = await at(a, !0);
 			if (!o) return;
-			let s = rt(o, `edit:${e.path}`);
-			F.value = [...F.value, s], await ot(t, o, s, e.path);
-		}, ot = async (e, t, n, r) => {
+			let s = ot(o, `edit:${e.path}`);
+			I.value = [...I.value, s], await Y(t, o, s, e.path);
+		}, Y = async (e, t, n, r) => {
 			try {
-				let i = await ge(e, t, {
-					...pe(k.value, v.component.uploadPolicy),
+				let i = await _e(e, t, {
+					...me(k.value, v.component.uploadPolicy),
 					onProgress: (e) => {
-						F.value = F.value.map((t) => t.path === n.path ? {
+						I.value = I.value.map((t) => t.path === n.path ? {
 							...t,
 							progress: e
 						} : t);
 					}
 				});
-				I.value = [...I.value, {
+				L.value = [...L.value, {
 					path: i.key,
 					name: i.name,
 					size: i.size,
 					temporary: !0,
 					url: n.preview
-				}], F.value = F.value.filter((e) => e.path !== n.path);
-				let a = le(M.getValue(v.component.statePath, null));
-				r !== void 0 && a.includes(r) ? (Y(a.map((e) => e === r ? i.key : e)), ct(r)) : Y(de(a, i.key, v.component, K.value));
+				}], I.value = I.value.filter((e) => e.path !== n.path);
+				let a = ue(N.getValue(v.component.statePath, null));
+				r !== void 0 && a.includes(r) ? (q(a.map((e) => e === r ? i.key : e)), ut(r)) : q(fe(a, i.key, v.component, W.value));
 			} catch (e) {
 				let t = e.errors?.file?.[0] ?? e.message;
-				F.value = F.value.map((e) => e.path === n.path ? {
+				I.value = I.value.map((e) => e.path === n.path ? {
 					...e,
 					error: t,
 					progress: void 0
 				} : e);
 			}
-		}, st = (e) => {
-			Y(W.value.filter((t) => t !== e)), ct(e);
-		}, ct = (e) => {
-			U(P.get().find((t) => t.path === e)?.url), e.startsWith("tmp:") && k.value.endpoints.uploadDestroy && me(k.value.endpoints.uploadDestroy, {
+		}, lt = (e) => {
+			q(H.value.filter((t) => t !== e)), ut(e);
+		}, ut = (e) => {
+			et(F.get().find((t) => t.path === e)?.url), e.startsWith("tmp:") && k.value.endpoints.uploadDestroy && he(k.value.endpoints.uploadDestroy, {
 				method: "DELETE",
 				body: { key: e }
 			}).catch(() => void 0);
-		}, lt = (e) => {
-			e.error || e.progress !== void 0 ? (U(e.preview), F.value = F.value.filter((t) => t.path !== e.path)) : st(e.path);
-		}, ut = (e) => {
-			e.preventDefault(), L.value = !1, !j.value && e.dataTransfer && e.dataTransfer.files.length > 0 && X(e.dataTransfer.files);
 		}, dt = (e) => {
-			if (j.value || v.component.pasteable === !1) return;
-			let t = ue(e.clipboardData);
-			t.length > 0 && (e.preventDefault(), X(t));
+			e.error || e.progress !== void 0 ? (et(e.preview), I.value = I.value.filter((t) => t.path !== e.path)) : lt(e.path);
 		}, ft = (e) => {
+			e.preventDefault(), R.value = !1, !M.value && e.dataTransfer && e.dataTransfer.files.length > 0 && J(e.dataTransfer.files);
+		}, pt = (e) => {
+			if (M.value || v.component.pasteable === !1) return;
+			let t = de(e.clipboardData);
+			t.length > 0 && (e.preventDefault(), J(t));
+		}, mt = (e) => {
 			let t = e.target, n = t.files ? Array.from(t.files) : [];
-			t.value = "", X(n);
-		}, Z = (e, t) => Y(fe(W.value, e, t)), Q = f(() => !!(v.component.reorderable && v.component.multiple && !j.value)), pt = (e, t) => {
-			if (!Q.value || z.value === null) return;
+			t.value = "", J(n);
+		}, X = (e, t) => q(pe(H.value, e, t)), Z = f(() => !!(v.component.reorderable && v.component.multiple && !M.value)), ht = (e, t) => {
+			if (!Z.value || B.value === null) return;
 			e.preventDefault(), e.stopPropagation();
-			let n = W.value.indexOf(z.value);
-			n !== -1 && t < G.value.length && Z(n, t), z.value = null;
-		}, mt = f(() => [
+			let n = H.value.indexOf(B.value);
+			n !== -1 && t < U.value.length && X(n, t), B.value = null;
+		}, Q = f(() => [
 			v.component.acceptedFileTypes?.join(", "),
-			v.component.maxSize ? `≤ ${u(v.component.maxSize * 1024, O.value)}` : null,
-			v.component.minFiles ? He("form.min_files", v.component.minFiles, {}, "At least :count file|At least :count files") : null
-		].filter(Boolean).join(" · ")), ht = (e) => v.component.previewable !== !1 && (v.component.image || /\.(png|jpe?g|gif|webp|svg|avif)$/i.test(e.name)), $ = x(/* @__PURE__ */ new Set());
-		function gt(e) {
+			v.component.maxSize ? `≤ ${se(v.component.maxSize * 1024, O.value)}` : null,
+			v.component.minFiles ? Ue("form.min_files", v.component.minFiles, {}, "At least :count file|At least :count files") : null
+		].filter(Boolean).join(" · ")), gt = (e) => v.component.previewable !== !1 && (v.component.image || /\.(png|jpe?g|gif|webp|svg|avif)$/i.test(e.name)), $ = x(/* @__PURE__ */ new Set());
+		function _t(e) {
 			return typeof e == "number" || /^\d+(\.\d+)?$/.test(e) ? `${e}px` : e;
 		}
-		return (e, t) => (b(), p(ne, {
+		return (e, t) => (b(), p(te, {
 			field: v.component,
-			"html-for": C(Ke),
-			error: C(Ge)
+			"html-for": C(A),
+			error: C(Ke)
 		}, {
 			default: w(() => [g("div", {
 				"data-slot": "file-upload",
 				"data-layout": v.component.panelLayout,
-				class: y(C(i)("flex flex-col gap-3", $e.value && "rounded-md border p-2"))
+				class: y(C(i)("flex flex-col gap-3", nt.value && "rounded-md border p-2"))
 			}, [
-				G.value.length > 0 || F.value.length > 0 ? (b(), h("ul", {
+				U.value.length > 0 || I.value.length > 0 ? (b(), h("ul", {
 					key: 0,
-					class: y(C(i)("grid gap-2", v.component.panelLayout === "grid" && "grid-cols-2 sm:grid-cols-3 md:grid-cols-4", q.value && "justify-items-center"))
-				}, [(b(!0), h(_e, null, ye([...G.value, ...F.value], (e, n) => (b(), h("li", {
+					class: y(C(i)("grid gap-2", v.component.panelLayout === "grid" && "grid-cols-2 sm:grid-cols-3 md:grid-cols-4", G.value && "justify-items-center"))
+				}, [(b(!0), h(ve, null, be([...U.value, ...I.value], (e, n) => (b(), h("li", {
 					key: e.path,
-					draggable: Q.value && n < G.value.length,
-					class: y(C(i)(z.value === e.path && "opacity-50", "bg-muted/30 relative flex min-w-0 items-center gap-3 overflow-hidden rounded-md border p-2 text-sm", q.value && "size-28 justify-center rounded-full border-0 p-0", e.error && "border-destructive")),
-					onDragstart: (t) => z.value = e.path,
-					onDragover: t[0] ||= (e) => Q.value && e.preventDefault(),
-					onDrop: (e) => pt(e, n),
-					onDragend: t[1] ||= (e) => z.value = null
+					draggable: Z.value && n < U.value.length,
+					class: y(C(i)(B.value === e.path && "opacity-50", "bg-muted/30 relative flex min-w-0 items-center gap-3 overflow-hidden rounded-md border p-2 text-sm", G.value && "size-28 justify-center rounded-full border-0 p-0", e.error && "border-destructive")),
+					onDragstart: (t) => B.value = e.path,
+					onDragover: t[0] ||= (e) => Z.value && e.preventDefault(),
+					onDrop: (e) => ht(e, n),
+					onDragend: t[1] ||= (e) => B.value = null
 				}, [
-					!q.value && et.value && v.component.deletable && !j.value ? (b(), p(o, {
+					!G.value && rt.value && v.component.deletable && !M.value ? (b(), p(o, {
 						key: 0,
 						type: "button",
 						variant: "ghost",
 						size: "icon-xs",
 						"aria-label": C(D)("file_upload.remove", { name: e.name }, "Remove :name"),
-						onClick: (t) => lt(e)
+						onClick: (t) => dt(e)
 					}, {
-						default: w(() => [_(C(ke))]),
+						default: w(() => [_(C(E))]),
 						_: 1
 					}, 8, ["aria-label", "onClick"])) : m("", !0),
-					!q.value && tt.value && e.progress !== void 0 && !e.error ? (b(), p(s, { key: 1 })) : m("", !0),
-					ht(e) && (e.url || e.preview) && !$.value.has(e.path) ? (b(), h("img", {
+					!G.value && it.value && e.progress !== void 0 && !e.error ? (b(), p(s, { key: 1 })) : m("", !0),
+					gt(e) && (e.url || e.preview) && !$.value.has(e.path) ? (b(), h("img", {
 						key: 2,
 						src: e.url ?? e.preview,
 						alt: "",
-						class: y(C(i)("size-12 shrink-0 rounded object-cover", q.value && "size-28 rounded-full")),
-						style: ve(!q.value && v.component.imagePreviewHeight ? {
-							height: gt(v.component.imagePreviewHeight),
+						class: y(C(i)("size-12 shrink-0 rounded object-cover", G.value && "size-28 rounded-full")),
+						style: ye(!G.value && v.component.imagePreviewHeight ? {
+							height: _t(v.component.imagePreviewHeight),
 							width: "auto",
 							maxWidth: "50%"
 						} : void 0),
 						onError: (t) => $.value = new Set($.value).add(e.path)
-					}, null, 46, Me)) : q.value ? m("", !0) : (b(), p(C(Ee), {
+					}, null, 46, Ne)) : G.value ? m("", !0) : (b(), p(C(Oe), {
 						key: 3,
 						class: "text-muted-foreground size-6 shrink-0"
 					})),
-					q.value ? m("", !0) : (b(), h("div", Ne, [g("p", Pe, S(e.name), 1), g("p", { class: y(C(i)("text-muted-foreground text-xs", e.missing && "text-destructive")) }, S(e.error ?? (e.missing ? C(D)("form.file_missing", {}, "This file no longer exists.") : e.progress !== void 0 && !e.error ? v.component.uploadingMessage ?? C(D)("form.uploading", {}, "Uploading…") : e.size ? C(u)(e.size, C(O)) : e.temporary ? C(D)("form.uploading", {}, "Pending") : "")), 3)])),
-					g("div", { class: y(C(i)("flex items-center gap-1", q.value && "absolute -end-1 -bottom-1")) }, [
-						(q.value || !tt.value) && e.progress !== void 0 && !e.error ? (b(), p(s, { key: 0 })) : m("", !0),
-						Q.value && n < G.value.length ? (b(), h(_e, { key: 1 }, [_(o, {
+					G.value ? m("", !0) : (b(), h("div", Pe, [g("p", Fe, S(e.name), 1), g("p", { class: y(C(i)("text-muted-foreground text-xs", e.missing && "text-destructive")) }, S(e.error ?? (e.missing ? C(D)("form.file_missing", {}, "This file no longer exists.") : e.progress !== void 0 && !e.error ? v.component.uploadingMessage ?? C(D)("form.uploading", {}, "Uploading…") : e.size ? C(se)(e.size, C(O)) : e.temporary ? C(D)("form.uploading", {}, "Pending") : "")), 3)])),
+					g("div", { class: y(C(i)("flex items-center gap-1", G.value && "absolute -end-1 -bottom-1")) }, [
+						(G.value || !it.value) && e.progress !== void 0 && !e.error ? (b(), p(s, { key: 0 })) : m("", !0),
+						Z.value && n < U.value.length ? (b(), h(ve, { key: 1 }, [_(o, {
 							type: "button",
 							variant: "ghost",
 							size: "icon-xs",
 							"aria-label": C(D)("file_upload.move_up", { name: e.name }, "Move :name up"),
 							disabled: n === 0,
-							onClick: (e) => Z(n, n - 1)
+							onClick: (e) => X(n, n - 1)
 						}, {
-							default: w(() => [_(C(Ce))]),
+							default: w(() => [_(C(Te))]),
 							_: 1
 						}, 8, [
 							"aria-label",
@@ -250,28 +247,28 @@ var Ae = ["data-layout"], je = [
 							variant: "ghost",
 							size: "icon-xs",
 							"aria-label": C(D)("file_upload.move_down", { name: e.name }, "Move :name down"),
-							disabled: n === G.value.length - 1,
-							onClick: (e) => Z(n, n + 1)
+							disabled: n === U.value.length - 1,
+							onClick: (e) => X(n, n + 1)
 						}, {
-							default: w(() => [_(C(Se))]),
+							default: w(() => [_(C(we))]),
 							_: 1
 						}, 8, [
 							"aria-label",
 							"disabled",
 							"onClick"
 						])], 64)) : m("", !0),
-						it(e, n) ? (b(), p(o, {
+						st(e, n) ? (b(), p(o, {
 							key: 2,
 							type: "button",
-							variant: q.value ? "secondary" : "ghost",
+							variant: G.value ? "secondary" : "ghost",
 							size: "icon-xs",
-							class: y(C(i)(q.value && "rounded-full shadow")),
+							class: y(C(i)(G.value && "rounded-full shadow")),
 							"aria-label": C(D)("file_upload.edit", { name: e.name }, "Edit :name"),
 							title: C(D)("image_editor.title", {}, "Edit image"),
 							"data-action": "edit-image",
-							onClick: (t) => void at(e)
+							onClick: (t) => void ct(e)
 						}, {
-							default: w(() => [_(C(De))]),
+							default: w(() => [_(C(ke))]),
 							_: 1
 						}, 8, [
 							"variant",
@@ -292,7 +289,7 @@ var Ae = ["data-layout"], je = [
 								target: "_blank",
 								rel: "noopener noreferrer",
 								"aria-label": `${C(D)("file_upload.open", { name: e.name }, "Open :name")} ${C(D)("opens_in_new_tab", {}, "(opens in a new tab)")}`
-							}, [_(C(Te))], 8, Fe)]),
+							}, [_(C(De))], 8, Ie)]),
 							_: 2
 						}, 1024)) : m("", !0),
 						v.component.downloadable && C(d)(e).download ? (b(), p(o, {
@@ -306,19 +303,19 @@ var Ae = ["data-layout"], je = [
 								href: C(d)(e).download,
 								download: "",
 								"aria-label": C(D)("file_upload.download", { name: e.name }, "Download :name")
-							}, [_(C(we))], 8, Ie)]),
+							}, [_(C(Ee))], 8, Le)]),
 							_: 2
 						}, 1024)) : m("", !0),
-						v.component.deletable && !j.value && (q.value || !et.value) ? (b(), p(o, {
+						v.component.deletable && !M.value && (G.value || !rt.value) ? (b(), p(o, {
 							key: 5,
 							type: "button",
-							variant: q.value ? "secondary" : "ghost",
+							variant: G.value ? "secondary" : "ghost",
 							size: "icon-xs",
-							class: y(C(i)(q.value && "rounded-full shadow")),
+							class: y(C(i)(G.value && "rounded-full shadow")),
 							"aria-label": C(D)("file_upload.remove", { name: e.name }, "Remove :name"),
-							onClick: (t) => lt(e)
+							onClick: (t) => dt(e)
 						}, {
-							default: w(() => [_(C(ke))]),
+							default: w(() => [_(C(E))]),
 							_: 1
 						}, 8, [
 							"variant",
@@ -327,47 +324,47 @@ var Ae = ["data-layout"], je = [
 							"onClick"
 						])) : m("", !0)
 					], 2)
-				], 42, je))), 128))], 2)) : m("", !0),
-				Qe.value && !j.value ? (b(), h("div", {
+				], 42, Me))), 128))], 2)) : m("", !0),
+				tt.value && !M.value ? (b(), h("div", {
 					key: 1,
 					role: "button",
 					tabindex: "0",
-					"data-align": J.value,
-					style: ve(!q.value && v.component.panelAspectRatio ? { aspectRatio: C(ae)(v.component.panelAspectRatio) } : void 0),
-					class: y(C(i)("text-muted-foreground hover:border-ring flex cursor-pointer flex-col justify-center gap-1 rounded-md border border-dashed px-4 py-6 text-sm transition-colors", J.value === "start" ? "items-start text-start" : J.value === "end" ? "items-end text-end" : "items-center text-center", $e.value && "border-transparent", L.value && "border-ring bg-accent", q.value && "size-28 items-center rounded-full py-0")),
-					"aria-describedby": C(A)["aria-describedby"],
-					onClick: t[2] ||= (e) => R.value?.click(),
-					onKeydown: [t[3] ||= T(E((e) => R.value?.click(), ["prevent"]), ["enter"]), t[4] ||= T(E((e) => R.value?.click(), ["prevent"]), ["space"])],
-					onDragover: t[5] ||= E((e) => L.value = !0, ["prevent"]),
-					onDragleave: t[6] ||= (e) => L.value = !1,
-					onDrop: ut,
-					onPaste: dt
+					"data-align": K.value,
+					style: ye(!G.value && v.component.panelAspectRatio ? { aspectRatio: C(ie)(v.component.panelAspectRatio) } : void 0),
+					class: y(C(i)("text-muted-foreground hover:border-ring flex cursor-pointer flex-col justify-center gap-1 rounded-md border border-dashed px-4 py-6 text-sm transition-colors", K.value === "start" ? "items-start text-start" : K.value === "end" ? "items-end text-end" : "items-center text-center", nt.value && "border-transparent", R.value && "border-ring bg-accent", G.value && "size-28 items-center rounded-full py-0")),
+					"aria-describedby": C(j)["aria-describedby"],
+					onClick: t[2] ||= (e) => z.value?.click(),
+					onKeydown: [t[3] ||= Ce(T((e) => z.value?.click(), ["prevent"]), ["enter"]), t[4] ||= Ce(T((e) => z.value?.click(), ["prevent"]), ["space"])],
+					onDragover: t[5] ||= T((e) => R.value = !0, ["prevent"]),
+					onDragleave: t[6] ||= (e) => R.value = !1,
+					onDrop: ft,
+					onPaste: pt
 				}, [
-					_(C(Oe), { class: "size-5" }),
-					q.value ? m("", !0) : (b(), h("span", Re, S(v.component.placeholder ?? C(D)("form.drop_files", {}, "Drop files here or click to browse")), 1)),
-					!q.value && mt.value ? (b(), h("span", ze, S(mt.value), 1)) : m("", !0)
-				], 46, Le)) : m("", !0),
+					_(C(Ae), { class: "size-5" }),
+					G.value ? m("", !0) : (b(), h("span", ze, S(v.component.placeholder ?? C(D)("form.drop_files", {}, "Drop files here or click to browse")), 1)),
+					!G.value && Q.value ? (b(), h("span", Be, S(Q.value), 1)) : m("", !0)
+				], 46, Re)) : m("", !0),
 				g("input", {
-					id: C(Ke),
+					id: C(A),
 					ref_key: "inputRef",
-					ref: R,
+					ref: z,
 					type: "file",
 					class: "sr-only",
 					tabindex: "-1",
-					"aria-invalid": C(A)["aria-invalid"],
-					"aria-describedby": C(A)["aria-describedby"],
-					"aria-required": C(A)["aria-required"],
+					"aria-invalid": C(j)["aria-invalid"],
+					"aria-describedby": C(j)["aria-describedby"],
+					"aria-required": C(j)["aria-required"],
 					multiple: v.component.multiple,
 					accept: C(ce)(v.component),
-					disabled: j.value,
-					onChange: ft
-				}, null, 40, Be),
-				v.component.imageEditor && (B.value || Ze.value) ? (b(), p(C(Ve), {
+					disabled: M.value,
+					onChange: mt
+				}, null, 40, Ve),
+				v.component.imageEditor && (V.value || Ze.value) ? (b(), p(C(He), {
 					key: 2,
-					request: B.value,
+					request: V.value,
 					options: v.component.imageEditor
 				}, null, 8, ["request", "options"])) : m("", !0)
-			], 10, Ae)]),
+			], 10, je)]),
 			_: 1
 		}, 8, [
 			"field",