@questpie/admin 3.2.3 → 3.2.5

package/dist/client/components/primitives/asset-preview.mjs

@@ -1,7 +1,6 @@
 import { cn } from "../../lib/utils.mjs";
 import { Button } from "../ui/button.mjs";
 import { Skeleton } from "../ui/skeleton.mjs";
-import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -67,13 +66,7 @@ function getExtension(filename, mimeType) {
 	}
 	return "";
 }
-function AssetPreview(t0) {
-	const $ = c(154);
-	const { asset, pendingFile, onRemove, onEdit, loading: t1, progress, disabled: t2, showDragHandle: t3, dragHandleProps, variant: t4, href, onClick, className } = t0;
-	const loading = t1 === void 0 ? false : t1;
-	const disabled = t2 === void 0 ? false : t2;
-	const showDragHandle = t3 === void 0 ? false : t3;
-	const variant = t4 === void 0 ? "card" : t4;
+function AssetPreview({ asset, pendingFile, onRemove, onEdit, loading = false, progress, disabled = false, showDragHandle = false, dragHandleProps, variant = "card", href, onClick, className }) {
 	const [imageError, setImageError] = React.useState(false);
 	const hasAssetData = !!(asset.filename || asset.url || pendingFile);
 	const isLoadingAsset = loading && !hasAssetData;
@@ -81,232 +74,113 @@ function AssetPreview(t0) {
 	const mimeType = asset.mimeType || pendingFile?.type;
 	const size = asset.size || pendingFile?.size;
 	const isImageType = isImage(mimeType);
-	let t5;
-	if ($[0] !== mimeType) {
-		t5 = getFileIconName(mimeType);
-		$[0] = mimeType;
-		$[1] = t5;
-	} else t5 = $[1];
-	const fileIconName = t5;
-	let t6;
-	if ($[2] !== filename || $[3] !== mimeType) {
-		t6 = getExtension(filename, mimeType);
-		$[2] = filename;
-		$[3] = mimeType;
-		$[4] = t6;
-	} else t6 = $[4];
-	const extension = t6;
-	let t7;
-	bb0: {
-		if (pendingFile && isImageType) {
-			let t8$1;
-			if ($[5] !== pendingFile) {
-				t8$1 = URL.createObjectURL(pendingFile);
-				$[5] = pendingFile;
-				$[6] = t8$1;
-			} else t8$1 = $[6];
-			t7 = t8$1;
-			break bb0;
-		}
-		if (asset.url && isImageType) {
-			t7 = asset.url;
-			break bb0;
-		}
-		t7 = null;
-	}
-	const thumbnailUrl = t7;
-	let t8;
-	let t9;
-	if ($[7] !== pendingFile || $[8] !== thumbnailUrl) {
-		t8 = () => () => {
+	const fileIconName = getFileIconName(mimeType);
+	const extension = getExtension(filename, mimeType);
+	const thumbnailUrl = React.useMemo(() => {
+		if (pendingFile && isImageType) return URL.createObjectURL(pendingFile);
+		if (asset.url && isImageType) return asset.url;
+		return null;
+	}, [
+		pendingFile,
+		asset.url,
+		isImageType
+	]);
+	React.useEffect(() => {
+		return () => {
 			if (pendingFile && thumbnailUrl) URL.revokeObjectURL(thumbnailUrl);
 		};
-		t9 = [pendingFile, thumbnailUrl];
-		$[7] = pendingFile;
-		$[8] = thumbnailUrl;
-		$[9] = t8;
-		$[10] = t9;
-	} else {
-		t8 = $[9];
-		t9 = $[10];
-	}
-	React.useEffect(t8, t9);
+	}, [pendingFile, thumbnailUrl]);
 	if (variant === "thumbnail") {
-		if (isLoadingAsset) {
-			let t10$2;
-			if ($[11] !== className) {
-				t10$2 = cn("aspect-square w-full", className);
-				$[11] = className;
-				$[12] = t10$2;
-			} else t10$2 = $[12];
-			let t11$2;
-			if ($[13] !== t10$2) {
-				t11$2 = /* @__PURE__ */ jsx(Skeleton, { className: t10$2 });
-				$[13] = t10$2;
-				$[14] = t11$2;
-			} else t11$2 = $[14];
-			return t11$2;
-		}
-		const isInteractive = onClick && !disabled && asset.id;
-		let t10$1;
-		if ($[15] !== asset.id || $[16] !== isInteractive || $[17] !== onClick) {
-			t10$1 = isInteractive ? {
-				role: "button",
-				tabIndex: 0,
-				onClick: () => onClick(asset.id),
-				onKeyDown: (e) => {
-					if (e.key === "Enter" || e.key === " ") {
-						e.preventDefault();
-						onClick(asset.id);
-					}
+		if (isLoadingAsset) return /* @__PURE__ */ jsx(Skeleton, { className: cn("aspect-square w-full", className) });
+		const interactiveProps = onClick && !disabled && asset.id ? {
+			role: "button",
+			tabIndex: 0,
+			onClick: () => onClick(asset.id),
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					onClick(asset.id);
 				}
-			} : {};
-			$[15] = asset.id;
-			$[16] = isInteractive;
-			$[17] = onClick;
-			$[18] = t10$1;
-		} else t10$1 = $[18];
-		const interactiveProps = t10$1;
-		const t11$1 = disabled && "opacity-60";
-		const t12$1 = onClick && !disabled && "hover:border-border cursor-pointer";
-		let t13$1;
-		if ($[19] !== className || $[20] !== t11$1 || $[21] !== t12$1) {
-			t13$1 = cn("group relative aspect-square overflow-hidden border", "bg-muted border-border", t11$1, t12$1, className);
-			$[19] = className;
-			$[20] = t11$1;
-			$[21] = t12$1;
-			$[22] = t13$1;
-		} else t13$1 = $[22];
-		let t14$1;
-		if ($[23] !== asset.alt || $[24] !== fileIconName || $[25] !== filename || $[26] !== imageError || $[27] !== thumbnailUrl) {
-			t14$1 = thumbnailUrl && !imageError ? /* @__PURE__ */ jsx("img", {
-				src: thumbnailUrl,
-				alt: asset.alt || filename,
-				className: "image-outline h-full w-full object-cover",
-				onError: () => setImageError(true)
-			}) : /* @__PURE__ */ jsx("div", {
-				className: "flex h-full w-full items-center justify-center",
-				children: /* @__PURE__ */ jsx(Icon, {
-					icon: fileIconName,
-					className: "text-muted-foreground size-8"
-				})
-			});
-			$[23] = asset.alt;
-			$[24] = fileIconName;
-			$[25] = filename;
-			$[26] = imageError;
-			$[27] = thumbnailUrl;
-			$[28] = t14$1;
-		} else t14$1 = $[28];
-		let t15$1;
-		if ($[29] !== loading || $[30] !== progress) {
-			t15$1 = loading && /* @__PURE__ */ jsx("div", {
-				className: "bg-background absolute inset-0 flex items-center justify-center",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "relative",
-					children: [/* @__PURE__ */ jsx(Icon, {
-						icon: "ph:spinner-gap",
-						className: "text-muted-foreground size-6 animate-spin"
-					}), typeof progress === "number" && /* @__PURE__ */ jsxs("span", {
-						className: "text-muted-foreground absolute inset-0 flex items-center justify-center text-[10px] font-medium tabular-nums",
-						children: [progress, "%"]
-					})]
-				})
-			});
-			$[29] = loading;
-			$[30] = progress;
-			$[31] = t15$1;
-		} else t15$1 = $[31];
-		let t16$1;
-		if ($[32] !== disabled || $[33] !== href || $[34] !== loading || $[35] !== onEdit || $[36] !== onRemove) {
-			t16$1 = !loading && !disabled && (onRemove || onEdit || href) && /* @__PURE__ */ jsxs("div", {
-				className: "absolute inset-0 flex items-center justify-center gap-1 bg-black/50 opacity-0 transition-opacity group-hover:opacity-100",
-				children: [
-					href && /* @__PURE__ */ jsx(Button, {
-						type: "button",
-						variant: "secondary",
-						size: "icon-xs",
-						nativeButton: false,
-						render: /* @__PURE__ */ jsx("a", {
-							href,
-							onClick: _temp
-						}),
-						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:arrow-square-out-bold" })
-					}),
-					onEdit && /* @__PURE__ */ jsx(Button, {
-						type: "button",
-						variant: "secondary",
-						size: "icon-xs",
-						onClick: (e_1) => {
-							e_1.stopPropagation();
-							onEdit();
-						},
-						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:pencil-bold" })
-					}),
-					onRemove && /* @__PURE__ */ jsx(Button, {
-						type: "button",
-						variant: "destructive",
-						size: "icon-xs",
-						onClick: (e_2) => {
-							e_2.stopPropagation();
-							onRemove();
-						},
-						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:trash-bold" })
+			}
+		} : {};
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("group relative aspect-square overflow-hidden border", "bg-muted border-border", disabled && "opacity-60", onClick && !disabled && "hover:border-border cursor-pointer", className),
+			...interactiveProps,
+			children: [
+				thumbnailUrl && !imageError ? /* @__PURE__ */ jsx("img", {
+					src: thumbnailUrl,
+					alt: asset.alt || filename,
+					className: "image-outline h-full w-full object-cover",
+					onError: () => setImageError(true)
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "flex h-full w-full items-center justify-center",
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: fileIconName,
+						className: "text-muted-foreground size-8"
 					})
-				]
-			});
-			$[32] = disabled;
-			$[33] = href;
-			$[34] = loading;
-			$[35] = onEdit;
-			$[36] = onRemove;
-			$[37] = t16$1;
-		} else t16$1 = $[37];
-		let t17$1;
-		if ($[38] !== interactiveProps || $[39] !== t13$1 || $[40] !== t14$1 || $[41] !== t15$1 || $[42] !== t16$1) {
-			t17$1 = /* @__PURE__ */ jsxs("div", {
-				className: t13$1,
-				...interactiveProps,
-				children: [
-					t14$1,
-					t15$1,
-					t16$1
-				]
-			});
-			$[38] = interactiveProps;
-			$[39] = t13$1;
-			$[40] = t14$1;
-			$[41] = t15$1;
-			$[42] = t16$1;
-			$[43] = t17$1;
-		} else t17$1 = $[43];
-		return t17$1;
+				}),
+				loading && /* @__PURE__ */ jsx("div", {
+					className: "bg-background absolute inset-0 flex items-center justify-center",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "ph:spinner-gap",
+							className: "text-muted-foreground size-6 animate-spin"
+						}), typeof progress === "number" && /* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground absolute inset-0 flex items-center justify-center text-[10px] font-medium tabular-nums",
+							children: [progress, "%"]
+						})]
+					})
+				}),
+				!loading && !disabled && (onRemove || onEdit || href) && /* @__PURE__ */ jsxs("div", {
+					className: "absolute inset-0 flex items-center justify-center gap-1 bg-black/50 opacity-0 transition-opacity group-hover:opacity-100",
+					children: [
+						href && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "secondary",
+							size: "icon-xs",
+							nativeButton: false,
+							render: /* @__PURE__ */ jsx("a", {
+								href,
+								onClick: (e) => e.stopPropagation()
+							}),
+							children: /* @__PURE__ */ jsx(Icon, { icon: "ph:arrow-square-out-bold" })
+						}),
+						onEdit && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "secondary",
+							size: "icon-xs",
+							onClick: (e) => {
+								e.stopPropagation();
+								onEdit();
+							},
+							children: /* @__PURE__ */ jsx(Icon, { icon: "ph:pencil-bold" })
+						}),
+						onRemove && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "destructive",
+							size: "icon-xs",
+							onClick: (e) => {
+								e.stopPropagation();
+								onRemove();
+							},
+							children: /* @__PURE__ */ jsx(Icon, { icon: "ph:trash-bold" })
+						})
+					]
+				})
+			]
+		});
 	}
 	if (variant === "compact") {
-		if (isLoadingAsset) {
-			let t10$2;
-			if ($[44] !== className) {
-				t10$2 = cn("panel-surface flex items-center gap-2 p-2", className);
-				$[44] = className;
-				$[45] = t10$2;
-			} else t10$2 = $[45];
-			let t11$2;
-			if ($[46] !== showDragHandle) {
-				t11$2 = showDragHandle && /* @__PURE__ */ jsx(Skeleton, {
+		if (isLoadingAsset) return /* @__PURE__ */ jsxs("div", {
+			className: cn("panel-surface flex items-center gap-2 p-2", className),
+			children: [
+				showDragHandle && /* @__PURE__ */ jsx(Skeleton, {
 					variant: "text",
 					className: "-ml-1 size-4"
-				});
-				$[46] = showDragHandle;
-				$[47] = t11$2;
-			} else t11$2 = $[47];
-			let t12$2;
-			if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
-				t12$2 = /* @__PURE__ */ jsx(Skeleton, { className: "size-8 shrink-0" });
-				$[48] = t12$2;
-			} else t12$2 = $[48];
-			let t13$2;
-			if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
-				t13$2 = /* @__PURE__ */ jsxs("div", {
+				}),
+				/* @__PURE__ */ jsx(Skeleton, { className: "size-8 shrink-0" }),
+				/* @__PURE__ */ jsxs("div", {
 					className: "min-w-0 flex-1 space-y-1.5",
 					children: [/* @__PURE__ */ jsx(Skeleton, {
 						variant: "text",
@@ -315,471 +189,221 @@ function AssetPreview(t0) {
 						variant: "text",
 						className: "h-3 w-16"
 					})]
-				});
-				$[49] = t13$2;
-			} else t13$2 = $[49];
-			let t14$2;
-			if ($[50] !== t10$2 || $[51] !== t11$2) {
-				t14$2 = /* @__PURE__ */ jsxs("div", {
-					className: t10$2,
+				})
+			]
+		});
+		const compactInteractiveProps = onClick && !disabled && asset.id ? {
+			role: "button",
+			tabIndex: 0,
+			onClick: () => onClick(asset.id),
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					onClick(asset.id);
+				}
+			}
+		} : {};
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("panel-surface group flex items-center gap-2 p-2", disabled && "opacity-60", onClick && !disabled && "hover:bg-accent/20 cursor-pointer", className),
+			...compactInteractiveProps,
+			children: [
+				showDragHandle && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "text-muted-foreground hover:text-foreground -ml-1 cursor-grab touch-none active:cursor-grabbing",
+					...dragHandleProps,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:dots-six-vertical-bold",
+						className: "size-4"
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "bg-muted flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-sm",
+					children: thumbnailUrl && !imageError ? /* @__PURE__ */ jsx("img", {
+						src: thumbnailUrl,
+						alt: asset.alt || filename,
+						className: "image-outline h-full w-full object-cover",
+						onError: () => setImageError(true)
+					}) : /* @__PURE__ */ jsx(Icon, {
+						icon: fileIconName,
+						className: "text-muted-foreground size-4"
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "truncate text-sm font-medium",
+						children: filename
+					}), size != null && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-xs tabular-nums",
+						children: formatFileSize(size)
+					})]
+				}),
+				loading && /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:spinner-gap",
+					className: "text-muted-foreground size-4 shrink-0 animate-spin"
+				}),
+				!loading && !disabled && (href || onEdit || onRemove) && /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-1",
 					children: [
-						t11$2,
-						t12$2,
-						t13$2
+						href && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon-xs",
+							nativeButton: false,
+							render: /* @__PURE__ */ jsx("a", {
+								href,
+								onClick: (e) => e.stopPropagation()
+							}),
+							children: /* @__PURE__ */ jsx(Icon, { icon: "ph:arrow-square-out-bold" })
+						}),
+						onEdit && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon-xs",
+							onClick: (e) => {
+								e.stopPropagation();
+								onEdit();
+							},
+							children: /* @__PURE__ */ jsx(Icon, { icon: "ph:pencil-bold" })
+						}),
+						onRemove && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon-xs",
+							onClick: (e) => {
+								e.stopPropagation();
+								onRemove();
+							},
+							className: "text-destructive hover:text-destructive",
+							children: /* @__PURE__ */ jsx(Icon, { icon: "ph:x-bold" })
+						})
 					]
-				});
-				$[50] = t10$2;
-				$[51] = t11$2;
-				$[52] = t14$2;
-			} else t14$2 = $[52];
-			return t14$2;
+				})
+			]
+		});
+	}
+	if (isLoadingAsset) return /* @__PURE__ */ jsxs("div", {
+		className: cn("panel-surface overflow-hidden", className),
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "aspect-video w-full" }), /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1.5 p-3",
+			children: [/* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				className: "h-4 w-3/4"
+			}), /* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				className: "h-3 w-1/2"
+			})]
+		})]
+	});
+	const cardInteractiveProps = onClick && !disabled && asset.id ? {
+		role: "button",
+		tabIndex: 0,
+		onClick: () => onClick(asset.id),
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				onClick(asset.id);
+			}
 		}
-		const isCompactInteractive = onClick && !disabled && asset.id;
-		let t10$1;
-		if ($[53] !== asset.id || $[54] !== isCompactInteractive || $[55] !== onClick) {
-			t10$1 = isCompactInteractive ? {
-				role: "button",
-				tabIndex: 0,
-				onClick: () => onClick(asset.id),
-				onKeyDown: (e_3) => {
-					if (e_3.key === "Enter" || e_3.key === " ") {
-						e_3.preventDefault();
-						onClick(asset.id);
-					}
-				}
-			} : {};
-			$[53] = asset.id;
-			$[54] = isCompactInteractive;
-			$[55] = onClick;
-			$[56] = t10$1;
-		} else t10$1 = $[56];
-		const compactInteractiveProps = t10$1;
-		const t11$1 = disabled && "opacity-60";
-		const t12$1 = onClick && !disabled && "hover:bg-accent/20 cursor-pointer";
-		let t13$1;
-		if ($[57] !== className || $[58] !== t11$1 || $[59] !== t12$1) {
-			t13$1 = cn("panel-surface group flex items-center gap-2 p-2", t11$1, t12$1, className);
-			$[57] = className;
-			$[58] = t11$1;
-			$[59] = t12$1;
-			$[60] = t13$1;
-		} else t13$1 = $[60];
-		let t14$1;
-		if ($[61] !== dragHandleProps || $[62] !== showDragHandle) {
-			t14$1 = showDragHandle && /* @__PURE__ */ jsx("button", {
+	} : {};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("panel-surface group relative overflow-hidden", disabled && "opacity-60", onClick && !disabled && "hover:bg-accent/20 cursor-pointer", className),
+		...cardInteractiveProps,
+		children: [
+			showDragHandle && /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "text-muted-foreground hover:text-foreground -ml-1 cursor-grab touch-none active:cursor-grabbing",
+				className: "text-muted-foreground hover:text-foreground absolute top-2 left-2 z-10 cursor-grab touch-none rounded p-1 active:cursor-grabbing",
 				...dragHandleProps,
 				children: /* @__PURE__ */ jsx(Icon, {
 					icon: "ph:dots-six-vertical-bold",
 					className: "size-4"
 				})
-			});
-			$[61] = dragHandleProps;
-			$[62] = showDragHandle;
-			$[63] = t14$1;
-		} else t14$1 = $[63];
-		let t15$1;
-		if ($[64] !== asset.alt || $[65] !== fileIconName || $[66] !== filename || $[67] !== imageError || $[68] !== thumbnailUrl) {
-			t15$1 = /* @__PURE__ */ jsx("div", {
-				className: "bg-muted flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-sm",
-				children: thumbnailUrl && !imageError ? /* @__PURE__ */ jsx("img", {
-					src: thumbnailUrl,
-					alt: asset.alt || filename,
-					className: "image-outline h-full w-full object-cover",
-					onError: () => setImageError(true)
-				}) : /* @__PURE__ */ jsx(Icon, {
-					icon: fileIconName,
-					className: "text-muted-foreground size-4"
-				})
-			});
-			$[64] = asset.alt;
-			$[65] = fileIconName;
-			$[66] = filename;
-			$[67] = imageError;
-			$[68] = thumbnailUrl;
-			$[69] = t15$1;
-		} else t15$1 = $[69];
-		let t16$1;
-		if ($[70] !== filename) {
-			t16$1 = /* @__PURE__ */ jsx("p", {
-				className: "truncate text-sm font-medium",
-				children: filename
-			});
-			$[70] = filename;
-			$[71] = t16$1;
-		} else t16$1 = $[71];
-		let t17$1;
-		if ($[72] !== size) {
-			t17$1 = size && /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground text-xs tabular-nums",
-				children: formatFileSize(size)
-			});
-			$[72] = size;
-			$[73] = t17$1;
-		} else t17$1 = $[73];
-		let t18$1;
-		if ($[74] !== t16$1 || $[75] !== t17$1) {
-			t18$1 = /* @__PURE__ */ jsxs("div", {
-				className: "min-w-0 flex-1",
-				children: [t16$1, t17$1]
-			});
-			$[74] = t16$1;
-			$[75] = t17$1;
-			$[76] = t18$1;
-		} else t18$1 = $[76];
-		let t19$1;
-		if ($[77] !== loading) {
-			t19$1 = loading && /* @__PURE__ */ jsx(Icon, {
-				icon: "ph:spinner-gap",
-				className: "text-muted-foreground size-4 shrink-0 animate-spin"
-			});
-			$[77] = loading;
-			$[78] = t19$1;
-		} else t19$1 = $[78];
-		let t20$1;
-		if ($[79] !== disabled || $[80] !== href || $[81] !== loading || $[82] !== onEdit || $[83] !== onRemove) {
-			t20$1 = !loading && !disabled && (href || onEdit || onRemove) && /* @__PURE__ */ jsxs("div", {
-				className: "flex shrink-0 items-center gap-1",
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "bg-muted relative aspect-video w-full",
 				children: [
-					href && /* @__PURE__ */ jsx(Button, {
+					thumbnailUrl && !imageError ? /* @__PURE__ */ jsx("img", {
+						src: thumbnailUrl,
+						alt: asset.alt || filename,
+						className: "image-outline h-full w-full object-contain",
+						onError: () => setImageError(true)
+					}) : /* @__PURE__ */ jsxs("div", {
+						className: "flex h-full w-full flex-col items-center justify-center gap-2",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: fileIconName,
+							className: "text-muted-foreground size-12"
+						}), extension && /* @__PURE__ */ jsx("span", {
+							className: "item-surface border-border bg-muted text-muted-foreground px-2 py-0.5 text-xs font-medium",
+							children: extension
+						})]
+					}),
+					loading && /* @__PURE__ */ jsxs("div", {
+						className: "bg-background absolute inset-0 flex flex-col items-center justify-center gap-2",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "ph:spinner-gap",
+							className: "text-muted-foreground size-8 animate-spin"
+						}), typeof progress === "number" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground text-sm font-medium tabular-nums",
+							children: [progress, "%"]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "bg-muted h-1.5 w-24 overflow-hidden rounded-sm",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "bg-primary h-full rounded-sm transition-[width] duration-300",
+								style: { width: `${progress}%` }
+							})
+						})] })]
+					}),
+					!loading && !disabled && onRemove && /* @__PURE__ */ jsx(Button, {
 						type: "button",
-						variant: "ghost",
+						variant: "secondary",
 						size: "icon-xs",
+						className: "absolute top-2 right-2 opacity-0 transition-opacity group-hover:opacity-100",
+						onClick: (e) => {
+							e.stopPropagation();
+							onRemove();
+						},
+						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:x-bold" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "border-border flex items-center gap-2 border-t p-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "truncate text-sm font-medium",
+						title: filename,
+						children: filename
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "text-muted-foreground text-xs tabular-nums",
+						children: [formatFileSize(size), mimeType && ` • ${mimeType.split("/")[1]?.toUpperCase()}`]
+					})]
+				}), !loading && !disabled && (href || onEdit) && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [href && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
 						nativeButton: false,
 						render: /* @__PURE__ */ jsx("a", {
 							href,
-							onClick: _temp2
+							onClick: (e) => e.stopPropagation()
 						}),
 						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:arrow-square-out-bold" })
-					}),
-					onEdit && /* @__PURE__ */ jsx(Button, {
+					}), onEdit && /* @__PURE__ */ jsx(Button, {
 						type: "button",
 						variant: "ghost",
-						size: "icon-xs",
-						onClick: (e_5) => {
-							e_5.stopPropagation();
+						size: "icon-sm",
+						onClick: (e) => {
+							e.stopPropagation();
 							onEdit();
 						},
 						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:pencil-bold" })
-					}),
-					onRemove && /* @__PURE__ */ jsx(Button, {
-						type: "button",
-						variant: "ghost",
-						size: "icon-xs",
-						onClick: (e_6) => {
-							e_6.stopPropagation();
-							onRemove();
-						},
-						className: "text-destructive hover:text-destructive",
-						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:x-bold" })
-					})
-				]
-			});
-			$[79] = disabled;
-			$[80] = href;
-			$[81] = loading;
-			$[82] = onEdit;
-			$[83] = onRemove;
-			$[84] = t20$1;
-		} else t20$1 = $[84];
-		let t21$1;
-		if ($[85] !== compactInteractiveProps || $[86] !== t13$1 || $[87] !== t14$1 || $[88] !== t15$1 || $[89] !== t18$1 || $[90] !== t19$1 || $[91] !== t20$1) {
-			t21$1 = /* @__PURE__ */ jsxs("div", {
-				className: t13$1,
-				...compactInteractiveProps,
-				children: [
-					t14$1,
-					t15$1,
-					t18$1,
-					t19$1,
-					t20$1
-				]
-			});
-			$[85] = compactInteractiveProps;
-			$[86] = t13$1;
-			$[87] = t14$1;
-			$[88] = t15$1;
-			$[89] = t18$1;
-			$[90] = t19$1;
-			$[91] = t20$1;
-			$[92] = t21$1;
-		} else t21$1 = $[92];
-		return t21$1;
-	}
-	if (isLoadingAsset) {
-		let t10$1;
-		if ($[93] !== className) {
-			t10$1 = cn("panel-surface overflow-hidden", className);
-			$[93] = className;
-			$[94] = t10$1;
-		} else t10$1 = $[94];
-		let t11$1;
-		if ($[95] === Symbol.for("react.memo_cache_sentinel")) {
-			t11$1 = /* @__PURE__ */ jsx(Skeleton, { className: "aspect-video w-full" });
-			$[95] = t11$1;
-		} else t11$1 = $[95];
-		let t12$1;
-		if ($[96] === Symbol.for("react.memo_cache_sentinel")) {
-			t12$1 = /* @__PURE__ */ jsxs("div", {
-				className: "space-y-1.5 p-3",
-				children: [/* @__PURE__ */ jsx(Skeleton, {
-					variant: "text",
-					className: "h-4 w-3/4"
-				}), /* @__PURE__ */ jsx(Skeleton, {
-					variant: "text",
-					className: "h-3 w-1/2"
+					})]
 				})]
-			});
-			$[96] = t12$1;
-		} else t12$1 = $[96];
-		let t13$1;
-		if ($[97] !== t10$1) {
-			t13$1 = /* @__PURE__ */ jsxs("div", {
-				className: t10$1,
-				children: [t11$1, t12$1]
-			});
-			$[97] = t10$1;
-			$[98] = t13$1;
-		} else t13$1 = $[98];
-		return t13$1;
-	}
-	const isCardInteractive = onClick && !disabled && asset.id;
-	let t10;
-	if ($[99] !== asset.id || $[100] !== isCardInteractive || $[101] !== onClick) {
-		t10 = isCardInteractive ? {
-			role: "button",
-			tabIndex: 0,
-			onClick: () => onClick(asset.id),
-			onKeyDown: (e_7) => {
-				if (e_7.key === "Enter" || e_7.key === " ") {
-					e_7.preventDefault();
-					onClick(asset.id);
-				}
-			}
-		} : {};
-		$[99] = asset.id;
-		$[100] = isCardInteractive;
-		$[101] = onClick;
-		$[102] = t10;
-	} else t10 = $[102];
-	const cardInteractiveProps = t10;
-	const t11 = disabled && "opacity-60";
-	const t12 = onClick && !disabled && "hover:bg-accent/20 cursor-pointer";
-	let t13;
-	if ($[103] !== className || $[104] !== t11 || $[105] !== t12) {
-		t13 = cn("panel-surface group relative overflow-hidden", t11, t12, className);
-		$[103] = className;
-		$[104] = t11;
-		$[105] = t12;
-		$[106] = t13;
-	} else t13 = $[106];
-	let t14;
-	if ($[107] !== dragHandleProps || $[108] !== showDragHandle) {
-		t14 = showDragHandle && /* @__PURE__ */ jsx("button", {
-			type: "button",
-			className: "text-muted-foreground hover:text-foreground absolute top-2 left-2 z-10 cursor-grab touch-none rounded p-1 active:cursor-grabbing",
-			...dragHandleProps,
-			children: /* @__PURE__ */ jsx(Icon, {
-				icon: "ph:dots-six-vertical-bold",
-				className: "size-4"
 			})
-		});
-		$[107] = dragHandleProps;
-		$[108] = showDragHandle;
-		$[109] = t14;
-	} else t14 = $[109];
-	let t15;
-	if ($[110] !== asset.alt || $[111] !== extension || $[112] !== fileIconName || $[113] !== filename || $[114] !== imageError || $[115] !== thumbnailUrl) {
-		t15 = thumbnailUrl && !imageError ? /* @__PURE__ */ jsx("img", {
-			src: thumbnailUrl,
-			alt: asset.alt || filename,
-			className: "image-outline h-full w-full object-contain",
-			onError: () => setImageError(true)
-		}) : /* @__PURE__ */ jsxs("div", {
-			className: "flex h-full w-full flex-col items-center justify-center gap-2",
-			children: [/* @__PURE__ */ jsx(Icon, {
-				icon: fileIconName,
-				className: "text-muted-foreground size-12"
-			}), extension && /* @__PURE__ */ jsx("span", {
-				className: "item-surface border-border bg-muted text-muted-foreground px-2 py-0.5 text-xs font-medium",
-				children: extension
-			})]
-		});
-		$[110] = asset.alt;
-		$[111] = extension;
-		$[112] = fileIconName;
-		$[113] = filename;
-		$[114] = imageError;
-		$[115] = thumbnailUrl;
-		$[116] = t15;
-	} else t15 = $[116];
-	let t16;
-	if ($[117] !== loading || $[118] !== progress) {
-		t16 = loading && /* @__PURE__ */ jsxs("div", {
-			className: "bg-background absolute inset-0 flex flex-col items-center justify-center gap-2",
-			children: [/* @__PURE__ */ jsx(Icon, {
-				icon: "ph:spinner-gap",
-				className: "text-muted-foreground size-8 animate-spin"
-			}), typeof progress === "number" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
-				className: "text-muted-foreground text-sm font-medium tabular-nums",
-				children: [progress, "%"]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "bg-muted h-1.5 w-24 overflow-hidden rounded-sm",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "bg-primary h-full rounded-sm transition-[width] duration-300",
-					style: { width: `${progress}%` }
-				})
-			})] })]
-		});
-		$[117] = loading;
-		$[118] = progress;
-		$[119] = t16;
-	} else t16 = $[119];
-	let t17;
-	if ($[120] !== disabled || $[121] !== loading || $[122] !== onRemove) {
-		t17 = !loading && !disabled && onRemove && /* @__PURE__ */ jsx(Button, {
-			type: "button",
-			variant: "secondary",
-			size: "icon-xs",
-			className: "absolute top-2 right-2 opacity-0 transition-opacity group-hover:opacity-100",
-			onClick: (e_8) => {
-				e_8.stopPropagation();
-				onRemove();
-			},
-			children: /* @__PURE__ */ jsx(Icon, { icon: "ph:x-bold" })
-		});
-		$[120] = disabled;
-		$[121] = loading;
-		$[122] = onRemove;
-		$[123] = t17;
-	} else t17 = $[123];
-	let t18;
-	if ($[124] !== t15 || $[125] !== t16 || $[126] !== t17) {
-		t18 = /* @__PURE__ */ jsxs("div", {
-			className: "bg-muted relative aspect-video w-full",
-			children: [
-				t15,
-				t16,
-				t17
-			]
-		});
-		$[124] = t15;
-		$[125] = t16;
-		$[126] = t17;
-		$[127] = t18;
-	} else t18 = $[127];
-	let t19;
-	if ($[128] !== filename) {
-		t19 = /* @__PURE__ */ jsx("p", {
-			className: "truncate text-sm font-medium",
-			title: filename,
-			children: filename
-		});
-		$[128] = filename;
-		$[129] = t19;
-	} else t19 = $[129];
-	let t20;
-	if ($[130] !== size) {
-		t20 = formatFileSize(size);
-		$[130] = size;
-		$[131] = t20;
-	} else t20 = $[131];
-	let t21;
-	if ($[132] !== mimeType) {
-		t21 = mimeType && ` • ${mimeType.split("/")[1]?.toUpperCase()}`;
-		$[132] = mimeType;
-		$[133] = t21;
-	} else t21 = $[133];
-	let t22;
-	if ($[134] !== t20 || $[135] !== t21) {
-		t22 = /* @__PURE__ */ jsxs("p", {
-			className: "text-muted-foreground text-xs tabular-nums",
-			children: [t20, t21]
-		});
-		$[134] = t20;
-		$[135] = t21;
-		$[136] = t22;
-	} else t22 = $[136];
-	let t23;
-	if ($[137] !== t19 || $[138] !== t22) {
-		t23 = /* @__PURE__ */ jsxs("div", {
-			className: "min-w-0 flex-1",
-			children: [t19, t22]
-		});
-		$[137] = t19;
-		$[138] = t22;
-		$[139] = t23;
-	} else t23 = $[139];
-	let t24;
-	if ($[140] !== disabled || $[141] !== href || $[142] !== loading || $[143] !== onEdit) {
-		t24 = !loading && !disabled && (href || onEdit) && /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-1",
-			children: [href && /* @__PURE__ */ jsx(Button, {
-				type: "button",
-				variant: "ghost",
-				size: "icon-sm",
-				nativeButton: false,
-				render: /* @__PURE__ */ jsx("a", {
-					href,
-					onClick: _temp3
-				}),
-				children: /* @__PURE__ */ jsx(Icon, { icon: "ph:arrow-square-out-bold" })
-			}), onEdit && /* @__PURE__ */ jsx(Button, {
-				type: "button",
-				variant: "ghost",
-				size: "icon-sm",
-				onClick: (e_10) => {
-					e_10.stopPropagation();
-					onEdit();
-				},
-				children: /* @__PURE__ */ jsx(Icon, { icon: "ph:pencil-bold" })
-			})]
-		});
-		$[140] = disabled;
-		$[141] = href;
-		$[142] = loading;
-		$[143] = onEdit;
-		$[144] = t24;
-	} else t24 = $[144];
-	let t25;
-	if ($[145] !== t23 || $[146] !== t24) {
-		t25 = /* @__PURE__ */ jsxs("div", {
-			className: "border-border flex items-center gap-2 border-t p-2",
-			children: [t23, t24]
-		});
-		$[145] = t23;
-		$[146] = t24;
-		$[147] = t25;
-	} else t25 = $[147];
-	let t26;
-	if ($[148] !== cardInteractiveProps || $[149] !== t13 || $[150] !== t14 || $[151] !== t18 || $[152] !== t25) {
-		t26 = /* @__PURE__ */ jsxs("div", {
-			className: t13,
-			...cardInteractiveProps,
-			children: [
-				t14,
-				t18,
-				t25
-			]
-		});
-		$[148] = cardInteractiveProps;
-		$[149] = t13;
-		$[150] = t14;
-		$[151] = t18;
-		$[152] = t25;
-		$[153] = t26;
-	} else t26 = $[153];
-	return t26;
-}
-function _temp3(e_9) {
-	return e_9.stopPropagation();
-}
-function _temp2(e_4) {
-	return e_4.stopPropagation();
-}
-function _temp(e_0) {
-	return e_0.stopPropagation();
+		]
+	});
 }
 
 //#endregion