@questpie/admin 2.0.0 → 3.0.1

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

@@ -1,8 +1,9 @@
 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$1 from "react";
+import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/client/components/primitives/asset-preview.tsx
@@ -66,298 +67,705 @@ function getExtension(filename, mimeType) {
 	}
 	return "";
 }
-function AssetPreview({ asset, pendingFile, onRemove, onEdit, loading = false, progress, disabled = false, showDragHandle = false, dragHandleProps, variant = "card", href, onClick, className }) {
-	const [imageError, setImageError] = React$1.useState(false);
+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;
+	const [imageError, setImageError] = React.useState(false);
 	const hasAssetData = !!(asset.filename || asset.url || pendingFile);
 	const isLoadingAsset = loading && !hasAssetData;
 	const filename = asset.filename || pendingFile?.name || "Unknown file";
 	const mimeType = asset.mimeType || pendingFile?.type;
 	const size = asset.size || pendingFile?.size;
 	const isImageType = isImage(mimeType);
-	const fileIconName = getFileIconName(mimeType);
-	const extension = getExtension(filename, mimeType);
-	const thumbnailUrl = React$1.useMemo(() => {
-		if (pendingFile && isImageType) return URL.createObjectURL(pendingFile);
-		if (asset.url && isImageType) return asset.url;
-		return null;
-	}, [
-		pendingFile,
-		asset.url,
-		isImageType
-	]);
-	React$1.useEffect(() => {
-		return () => {
+	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 = () => () => {
 			if (pendingFile && thumbnailUrl) URL.revokeObjectURL(thumbnailUrl);
 		};
-	}, [pendingFile, thumbnailUrl]);
+		t9 = [pendingFile, thumbnailUrl];
+		$[7] = pendingFile;
+		$[8] = thumbnailUrl;
+		$[9] = t8;
+		$[10] = t9;
+	} else {
+		t8 = $[9];
+		t9 = $[10];
+	}
+	React.useEffect(t8, t9);
 	if (variant === "thumbnail") {
-		if (isLoadingAsset) return /* @__PURE__ */ jsx(Skeleton, { className: cn("aspect-square w-full rounded-lg", className) });
-		return /* @__PURE__ */ jsxs("div", {
-			className: cn("group relative aspect-square overflow-hidden rounded-lg border", "bg-muted/30 border-border/60", disabled && "opacity-60", onClick && !disabled && "cursor-pointer hover:border-border", className),
-			onClick: onClick && !disabled && asset.id ? () => onClick(asset.id) : void 0,
-			children: [
-				thumbnailUrl && !imageError ? /* @__PURE__ */ jsx("img", {
-					src: thumbnailUrl,
-					alt: asset.alt || filename,
-					className: "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"
-					})
-				}),
-				loading && /* @__PURE__ */ jsx("div", {
-					className: "bg-background/80 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",
-							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 (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);
+					}
+				}
+			} : {};
+			$[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: "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",
+						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" })
+					})
+				]
+			});
+			$[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;
 	}
 	if (variant === "compact") {
-		if (isLoadingAsset) return /* @__PURE__ */ jsxs("div", {
-			className: cn("flex items-center gap-2 rounded-md border p-2", "bg-muted/30 border-border/60", className),
-			children: [
-				showDragHandle && /* @__PURE__ */ jsx(Skeleton, { className: "size-4 -ml-1 rounded" }),
-				/* @__PURE__ */ jsx(Skeleton, { className: "size-8 shrink-0 rounded" }),
-				/* @__PURE__ */ jsxs("div", {
+		if (isLoadingAsset) {
+			let t10$2;
+			if ($[44] !== className) {
+				t10$2 = cn("flex items-center gap-2 border p-2", "bg-muted border-border", className);
+				$[44] = className;
+				$[45] = t10$2;
+			} else t10$2 = $[45];
+			let t11$2;
+			if ($[46] !== showDragHandle) {
+				t11$2 = showDragHandle && /* @__PURE__ */ jsx(Skeleton, { className: "-ml-1 size-4 rounded" });
+				$[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 rounded" });
+				$[48] = t12$2;
+			} else t12$2 = $[48];
+			let t13$2;
+			if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
+				t13$2 = /* @__PURE__ */ jsxs("div", {
 					className: "min-w-0 flex-1 space-y-1.5",
 					children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-16 rounded" })]
-				})
-			]
-		});
-		return /* @__PURE__ */ jsxs("div", {
-			className: cn("group flex items-center gap-2 rounded-md border p-2", "bg-muted/30 border-border/60", disabled && "opacity-60", onClick && !disabled && "cursor-pointer hover:border-border", className),
-			onClick: onClick && !disabled && asset.id ? () => onClick(asset.id) : void 0,
-			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",
-					children: thumbnailUrl && !imageError ? /* @__PURE__ */ jsx("img", {
-						src: thumbnailUrl,
-						alt: asset.alt || filename,
-						className: "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 && /* @__PURE__ */ jsx("p", {
-						className: "text-muted-foreground text-xs",
-						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",
+				});
+				$[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,
 					children: [
-						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" })
-						})
+						t11$2,
+						t12$2,
+						t13$2
 					]
-				})
-			]
-		});
-	}
-	if (isLoadingAsset) return /* @__PURE__ */ jsxs("div", {
-		className: cn("overflow-hidden rounded-lg border", "bg-muted/30 border-border/60", className),
-		children: [/* @__PURE__ */ jsx(Skeleton, { className: "aspect-video w-full" }), /* @__PURE__ */ jsxs("div", {
-			className: "space-y-1.5 p-3",
-			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2 rounded" })]
-		})]
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("group relative overflow-hidden rounded-lg border", "bg-muted/30 border-border/60", disabled && "opacity-60", onClick && !disabled && "cursor-pointer hover:border-border", className),
-		onClick: onClick && !disabled && asset.id ? () => onClick(asset.id) : void 0,
-		children: [
-			showDragHandle && /* @__PURE__ */ jsx("button", {
+				});
+				$[50] = t10$2;
+				$[51] = t11$2;
+				$[52] = t14$2;
+			} else t14$2 = $[52];
+			return t14$2;
+		}
+		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:border-border cursor-pointer";
+		let t13$1;
+		if ($[57] !== className || $[58] !== t11$1 || $[59] !== t12$1) {
+			t13$1 = cn("group flex items-center gap-2 border p-2", "bg-muted border-border", 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", {
 				type: "button",
-				className: "text-muted-foreground hover:text-foreground absolute left-2 top-2 z-10 cursor-grab touch-none rounded p-1 active:cursor-grabbing",
+				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__ */ jsxs("div", {
-				className: "bg-muted/50 relative aspect-video w-full",
+			});
+			$[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",
+				children: thumbnailUrl && !imageError ? /* @__PURE__ */ jsx("img", {
+					src: thumbnailUrl,
+					alt: asset.alt || filename,
+					className: "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",
+				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",
 				children: [
-					thumbnailUrl && !imageError ? /* @__PURE__ */ jsx("img", {
-						src: thumbnailUrl,
-						alt: asset.alt || filename,
-						className: "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: "bg-muted text-muted-foreground rounded px-2 py-0.5 text-xs font-medium",
-							children: extension
-						})]
-					}),
-					loading && /* @__PURE__ */ jsxs("div", {
-						className: "bg-background/80 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",
-							children: [progress, "%"]
-						}), /* @__PURE__ */ jsx("div", {
-							className: "bg-muted h-1.5 w-24 overflow-hidden rounded-full",
-							children: /* @__PURE__ */ jsx("div", {
-								className: "bg-primary h-full rounded-full transition-all duration-300",
-								style: { width: `${progress}%` }
-							})
-						})] })]
-					}),
-					!loading && !disabled && onRemove && /* @__PURE__ */ jsx(Button, {
-						type: "button",
-						variant: "secondary",
-						size: "icon-xs",
-						className: "absolute right-2 top-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: "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",
-						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, {
+					href && /* @__PURE__ */ jsx(Button, {
 						type: "button",
 						variant: "ghost",
-						size: "icon-sm",
+						size: "icon-xs",
 						nativeButton: false,
 						render: /* @__PURE__ */ jsx("a", {
 							href,
-							onClick: (e) => e.stopPropagation()
+							onClick: _temp2
 						}),
 						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:arrow-square-out-bold" })
-					}), onEdit && /* @__PURE__ */ jsx(Button, {
+					}),
+					onEdit && /* @__PURE__ */ jsx(Button, {
 						type: "button",
 						variant: "ghost",
-						size: "icon-sm",
-						onClick: (e) => {
-							e.stopPropagation();
+						size: "icon-xs",
+						onClick: (e_5) => {
+							e_5.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("overflow-hidden border", "bg-muted border-border", 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, { className: "h-4 w-3/4 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2 rounded" })]
+			});
+			$[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:border-border cursor-pointer";
+	let t13;
+	if ($[103] !== className || $[104] !== t11 || $[105] !== t12) {
+		t13 = cn("group relative overflow-hidden border", "bg-muted border-border", 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: "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: "bg-muted text-muted-foreground rounded 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",
+				children: [progress, "%"]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "bg-muted h-1.5 w-24 overflow-hidden rounded-full",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "bg-primary h-full rounded-full transition-all 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",
+			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: "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
-export { AssetPreview };
-//# sourceMappingURL=asset-preview.mjs.map
+export { AssetPreview };