@openrails/contentkit-ui 0.68.0 → 0.69.0

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

@@ -57,39 +57,66 @@ function ae(e, t) {
 	return n.join(" · ");
 }
 function q(e) {
-	return /* @__PURE__ */ A(J, { ...e }, `${e.item.kind}/${e.item.id}`);
+	if (e.folder) {
+		let { folder: t, ...n } = e;
+		return /* @__PURE__ */ A(J, {
+			folder: t,
+			...n
+		}, t.ref ? `${t.ref.kind}/${t.ref.id}` : "");
+	}
+	return /* @__PURE__ */ A(oe, { ...e }, `${e.item.kind}/${e.item.id}`);
+}
+function oe(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 = C(t, f);
+	return /* @__PURE__ */ A(J, {
+		folder: p,
+		ref: n,
+		label: r,
+		toolbar: i,
+		rowActions: a,
+		footer: o,
+		aspects: s,
+		confirmRemove: c,
+		disabled: l,
+		className: u,
+		appearance: d
+	});
 }
+var se = {
+	kind: "",
+	id: ""
+};
 function J(e) {
-	let { item: t, ref: r, label: i, toolbar: s, rowActions: c, footer: l, aspects: m = ie, confirmRemove: h, disabled: g, className: _, appearance: v, ...y } = e, { t: x, error: S } = a(), D = C(t, y), { groups: k, queue: P, read: I } = D;
+	let { folder: t, ref: r, label: i, toolbar: s, rowActions: c, footer: l, aspects: m = ie, confirmRemove: h, disabled: g, className: _, appearance: v } = e, { t: y, error: x } = a(), { groups: S, queue: C, read: D, options: k } = t;
 	E(r, () => ({
-		discard: D.discard,
-		commit: D.commit,
-		folder: D
-	}), [D]);
-	let L = y.commit === "auto", R = k.flatMap((e) => e.rule ? [e.rule] : []), z = n(R), B = D.uploads.length + P.items.length === 0, V = !!g, [H, W] = O(/* @__PURE__ */ new Set());
+		discard: t.discard,
+		commit: t.commit,
+		folder: t
+	}), [t]);
+	let P = k.commit === "auto", I = S.flatMap((e) => e.rule ? [e.rule] : []), L = n(I), R = t.uploads.length + C.items.length + t.waiting.length === 0, z = !!g, [B, V] = O(/* @__PURE__ */ new Set());
 	T(() => {
-		let e = new Set(D.uploads.map((e) => e.path));
-		W((t) => [...t].every((t) => e.has(t)) ? t : new Set([...t].filter((t) => e.has(t))));
-	}, [D.uploads]);
-	let [G, K] = O(null), q = b(t, G, {
-		client: y.client,
-		onError: y.onError,
-		onSaved: () => K(null)
-	}), J = G ? k.find((e) => e.files.some((e) => e.path === G))?.rule : void 0, [Y, se] = O(null), X = te(null), [Z, Q] = O(null), [le, $] = O(!1), ue = {
+		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, G] = O(null), K = b(t.ref ?? se, H, {
+		client: k.client,
+		onError: k.onError,
+		onSaved: () => G(null)
+	}), q = H ? S.find((e) => e.files.some((e) => e.path === H))?.rule : void 0, [oe, J] = O(null), X = te(null), [Z, Q] = O(null), [ue, $] = O(!1), de = {
 		onDragOver: (e) => {
-			!V && 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) => {
-			!V && e.dataTransfer.files.length && (e.preventDefault(), $(!1), D.add(e.dataTransfer.files));
+			!z && e.dataTransfer.files.length && (e.preventDefault(), $(!1), t.add(e.dataTransfer.files));
 		}
-	}, de = async () => {
-		let e = [...H];
-		(h === !1 || (h ? await h(e.length) : globalThis.confirm?.(x("folder.confirmRemove", { count: e.length })) ?? !0)) && await D.remove(e).then(() => W(/* @__PURE__ */ new Set()), () => {});
-	}, fe = P.items.filter((e) => e.status === "uploaded").length, pe = (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 && le && "border-primary bg-primary/5", V && "pointer-events-none opacity-50"),
+	}, fe = 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 && ue && "border-primary bg-primary/5", z && "pointer-events-none opacity-50"),
 		"data-ckui": e ? "folder-drop" : "folder-add",
 		children: [
 			/* @__PURE__ */ A(U, {
@@ -99,21 +126,21 @@ function J(e) {
 			}),
 			e ? /* @__PURE__ */ A("strong", {
 				className: "font-medium text-foreground",
-				children: x("folder.drop")
-			}) : x("folder.add"),
-			e && R.length > 0 && /* @__PURE__ */ A("span", {
+				children: y("folder.drop")
+			}) : y("folder.add"),
+			e && I.length > 0 && /* @__PURE__ */ A("span", {
 				className: "text-xs",
-				children: ae(x, R)
+				children: ae(y, I)
 			}),
 			/* @__PURE__ */ A("input", {
 				type: "file",
 				multiple: !0,
-				accept: z,
+				accept: L,
 				className: "sr-only",
-				disabled: V,
+				disabled: z,
 				"data-ckui": "file",
 				onChange: (e) => {
-					D.add([...e.target.files ?? []]), e.target.value = "";
+					t.add([...e.target.files ?? []]), e.target.value = "";
 				}
 			})
 		]
@@ -122,22 +149,22 @@ function J(e) {
 		appearance: v,
 		className: M("grid gap-3", _),
 		"data-ckui": "media-folder",
-		"data-over": le ? "" : void 0,
-		...ue,
+		"data-over": ue ? "" : void 0,
+		...de,
 		children: [
 			/* @__PURE__ */ j("div", {
 				className: "flex flex-wrap items-center justify-between gap-2",
 				"data-ckui": "folder-header",
 				children: [/* @__PURE__ */ A("h3", {
 					className: "text-sm font-semibold",
-					children: i ?? x("folder.label")
+					children: i ?? y("folder.label")
 				}), /* @__PURE__ */ j("div", {
 					className: "flex flex-wrap items-center gap-2",
-					children: [s, !B && pe(!1)]
+					children: [s, !R && me(!1)]
 				})]
 			}),
-			B && I.read && pe(!0),
-			B && !I.read && I.loading && /* @__PURE__ */ A("div", {
+			R && (D.read || !t.ref) && me(!0),
+			R && !D.read && D.loading && /* @__PURE__ */ A("div", {
 				className: "flex justify-center py-6 text-muted-foreground",
 				"data-ckui": "folder-loading",
 				children: /* @__PURE__ */ A(U, {
@@ -146,7 +173,7 @@ function J(e) {
 					className: "size-5 motion-safe:animate-spin"
 				})
 			}),
-			D.refused.length > 0 && /* @__PURE__ */ j(u, {
+			t.refused.length > 0 && /* @__PURE__ */ j(u, {
 				variant: "destructive",
 				role: "alert",
 				"data-ckui": "folder-refused",
@@ -155,23 +182,23 @@ function J(e) {
 					strokeWidth: 2
 				}), /* @__PURE__ */ j(d, { children: [/* @__PURE__ */ A("ul", {
 					className: "grid gap-0.5",
-					children: D.refused.map((e, t) => /* @__PURE__ */ j("li", { children: [
+					children: t.refused.map((e, t) => /* @__PURE__ */ j("li", { children: [
 						/* @__PURE__ */ A("span", {
 							className: "font-medium",
 							children: e.file.name
 						}),
 						": ",
-						S(e.error)
+						x(e.error)
 					] }, t))
 				}), /* @__PURE__ */ A(p, {
 					variant: "outline",
 					size: "xs",
 					className: "mt-1 w-fit",
-					onClick: D.dismiss,
-					children: x("folder.dismiss")
+					onClick: t.dismiss,
+					children: y("folder.dismiss")
 				})] })]
 			}),
-			P.blocked && /* @__PURE__ */ j(u, {
+			C.blocked && /* @__PURE__ */ j(u, {
 				variant: "destructive",
 				role: "alert",
 				"data-ckui": "folder-paused",
@@ -180,126 +207,146 @@ function J(e) {
 						icon: N,
 						strokeWidth: 2
 					}),
-					/* @__PURE__ */ A(f, { children: x("folder.paused") }),
-					/* @__PURE__ */ j(d, { children: [S(P.blocked), /* @__PURE__ */ A(p, {
+					/* @__PURE__ */ A(f, { children: y("folder.paused") }),
+					/* @__PURE__ */ j(d, { children: [x(C.blocked), /* @__PURE__ */ A(p, {
 						variant: "outline",
 						size: "xs",
 						className: "mt-1 w-fit",
-						onClick: () => P.start(),
-						children: x("folder.resume")
+						onClick: () => C.start(),
+						children: y("folder.resume")
 					})] })
 				]
 			}),
-			D.error && /* @__PURE__ */ j(u, {
+			t.error && /* @__PURE__ */ j(u, {
 				variant: "destructive",
 				role: "alert",
 				"data-ckui": "folder-error",
 				children: [/* @__PURE__ */ A(U, {
 					icon: N,
 					strokeWidth: 2
-				}), /* @__PURE__ */ A(d, { children: S(D.error) })]
+				}), /* @__PURE__ */ A(d, { children: x(t.error) })]
 			}),
-			H.size > 0 && /* @__PURE__ */ j("div", {
+			B.size > 0 && /* @__PURE__ */ j("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", {
 						className: "tabular-nums",
-						children: x("folder.selected", { count: H.size })
+						children: y("folder.selected", { count: B.size })
 					}),
 					/* @__PURE__ */ j(p, {
 						variant: "destructive",
 						size: "xs",
-						disabled: V || D.updating,
-						onClick: () => void de(),
+						disabled: z || t.updating,
+						onClick: () => void fe(),
 						children: [/* @__PURE__ */ A(U, {
 							icon: F,
 							strokeWidth: 2
-						}), x("folder.removeSelected")]
+						}), y("folder.removeSelected")]
 					}),
 					/* @__PURE__ */ A(p, {
 						variant: "ghost",
 						size: "xs",
-						onClick: () => W(/* @__PURE__ */ new Set()),
-						children: x("folder.clearSelection")
+						onClick: () => V(/* @__PURE__ */ new Set()),
+						children: y("folder.clearSelection")
 					})
 				]
 			}),
-			k.map((e) => e.files.length ? /* @__PURE__ */ A(oe, {
+			S.map((e) => e.files.length ? /* @__PURE__ */ A(ce, {
 				group: e,
-				titled: k.length > 1,
-				folder: D,
-				disabled: V,
-				selected: H,
-				onSelect: (e, t) => W((n) => t ? /* @__PURE__ */ new Set([...n, e]) : new Set([...n].filter((t) => t !== e))),
-				renaming: Y,
-				onRename: se,
-				onCrop: K,
+				titled: S.length > 1,
+				folder: t,
+				disabled: z,
+				selected: B,
+				onSelect: (e, t) => V((n) => t ? /* @__PURE__ */ new Set([...n, e]) : new Set([...n].filter((t) => t !== e))),
+				renaming: oe,
+				onRename: J,
+				onCrop: G,
 				onReplace: (e) => {
 					Q(e), X.current?.click();
 				},
 				rowActions: c
 			}, e.path) : null),
-			P.items.length > 0 && /* @__PURE__ */ A(w, {
-				items: P.items,
+			t.waiting.length > 0 && /* @__PURE__ */ A("ul", {
+				className: "grid",
+				"aria-label": y("folder.label"),
+				children: t.waiting.map((e, t) => /* @__PURE__ */ j("li", {
+					className: "flex min-h-11 items-center gap-2 px-1",
+					"data-ckui": "queue-row",
+					"data-status": "waiting",
+					children: [/* @__PURE__ */ A(Y, { kind: W(e.type) }), /* @__PURE__ */ j("div", {
+						className: "grid min-w-0 flex-1 gap-1",
+						children: [/* @__PURE__ */ A("span", {
+							className: "truncate text-sm",
+							children: e.name
+						}), /* @__PURE__ */ A("span", {
+							className: "text-xs text-muted-foreground",
+							"data-ckui": "queue-status",
+							children: y("folder.queued")
+						})]
+					})]
+				}, t))
+			}),
+			C.items.length > 0 && /* @__PURE__ */ A(w, {
+				items: C.items,
 				id: (e) => e.id,
 				name: (e) => e.file.name,
-				disabled: L || V,
-				label: x("folder.label"),
-				onMove: (e, t) => P.move(P.items[e].id, t),
+				disabled: P || z,
+				label: y("folder.label"),
+				onMove: (e, t) => C.move(C.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, t) => /* @__PURE__ */ A(ce, {
+				children: (e, n) => /* @__PURE__ */ A(le, {
 					item: e,
-					handle: L ? null : t,
-					auto: L,
-					folder: D
+					handle: P ? null : n,
+					auto: P,
+					folder: t
 				})
 			}),
-			(!L && fe > 0 || L && D.error && fe > 0) && /* @__PURE__ */ j(p, {
+			(!P && pe > 0 || P && t.error && pe > 0) && /* @__PURE__ */ j(p, {
 				className: "w-fit",
-				disabled: V || !P.ready || D.committing,
-				onClick: () => void D.commit().catch(() => {}),
+				disabled: z || !C.ready || t.committing,
+				onClick: () => void t.commit().catch(() => {}),
 				"data-ckui": "folder-commit",
-				children: [D.committing && /* @__PURE__ */ A(U, {
+				children: [t.committing && /* @__PURE__ */ A(U, {
 					icon: re,
 					strokeWidth: 2,
 					className: "motion-safe:animate-spin"
-				}), L ? x("folder.commitAgain") : x("folder.commit", { count: P.items.length })]
+				}), P ? y("folder.commitAgain") : y("folder.commit", { count: C.items.filter((e) => e.status !== "committed").length })]
 			}),
 			l,
 			/* @__PURE__ */ A("input", {
 				ref: X,
 				type: "file",
-				accept: z,
+				accept: L,
 				className: "sr-only",
 				tabIndex: -1,
 				"aria-hidden": !0,
 				onChange: (e) => {
-					let t = e.target.files?.[0];
-					e.target.value = "", t && Z && D.replace(Z, t).catch(() => {}), Q(null);
+					let n = e.target.files?.[0];
+					e.target.value = "", n && Z && t.replace(Z, n).catch(() => {}), Q(null);
 				}
 			}),
 			/* @__PURE__ */ A(ee, {
-				open: !!G,
-				onOpenChange: (e) => !e && q.status !== "saving" && K(null),
-				source: "source" in q ? q.source ?? null : null,
-				aspect: J?.aspect ?? "",
-				aspects: J?.aspect ? void 0 : m,
-				initialEdit: "edit" in q ? q.edit : null,
-				minWidth: J?.min_width,
-				title: x("folder.crop"),
-				busy: q.status === "saving",
-				error: q.status === "error" ? S(q.error) : void 0,
-				onConfirm: (e) => void q.save(e)
+				open: !!H,
+				onOpenChange: (e) => !e && K.status !== "saving" && G(null),
+				source: "source" in K ? K.source ?? null : null,
+				aspect: q?.aspect ?? "",
+				aspects: q?.aspect ? void 0 : m,
+				initialEdit: "edit" in K ? K.edit : null,
+				minWidth: q?.min_width,
+				title: y("folder.crop"),
+				busy: K.status === "saving",
+				error: K.status === "error" ? x(K.error) : void 0,
+				onConfirm: (e) => void K.save(e)
 			})
 		]
 	});
 }
-function oe({ group: e, titled: t, folder: n, disabled: r, selected: i, onSelect: o, renaming: s, onRename: c, onCrop: l, onReplace: u, rowActions: d }) {
+function ce({ group: e, titled: t, folder: n, disabled: r, selected: i, onSelect: o, renaming: s, onRename: c, onCrop: l, onReplace: u, rowActions: d }) {
 	let { t: f } = a(), p = f(`folder.kinds.${K(e.rule)}`), m = e.rule?.max;
 	return /* @__PURE__ */ j("section", {
 		className: "grid gap-1",
@@ -324,7 +371,7 @@ function oe({ group: e, titled: t, folder: n, disabled: r, selected: i, onSelect
 				"data-ckui": "upload-row",
 				"data-path": e.path
 			}),
-			children: (t, a) => /* @__PURE__ */ A(se, {
+			children: (t, a) => /* @__PURE__ */ A(X, {
 				file: t,
 				group: e,
 				handle: a,
@@ -361,7 +408,7 @@ function Y({ kind: e, url: t, busy: n }) {
 		})]
 	});
 }
-function se({ file: n, group: r, handle: i, folder: o, disabled: s, selected: u, onSelect: d, renaming: f, onRename: m, onCrop: h, onReplace: ee, actions: g }) {
+function X({ file: n, group: r, handle: i, folder: o, disabled: s, selected: u, onSelect: d, renaming: f, onRename: m, onCrop: h, onReplace: ee, actions: g }) {
 	let { t: _, error: v } = a(), y = W(n.type), b = x(r, n.path), C = l(n), w = D(() => S(o.read.read, n), [o.read.read, n]), T = s || o.updating, E = n.failed ? v(e(n.failed)) : void 0;
 	return /* @__PURE__ */ j(k, { children: [
 		i,
@@ -384,7 +431,7 @@ function se({ file: n, group: r, handle: i, folder: o, disabled: s, selected: u,
 				/* @__PURE__ */ j("div", {
 					className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5",
 					children: [
-						f ? /* @__PURE__ */ A(X, {
+						f ? /* @__PURE__ */ A(Z, {
 							name: t(b),
 							label: _("folder.renameLabel", { name: b }),
 							onDone: (e) => e === null ? m(null) : o.rename(n.path, e).then(() => m(null))
@@ -478,7 +525,7 @@ function se({ file: n, group: r, handle: i, folder: o, disabled: s, selected: u,
 		})
 	] });
 }
-function X({ name: e, label: t, onDone: n }) {
+function Z({ name: e, label: t, onDone: n }) {
 	let [r, i] = O(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));
 	};
@@ -495,7 +542,7 @@ function X({ name: e, label: t, onDone: n }) {
 		"data-ckui": "rename"
 	});
 }
-function Z(t, n, r, i) {
+function Q(t, n, r, i) {
 	if (r.status === "failed") return n(r.error);
 	if (r.status === "uploading") return m(t, r.progress);
 	if (r.status === "uploaded") {
@@ -504,8 +551,8 @@ function Z(t, n, r, i) {
 	}
 	return r.status === "committed" ? t("folder.adding") : t("folder.queued");
 }
-function ce({ item: e, handle: t, auto: n, folder: r }) {
-	let { t: i, error: o } = a(), { queue: c } = r, l = W(e.file.type), u = Z(i, o, e, n), d = e.status === "uploading" ? h(e.progress) : e.unattached && !e.processed && e.processing?.progress ? e.processing.progress.percent : null;
+function le({ item: e, handle: t, auto: n, folder: r }) {
+	let { t: i, error: o } = a(), { queue: c } = r, l = W(e.file.type), u = Q(i, o, e, n), d = e.status === "uploading" ? h(e.progress) : e.unattached && !e.processed && e.processing?.progress ? e.processing.progress.percent : null;
 	return /* @__PURE__ */ j(k, { children: [
 		t,
 		/* @__PURE__ */ A(Y, {