@openrails/contentkit-ui 0.83.0 → 0.86.0

package/dist/components/media-folder-editor.js

@@ -11,15 +11,15 @@ import { isProcessing as u } from "../client/media/windows.js";
 import { Alert as d, AlertDescription as f, AlertTitle as p } from "../ui/alert.js";
 import { Button as m } from "../ui/button.js";
 import { progressLabel as h, progressValue as g } from "./progress.js";
-import { ImageCropDialog as ee } from "./image-crop-dialog.js";
-import { isAudioType as _, isImageType as v, isSubtitleType as y, isVideoType as b } from "../client/gallery.js";
-import { useEditorCrop as x } from "../react/crop.js";
-import { nameIn as S, thumbnailOf as C, useMediaFolder as w } from "../react/folder.js";
-import { SortableList as T } from "./sortable-list.js";
-import { useEffect as E, useImperativeHandle as te, useMemo as D, useRef as ne, useState as O } from "react";
-import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
-import { cn as M } from "cn";
-import { Alert02Icon as N, CropIcon as P, Delete02Icon as F, Edit02Icon as I, File01Icon as L, Image01Icon as R, ImageAdd01Icon as re, Loading03Icon as z, MusicNote01Icon as B, Refresh01Icon as V, RepeatIcon as H, Video01Icon as U } from "@hugeicons/core-free-icons";
+import { ImageCropDialog as _ } from "./image-crop-dialog.js";
+import { isAudioType as v, isImageType as y, isSubtitleType as b, isVideoType as x } from "../client/gallery.js";
+import { useEditorCrop as S } from "../react/crop.js";
+import { nameIn as C, thumbnailOf as w, useMediaFolder as T } from "../react/folder.js";
+import { SortableList as E } from "./sortable-list.js";
+import { useEffect as D, useImperativeHandle as ee, useMemo as O, useRef as te, useState as k } from "react";
+import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
+import { cn as N } from "cn";
+import { Alert02Icon as P, CropIcon as F, Delete02Icon as I, Edit02Icon as L, File01Icon as R, Image01Icon as z, ImageAdd01Icon as ne, Loading03Icon as re, MusicNote01Icon as B, Refresh01Icon as V, RepeatIcon as H, Video01Icon as U } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon as W } from "@hugeicons/react";
 //#region src/components/media-folder-editor.tsx
 var ie = [
@@ -29,14 +29,14 @@ var ie = [
 	"16:9"
 ];
 function G(e) {
-	return v(e) ? "image" : b(e) ? "video" : _(e) ? "audio" : y(e) ? "subtitle" : "file";
+	return y(e) ? "image" : x(e) ? "video" : v(e) ? "audio" : b(e) ? "subtitle" : "file";
 }
 var K = {
-	image: R,
+	image: z,
 	video: U,
 	audio: B,
-	subtitle: L,
-	file: L
+	subtitle: R,
+	file: R
 };
 function q(e) {
 	let t = new Set((e?.types ?? []).map(G));
@@ -60,16 +60,16 @@ function ae(e, t) {
 function oe(e) {
 	if (e.folder) {
 		let { folder: n, ...r } = e;
-		return /* @__PURE__ */ A(J, {
+		return /* @__PURE__ */ j(J, {
 			folder: n,
 			...r
 		}, n.ref ? t(n.ref) : "");
 	}
-	return /* @__PURE__ */ A(se, { ...e }, t(e.item));
+	return /* @__PURE__ */ j(se, { ...e }, t(e.item));
 }
 function se(e) {
-	let { item: t, ref: n, label: r, toolbar: i, rowActions: a, footer: o, aspects: s, confirmRemove: c, disabled: l, className: u, appearance: d, ...f } = e, p = w(t, f);
-	return /* @__PURE__ */ A(J, {
+	let { item: t, ref: n, label: r, toolbar: i, rowActions: a, footer: o, aspects: s, confirmRemove: c, disabled: l, className: u, appearance: d, ...f } = e, p = T(t, f);
+	return /* @__PURE__ */ j(J, {
 		folder: p,
 		ref: n,
 		label: r,
@@ -88,57 +88,57 @@ var ce = {
 	id: ""
 };
 function J(e) {
-	let { folder: t, ref: n, label: i, toolbar: a, rowActions: c, footer: l, aspects: u = ie, confirmRemove: h, disabled: g, className: _, appearance: v } = e, { t: y, error: b } = o(), { groups: S, queue: C, read: w, options: D } = t;
-	te(n, () => ({
+	let { folder: t, ref: n, label: i, toolbar: a, rowActions: c, footer: l, aspects: u = ie, confirmRemove: h, disabled: g, className: v, appearance: y } = e, { t: b, error: x } = o(), { groups: C, queue: w, read: T, options: O } = t;
+	ee(n, () => ({
 		discard: t.discard,
 		commit: t.commit,
 		folder: t
 	}), [t]);
-	let k = D.commit === "auto", P = S.flatMap((e) => e.rule ? [e.rule] : []), I = r(P), L = t.uploads.length + C.items.length + t.waiting.length === 0, R = !!g, [B, V] = O(/* @__PURE__ */ new Set());
-	E(() => {
+	let A = O.commit === "auto", F = C.flatMap((e) => e.rule ? [e.rule] : []), L = r(F), R = t.uploads.length + w.items.length + t.waiting.length + t.pending.length === 0, z = !!g, [B, V] = k(/* @__PURE__ */ new Set());
+	D(() => {
 		let e = new Set(t.uploads.map((e) => e.path));
 		V((t) => [...t].every((t) => e.has(t)) ? t : new Set([...t].filter((t) => e.has(t))));
 	}, [t.uploads]);
-	let [H, U] = O(null), K = x(t.ref ?? ce, H, {
-		client: D.client,
-		onError: D.onError,
+	let [H, U] = k(null), K = S(t.ref ?? ce, H, {
+		client: O.client,
+		onError: O.onError,
 		onSaved: () => U(null)
-	}), q = H ? S.find((e) => e.files.some((e) => e.path === H))?.rule : void 0, [oe, se] = O(null), J = ne(null), [X, Z] = O(null), [Q, $] = O(!1), de = {
+	}), q = H ? C.find((e) => e.files.some((e) => e.path === H))?.rule : void 0, [oe, se] = k(null), J = te(null), [X, Z] = k(null), [Q, $] = k(!1), fe = {
 		onDragOver: (e) => {
-			!R && e.dataTransfer.types.includes("Files") && (e.preventDefault(), $(!0));
+			!z && e.dataTransfer.types.includes("Files") && (e.preventDefault(), $(!0));
 		},
 		onDragLeave: (e) => {
 			e.currentTarget.contains(e.relatedTarget) || $(!1);
 		},
 		onDrop: (e) => {
-			!R && e.dataTransfer.files.length && (e.preventDefault(), $(!1), t.add(e.dataTransfer.files));
+			!z && e.dataTransfer.files.length && (e.preventDefault(), $(!1), t.add(e.dataTransfer.files));
 		}
-	}, fe = async () => {
+	}, pe = async () => {
 		let e = [...B];
-		(h === !1 || (h ? await h(e.length) : globalThis.confirm?.(y("folder.confirmRemove", { count: e.length })) ?? !0)) && await t.remove(e).then(() => V(/* @__PURE__ */ new Set()), () => {});
-	}, pe = C.items.filter((e) => e.status === "uploaded").length, me = (e) => /* @__PURE__ */ j("label", {
-		className: M(e ? "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border px-4 py-8 text-center text-sm text-muted-foreground transition-colors hover:border-primary hover:bg-primary/5" : "inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-md border border-border bg-background px-2.5 text-sm font-medium transition-colors hover:bg-muted focus-within:ring-3 focus-within:ring-ring/50", e && Q && "border-primary bg-primary/5", R && "pointer-events-none opacity-50"),
+		(h === !1 || (h ? await h(e.length) : globalThis.confirm?.(b("folder.confirmRemove", { count: e.length })) ?? !0)) && await t.remove(e).then(() => V(/* @__PURE__ */ new Set()), () => {});
+	}, me = w.items.filter((e) => e.status === "uploaded").length + t.pending.length, he = (e) => /* @__PURE__ */ M("label", {
+		className: N(e ? "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border px-4 py-8 text-center text-sm text-muted-foreground transition-colors hover:border-primary hover:bg-primary/5" : "inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-md border border-border bg-background px-2.5 text-sm font-medium transition-colors hover:bg-muted focus-within:ring-3 focus-within:ring-ring/50", e && Q && "border-primary bg-primary/5", z && "pointer-events-none opacity-50"),
 		"data-ckui": e ? "folder-drop" : "folder-add",
 		children: [
-			/* @__PURE__ */ A(W, {
-				icon: re,
+			/* @__PURE__ */ j(W, {
+				icon: ne,
 				strokeWidth: 1.75,
 				className: e ? "size-7" : "size-4"
 			}),
-			e ? /* @__PURE__ */ A("strong", {
+			e ? /* @__PURE__ */ j("strong", {
 				className: "font-medium text-foreground",
-				children: y("folder.drop")
-			}) : y("folder.add"),
-			e && P.length > 0 && /* @__PURE__ */ A("span", {
+				children: b("folder.drop")
+			}) : b("folder.add"),
+			e && F.length > 0 && /* @__PURE__ */ j("span", {
 				className: "text-xs",
-				children: ae(y, P)
+				children: ae(b, F)
 			}),
-			/* @__PURE__ */ A("input", {
+			/* @__PURE__ */ j("input", {
 				type: "file",
 				multiple: !0,
-				accept: I,
+				accept: L,
 				className: "sr-only",
-				disabled: R,
+				disabled: z,
 				"data-ckui": "file",
 				onChange: (e) => {
 					t.add([...e.target.files ?? []]), e.target.value = "";
@@ -146,118 +146,118 @@ function J(e) {
 			})
 		]
 	});
-	return /* @__PURE__ */ j(s, {
-		appearance: v,
-		className: M("grid gap-3", _),
+	return /* @__PURE__ */ M(s, {
+		appearance: y,
+		className: N("grid gap-3", v),
 		"data-ckui": "media-folder",
 		"data-over": Q ? "" : void 0,
-		...de,
+		...fe,
 		children: [
-			/* @__PURE__ */ j("div", {
+			/* @__PURE__ */ M("div", {
 				className: "flex flex-wrap items-center justify-between gap-2",
 				"data-ckui": "folder-header",
-				children: [/* @__PURE__ */ A("h3", {
+				children: [/* @__PURE__ */ j("h3", {
 					className: "text-sm font-semibold",
-					children: i ?? y("folder.label")
-				}), /* @__PURE__ */ j("div", {
+					children: i ?? b("folder.label")
+				}), /* @__PURE__ */ M("div", {
 					className: "flex flex-wrap items-center gap-2",
-					children: [a, !L && me(!1)]
+					children: [a, !R && he(!1)]
 				})]
 			}),
-			L && (w.read || !t.ref) && me(!0),
-			L && !w.read && w.loading && /* @__PURE__ */ A("div", {
+			R && (T.read || !t.ref) && he(!0),
+			R && !T.read && T.loading && /* @__PURE__ */ j("div", {
 				className: "flex justify-center py-6 text-muted-foreground",
 				"data-ckui": "folder-loading",
-				children: /* @__PURE__ */ A(W, {
-					icon: z,
+				children: /* @__PURE__ */ j(W, {
+					icon: re,
 					strokeWidth: 2,
 					className: "size-5 motion-safe:animate-spin"
 				})
 			}),
-			t.refused.length > 0 && /* @__PURE__ */ j(d, {
+			t.refused.length > 0 && /* @__PURE__ */ M(d, {
 				variant: "destructive",
 				role: "alert",
 				"data-ckui": "folder-refused",
-				children: [/* @__PURE__ */ A(W, {
-					icon: N,
+				children: [/* @__PURE__ */ j(W, {
+					icon: P,
 					strokeWidth: 2
-				}), /* @__PURE__ */ j(f, { children: [/* @__PURE__ */ A("ul", {
+				}), /* @__PURE__ */ M(f, { children: [/* @__PURE__ */ j("ul", {
 					className: "grid gap-0.5",
-					children: t.refused.map((e, t) => /* @__PURE__ */ j("li", { children: [
-						/* @__PURE__ */ A("span", {
+					children: t.refused.map((e, t) => /* @__PURE__ */ M("li", { children: [
+						/* @__PURE__ */ j("span", {
 							className: "font-medium",
 							children: e.file.name
 						}),
 						": ",
-						b(e.error)
+						x(e.error)
 					] }, t))
-				}), /* @__PURE__ */ A(m, {
+				}), /* @__PURE__ */ j(m, {
 					variant: "outline",
 					size: "xs",
 					className: "mt-1 w-fit",
 					onClick: t.dismiss,
-					children: y("folder.dismiss")
+					children: b("folder.dismiss")
 				})] })]
 			}),
-			C.blocked && /* @__PURE__ */ j(d, {
+			w.blocked && /* @__PURE__ */ M(d, {
 				variant: "destructive",
 				role: "alert",
 				"data-ckui": "folder-paused",
 				children: [
-					/* @__PURE__ */ A(W, {
-						icon: N,
+					/* @__PURE__ */ j(W, {
+						icon: P,
 						strokeWidth: 2
 					}),
-					/* @__PURE__ */ A(p, { children: y("folder.paused") }),
-					/* @__PURE__ */ j(f, { children: [b(C.blocked), /* @__PURE__ */ A(m, {
+					/* @__PURE__ */ j(p, { children: b("folder.paused") }),
+					/* @__PURE__ */ M(f, { children: [x(w.blocked), /* @__PURE__ */ j(m, {
 						variant: "outline",
 						size: "xs",
 						className: "mt-1 w-fit",
-						onClick: () => C.start(),
-						children: y("folder.resume")
+						onClick: () => w.start(),
+						children: b("folder.resume")
 					})] })
 				]
 			}),
-			t.error && /* @__PURE__ */ j(d, {
+			t.error && /* @__PURE__ */ M(d, {
 				variant: "destructive",
 				role: "alert",
 				"data-ckui": "folder-error",
-				children: [/* @__PURE__ */ A(W, {
-					icon: N,
+				children: [/* @__PURE__ */ j(W, {
+					icon: P,
 					strokeWidth: 2
-				}), /* @__PURE__ */ A(f, { children: b(t.error) })]
+				}), /* @__PURE__ */ j(f, { children: x(t.error) })]
 			}),
-			B.size > 0 && /* @__PURE__ */ j("div", {
+			B.size > 0 && /* @__PURE__ */ M("div", {
 				className: "flex flex-wrap items-center gap-2 rounded-md bg-muted px-3 py-1.5 text-sm",
 				"data-ckui": "folder-selection",
 				children: [
-					/* @__PURE__ */ A("span", {
+					/* @__PURE__ */ j("span", {
 						className: "tabular-nums",
-						children: y("folder.selected", { count: B.size })
+						children: b("folder.selected", { count: B.size })
 					}),
-					/* @__PURE__ */ j(m, {
+					/* @__PURE__ */ M(m, {
 						variant: "destructive",
 						size: "xs",
-						disabled: R || t.updating,
-						onClick: () => void fe(),
-						children: [/* @__PURE__ */ A(W, {
-							icon: F,
+						disabled: z || t.updating,
+						onClick: () => void pe(),
+						children: [/* @__PURE__ */ j(W, {
+							icon: I,
 							strokeWidth: 2
-						}), y("folder.removeSelected")]
+						}), b("folder.removeSelected")]
 					}),
-					/* @__PURE__ */ A(m, {
+					/* @__PURE__ */ j(m, {
 						variant: "ghost",
 						size: "xs",
 						onClick: () => V(/* @__PURE__ */ new Set()),
-						children: y("folder.clearSelection")
+						children: b("folder.clearSelection")
 					})
 				]
 			}),
-			S.map((e) => e.files.length ? /* @__PURE__ */ A(le, {
+			C.map((e) => e.files.length ? /* @__PURE__ */ j(le, {
 				group: e,
-				titled: S.length > 1,
+				titled: C.length > 1,
 				folder: t,
-				disabled: R,
+				disabled: z,
 				selected: B,
 				onSelect: (e, t) => V((n) => t ? /* @__PURE__ */ new Set([...n, e]) : new Set([...n].filter((t) => t !== e))),
 				renaming: oe,
@@ -268,61 +268,72 @@ function J(e) {
 				},
 				rowActions: c
 			}, e.path) : null),
-			t.waiting.length > 0 && /* @__PURE__ */ A("ul", {
+			t.waiting.length > 0 && /* @__PURE__ */ j("ul", {
 				className: "grid",
-				"aria-label": y("folder.label"),
-				children: t.waiting.map((e, t) => /* @__PURE__ */ j("li", {
+				"aria-label": b("folder.label"),
+				children: t.waiting.map((e, t) => /* @__PURE__ */ M("li", {
 					className: "flex min-h-11 items-center gap-2 px-1",
 					"data-ckui": "queue-row",
 					"data-status": "waiting",
-					children: [/* @__PURE__ */ A(Y, { kind: G(e.type) }), /* @__PURE__ */ j("div", {
+					children: [/* @__PURE__ */ j(Y, { kind: G(e.type) }), /* @__PURE__ */ M("div", {
 						className: "grid min-w-0 flex-1 gap-1",
-						children: [/* @__PURE__ */ A("span", {
+						children: [/* @__PURE__ */ j("span", {
 							className: "truncate text-sm",
 							children: e.name
-						}), /* @__PURE__ */ A("span", {
+						}), /* @__PURE__ */ j("span", {
 							className: "text-xs text-muted-foreground",
 							"data-ckui": "queue-status",
-							children: y("folder.queued")
+							children: b("folder.queued")
 						})]
 					})]
 				}, t))
 			}),
-			C.items.length > 0 && /* @__PURE__ */ A(T, {
-				items: C.items,
+			t.pending.length > 0 && /* @__PURE__ */ j("ul", {
+				className: "grid",
+				"aria-label": b("folder.label"),
+				"data-ckui": "folder-pending",
+				children: t.pending.map((e) => /* @__PURE__ */ j(ue, {
+					file: e,
+					folder: t,
+					auto: A,
+					disabled: z
+				}, e.path))
+			}),
+			w.items.length > 0 && /* @__PURE__ */ j(E, {
+				items: w.items,
 				id: (e) => e.id,
 				name: (e) => e.file.name,
-				disabled: k || R,
-				label: y("folder.label"),
-				onMove: (e, t) => C.move(C.items[e].id, t),
+				disabled: A || z,
+				label: b("folder.label"),
+				onMove: (e, t) => w.move(w.items[e].id, t),
 				row: (e) => ({
 					className: "flex min-h-11 items-center gap-2 px-1",
 					"data-ckui": "queue-row",
 					"data-status": e.status
 				}),
-				children: (e, n) => /* @__PURE__ */ A(ue, {
+				children: (e, n) => /* @__PURE__ */ j(de, {
 					item: e,
-					handle: k ? null : n,
-					auto: k,
+					handle: A ? null : n,
+					auto: A,
 					folder: t
 				})
 			}),
-			(!k && pe > 0 || k && t.error && pe > 0) && /* @__PURE__ */ j(m, {
+			(!A && me > 0 || A && t.error && me > 0) && /* @__PURE__ */ M(m, {
 				className: "w-fit",
-				disabled: R || !C.ready || t.committing,
+				disabled: z || w.items.length > 0 && !w.ready || t.committing,
 				onClick: () => void t.commit().catch(() => {}),
 				"data-ckui": "folder-commit",
-				children: [t.committing && /* @__PURE__ */ A(W, {
-					icon: z,
+				children: [t.committing && /* @__PURE__ */ j(W, {
+					icon: re,
 					strokeWidth: 2,
 					className: "motion-safe:animate-spin"
-				}), k ? y("folder.commitAgain") : y("folder.commit", { count: C.items.filter((e) => e.status !== "committed").length })]
+				}), A ? b("folder.commitAgain") : b("folder.commit", { count: w.items.filter((e) => e.status !== "committed").length + t.pending.length })]
 			}),
 			l,
-			/* @__PURE__ */ A("input", {
+			/* @__PURE__ */ j("input", {
 				ref: J,
 				type: "file",
-				accept: I,
+				accept: L,
 				className: "sr-only",
 				tabIndex: -1,
 				"aria-hidden": !0,
@@ -331,7 +342,7 @@ function J(e) {
 					e.target.value = "", n && X && t.replace(X, n).catch(() => {}), Z(null);
 				}
 			}),
-			/* @__PURE__ */ A(ee, {
+			/* @__PURE__ */ j(_, {
 				open: !!H,
 				onOpenChange: (e) => !e && K.status !== "saving" && U(null),
 				source: "source" in K ? K.source ?? null : null,
@@ -339,9 +350,9 @@ function J(e) {
 				aspects: q?.aspect ? void 0 : u,
 				initialEdit: "edit" in K ? K.edit : null,
 				minWidth: q?.min_width,
-				title: y("folder.crop"),
+				title: b("folder.crop"),
 				busy: K.status === "saving",
-				error: K.status === "error" ? b(K.error) : void 0,
+				error: K.status === "error" ? x(K.error) : void 0,
 				onConfirm: (e) => void K.save(e)
 			})
 		]
@@ -349,21 +360,21 @@ function J(e) {
 }
 function le({ group: e, titled: t, folder: n, disabled: r, selected: i, onSelect: a, renaming: s, onRename: c, onCrop: l, onReplace: u, rowActions: d }) {
 	let { t: f } = o(), p = f(`folder.kinds.${q(e.rule)}`), m = e.rule?.max;
-	return /* @__PURE__ */ j("section", {
+	return /* @__PURE__ */ M("section", {
 		className: "grid gap-1",
 		"data-ckui": "folder-group",
 		"data-path": e.path,
-		children: [t && /* @__PURE__ */ j("h4", {
+		children: [t && /* @__PURE__ */ M("h4", {
 			className: "px-1 text-xs font-medium text-muted-foreground tabular-nums",
 			children: [
 				p,
 				" · ",
 				m ? `${e.files.length} / ${m}` : e.files.length
 			]
-		}), /* @__PURE__ */ A(T, {
+		}), /* @__PURE__ */ j(E, {
 			items: e.files,
 			id: (e) => e.path,
-			name: (t) => S(e, t.path),
+			name: (t) => C(e, t.path),
 			disabled: r || n.updating,
 			label: p,
 			onMove: (t, r) => void n.move(e.files[t].path, r).catch(() => {}),
@@ -372,7 +383,7 @@ function le({ group: e, titled: t, folder: n, disabled: r, selected: i, onSelect
 				"data-ckui": "upload-row",
 				"data-path": e.path
 			}),
-			children: (t, o) => /* @__PURE__ */ A(X, {
+			children: (t, o) => /* @__PURE__ */ j(X, {
 				file: t,
 				group: e,
 				handle: o,
@@ -390,135 +401,135 @@ function le({ group: e, titled: t, folder: n, disabled: r, selected: i, onSelect
 	});
 }
 function Y({ kind: e, url: t, busy: n }) {
-	return /* @__PURE__ */ j("span", {
+	return /* @__PURE__ */ M("span", {
 		className: "relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-muted text-muted-foreground",
 		"data-ckui": "thumb",
-		children: [t ? /* @__PURE__ */ A("img", {
+		children: [t ? /* @__PURE__ */ j("img", {
 			src: t,
 			alt: "",
 			loading: "lazy",
 			decoding: "async",
 			className: "size-full object-cover"
-		}) : /* @__PURE__ */ A(W, {
+		}) : /* @__PURE__ */ j(W, {
 			icon: K[e],
 			strokeWidth: 1.75,
 			className: "size-4.5"
-		}), n && !t && /* @__PURE__ */ A("span", {
+		}), n && !t && /* @__PURE__ */ j("span", {
 			"aria-hidden": !0,
 			className: "absolute inset-1.5 rounded-full border-2 border-current/25 border-t-current motion-safe:animate-spin"
 		})]
 	});
 }
-function X({ file: t, group: r, handle: i, folder: a, disabled: s, selected: c, onSelect: d, renaming: f, onRename: p, onCrop: h, onReplace: g, actions: ee }) {
-	let { t: _, error: v } = o(), y = G(t.type), b = S(r, t.path), x = u(t), w = D(() => C(a.read.read, t), [a.read.read, t]), T = s || a.updating, E = t.failed ? v(e(t.failed)) : void 0;
-	return /* @__PURE__ */ j(k, { children: [
+function X({ file: t, group: r, handle: i, folder: a, disabled: s, selected: c, onSelect: d, renaming: f, onRename: p, onCrop: h, onReplace: g, actions: _ }) {
+	let { t: v, error: y } = o(), b = G(t.type), x = C(r, t.path), S = u(t), T = O(() => w(a.read.read, t), [a.read.read, t]), E = s || a.updating, D = t.failed ? y(e(t.failed)) : void 0;
+	return /* @__PURE__ */ M(A, { children: [
 		i,
-		/* @__PURE__ */ A("input", {
+		/* @__PURE__ */ j("input", {
 			type: "checkbox",
 			className: "size-4 shrink-0 accent-primary",
 			checked: c,
 			disabled: s,
-			"aria-label": _("folder.select", { name: b }),
+			"aria-label": v("folder.select", { name: x }),
 			onChange: (e) => d(e.target.checked)
 		}),
-		/* @__PURE__ */ A(Y, {
-			kind: y,
-			url: w?.url,
-			busy: x
+		/* @__PURE__ */ j(Y, {
+			kind: b,
+			url: T?.url,
+			busy: S
 		}),
-		/* @__PURE__ */ j("div", {
+		/* @__PURE__ */ M("div", {
 			className: "grid min-w-0 flex-1 gap-1",
 			children: [
-				/* @__PURE__ */ j("div", {
+				/* @__PURE__ */ M("div", {
 					className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5",
 					children: [
-						f ? /* @__PURE__ */ A(Z, {
-							name: n(b),
-							label: _("folder.renameLabel", { name: b }),
+						f ? /* @__PURE__ */ j(Z, {
+							name: n(x),
+							label: v("folder.renameLabel", { name: x }),
 							onDone: (e) => e === null ? p(null) : a.rename(t.path, e).then(() => p(null))
-						}) : /* @__PURE__ */ A("span", {
+						}) : /* @__PURE__ */ j("span", {
 							className: "max-w-full truncate text-sm",
 							title: t.path,
 							"data-ckui": "upload-name",
-							children: b
+							children: x
 						}),
-						t.edit && /* @__PURE__ */ A("span", {
+						t.edit && /* @__PURE__ */ j("span", {
 							className: "shrink-0 rounded-sm border border-border px-1.5 text-[11px] text-muted-foreground",
 							"data-ckui": "edited",
-							children: _("folder.edited")
+							children: v("folder.edited")
 						}),
-						E && /* @__PURE__ */ A("span", {
+						D && /* @__PURE__ */ j("span", {
 							className: "shrink-0 rounded-sm bg-destructive/10 px-1.5 text-[11px] font-medium text-destructive",
-							title: E,
+							title: D,
 							"data-ckui": "failed",
-							children: _(y === "video" ? "folder.failedVideo" : "folder.failed")
+							children: v(b === "video" ? "folder.failedVideo" : "folder.failed")
 						})
 					]
 				}),
-				E && /* @__PURE__ */ A("p", {
+				D && /* @__PURE__ */ j("p", {
 					className: "text-xs text-destructive",
-					children: E
+					children: D
 				}),
-				x && y === "video" && /* @__PURE__ */ A(l, {
+				S && b === "video" && /* @__PURE__ */ j(l, {
 					progress: t.progress,
 					className: "max-w-sm text-xs"
 				}),
-				x && y !== "video" && /* @__PURE__ */ A("span", {
+				S && b !== "video" && /* @__PURE__ */ j("span", {
 					className: "text-xs text-muted-foreground",
-					children: _("folder.processing")
+					children: v("folder.processing")
 				})
 			]
 		}),
-		/* @__PURE__ */ j("span", {
+		/* @__PURE__ */ M("span", {
 			className: "flex shrink-0 items-center gap-0.5",
 			"data-ckui": "upload-actions",
 			children: [
-				ee,
-				y === "image" && /* @__PURE__ */ A(m, {
+				_,
+				b === "image" && /* @__PURE__ */ j(m, {
 					variant: "ghost",
 					size: "icon-sm",
-					"aria-label": _("folder.crop"),
-					title: _("folder.crop"),
-					disabled: T || !!t.staged || !t.size,
+					"aria-label": v("folder.crop"),
+					title: v("folder.crop"),
+					disabled: E || !!t.staged || !t.size,
 					onClick: () => h(t.path),
-					children: /* @__PURE__ */ A(W, {
-						icon: P,
+					children: /* @__PURE__ */ j(W, {
+						icon: F,
 						strokeWidth: 2
 					})
 				}),
-				!r.rule?.named && /* @__PURE__ */ A(m, {
+				!r.rule?.named && /* @__PURE__ */ j(m, {
 					variant: "ghost",
 					size: "icon-sm",
-					"aria-label": _("common.rename"),
-					title: _("common.rename"),
-					disabled: T,
+					"aria-label": v("common.rename"),
+					title: v("common.rename"),
+					disabled: E,
 					onClick: () => p(t.path),
-					children: /* @__PURE__ */ A(W, {
-						icon: I,
+					children: /* @__PURE__ */ j(W, {
+						icon: L,
 						strokeWidth: 2
 					})
 				}),
-				/* @__PURE__ */ A(m, {
+				/* @__PURE__ */ j(m, {
 					variant: "ghost",
 					size: "icon-sm",
-					"aria-label": _("common.replace"),
-					title: _("common.replace"),
-					disabled: T,
+					"aria-label": v("common.replace"),
+					title: v("common.replace"),
+					disabled: E,
 					onClick: () => g(t.path),
-					children: /* @__PURE__ */ A(W, {
+					children: /* @__PURE__ */ j(W, {
 						icon: H,
 						strokeWidth: 2
 					})
 				}),
-				/* @__PURE__ */ A(m, {
+				/* @__PURE__ */ j(m, {
 					variant: "ghost",
 					size: "icon-sm",
-					"aria-label": _("common.remove"),
-					title: _("common.remove"),
-					disabled: T,
+					"aria-label": v("common.remove"),
+					title: v("common.remove"),
+					disabled: E,
 					onClick: () => void a.remove([t.path]).catch(() => {}),
-					children: /* @__PURE__ */ A(W, {
-						icon: F,
+					children: /* @__PURE__ */ j(W, {
+						icon: I,
 						strokeWidth: 2
 					})
 				})
@@ -527,10 +538,10 @@ function X({ file: t, group: r, handle: i, folder: a, disabled: s, selected: c,
 	] });
 }
 function Z({ name: e, label: t, onDone: n }) {
-	let [r, i] = O(e), a = ne(!1), o = (t) => {
+	let [r, i] = k(e), a = te(!1), o = (t) => {
 		a.current || (a.current = !0, Promise.resolve(n(t && t.trim() && t.trim() !== e ? t.trim() : null)).catch(() => a.current = !1));
 	};
-	return /* @__PURE__ */ A("input", {
+	return /* @__PURE__ */ j("input", {
 		autoFocus: !0,
 		"aria-label": t,
 		value: r,
@@ -543,6 +554,45 @@ function Z({ name: e, label: t, onDone: n }) {
 		"data-ckui": "rename"
 	});
 }
+function ue({ file: t, folder: n, auto: r, disabled: i }) {
+	let { t: a, error: s } = o(), c = G(t.type), l = u(t), d = O(() => w(n.read.read, t), [n.read.read, t]), f = t.failed ? s(e(t.failed)) : l ? t.progress && t.progress.phase !== "queued" ? a("folder.processingPercent", { percent: Math.round(t.progress.percent) }) : a("folder.processing") : a(r ? "folder.adding" : "folder.notAdded");
+	return /* @__PURE__ */ M("li", {
+		className: "flex min-h-11 items-center gap-2 px-1",
+		"data-ckui": "pending-row",
+		"data-path": t.path,
+		children: [
+			/* @__PURE__ */ j(Y, {
+				kind: c,
+				url: d?.url,
+				busy: l
+			}),
+			/* @__PURE__ */ M("div", {
+				className: "grid min-w-0 flex-1 gap-1",
+				children: [/* @__PURE__ */ j("span", {
+					className: "truncate text-sm",
+					title: t.path,
+					children: t.path.slice(t.path.lastIndexOf("/") + 1)
+				}), /* @__PURE__ */ j("span", {
+					className: N("text-xs", t.failed ? "text-destructive" : "text-muted-foreground"),
+					"data-ckui": "queue-status",
+					children: f
+				})]
+			}),
+			/* @__PURE__ */ j(m, {
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": a("common.remove"),
+				title: a("common.remove"),
+				disabled: i || n.updating,
+				onClick: () => void n.remove([t.path]).catch(() => {}),
+				children: /* @__PURE__ */ j(W, {
+					icon: I,
+					strokeWidth: 2
+				})
+			})
+		]
+	});
+}
 function Q(t, n, r, i) {
 	if (r.status === "failed") return n(r.error);
 	if (r.status === "uploading") return h(t, r.progress);
@@ -552,54 +602,54 @@ function Q(t, n, r, i) {
 	}
 	return r.status === "committed" ? t("folder.adding") : t("folder.queued");
 }
-function ue({ item: e, handle: t, auto: n, folder: r }) {
+function de({ item: e, handle: t, auto: n, folder: r }) {
 	let { t: i, error: a } = o(), { queue: s } = r, l = G(e.file.type), u = Q(i, a, e, n), d = e.status === "uploading" ? g(e.progress) : e.unattached && !e.processed && e.processing?.progress ? e.processing.progress.percent : null;
-	return /* @__PURE__ */ j(k, { children: [
+	return /* @__PURE__ */ M(A, { children: [
 		t,
-		/* @__PURE__ */ A(Y, {
+		/* @__PURE__ */ j(Y, {
 			kind: l,
 			busy: e.status === "uploading" || !!e.unattached && !e.processed
 		}),
-		/* @__PURE__ */ j("div", {
+		/* @__PURE__ */ M("div", {
 			className: "grid min-w-0 flex-1 gap-1",
 			children: [
-				/* @__PURE__ */ A("span", {
+				/* @__PURE__ */ j("span", {
 					className: "truncate text-sm",
 					title: e.path,
 					children: e.file.name
 				}),
-				d !== null && /* @__PURE__ */ A(c, {
+				d !== null && /* @__PURE__ */ j(c, {
 					value: d,
 					"aria-label": u,
 					className: "max-w-sm"
 				}),
-				/* @__PURE__ */ A("span", {
-					className: M("text-xs", e.status === "failed" ? "text-destructive" : "text-muted-foreground"),
+				/* @__PURE__ */ j("span", {
+					className: N("text-xs", e.status === "failed" ? "text-destructive" : "text-muted-foreground"),
 					"data-ckui": "queue-status",
 					children: u
 				})
 			]
 		}),
-		/* @__PURE__ */ j("span", {
+		/* @__PURE__ */ M("span", {
 			className: "flex shrink-0 items-center gap-0.5",
-			children: [e.status === "failed" && /* @__PURE__ */ A(m, {
+			children: [e.status === "failed" && /* @__PURE__ */ j(m, {
 				variant: "ghost",
 				size: "icon-sm",
 				"aria-label": i("common.retry"),
 				title: i("common.retry"),
 				onClick: () => s.retry(e.id),
-				children: /* @__PURE__ */ A(W, {
+				children: /* @__PURE__ */ j(W, {
 					icon: V,
 					strokeWidth: 2
 				})
-			}), /* @__PURE__ */ A(m, {
+			}), /* @__PURE__ */ j(m, {
 				variant: "ghost",
 				size: "icon-sm",
 				"aria-label": i("common.remove"),
 				title: i("common.remove"),
 				onClick: () => s.remove(e.id),
-				children: /* @__PURE__ */ A(W, {
-					icon: F,
+				children: /* @__PURE__ */ j(W, {
+					icon: I,
 					strokeWidth: 2
 				})
 			})]