camox 0.0.0 → 0.1.2-alpha.2

package/dist/features/preview/components/AssetFieldEditor.js

@@ -0,0 +1,139 @@
+import { AssetLightbox } from "./AssetLightbox.js";
+import { AssetPickerGrid } from "./AssetPickerGrid.js";
+import { UnlinkAssetButton } from "./UnlinkAssetButton.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { FileIcon, Upload } from "lucide-react";
+import { UploadDropZone } from "@/features/content/components/UploadDropZone";
+import { UploadItemRow } from "@/features/content/components/UploadProgressDrawer";
+import { useFileUpload } from "@/hooks/use-file-upload";
+//#region src/features/preview/components/AssetFieldEditor.tsx
+function assetLabel(isImage, multiple) {
+	if (isImage) return multiple ? "images" : "image";
+	return multiple ? "files" : "file";
+}
+var AssetActionButtons = ({ isImage, multiple, fileInputRef, onPickerOpen, onFilesSelected, uploads }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+	/* @__PURE__ */ jsxs(Button, {
+		variant: "default",
+		className: "mx-auto flex w-full",
+		onClick: onPickerOpen,
+		children: ["Select existing ", assetLabel(isImage, multiple)]
+	}),
+	/* @__PURE__ */ jsxs(Button, {
+		variant: "secondary",
+		className: "mx-auto flex w-full",
+		onClick: () => fileInputRef.current?.click(),
+		children: [/* @__PURE__ */ jsx(Upload, { className: "h-4 w-4" }), "Upload new"]
+	}),
+	/* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground text-center text-xs",
+		children: "Or drag anywhere to upload"
+	}),
+	/* @__PURE__ */ jsx("input", {
+		type: "file",
+		ref: fileInputRef,
+		className: "hidden",
+		accept: isImage ? "image/*" : "*/*",
+		multiple,
+		onChange: (e) => {
+			if (e.target.files) onFilesSelected(e.target.files);
+			e.target.value = "";
+		}
+	}),
+	uploads.length > 0 && /* @__PURE__ */ jsx("div", { children: uploads.map((item) => /* @__PURE__ */ jsx(UploadItemRow, { item }, item.id)) })
+] });
+var SingleAssetFieldEditor = ({ fieldName, assetType, currentData, onFieldChange }) => {
+	const asset = currentData[fieldName];
+	const hasAsset = !!asset?.url;
+	const [lightboxOpen, setLightboxOpen] = React.useState(false);
+	const [pickerOpen, setPickerOpen] = React.useState(false);
+	const isImage = assetType === "Image";
+	const fileInputRef = React.useRef(null);
+	const { uploads, uploadFiles } = useFileUpload({ onFileCommitted: (result) => {
+		onFieldChange(fieldName, {
+			url: result.url,
+			alt: "",
+			filename: result.filename,
+			mimeType: result.mimeType,
+			_fileId: result.fileId
+		});
+	} });
+	const handleDrop = React.useCallback((files) => {
+		const dt = new DataTransfer();
+		dt.items.add(files[0]);
+		uploadFiles(dt.files);
+	}, [uploadFiles]);
+	const handleSelectExisting = (file) => {
+		onFieldChange(fieldName, {
+			url: file.url,
+			alt: file.alt,
+			filename: file.filename,
+			mimeType: file.mimeType,
+			_fileId: file._id
+		});
+		setPickerOpen(false);
+	};
+	return /* @__PURE__ */ jsx(UploadDropZone, {
+		onDrop: handleDrop,
+		children: pickerOpen ? /* @__PURE__ */ jsx(AssetPickerGrid, {
+			assetType,
+			mode: "single",
+			onSelectSingle: handleSelectExisting,
+			onSelectMultiple: () => {},
+			onClose: () => setPickerOpen(false)
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "space-y-4 px-4 py-4",
+			children: [hasAsset && /* @__PURE__ */ jsxs("div", {
+				className: "text-foreground hover:bg-accent/75 flex max-w-full flex-row items-center gap-2 rounded-lg border-2 px-1 py-1",
+				children: [
+					/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "flex min-w-0 flex-1 cursor-zoom-in items-center gap-2",
+						onClick: () => setLightboxOpen(true),
+						children: [isImage ? /* @__PURE__ */ jsx("div", {
+							className: "border-border h-10 w-10 shrink-0 overflow-hidden rounded border",
+							children: /* @__PURE__ */ jsx("img", {
+								src: asset.url,
+								alt: asset.alt || asset.filename,
+								className: "h-full w-full object-cover"
+							})
+						}) : /* @__PURE__ */ jsx("div", {
+							className: "border-border bg-muted flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded border",
+							children: /* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground h-5 w-5" })
+						}), /* @__PURE__ */ jsx("p", {
+							className: "flex-1 truncate text-left text-sm",
+							title: asset.filename,
+							children: asset.filename || "Untitled"
+						})]
+					}),
+					/* @__PURE__ */ jsx(UnlinkAssetButton, {
+						fileId: asset._fileId,
+						onUnlink: () => {
+							onFieldChange(fieldName, {
+								url: "",
+								alt: "",
+								filename: "",
+								mimeType: ""
+							});
+						}
+					}),
+					asset._fileId && /* @__PURE__ */ jsx(AssetLightbox, {
+						open: lightboxOpen,
+						onOpenChange: setLightboxOpen,
+						fileId: asset._fileId
+					})
+				]
+			}), /* @__PURE__ */ jsx(AssetActionButtons, {
+				isImage,
+				multiple: false,
+				fileInputRef,
+				onPickerOpen: () => setPickerOpen(true),
+				onFilesSelected: handleDrop,
+				uploads
+			})]
+		})
+	});
+};
+//#endregion
+export { AssetActionButtons, SingleAssetFieldEditor };

package/dist/features/preview/components/AssetLightbox.d.ts

@@ -0,0 +1,9 @@
+import { Id } from 'camox/server/dataModel';
+interface AssetLightboxProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    fileId: Id<"files">;
+}
+declare const AssetLightbox: ({ open, onOpenChange, fileId }: AssetLightboxProps) => import("react/jsx-runtime").JSX.Element | null;
+export { AssetLightbox };
+//# sourceMappingURL=AssetLightbox.d.ts.map

package/dist/features/preview/components/AssetLightbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetLightbox.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/AssetLightbox.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAgDjD,UAAU,kBAAkB;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,GAAI,gCAAgC,kBAAkB,mDAoWxE,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/features/preview/components/AssetLightbox.js

@@ -0,0 +1,421 @@
+import { DebouncedFieldEditor } from "./DebouncedFieldEditor.js";
+import { Label } from "@camox/ui/label";
+import { toast } from "@camox/ui/toaster";
+import { api } from "camox/server/api";
+import { useMutation, useQuery } from "convex/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { Check, Download, FileIcon, Link, Loader2, Trash2, X } from "lucide-react";
+import { useConvexToken } from "@/lib/auth";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
+import { Switch } from "@camox/ui/switch";
+import { UploadDropZone } from "@/features/content/components/UploadDropZone";
+import { ButtonGroup } from "@camox/ui/button-group";
+import { Dialog, DialogContent, DialogTitle } from "@camox/ui/dialog";
+import { FS_PREFIX, getSiteUrl } from "@/lib/convex-site";
+//#region src/features/preview/components/AssetLightbox.tsx
+function MetadataRow({ label, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-baseline gap-2",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "shrink-0",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", { className: "border-border min-w-0 flex-1 border-b" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-foreground shrink-0",
+				children
+			})
+		]
+	});
+}
+function formatRelativeTime(epochMs) {
+	const now = Temporal.Now.instant();
+	const then = Temporal.Instant.fromEpochMilliseconds(epochMs);
+	const totalSeconds = now.since(then).total("seconds");
+	const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+	if (totalSeconds < 60) return rtf.format(-Math.floor(totalSeconds), "second");
+	const totalMinutes = Math.floor(totalSeconds / 60);
+	if (totalMinutes < 60) return rtf.format(-totalMinutes, "minute");
+	const totalHours = Math.floor(totalMinutes / 60);
+	if (totalHours < 24) return rtf.format(-totalHours, "hour");
+	const totalDays = Math.floor(totalHours / 24);
+	if (totalDays < 30) return rtf.format(-totalDays, "day");
+	const totalMonths = Math.floor(totalDays / 30);
+	if (totalMonths < 12) return rtf.format(-totalMonths, "month");
+	return rtf.format(-Math.floor(totalDays / 365), "year");
+}
+function formatFileSize(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+var AssetLightbox = ({ open, onOpenChange, fileId }) => {
+	const file = useQuery(api.files.getFile, { fileId });
+	const usageCount = useQuery(api.files.getFileUsageCount, { fileId });
+	const [uploadState, setUploadState] = useState(null);
+	const replaceInputRef = useRef(null);
+	const containerRef = useRef(null);
+	const [zoomed, setZoomed] = useState(false);
+	const [zoomedWidth, setZoomedWidth] = useState(null);
+	const clickFractionRef = useRef(null);
+	useEffect(() => {
+		if (!open) {
+			setZoomed(false);
+			setZoomedWidth(null);
+		}
+	}, [open]);
+	useEffect(() => {
+		if (!zoomed || !zoomedWidth || !containerRef.current || !clickFractionRef.current) return;
+		const container = containerRef.current;
+		const img = container.querySelector("img");
+		if (!img) return;
+		requestAnimationFrame(() => {
+			const frac = clickFractionRef.current;
+			const scrollX = img.offsetLeft + img.width * frac.x - container.clientWidth / 2;
+			const scrollY = img.offsetTop + img.height * frac.y - container.clientHeight / 2;
+			container.scrollTo(scrollX, scrollY);
+			clickFractionRef.current = null;
+		});
+	}, [zoomed, zoomedWidth]);
+	const updateFileFilename = useMutation(api.files.updateFileFilename);
+	const updateFileAlt = useMutation(api.files.updateFileAlt);
+	const deleteFile = useMutation(api.files.deleteFile);
+	const replaceFile = useMutation(api.files.replaceFile);
+	const setAiMetadata = useMutation(api.files.setAiMetadata);
+	const commitFile = useMutation(api.files.commitFile);
+	const getToken = useConvexToken();
+	const siteUrl = getSiteUrl();
+	const handleReplaceDrop = useCallback(async (files) => {
+		const droppedFile = files[0];
+		if (!droppedFile) return;
+		setUploadState({
+			status: "uploading",
+			progress: 0,
+			filename: droppedFile.name
+		});
+		try {
+			const token = await getToken();
+			const blobId = await new Promise((resolve, reject) => {
+				const xhr = new XMLHttpRequest();
+				xhr.upload.addEventListener("progress", (e) => {
+					if (e.lengthComputable) setUploadState((prev) => prev ? {
+						...prev,
+						progress: Math.round(e.loaded / e.total * 100)
+					} : prev);
+				});
+				xhr.addEventListener("load", () => {
+					if (xhr.status >= 200 && xhr.status < 300) try {
+						resolve(JSON.parse(xhr.responseText).blobId);
+					} catch {
+						reject(/* @__PURE__ */ new Error("Invalid response from upload"));
+					}
+					else reject(/* @__PURE__ */ new Error(`Upload failed: ${xhr.status}`));
+				});
+				xhr.addEventListener("error", () => reject(/* @__PURE__ */ new Error("Upload failed")));
+				xhr.open("POST", `${siteUrl}${FS_PREFIX}/upload`);
+				xhr.setRequestHeader("Content-Type", droppedFile.type);
+				if (token) xhr.setRequestHeader("Authorization", `Bearer ${token}`);
+				xhr.send(droppedFile);
+			});
+			setUploadState((prev) => prev ? {
+				...prev,
+				status: "committing",
+				progress: 100
+			} : prev);
+			const { fileId: newFileId } = await commitFile({
+				blobId,
+				filename: droppedFile.name,
+				contentType: droppedFile.type,
+				size: droppedFile.size,
+				siteUrl
+			});
+			await replaceFile({
+				oldFileId: fileId,
+				newFileId
+			});
+			setUploadState((prev) => prev ? {
+				...prev,
+				status: "complete"
+			} : prev);
+			toast.success("File replaced");
+			setTimeout(() => {
+				setUploadState(null);
+				onOpenChange(false);
+			}, 600);
+		} catch (err) {
+			const message = err instanceof Error ? err.message : "Upload failed";
+			setUploadState((prev) => prev ? {
+				...prev,
+				status: "error",
+				error: message
+			} : prev);
+			toast.error(message);
+			setTimeout(() => setUploadState(null), 3e3);
+		}
+	}, [
+		siteUrl,
+		commitFile,
+		replaceFile,
+		fileId,
+		onOpenChange,
+		getToken
+	]);
+	const handleCopyUrl = async () => {
+		if (!file) return;
+		await navigator.clipboard.writeText(file.url);
+		toast("Link copied to clipboard");
+	};
+	const handleDownload = () => {
+		if (!file) return;
+		const a = document.createElement("a");
+		a.href = file.url;
+		a.download = file.filename || "file";
+		a.click();
+	};
+	const handleDelete = async () => {
+		await deleteFile({ fileId });
+		onOpenChange(false);
+	};
+	if (!file) return null;
+	const isImage = file.mimeType?.startsWith("image/");
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "h-[90vh] max-h-[90vh] w-[90vw] max-w-[90vw] gap-0 overflow-hidden p-0 sm:max-w-[90vw]",
+			showCloseButton: false,
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: "sr-only",
+					children: file.alt || file.filename || "File preview"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon",
+					className: "absolute top-2 right-2 z-10",
+					onClick: () => onOpenChange(false),
+					children: /* @__PURE__ */ jsx(X, {})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex h-full flex-row",
+					children: [/* @__PURE__ */ jsxs(UploadDropZone, {
+						label: "Drop file to replace",
+						onDrop: handleReplaceDrop,
+						className: "h-full min-w-0 flex-1",
+						children: [isImage ? /* @__PURE__ */ jsx("div", {
+							ref: containerRef,
+							className: `checkered absolute inset-0 ${zoomed ? "overflow-auto" : "flex items-center justify-center overflow-hidden p-6"}`,
+							onClick: (e) => {
+								const img = containerRef.current?.querySelector("img");
+								if (!img) return;
+								if (!zoomed) {
+									const rect = img.getBoundingClientRect();
+									clickFractionRef.current = {
+										x: (e.clientX - rect.left) / rect.width,
+										y: (e.clientY - rect.top) / rect.height
+									};
+									const container = containerRef.current;
+									const scaleForWidth = container.clientWidth * 2.5 / img.clientWidth;
+									const scaleForHeight = container.clientHeight * 2.5 / img.clientHeight;
+									setZoomedWidth(img.clientWidth * Math.max(scaleForWidth, scaleForHeight));
+									setZoomed(true);
+								} else {
+									setZoomed(false);
+									setZoomedWidth(null);
+									containerRef.current?.scrollTo(0, 0);
+								}
+							},
+							children: zoomed ? /* @__PURE__ */ jsx("div", {
+								className: "flex min-h-full items-center justify-center",
+								children: /* @__PURE__ */ jsx("img", {
+									src: file.url,
+									alt: file.alt || file.filename || "",
+									className: "cursor-zoom-out",
+									style: { width: zoomedWidth ?? void 0 },
+									draggable: false
+								})
+							}) : /* @__PURE__ */ jsx("img", {
+								src: file.url,
+								alt: file.alt || file.filename || "",
+								className: "max-h-full max-w-full cursor-zoom-in object-contain shadow-lg",
+								draggable: false
+							})
+						}) : /* @__PURE__ */ jsx("div", {
+							className: "bg-muted/30 flex h-full min-h-[70vh] items-center justify-center p-6",
+							children: /* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground h-16 w-16" })
+						}), uploadState && /* @__PURE__ */ jsx("div", {
+							className: "bg-background/80 absolute inset-0 z-30 flex items-center justify-center backdrop-blur-sm",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "border-border bg-background w-64 rounded-lg border p-4 shadow-lg",
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ jsxs("div", {
+											className: "shrink-0",
+											children: [
+												uploadState.status === "uploading" && /* @__PURE__ */ jsx(Loader2, { className: "text-muted-foreground h-4 w-4 animate-spin" }),
+												uploadState.status === "committing" && /* @__PURE__ */ jsx(Loader2, { className: "text-primary h-4 w-4 animate-spin" }),
+												uploadState.status === "complete" && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-500" })
+											]
+										}), /* @__PURE__ */ jsxs("div", {
+											className: "min-w-0 flex-1",
+											children: [/* @__PURE__ */ jsxs("p", {
+												className: "truncate text-sm font-medium",
+												children: [
+													uploadState.status === "uploading" && "Uploading…",
+													uploadState.status === "committing" && "Processing…",
+													uploadState.status === "complete" && "Replaced",
+													uploadState.status === "error" && "Upload failed"
+												]
+											}), /* @__PURE__ */ jsx("p", {
+												className: "text-muted-foreground truncate text-xs",
+												children: uploadState.filename
+											})]
+										})]
+									}),
+									(uploadState.status === "uploading" || uploadState.status === "committing") && /* @__PURE__ */ jsx("div", {
+										className: "bg-muted mt-3 h-1.5 overflow-hidden rounded-full",
+										children: /* @__PURE__ */ jsx("div", {
+											className: "bg-primary h-full transition-all duration-200",
+											style: { width: `${uploadState.progress}%` }
+										})
+									}),
+									uploadState.status === "error" && uploadState.error && /* @__PURE__ */ jsx("p", {
+										className: "text-destructive mt-2 text-xs",
+										children: uploadState.error
+									})
+								]
+							})
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "border-border bg-background flex w-80 shrink-0 flex-col border-l",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex-1 space-y-4 overflow-y-auto p-4",
+							children: [
+								/* @__PURE__ */ jsxs(ButtonGroup, { children: [
+									/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+										asChild: true,
+										children: /* @__PURE__ */ jsx(Button, {
+											type: "button",
+											variant: "outline",
+											size: "icon",
+											onClick: handleCopyUrl,
+											children: /* @__PURE__ */ jsx(Link, {})
+										})
+									}), /* @__PURE__ */ jsx(TooltipContent, { children: "Copy URL" })] }),
+									/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+										asChild: true,
+										children: /* @__PURE__ */ jsx(Button, {
+											type: "button",
+											variant: "outline",
+											size: "icon",
+											onClick: handleDownload,
+											children: /* @__PURE__ */ jsx(Download, {})
+										})
+									}), /* @__PURE__ */ jsx(TooltipContent, { children: "Download" })] }),
+									/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+										asChild: true,
+										children: /* @__PURE__ */ jsx(Button, {
+											type: "button",
+											variant: "outline",
+											size: "icon",
+											onClick: handleDelete,
+											children: /* @__PURE__ */ jsx(Trash2, {})
+										})
+									}), /* @__PURE__ */ jsx(TooltipContent, { children: "Delete" })] })
+								] }),
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx(Switch, {
+										id: "ai-metadata",
+										checked: file.aiMetadataEnabled !== false,
+										onCheckedChange: (checked) => setAiMetadata({
+											fileId,
+											enabled: checked
+										})
+									}), /* @__PURE__ */ jsx(Label, {
+										htmlFor: "ai-metadata",
+										children: "AI metadata"
+									})]
+								}),
+								/* @__PURE__ */ jsx(DebouncedFieldEditor, {
+									label: "File name",
+									placeholder: "File name...",
+									initialValue: file.filename,
+									disabled: file.aiMetadataEnabled !== false,
+									onSave: (value) => updateFileFilename({
+										fileId,
+										filename: value
+									})
+								}),
+								/* @__PURE__ */ jsx(DebouncedFieldEditor, {
+									label: "Alt text",
+									placeholder: "Describe this file...",
+									initialValue: file.alt,
+									disabled: file.aiMetadataEnabled !== false,
+									rows: 2,
+									onSave: (value) => updateFileAlt({
+										fileId,
+										alt: value
+									})
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "text-muted-foreground space-y-1 text-sm",
+									children: [
+										/* @__PURE__ */ jsx(MetadataRow, {
+											label: "Format",
+											children: file.mimeType.split("/").pop()?.toUpperCase() ?? "Unknown"
+										}),
+										/* @__PURE__ */ jsx(MetadataRow, {
+											label: "Size",
+											children: file.size != null ? formatFileSize(file.size) : "Unknown"
+										}),
+										/* @__PURE__ */ jsx(MetadataRow, {
+											label: "Created",
+											children: formatRelativeTime(file.createdAt)
+										}),
+										/* @__PURE__ */ jsx(MetadataRow, {
+											label: "Updated",
+											children: formatRelativeTime(file.updatedAt)
+										}),
+										/* @__PURE__ */ jsxs(MetadataRow, {
+											label: "Used in",
+											children: [
+												usageCount == null && "…",
+												usageCount === 0 && "No blocks",
+												usageCount != null && usageCount > 0 && `${usageCount} ${usageCount === 1 ? "block" : "blocks"}`
+											]
+										})
+									]
+								}),
+								/* @__PURE__ */ jsx("input", {
+									ref: replaceInputRef,
+									type: "file",
+									className: "hidden",
+									accept: isImage ? "image/*" : "*/*",
+									onChange: (e) => {
+										if (e.target.files) handleReplaceDrop(e.target.files);
+										e.target.value = "";
+									}
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "secondary",
+									onClick: () => replaceInputRef.current?.click(),
+									children: isImage ? "Replace image" : "Replace file"
+								})
+							]
+						})
+					})]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { AssetLightbox };

package/dist/features/preview/components/AssetPickerGrid.d.ts

@@ -0,0 +1,11 @@
+import { Doc } from 'camox/server/dataModel';
+interface AssetPickerGridProps {
+    assetType: "Image" | "File";
+    mode: "single" | "multiple";
+    onSelectSingle: (file: Doc<"files">) => void;
+    onSelectMultiple: (files: Doc<"files">[]) => void;
+    onClose: () => void;
+}
+declare const AssetPickerGrid: ({ assetType, mode, onSelectSingle, onSelectMultiple, onClose, }: AssetPickerGridProps) => import("react/jsx-runtime").JSX.Element;
+export { AssetPickerGrid };
+//# sourceMappingURL=AssetPickerGrid.d.ts.map

package/dist/features/preview/components/AssetPickerGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPickerGrid.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/AssetPickerGrid.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AASlD,UAAU,oBAAoB;IAC5B,SAAS,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC5B,cAAc,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC7C,gBAAgB,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE,KAAK,IAAI,CAAC;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,eAAe,GAAI,iEAMtB,oBAAoB,4CAoGtB,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/features/preview/components/AssetPickerGrid.js

@@ -0,0 +1,92 @@
+import { AssetLightbox } from "./AssetLightbox.js";
+import { api } from "camox/server/api";
+import { useQuery } from "convex/react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { Skeleton } from "@camox/ui/skeleton";
+import { AssetCard } from "@/features/content/components/AssetCard";
+//#region src/features/preview/components/AssetPickerGrid.tsx
+var AssetPickerGrid = ({ assetType, mode, onSelectSingle, onSelectMultiple, onClose }) => {
+	const allFiles = useQuery(api.files.listFiles);
+	const [selectedIds, setSelectedIds] = React.useState(/* @__PURE__ */ new Set());
+	const [lightboxFile, setLightboxFile] = React.useState(null);
+	const isImage = assetType === "Image";
+	const files = React.useMemo(() => {
+		if (!allFiles) return void 0;
+		if (!isImage) return allFiles;
+		return allFiles.filter((f) => f.mimeType?.startsWith("image/"));
+	}, [allFiles, isImage]);
+	const toggleSelection = (fileId) => {
+		setSelectedIds((prev) => {
+			const next = new Set(prev);
+			if (next.has(fileId)) next.delete(fileId);
+			else next.add(fileId);
+			return next;
+		});
+	};
+	const handleConfirmMultiple = () => {
+		if (!files) return;
+		onSelectMultiple(files.filter((f) => selectedIds.has(f._id)));
+	};
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "bg-background sticky top-0 z-10 flex items-center gap-2 px-4 py-4",
+			children: [/* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "sm",
+				onClick: onClose,
+				children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }), mode === "multiple" ? `Select ${isImage ? "images" : "files"}` : `Select ${isImage ? "image" : "file"}`]
+			}), mode === "multiple" && /* @__PURE__ */ jsxs(Button, {
+				variant: "default",
+				size: "sm",
+				className: "ml-auto",
+				disabled: selectedIds.size === 0,
+				onClick: handleConfirmMultiple,
+				children: [
+					"Add selected (",
+					selectedIds.size,
+					")"
+				]
+			})]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "px-4 pb-4",
+			children: [
+				files === void 0 && /* @__PURE__ */ jsx("div", {
+					className: "grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-3",
+					children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-1.5 rounded-lg p-2",
+						children: [/* @__PURE__ */ jsx(Skeleton, { className: "aspect-4/3 w-full rounded-md" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-3/4 rounded" })]
+					}, i))
+				}),
+				files?.length === 0 && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground py-8 text-center text-sm",
+					children: "No assets yet"
+				}),
+				files && files.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-3",
+					children: files.map((file) => /* @__PURE__ */ jsx(AssetCard, {
+						file,
+						selected: selectedIds.has(file._id),
+						onSelect: () => {
+							if (mode === "single") onSelectSingle(file);
+							else toggleSelection(file._id);
+						},
+						onOpen: () => setLightboxFile(file)
+					}, file._id))
+				})
+			]
+		}),
+		lightboxFile && /* @__PURE__ */ jsx(AssetLightbox, {
+			open: !!lightboxFile,
+			onOpenChange: (open) => {
+				if (!open) setLightboxFile(null);
+			},
+			fileId: lightboxFile._id
+		})
+	] });
+};
+//#endregion
+export { AssetPickerGrid };