@dyrected/admin 2.5.36 → 2.5.38

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { HashRouter, Link, MemoryRouter, Route, Routes, useLocation, useNavigate
 import { QueryClient, QueryClientProvider, useInfiniteQuery, useMutation, useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createClient } from "@dyrected/sdk";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AlertCircle, AlignCenter, AlignLeft, AlignRight, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bold, BookOpen, Braces, Calendar, Check, CheckCircle, CheckCircle2, ChevronDown, ChevronDownIcon, ChevronLeft, ChevronLeftIcon, ChevronRight, ChevronRightIcon, ChevronUp, ChevronsUpDown, Circle, Clock, Clock3, Code, Code2, Compass, Copy, Database, ExternalLink, Eye, EyeOff, FileDown, FileIcon, FileText, Filter, Globe, Grid, GripVertical, Heading1, Heading2, Image as Image$1, Info, Italic, KeyRound, Layers, LayoutDashboard, Library, Link as Link$1, List, ListOrdered, Loader2, Lock, LogOut, Mail, Menu, Monitor, MoreHorizontal, PanelLeftClose, PanelLeftOpen, Pencil, Plus, Quote, RotateCcw, Save, Scissors, Search, Settings, Settings2, Share2, Shield, Smartphone, Sparkles, Strikethrough, Table, Trash2, Underline, Undo2, Upload, UploadCloud, Users, Video, Volume2, X, XCircle, icons } from "lucide-react";
+import { AlertCircle, AlertTriangle, AlignCenter, AlignLeft, AlignRight, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bold, BookOpen, Braces, Calendar, Check, CheckCircle, CheckCircle2, ChevronDown, ChevronDownIcon, ChevronLeft, ChevronLeftIcon, ChevronRight, ChevronRightIcon, ChevronUp, ChevronsUpDown, Circle, Clock, Clock3, Code, Code2, Compass, Copy, Database, Download, ExternalLink, Eye, EyeOff, FileDown, FileIcon, FileText, FileUp, Filter, Globe, GripVertical, Heading1, Heading2, Image as Image$1, Info, Italic, KeyRound, Layers, LayoutDashboard, Library, Link as Link$1, List, ListOrdered, Loader2, Lock, LogOut, Mail, Menu, Monitor, MoreHorizontal, PanelLeftClose, PanelLeftOpen, Pencil, Play, Plus, Quote, RotateCcw, Save, Scissors, Search, Settings, Settings2, Share2, Shield, Smartphone, Sparkles, Strikethrough, Table, Trash2, Underline, Undo2, Upload, UploadCloud, Users, Video, Volume2, X, XCircle, icons } from "lucide-react";
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -16,10 +16,16 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import Papa from "papaparse";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import jexl from "jexl";
 import { DataSheetGrid, checkboxColumn, keyColumn, textColumn } from "react-datasheet-grid";
 import "react-datasheet-grid/dist/style.css";
-import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import TextAlign from "@tiptap/extension-text-align";
@@ -29,7 +35,6 @@ import Underline$1 from "@tiptap/extension-underline";
 import { TableKit } from "@tiptap/extension-table";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import ReactCrop, { centerCrop, makeAspectCrop } from "react-image-crop";
 import "react-image-crop/dist/ReactCrop.css";
 import { useDropzone } from "react-dropzone";
@@ -42,11 +47,7 @@ import * as z from "zod";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { format } from "date-fns";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
-import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
-import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { Blurhash } from "react-blurhash";
 //#region src/providers/dyrected-provider.tsx
@@ -1796,7 +1797,7 @@ function usePreferences(key, defaultValue) {
 //#endregion
 //#region src/components/ui/data-table.tsx
 var EMPTY_VISIBILITY = {};
-function DataTable({ columns, data, searchKey, rowSelection: externalRowSelection, onRowSelectionChange, bulkActions, toolbarActions, persistenceKey, initialColumnVisibility }) {
+function DataTable({ columns, data, searchKey, rowSelection: externalRowSelection, onRowSelectionChange, bulkActions, toolbarActions, persistenceKey, initialColumnVisibility, hideViewButton = false }) {
 	const [sorting, setSorting] = React$1.useState([]);
 	const [columnFilters, setColumnFilters] = React$1.useState([]);
 	const [columnVisibility, setColumnVisibility] = usePreferences(persistenceKey ? `visibility_${persistenceKey}` : "temp_visibility", initialColumnVisibility ?? EMPTY_VISIBILITY);
@@ -1828,8 +1829,8 @@ function DataTable({ columns, data, searchKey, rowSelection: externalRowSelectio
 				className: "dy-flex dy-flex-col dy-gap-3 sm:dy-flex-row sm:dy-items-center sm:dy-gap-4",
 				children: [
 					/* @__PURE__ */ jsxs("div", {
-						className: `dy-order-1 dy-grid dy-w-full dy-gap-2 sm:dy-order-3 sm:dy-ml-auto sm:dy-flex sm:dy-w-auto sm:dy-items-center ${toolbarActions ? "dy-grid-cols-3" : "dy-grid-cols-1"}`,
-						children: [toolbarActions, /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+						className: `dy-order-1 dy-grid dy-w-full dy-gap-2 sm:dy-order-3 sm:dy-ml-auto sm:dy-flex sm:dy-w-auto sm:dy-items-center ${toolbarActions ? hideViewButton ? "dy-grid-cols-2" : "dy-grid-cols-3" : hideViewButton ? "dy-grid-cols-1" : "dy-grid-cols-2"}`,
+						children: [toolbarActions, !hideViewButton && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 							asChild: true,
 							children: /* @__PURE__ */ jsxs(Button, {
 								variant: "outline",
@@ -1943,6 +1944,621 @@ var Checkbox = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 }));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 //#endregion
+//#region src/components/ui/dialog.tsx
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
+	ref,
+	className: cn("dy-fixed dy-inset-0 dy-z-50 dy-bg-black/40 dy-backdrop-blur-[2px] data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0", className),
+	...props
+}));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs("div", {
+	className: "dy-admin-ui",
+	children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+		ref,
+		className: cn("dy-fixed dy-left-[50%] dy-top-[50%] dy-z-50 dy-grid dy-w-full dy-max-w-lg dy-translate-x-[-50%] dy-translate-y-[-50%] dy-gap-4 dy-border dy-bg-background dy-p-6 dy-shadow-2xl dy-duration-200 data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0 data-[state=closed]:dy-zoom-out-95 data-[state=open]:dy-zoom-in-95 data-[state=closed]:dy-slide-out-to-left-1/2 data-[state=closed]:dy-slide-out-to-top-[48%] data-[state=open]:dy-slide-in-from-left-1/2 data-[state=open]:dy-slide-in-from-top-[48%] sm:dy-rounded-xl", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
+			className: "dy-absolute dy-right-4 dy-top-4 dy-rounded-sm dy-opacity-70 dy-ring-offset-background dy-transition-opacity hover:dy-opacity-100 focus:dy-outline-none focus:dy-ring-2 focus:dy-ring-ring focus:dy-ring-offset-2 disabled:dy-pointer-events-none data-[state=open]:dy-bg-accent data-[state=open]:dy-text-muted-foreground",
+			children: [/* @__PURE__ */ jsx(X, { className: "dy-h-4 dy-w-4" }), /* @__PURE__ */ jsx("span", {
+				className: "dy-sr-only",
+				children: "Close"
+			})]
+		})]
+	})]
+}) }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("dy-flex dy-flex-col dy-space-y-1.5 dy-text-center sm:dy-text-left", className),
+	...props
+});
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("dy-flex dy-flex-col-reverse sm:dy-flex-row sm:dy-justify-end sm:dy-space-x-2", className),
+	...props
+});
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, {
+	ref,
+	className: cn("dy-text-lg dy-font-semibold dy-leading-none dy-tracking-tight", className),
+	...props
+}));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+	ref,
+	className: cn("dy-text-sm dy-text-muted-foreground", className),
+	...props
+}));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+//#endregion
+//#region src/components/ui/progress.tsx
+var Progress = React$1.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(ProgressPrimitive.Root, {
+	ref,
+	className: cn("dy-relative dy-h-4 dy-w-full dy-overflow-hidden dy-rounded-full dy-bg-secondary", className),
+	...props,
+	children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {
+		className: "dy-h-full dy-w-full dy-flex-1 dy-bg-primary dy-transition-all",
+		style: { transform: `translateX(-${100 - (value || 0)}%)` }
+	})
+}));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+//#endregion
+//#region src/components/ui/scroll-area.tsx
+var ScrollArea = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
+	ref,
+	className: cn("dy-relative dy-overflow-hidden", className),
+	...props,
+	children: [
+		/* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {
+			className: "dy-h-full dy-w-full dy-rounded-[inherit]",
+			children
+		}),
+		/* @__PURE__ */ jsx(ScrollBar, {}),
+		/* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+	]
+}));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React$1.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, {
+	ref,
+	orientation,
+	className: cn("dy-flex dy-touch-none dy-select-none dy-transition-colors", orientation === "vertical" && "dy-h-full dy-w-2.5 dy-border-l dy-border-l-transparent dy-p-[1px]", orientation === "horizontal" && "dy-h-2.5 dy-flex-col dy-border-t dy-border-t-transparent dy-p-[1px]", className),
+	...props,
+	children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "dy-relative dy-flex-1 dy-rounded-full dy-bg-border" })
+}));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+//#endregion
+//#region src/components/ui/csv-importer.tsx
+function CsvImporter({ slug, schema, onClose }) {
+	const { client } = useDyrected();
+	const queryClient = useQueryClient();
+	const [step, setStep] = React$1.useState("upload");
+	const [csvHeaders, setCsvHeaders] = React$1.useState([]);
+	const [parsedRows, setParsedRows] = React$1.useState([]);
+	const [mapping, setMapping] = React$1.useState({});
+	const [validatedData, setValidatedData] = React$1.useState([]);
+	const [totalRows, setTotalRows] = React$1.useState(0);
+	const [processedCount, setProcessedCount] = React$1.useState(0);
+	const [successCount, setSuccessCount] = React$1.useState(0);
+	const [failedRows, setFailedRows] = React$1.useState([]);
+	const importableFields = React$1.useMemo(() => {
+		return schema.fields.filter((f) => f.name !== "id" && f.name !== "createdAt" && f.name !== "updatedAt" && f.type !== "row" && f.type !== "join" && !f.admin?.hidden);
+	}, [schema]);
+	const requiredFields = React$1.useMemo(() => {
+		return importableFields.filter((f) => f.required);
+	}, [importableFields]);
+	const handleFileChange = (e) => {
+		const selectedFile = e.target.files?.[0];
+		if (!selectedFile) return;
+		Papa.parse(selectedFile, {
+			header: true,
+			skipEmptyLines: "greedy",
+			complete: (results) => {
+				const headers = results.meta.fields || [];
+				setCsvHeaders(headers);
+				setParsedRows(results.data);
+				const initialMapping = {};
+				headers.forEach((header) => {
+					const match = importableFields.find((f) => f.name.toLowerCase() === header.toLowerCase() || f.label?.toLowerCase() === header.toLowerCase());
+					initialMapping[header] = match ? match.name : "__ignore__";
+				});
+				setMapping(initialMapping);
+				setStep("map");
+			},
+			error: (error) => {
+				console.error("PapaParse error:", error);
+			}
+		});
+	};
+	const handleMapChange = (header, fieldName) => {
+		setMapping((prev) => ({
+			...prev,
+			[header]: fieldName
+		}));
+	};
+	const isMapValid = React$1.useMemo(() => {
+		const mappedFields = Object.values(mapping);
+		return requiredFields.every((f) => mappedFields.includes(f.name));
+	}, [requiredFields, mapping]);
+	const coerceAndValidate = (val, field) => {
+		if (val === void 0 || val === null || String(val).trim() === "") {
+			if (field.required) return {
+				value: null,
+				error: `${field.label || field.name} is required`
+			};
+			return { value: null };
+		}
+		const strVal = String(val).trim();
+		switch (field.type) {
+			case "number": {
+				const num = Number(strVal);
+				if (isNaN(num)) return {
+					value: null,
+					error: "Must be a valid number"
+				};
+				return { value: num };
+			}
+			case "boolean": {
+				const lower = strVal.toLowerCase();
+				if (lower === "true" || lower === "yes" || lower === "1") return { value: true };
+				if (lower === "false" || lower === "no" || lower === "0") return { value: false };
+				return {
+					value: null,
+					error: "Must be a boolean (true/false, yes/no, 1/0)"
+				};
+			}
+			case "date":
+			case "datetime": {
+				const date = new Date(strVal);
+				if (isNaN(date.getTime())) return {
+					value: null,
+					error: "Must be a valid date"
+				};
+				return { value: date.toISOString() };
+			}
+			case "select":
+			case "radio":
+				if (field.options && Array.isArray(field.options) && field.options.length > 0) {
+					const found = field.options.find((opt) => {
+						const optVal = typeof opt === "string" ? opt : opt.value;
+						return String(optVal).toLowerCase() === strVal.toLowerCase();
+					});
+					if (!found) return {
+						value: null,
+						error: `Must be one of: ${field.options.map((opt) => typeof opt === "string" ? opt : opt.label || opt.value).join(", ")}`
+					};
+					return { value: typeof found === "string" ? found : found.value };
+				}
+				return { value: strVal };
+			default: return { value: strVal };
+		}
+	};
+	const handleProceedToPreview = () => {
+		setValidatedData(parsedRows.map((row, idx) => {
+			const coercedRow = {};
+			const errors = {};
+			let isValid = true;
+			Object.entries(mapping).forEach(([csvHeader, targetField]) => {
+				if (!targetField || targetField === "__ignore__") return;
+				const fieldSchema = importableFields.find((f) => f.name === targetField);
+				if (!fieldSchema) return;
+				const rawValue = row[csvHeader];
+				const { value, error } = coerceAndValidate(rawValue, fieldSchema);
+				if (error) {
+					errors[targetField] = error;
+					isValid = false;
+				} else coercedRow[targetField] = value;
+			});
+			requiredFields.forEach((field) => {
+				if (!Object.prototype.hasOwnProperty.call(coercedRow, field.name) || coercedRow[field.name] === null) {
+					errors[field.name] = `${field.label || field.name} is required`;
+					isValid = false;
+				}
+			});
+			return {
+				rowNumber: idx + 1,
+				data: coercedRow,
+				errors,
+				isValid
+			};
+		}));
+		setStep("preview");
+	};
+	const startImport = async () => {
+		setStep("importing");
+		setTotalRows(validatedData.length);
+		setProcessedCount(0);
+		setSuccessCount(0);
+		setFailedRows([]);
+		let success = 0;
+		const failures = [];
+		for (let i = 0; i < validatedData.length; i++) {
+			const rowResult = validatedData[i];
+			setProcessedCount(i + 1);
+			if (!rowResult.isValid) {
+				failures.push({
+					row: rowResult.rowNumber,
+					data: rowResult.data,
+					error: `Validation error: ${Object.values(rowResult.errors).join(", ")}`
+				});
+				setFailedRows([...failures]);
+				continue;
+			}
+			try {
+				await client.collection(slug).create(rowResult.data);
+				success++;
+				setSuccessCount(success);
+			} catch (error) {
+				failures.push({
+					row: rowResult.rowNumber,
+					data: rowResult.data,
+					error: error.message || "Failed to create entry"
+				});
+				setFailedRows([...failures]);
+			}
+		}
+		queryClient.invalidateQueries({ queryKey: ["collection", slug] });
+		setStep("complete");
+	};
+	const downloadFailedCsv = () => {
+		if (failedRows.length === 0) return;
+		const headers = [...csvHeaders, "Import Error"];
+		const rows = failedRows.map((f) => {
+			return {
+				...parsedRows[f.row - 1],
+				"Import Error": f.error
+			};
+		});
+		const csvContent = Papa.unparse({
+			fields: headers,
+			data: rows
+		});
+		const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement("a");
+		link.setAttribute("href", url);
+		link.setAttribute("download", `${slug}_failed_imports.csv`);
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	};
+	const previewRows = React$1.useMemo(() => {
+		return validatedData.slice(0, 100);
+	}, [validatedData]);
+	const totalErrors = React$1.useMemo(() => {
+		return validatedData.filter((r) => !r.isValid).length;
+	}, [validatedData]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dy-space-y-6",
+		children: [
+			step === "upload" && /* @__PURE__ */ jsx("div", {
+				className: "dy-space-y-4",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "dy-text-center dy-py-10 dy-border-2 dy-border-dashed dy-border-border dy-rounded-xl hover:dy-bg-muted/30 dy-transition-colors",
+					children: /* @__PURE__ */ jsxs("label", {
+						className: "dy-cursor-pointer dy-block dy-space-y-4 dy-px-6",
+						children: [
+							/* @__PURE__ */ jsx(Upload, { className: "dy-h-10 dy-w-10 dy-mx-auto dy-text-muted-foreground" }),
+							/* @__PURE__ */ jsxs("div", {
+								className: "dy-space-y-1",
+								children: [/* @__PURE__ */ jsx("p", {
+									className: "dy-text-sm dy-font-semibold",
+									children: "Click to upload or drag & drop"
+								}), /* @__PURE__ */ jsx("p", {
+									className: "dy-text-xs dy-text-muted-foreground",
+									children: "CSV files only"
+								})]
+							}),
+							/* @__PURE__ */ jsx("input", {
+								type: "file",
+								accept: ".csv",
+								className: "dy-hidden",
+								onChange: handleFileChange
+							})
+						]
+					})
+				})
+			}),
+			step === "map" && /* @__PURE__ */ jsxs("div", {
+				className: "dy-space-y-4",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "dy-p-4 dy-bg-muted/40 dy-border dy-border-border dy-rounded-xl dy-text-sm dy-text-muted-foreground",
+						children: "Map the columns in your CSV file to the corresponding fields of the collection. All required fields must be mapped to proceed."
+					}),
+					/* @__PURE__ */ jsx(ScrollArea, {
+						className: "dy-h-[300px] dy-pr-4 dy-border dy-border-border dy-rounded-xl",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "dy-divide-y dy-divide-border",
+							children: csvHeaders.map((header) => {
+								const mappedVal = mapping[header] ?? "__ignore__";
+								return /* @__PURE__ */ jsxs("div", {
+									className: "dy-flex dy-items-center dy-justify-between dy-p-3.5",
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "dy-space-y-1 dy-flex-1 dy-pr-4",
+										children: [/* @__PURE__ */ jsx("p", {
+											className: "dy-text-sm dy-font-semibold dy-text-foreground",
+											children: header
+										}), parsedRows[0] && /* @__PURE__ */ jsxs("p", {
+											className: "dy-text-xs dy-text-muted-foreground dy-truncate",
+											children: ["Sample: ", parsedRows[0][header]]
+										})]
+									}), /* @__PURE__ */ jsx("div", {
+										className: "dy-w-[200px]",
+										children: /* @__PURE__ */ jsxs(Select, {
+											value: mappedVal,
+											onValueChange: (val) => handleMapChange(header, val),
+											children: [/* @__PURE__ */ jsx(SelectTrigger, {
+												className: "dy-w-full",
+												children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Ignore field" })
+											}), /* @__PURE__ */ jsxs(SelectContent, { children: [/* @__PURE__ */ jsx(SelectItem, {
+												value: "__ignore__",
+												children: "Ignore field"
+											}), importableFields.map((field) => /* @__PURE__ */ jsxs(SelectItem, {
+												value: field.name,
+												children: [field.required ? "* " : "", field.label || field.name]
+											}, field.name))] })]
+										})
+									})]
+								}, header);
+							})
+						})
+					}),
+					requiredFields.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "dy-space-y-2",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "dy-text-xs dy-font-semibold dy-text-muted-foreground",
+							children: "Required Fields:"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "dy-flex dy-flex-wrap dy-gap-2",
+							children: requiredFields.map((f) => {
+								const isMapped = Object.values(mapping).includes(f.name);
+								return /* @__PURE__ */ jsxs(Badge, {
+									variant: isMapped ? "secondary" : "destructive",
+									className: "dy-rounded-md",
+									children: [isMapped ? "✓ " : "✗ ", f.label || f.name]
+								}, f.name);
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "dy-flex dy-justify-between dy-pt-4",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							onClick: () => setStep("upload"),
+							children: "Back"
+						}), /* @__PURE__ */ jsxs(Button, {
+							onClick: handleProceedToPreview,
+							disabled: !isMapValid,
+							children: ["Preview Validation ", /* @__PURE__ */ jsx(ArrowRight, { className: "dy-h-4 dy-w-4 dy-ml-2" })]
+						})]
+					})
+				]
+			}),
+			step === "preview" && /* @__PURE__ */ jsxs("div", {
+				className: "dy-space-y-4",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "dy-flex dy-items-center dy-justify-between",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "dy-space-y-1",
+							children: [/* @__PURE__ */ jsx("h3", {
+								className: "dy-text-sm dy-font-semibold",
+								children: "Validation Preview"
+							}), /* @__PURE__ */ jsxs("p", {
+								className: "dy-text-xs dy-text-muted-foreground",
+								children: ["Showing the first 100 rows. ", totalErrors > 0 ? `${totalErrors} rows have errors and will be skipped.` : "All rows are valid."]
+							})]
+						}), totalErrors > 0 && /* @__PURE__ */ jsxs(Badge, {
+							variant: "destructive",
+							className: "dy-rounded-md dy-gap-1.5",
+							children: [
+								/* @__PURE__ */ jsx(AlertTriangle, { className: "dy-h-3.5 dy-w-3.5" }),
+								" ",
+								totalErrors,
+								" Invalid"
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsx(ScrollArea, {
+						className: "dy-h-[300px] dy-border dy-border-border dy-rounded-xl",
+						children: /* @__PURE__ */ jsxs("table", {
+							className: "dy-w-full dy-text-left dy-border-collapse",
+							children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+								className: "dy-border-b dy-border-border dy-bg-muted/40 dy-text-xs dy-font-semibold dy-text-muted-foreground",
+								children: [/* @__PURE__ */ jsx("th", {
+									className: "dy-p-3 dy-w-16",
+									children: "Row"
+								}), importableFields.filter((f) => Object.values(mapping).includes(f.name)).map((f) => /* @__PURE__ */ jsx("th", {
+									className: "dy-p-3",
+									children: f.label || f.name
+								}, f.name))]
+							}) }), /* @__PURE__ */ jsx("tbody", {
+								className: "dy-text-sm",
+								children: previewRows.map((rowResult) => /* @__PURE__ */ jsxs("tr", {
+									className: "dy-border-b dy-border-border hover:dy-bg-muted/20",
+									children: [/* @__PURE__ */ jsx("td", {
+										className: "dy-p-3 dy-font-medium dy-text-muted-foreground",
+										children: rowResult.rowNumber
+									}), importableFields.filter((f) => Object.values(mapping).includes(f.name)).map((f) => {
+										const val = rowResult.data[f.name];
+										const error = rowResult.errors[f.name];
+										return /* @__PURE__ */ jsx("td", {
+											className: "dy-p-3",
+											children: error ? /* @__PURE__ */ jsxs("span", {
+												className: "dy-flex dy-items-center dy-gap-1.5 dy-text-destructive dy-font-medium",
+												children: [/* @__PURE__ */ jsx(AlertCircle, { className: "dy-h-3.5 dy-w-3.5" }), error]
+											}) : String(val ?? "")
+										}, f.name);
+									})]
+								}, rowResult.rowNumber))
+							})]
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "dy-flex dy-justify-between dy-pt-4",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							onClick: () => setStep("map"),
+							children: "Back"
+						}), /* @__PURE__ */ jsxs(Button, {
+							onClick: startImport,
+							variant: "default",
+							className: "dy-gap-2",
+							children: [
+								/* @__PURE__ */ jsx(Play, { className: "dy-h-4 dy-w-4" }),
+								" Start Import (",
+								validatedData.length - totalErrors,
+								" Rows)"
+							]
+						})]
+					})
+				]
+			}),
+			step === "importing" && /* @__PURE__ */ jsxs("div", {
+				className: "dy-space-y-6 dy-py-6",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "dy-space-y-2",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "dy-flex dy-items-center dy-justify-between dy-text-sm dy-font-semibold",
+						children: [/* @__PURE__ */ jsx("span", { children: "Importing rows..." }), /* @__PURE__ */ jsxs("span", { children: [
+							processedCount,
+							" / ",
+							totalRows
+						] })]
+					}), /* @__PURE__ */ jsx(Progress, {
+						value: processedCount / totalRows * 100,
+						className: "dy-h-2"
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "dy-grid dy-grid-cols-2 dy-gap-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "dy-p-4 dy-bg-muted/30 dy-border dy-border-border dy-rounded-xl dy-text-center",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "dy-text-2xl dy-font-bold dy-text-primary",
+							children: successCount
+						}), /* @__PURE__ */ jsx("p", {
+							className: "dy-text-xs dy-text-muted-foreground",
+							children: "Successful"
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "dy-p-4 dy-bg-muted/30 dy-border dy-border-border dy-rounded-xl dy-text-center",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "dy-text-2xl dy-font-bold dy-text-destructive",
+							children: failedRows.length
+						}), /* @__PURE__ */ jsx("p", {
+							className: "dy-text-xs dy-text-muted-foreground",
+							children: "Failed/Skipped"
+						})]
+					})]
+				})]
+			}),
+			step === "complete" && /* @__PURE__ */ jsxs("div", {
+				className: "dy-space-y-6",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "dy-flex dy-flex-col dy-items-center dy-text-center dy-space-y-3 dy-py-6",
+						children: [
+							/* @__PURE__ */ jsx(CheckCircle2, { className: "dy-h-12 dy-w-12 dy-text-green-500" }),
+							/* @__PURE__ */ jsx("h3", {
+								className: "dy-text-lg dy-font-semibold",
+								children: "Import Process Completed"
+							}),
+							/* @__PURE__ */ jsxs("p", {
+								className: "dy-text-sm dy-text-muted-foreground dy-max-w-md",
+								children: [
+									"Successfully imported ",
+									successCount,
+									" rows. ",
+									failedRows.length,
+									" rows failed or were skipped due to validation/server errors."
+								]
+							})
+						]
+					}),
+					failedRows.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "dy-space-y-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "dy-flex dy-items-center dy-justify-between",
+							children: [/* @__PURE__ */ jsxs("p", {
+								className: "dy-text-xs dy-font-bold dy-text-destructive uppercase tracking-wide",
+								children: [
+									"Failure Logs (",
+									failedRows.length,
+									" rows)"
+								]
+							}), /* @__PURE__ */ jsxs(Button, {
+								size: "sm",
+								variant: "outline",
+								className: "dy-h-8 dy-text-xs dy-gap-1.5",
+								onClick: downloadFailedCsv,
+								children: [/* @__PURE__ */ jsx(Download, { className: "dy-h-3.5 dy-w-3.5" }), " Download Errors CSV"]
+							})]
+						}), /* @__PURE__ */ jsx(ScrollArea, {
+							className: "dy-h-[180px] dy-border dy-border-border dy-rounded-xl",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "dy-divide-y dy-divide-border",
+								children: failedRows.map((f, idx) => /* @__PURE__ */ jsxs("div", {
+									className: "dy-flex dy-items-start dy-gap-3 dy-p-3 dy-text-xs",
+									children: [/* @__PURE__ */ jsxs(Badge, {
+										variant: "destructive",
+										className: "dy-rounded dy-shrink-0",
+										children: ["Row ", f.row]
+									}), /* @__PURE__ */ jsx("p", {
+										className: "dy-text-muted-foreground font-medium dy-pt-0.5",
+										children: f.error
+									})]
+								}, idx))
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "dy-flex dy-justify-end dy-gap-2 dy-pt-4",
+						children: [/* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							className: "dy-gap-2",
+							onClick: () => {
+								setCsvHeaders([]);
+								setParsedRows([]);
+								setMapping({});
+								setValidatedData([]);
+								setFailedRows([]);
+								setStep("upload");
+							},
+							children: [/* @__PURE__ */ jsx(RotateCcw, { className: "dy-h-4 dy-w-4" }), " Import Another File"]
+						}), /* @__PURE__ */ jsx(Button, {
+							onClick: onClose,
+							children: "Close Importer"
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/ui/csv-importer-dialog.tsx
+function CsvImporterDialog({ open, onOpenChange, slug, schema }) {
+	const title = schema.labels?.singular || schema.slug || slug;
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "sm:dy-max-w-2xl",
+			children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Import CSV Data" }), /* @__PURE__ */ jsxs(DialogDescription, { children: [
+				"Import records into the ",
+				title,
+				" collection."
+			] })] }), /* @__PURE__ */ jsx(CsvImporter, {
+				slug,
+				schema,
+				onClose: () => onOpenChange(false)
+			})]
+		})
+	});
+}
+//#endregion
 //#region src/components/ui/render-cell.tsx
 function RenderCell({ value, field, client, schemas }) {
 	if (value === null || value === void 0) return /* @__PURE__ */ jsx("span", {
@@ -2158,14 +2774,14 @@ function MediaGrid({ items, baseUrl, onDelete, slug }) {
 }
 //#endregion
 //#region src/components/ui/sheet.tsx
-var Sheet = SheetPrimitive.Root;
-var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
+var Sheet = DialogPrimitive.Root;
+var SheetPortal = DialogPrimitive.Portal;
+var SheetOverlay = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
 	className: cn("dy-fixed dy-inset-0 dy-z-50 dy-bg-black/40 dy-backdrop-blur-[2px] data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0", className),
 	...props,
 	ref
 }));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
 var sheetVariants = cva("dy-fixed dy-z-50 dy-gap-4 dy-bg-background dy-p-6 dy-shadow-2xl dy-transition dy-ease-in-out data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-duration-300 data-[state=open]:dy-duration-500", {
 	variants: { side: {
 		top: "dy-inset-x-0 dy-top-0 dy-border-b data-[state=closed]:dy-slide-out-to-top data-[state=open]:dy-slide-in-from-top",
@@ -2177,11 +2793,11 @@ var sheetVariants = cva("dy-fixed dy-z-50 dy-gap-4 dy-bg-background dy-p-6 dy-sh
 });
 var SheetContent = React$1.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsx(SheetPortal, { children: /* @__PURE__ */ jsxs("div", {
 	className: "dy-admin-ui",
-	children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
+	children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
 		ref,
 		className: cn(sheetVariants({ side }), className),
 		...props,
-		children: [children, /* @__PURE__ */ jsxs(SheetPrimitive.Close, {
+		children: [children, /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
 			className: "dy-absolute dy-right-4 dy-top-4 dy-rounded-sm dy-opacity-70 dy-ring-offset-background dy-transition-opacity hover:dy-opacity-100 focus:dy-outline-none focus:dy-ring-2 focus:dy-ring-ring focus:dy-ring-offset-2 disabled:dy-pointer-events-none data-[state=open]:dy-bg-secondary",
 			children: [/* @__PURE__ */ jsx(X, { className: "dy-h-4 dy-w-4" }), /* @__PURE__ */ jsx("span", {
 				className: "dy-sr-only",
@@ -2190,7 +2806,7 @@ var SheetContent = React$1.forwardRef(({ side = "right", className, children, ..
 		})]
 	})]
 }) }));
-SheetContent.displayName = SheetPrimitive.Content.displayName;
+SheetContent.displayName = DialogPrimitive.Content.displayName;
 var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("dy-flex dy-flex-col dy-space-y-2 dy-text-center sm:dy-text-left", className),
 	...props
@@ -2201,18 +2817,18 @@ var SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	...props
 });
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Title, {
+var SheetTitle = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, {
 	ref,
 	className: cn("dy-text-lg dy-font-semibold dy-text-foreground", className),
 	...props
 }));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-var SheetDescription = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Description, {
+SheetTitle.displayName = DialogPrimitive.Title.displayName;
+var SheetDescription = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, {
 	ref,
 	className: cn("dy-text-sm dy-text-muted-foreground", className),
 	...props
 }));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
+SheetDescription.displayName = DialogPrimitive.Description.displayName;
 //#endregion
 //#region src/components/ui/toggle.tsx
 var toggleVariants = cva("dy-inline-flex dy-items-center dy-justify-center dy-rounded-md dy-text-sm dy-font-medium dy-ring-offset-background dy-transition-colors hover:dy-bg-muted hover:dy-text-muted-foreground focus-visible:dy-outline-none focus-visible:dy-ring-2 focus-visible:dy-ring-ring focus-visible:dy-ring-offset-2 disabled:dy-pointer-events-none disabled:dy-opacity-50 data-[state=on]:dy-bg-accent data-[state=on]:dy-text-accent-foreground [&_svg]:dy-pointer-events-none [&_svg]:dy-size-4 [&_svg]:dy-shrink-0 dy-gap-2", {
@@ -2243,55 +2859,6 @@ var Toggle = React$1.forwardRef(({ className, variant, size, ...props }, ref) =>
 }));
 Toggle.displayName = TogglePrimitive.Root.displayName;
 //#endregion
-//#region src/components/ui/dialog.tsx
-var Dialog = SheetPrimitive.Root;
-var DialogTrigger = SheetPrimitive.Trigger;
-var DialogPortal = SheetPrimitive.Portal;
-var DialogOverlay = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
-	ref,
-	className: cn("dy-fixed dy-inset-0 dy-z-50 dy-bg-black/40 dy-backdrop-blur-[2px] data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0", className),
-	...props
-}));
-DialogOverlay.displayName = SheetPrimitive.Overlay.displayName;
-var DialogContent = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs("div", {
-	className: "dy-admin-ui",
-	children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
-		ref,
-		className: cn("dy-fixed dy-left-[50%] dy-top-[50%] dy-z-50 dy-grid dy-w-full dy-max-w-lg dy-translate-x-[-50%] dy-translate-y-[-50%] dy-gap-4 dy-border dy-bg-background dy-p-6 dy-shadow-2xl dy-duration-200 data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0 data-[state=closed]:dy-zoom-out-95 data-[state=open]:dy-zoom-in-95 data-[state=closed]:dy-slide-out-to-left-1/2 data-[state=closed]:dy-slide-out-to-top-[48%] data-[state=open]:dy-slide-in-from-left-1/2 data-[state=open]:dy-slide-in-from-top-[48%] sm:dy-rounded-xl", className),
-		...props,
-		children: [children, /* @__PURE__ */ jsxs(SheetPrimitive.Close, {
-			className: "dy-absolute dy-right-4 dy-top-4 dy-rounded-sm dy-opacity-70 dy-ring-offset-background dy-transition-opacity hover:dy-opacity-100 focus:dy-outline-none focus:dy-ring-2 focus:dy-ring-ring focus:dy-ring-offset-2 disabled:dy-pointer-events-none data-[state=open]:dy-bg-accent data-[state=open]:dy-text-muted-foreground",
-			children: [/* @__PURE__ */ jsx(X, { className: "dy-h-4 dy-w-4" }), /* @__PURE__ */ jsx("span", {
-				className: "dy-sr-only",
-				children: "Close"
-			})]
-		})]
-	})]
-}) }));
-DialogContent.displayName = SheetPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("dy-flex dy-flex-col dy-space-y-1.5 dy-text-center sm:dy-text-left", className),
-	...props
-});
-DialogHeader.displayName = "DialogHeader";
-var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("dy-flex dy-flex-col-reverse sm:dy-flex-row sm:dy-justify-end sm:dy-space-x-2", className),
-	...props
-});
-DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Title, {
-	ref,
-	className: cn("dy-text-lg dy-font-semibold dy-leading-none dy-tracking-tight", className),
-	...props
-}));
-DialogTitle.displayName = SheetPrimitive.Title.displayName;
-var DialogDescription = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Description, {
-	ref,
-	className: cn("dy-text-sm dy-text-muted-foreground", className),
-	...props
-}));
-DialogDescription.displayName = SheetPrimitive.Description.displayName;
-//#endregion
 //#region src/components/ui/tabs.tsx
 var Tabs = TabsPrimitive.Root;
 var TabsList = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.List, {
@@ -2308,34 +2875,10 @@ var TabsTrigger = React$1.forwardRef(({ className, ...props }, ref) => /* @__PUR
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 var TabsContent = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Content, {
 	ref,
-	className: cn("dy-mt-2 dy-ring-offset-background focus-visible:dy-outline-none focus-visible:dy-ring-2 focus-visible:dy-ring-ring focus-visible:dy-ring-offset-2", className),
-	...props
-}));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-//#endregion
-//#region src/components/ui/scroll-area.tsx
-var ScrollArea = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
-	ref,
-	className: cn("dy-relative dy-overflow-hidden", className),
-	...props,
-	children: [
-		/* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {
-			className: "dy-h-full dy-w-full dy-rounded-[inherit]",
-			children
-		}),
-		/* @__PURE__ */ jsx(ScrollBar, {}),
-		/* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
-	]
-}));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React$1.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, {
-	ref,
-	orientation,
-	className: cn("dy-flex dy-touch-none dy-select-none dy-transition-colors", orientation === "vertical" && "dy-h-full dy-w-2.5 dy-border-l dy-border-l-transparent dy-p-[1px]", orientation === "horizontal" && "dy-h-2.5 dy-flex-col dy-border-t dy-border-t-transparent dy-p-[1px]", className),
-	...props,
-	children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "dy-relative dy-flex-1 dy-rounded-full dy-bg-border" })
+	className: cn("dy-mt-2 dy-ring-offset-background focus-visible:dy-outline-none focus-visible:dy-ring-2 focus-visible:dy-ring-ring focus-visible:dy-ring-offset-2", className),
+	...props
 }));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 //#endregion
 //#region src/components/media/media-library-dialog.tsx
 function MediaLibraryDialog({ collection, isOpen, onOpenChange, selectedValues, onSelect, multiple, onConfirm }) {
@@ -8724,13 +9267,41 @@ function SpreadsheetEditor({ slug, schema, data, onSave, isSaving }) {
 }
 //#endregion
 //#region src/pages/collections/list-page.tsx
+function SortableColumnItem({ id, label, visible, onToggleVisible }) {
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		style: {
+			transform: CSS.Transform.toString(transform),
+			transition,
+			zIndex: isDragging ? 10 : 1
+		},
+		className: cn("dy-flex dy-items-center dy-gap-2.5 dy-p-2 dy-bg-background dy-border dy-border-border/60 dy-rounded-lg dy-shadow-sm dy-transition-all", isDragging && "dy-opacity-50 dy-border-primary"),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				...attributes,
+				...listeners,
+				className: "dy-cursor-grab active:dy-cursor-grabbing dy-text-muted-foreground/60 hover:dy-text-foreground dy-p-0.5",
+				children: /* @__PURE__ */ jsx(GripVertical, { className: "dy-h-3.5 dy-w-3.5" })
+			}),
+			/* @__PURE__ */ jsx(Checkbox, {
+				checked: visible,
+				onCheckedChange: (val) => onToggleVisible(!!val)
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "dy-flex-1 dy-text-xs dy-font-medium dy-text-foreground",
+				children: label
+			})
+		]
+	});
+}
 function CollectionListPage({ slug }) {
 	const { client, components, user } = useDyrected();
 	const queryClient = useQueryClient();
 	const [page, setPage] = React$1.useState(1);
 	const [rowSelection, setRowSelection] = React$1.useState({});
+	const [isImportOpen, setIsImportOpen] = React$1.useState(false);
 	const [searchParams, setSearchParams] = useSearchParams();
-	const [viewMode, setViewMode] = React$1.useState("list");
 	const whereParam = searchParams.get("where");
 	const rules = React$1.useMemo(() => {
 		if (!whereParam) return [];
@@ -8760,6 +9331,145 @@ function CollectionListPage({ slug }) {
 		enabled: !!client
 	});
 	const schema = schemas?.collections.find((c) => c.slug === slug);
+	const allAvailableColumns = React$1.useMemo(() => {
+		if (!schema) return [];
+		return [
+			...schema.fields.filter((f) => f.name !== "password" && !f.admin?.hidden && f.type !== "row" && f.type !== "join").map((field) => field.name),
+			"id",
+			"createdAt",
+			"updatedAt"
+		].filter((name, index, self) => self.indexOf(name) === index);
+	}, [schema]);
+	const defaultListColumns = React$1.useMemo(() => {
+		if (!schema) return [];
+		const allDisplayFields = schema.fields.filter((f) => f.name !== "password" && !f.admin?.hidden && f.type !== "row" && f.type !== "join");
+		const configuredColumns = Array.isArray(schema.admin?.defaultColumns) ? schema.admin.defaultColumns : [];
+		return configuredColumns.length > 0 ? configuredColumns : allDisplayFields.slice(0, 3).map((field) => field.name);
+	}, [schema]);
+	const defaultListPreference = React$1.useMemo(() => {
+		const visibleSet = new Set(defaultListColumns);
+		return {
+			viewMode: "list",
+			columns: allAvailableColumns.map((name) => ({
+				name,
+				visible: visibleSet.has(name)
+			}))
+		};
+	}, [allAvailableColumns, defaultListColumns]);
+	const prefKey = `layout:collections:${slug}:list`;
+	const { data: rawPreference } = useQuery({
+		queryKey: ["preferences", prefKey],
+		queryFn: async () => {
+			if (!client) return null;
+			return (await client.getPreference(prefKey)).value;
+		},
+		enabled: !!client,
+		staleTime: 5e3,
+		refetchOnWindowFocus: true
+	});
+	const reconciledPreference = React$1.useMemo(() => {
+		if (!rawPreference) return defaultListPreference;
+		let parsedViewMode = "list";
+		let parsedColumns = [];
+		if (Array.isArray(rawPreference)) {
+			parsedViewMode = "list";
+			parsedColumns = rawPreference.map((item) => {
+				if (typeof item === "string") return {
+					name: item,
+					visible: true
+				};
+				if (item && typeof item === "object" && "name" in item) {
+					const obj = item;
+					return {
+						name: obj.name,
+						visible: obj.visible !== false
+					};
+				}
+				return null;
+			}).filter((x) => x !== null);
+		} else if (rawPreference && typeof rawPreference === "object") {
+			const rawPrefObj = rawPreference;
+			parsedViewMode = rawPrefObj.viewMode === "spreadsheet" ? "spreadsheet" : "list";
+			if (Array.isArray(rawPrefObj.columns)) parsedColumns = rawPrefObj.columns.map((item) => {
+				if (typeof item === "string") return {
+					name: item,
+					visible: true
+				};
+				if (item && typeof item === "object" && "name" in item) {
+					const obj = item;
+					return {
+						name: obj.name,
+						visible: obj.visible !== false
+					};
+				}
+				return null;
+			}).filter((x) => x !== null);
+		}
+		const validColumns = parsedColumns.filter((col) => allAvailableColumns.includes(col.name));
+		const validNames = validColumns.map((col) => col.name);
+		const missingColumns = allAvailableColumns.filter((name) => !validNames.includes(name)).map((name) => ({
+			name,
+			visible: false
+		}));
+		return {
+			viewMode: parsedViewMode,
+			columns: [...validColumns, ...missingColumns]
+		};
+	}, [
+		rawPreference,
+		defaultListPreference,
+		allAvailableColumns
+	]);
+	const [localPreference, setLocalPreference] = React$1.useState(reconciledPreference);
+	const syncPreference = React$1.useState(() => {
+		return (next) => {
+			setLocalPreference((prev) => {
+				const isViewModeSame = prev.viewMode === next.viewMode;
+				const isColsSame = prev.columns.length === next.columns.length && prev.columns.every((col, i) => col.name === next.columns[i].name && col.visible === next.columns[i].visible);
+				return isViewModeSame && isColsSame ? prev : next;
+			});
+		};
+	})[0];
+	React$1.useEffect(() => {
+		syncPreference(reconciledPreference);
+	}, [reconciledPreference, syncPreference]);
+	const savePreferenceMutation = useMutation({
+		mutationFn: async ({ scope, value }) => {
+			if (!client) throw new Error("Client not available");
+			await client.setPreference(prefKey, value, { scope });
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["preferences", prefKey] });
+		}
+	});
+	const resetPreferenceMutation = useMutation({
+		mutationFn: async ({ scope }) => {
+			if (!client) throw new Error("Client not available");
+			await client.deletePreference(prefKey, { scope });
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["preferences", prefKey] });
+		}
+	});
+	const saveColumns = (scope) => savePreferenceMutation.mutateAsync({
+		scope,
+		value: localPreference
+	});
+	const resetColumns = () => resetPreferenceMutation.mutateAsync({ scope: "personal" });
+	const dndSensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const handleDndDragEnd = (event) => {
+		const { active, over } = event;
+		if (!over || active.id === over.id) return;
+		setLocalPreference((prev) => {
+			const oldIndex = prev.columns.findIndex((c) => c.name === active.id);
+			const newIndex = prev.columns.findIndex((c) => c.name === over.id);
+			if (oldIndex === -1 || newIndex === -1) return prev;
+			return {
+				...prev,
+				columns: arrayMove(prev.columns, oldIndex, newIndex)
+			};
+		});
+	};
 	const { data: response, isLoading } = useQuery({
 		queryKey: [
 			"collection",
@@ -8908,18 +9618,9 @@ function CollectionListPage({ slug }) {
 		if (!schema) return [];
 		const allDisplayFields = schema.fields.filter((f) => f.name !== "password" && !f.admin?.hidden && f.type !== "row" && f.type !== "join");
 		const fieldByName = new Map(allDisplayFields.map((field) => [field.name, field]));
-		const configuredColumns = Array.isArray(schema.admin?.defaultColumns) ? schema.admin.defaultColumns : [];
+		const configuredColumns = localPreference.columns.filter((col) => col.visible).map((col) => col.name);
 		const visibleColumnNames = configuredColumns.length > 0 ? configuredColumns : allDisplayFields.slice(0, 3).map((field) => field.name);
-		const systemColumnNames = [
-			"id",
-			"createdAt",
-			"updatedAt"
-		];
-		const allColumnNames = [
-			...visibleColumnNames,
-			...allDisplayFields.map((field) => field.name),
-			...systemColumnNames
-		].filter((name, index, names) => names.indexOf(name) === index);
+		const allColumnNames = visibleColumnNames;
 		const firstVisibleFieldName = visibleColumnNames.find((name) => fieldByName.has(name));
 		const titleFieldName = visibleColumnNames.includes(schema.admin?.useAsTitle || "") ? schema.admin?.useAsTitle : firstVisibleFieldName;
 		const deleteAccess = schema.access?.delete;
@@ -9041,29 +9742,9 @@ function CollectionListPage({ slug }) {
 		user,
 		handleDelete,
 		slug,
-		schemas
+		schemas,
+		localPreference.columns
 	]);
-	const initialColumnVisibility = React$1.useMemo(() => {
-		if (!schema) return {};
-		const allDisplayFields = schema.fields.filter((f) => f.name !== "password" && !f.admin?.hidden && f.type !== "row" && f.type !== "join");
-		const validColumnNames = new Set([
-			...allDisplayFields.map((field) => field.name),
-			"id",
-			"createdAt",
-			"updatedAt"
-		]);
-		const configuredColumns = Array.isArray(schema.admin?.defaultColumns) ? schema.admin.defaultColumns : [];
-		const visibleColumnNames = new Set((configuredColumns.length > 0 ? configuredColumns : allDisplayFields.slice(0, 3).map((field) => field.name)).filter((name) => validColumnNames.has(name)));
-		const visibility = {};
-		validColumnNames.forEach((name) => {
-			visibility[name] = visibleColumnNames.has(name);
-		});
-		return visibility;
-	}, [schema]);
-	const columnPreferenceKey = React$1.useMemo(() => {
-		if (!schema) return slug;
-		return `${slug}:${(Array.isArray(schema.admin?.defaultColumns) ? schema.admin.defaultColumns : []).join(",") || "default"}`;
-	}, [schema, slug]);
 	if (!schema) return /* @__PURE__ */ jsxs("div", { children: ["Collection not found: ", slug] });
 	const readAccess = schema.access?.read;
 	let canRead = true;
@@ -9200,63 +9881,139 @@ function CollectionListPage({ slug }) {
 				icon: Database,
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "dy-flex dy-items-center dy-gap-2 dy-w-full sm:dy-w-auto",
-					children: [/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+					children: [/* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 						asChild: true,
 						children: /* @__PURE__ */ jsxs(Button, {
 							variant: "outline",
 							size: "sm",
 							className: "dy-h-8 dy-px-3 dy-gap-1.5 dy-text-xs",
-							children: [
-								viewMode === "list" ? /* @__PURE__ */ jsx(List, { className: "dy-h-3.5 dy-w-3.5 dy-text-muted-foreground" }) : /* @__PURE__ */ jsx(Grid, { className: "dy-h-3.5 dy-w-3.5 dy-text-muted-foreground" }),
-								/* @__PURE__ */ jsx("span", { children: viewMode === "list" ? "List View" : "Spreadsheet" }),
-								/* @__PURE__ */ jsx(ChevronDown, { className: "dy-h-3 dy-w-3 dy-text-muted-foreground/60" })
-							]
+							children: [/* @__PURE__ */ jsx(Settings2, { className: "dy-h-3.5 dy-w-3.5" }), /* @__PURE__ */ jsx("span", { children: "View Settings" })]
 						})
-					}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+					}), /* @__PURE__ */ jsxs(PopoverContent, {
 						align: "end",
-						className: "dy-w-56",
+						className: "dy-w-80 dy-p-4 dy-space-y-4",
 						children: [
-							/* @__PURE__ */ jsx(DropdownMenuLabel, {
-								className: "dy-text-xs dy-font-normal dy-text-muted-foreground/50 dy-px-3 dy-py-1.5",
-								children: "Layout"
-							}),
-							/* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "dy-opacity-50" }),
-							/* @__PURE__ */ jsxs(DropdownMenuItem, {
-								onClick: () => setViewMode("list"),
-								className: "dy-flex dy-items-center dy-justify-between dy-py-2 dy-cursor-pointer",
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: "dy-flex dy-items-center dy-gap-2.5",
-									children: [/* @__PURE__ */ jsx(List, { className: "dy-h-4 dy-w-4 dy-text-muted-foreground" }), /* @__PURE__ */ jsxs("div", {
-										className: "dy-flex dy-flex-col",
-										children: [/* @__PURE__ */ jsx("span", {
-											className: "dy-text-xs dy-font-medium",
-											children: "List View"
-										}), /* @__PURE__ */ jsx("span", {
-											className: "dy-text-[10px] dy-text-muted-foreground",
-											children: "Read-only table listing"
-										})]
+							/* @__PURE__ */ jsxs("div", {
+								className: "dy-space-y-1.5",
+								children: [/* @__PURE__ */ jsx("h4", {
+									className: "dy-text-xs dy-font-semibold dy-text-foreground dy-text-left",
+									children: "Layout Mode"
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "dy-grid dy-grid-cols-2 dy-gap-2",
+									children: [/* @__PURE__ */ jsx(Button, {
+										size: "sm",
+										variant: localPreference.viewMode === "list" ? "default" : "outline",
+										className: "dy-h-8 dy-text-xs",
+										onClick: () => setLocalPreference((prev) => ({
+											...prev,
+											viewMode: "list"
+										})),
+										children: "List View"
+									}), /* @__PURE__ */ jsx(Button, {
+										size: "sm",
+										variant: localPreference.viewMode === "spreadsheet" ? "default" : "outline",
+										className: "dy-h-8 dy-text-xs",
+										onClick: () => setLocalPreference((prev) => ({
+											...prev,
+											viewMode: "spreadsheet"
+										})),
+										children: "Spreadsheet"
 									})]
-								}), viewMode === "list" && /* @__PURE__ */ jsx(Check, { className: "dy-h-3.5 dy-w-3.5 dy-text-primary" })]
+								})]
 							}),
-							/* @__PURE__ */ jsxs(DropdownMenuItem, {
-								onClick: () => setViewMode("spreadsheet"),
-								className: "dy-flex dy-items-center dy-justify-between dy-py-2 dy-cursor-pointer",
+							/* @__PURE__ */ jsxs("div", {
+								className: "dy-space-y-1.5",
+								children: [
+									/* @__PURE__ */ jsx("h4", {
+										className: "dy-text-xs dy-font-semibold dy-text-foreground dy-text-left",
+										children: "Columns"
+									}),
+									/* @__PURE__ */ jsx("p", {
+										className: "dy-text-[10px] dy-text-muted-foreground dy-text-left",
+										children: "Reorder and toggle column visibility."
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "dy-max-h-[200px] dy-overflow-y-auto dy-space-y-1 dy-pr-1 dy-outline-none",
+										children: /* @__PURE__ */ jsx(DndContext, {
+											sensors: dndSensors,
+											collisionDetection: closestCenter,
+											onDragEnd: handleDndDragEnd,
+											children: /* @__PURE__ */ jsx(SortableContext, {
+												items: localPreference.columns.map((c) => c.name),
+												strategy: verticalListSortingStrategy,
+												children: /* @__PURE__ */ jsx("div", {
+													className: "dy-space-y-1",
+													children: localPreference.columns.map((col) => {
+														let label = col.name;
+														if (col.name === "id") label = "ID";
+														else if (col.name === "createdAt") label = "Created";
+														else if (col.name === "updatedAt") label = "Last Updated";
+														else {
+															const field = schema.fields.find((f) => f.name === col.name);
+															if (field) label = field.label || field.name;
+														}
+														return /* @__PURE__ */ jsx(SortableColumnItem, {
+															id: col.name,
+															label,
+															visible: col.visible,
+															onToggleVisible: (visible) => {
+																setLocalPreference((prev) => ({
+																	...prev,
+																	columns: prev.columns.map((c) => c.name === col.name ? {
+																		...c,
+																		visible
+																	} : c)
+																}));
+															}
+														}, col.name);
+													})
+												})
+											})
+										})
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "dy-pt-2 dy-border-t dy-border-border/60 dy-flex dy-flex-col dy-gap-2",
 								children: [/* @__PURE__ */ jsxs("div", {
-									className: "dy-flex dy-items-center dy-gap-2.5",
-									children: [/* @__PURE__ */ jsx(Grid, { className: "dy-h-4 dy-w-4 dy-text-muted-foreground" }), /* @__PURE__ */ jsxs("div", {
-										className: "dy-flex dy-flex-col",
-										children: [/* @__PURE__ */ jsx("span", {
-											className: "dy-text-xs dy-font-medium",
-											children: "Spreadsheet"
-										}), /* @__PURE__ */ jsx("span", {
-											className: "dy-text-[10px] dy-text-muted-foreground",
-											children: "Airtable-style editing"
-										})]
+									className: "dy-grid dy-grid-cols-2 dy-gap-2",
+									children: [/* @__PURE__ */ jsx(Button, {
+										size: "sm",
+										className: "dy-h-7 dy-text-[10px]",
+										onClick: () => {
+											saveColumns("personal");
+											toast.success("Saved personal view preferences");
+										},
+										children: "Save for Me"
+									}), user?.role === "admin" && /* @__PURE__ */ jsx(Button, {
+										size: "sm",
+										variant: "secondary",
+										className: "dy-h-7 dy-text-[10px]",
+										onClick: () => {
+											saveColumns("global");
+											toast.success("Saved global view preferences");
+										},
+										children: "Save for Everyone"
 									})]
-								}), viewMode === "spreadsheet" && /* @__PURE__ */ jsx(Check, { className: "dy-h-3.5 dy-w-3.5 dy-text-primary" })]
+								}), /* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									variant: "outline",
+									className: "dy-h-7 dy-text-[10px] dy-w-full",
+									onClick: () => {
+										resetColumns();
+										toast.success("Reset view preferences to default");
+									},
+									children: "Reset to Default"
+								})]
 							})
 						]
-					})] }), canCreate && /* @__PURE__ */ jsx(Link, {
+					})] }), canCreate && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Button, {
+						variant: "outline",
+						size: "sm",
+						className: "dy-h-8 dy-px-3 dy-gap-1.5 dy-text-xs dy-w-full sm:dy-w-auto",
+						onClick: () => setIsImportOpen(true),
+						children: [/* @__PURE__ */ jsx(FileUp, { className: "dy-h-3.5 dy-w-3.5" }), /* @__PURE__ */ jsx("span", { children: "Import CSV" })]
+					}), /* @__PURE__ */ jsx(Link, {
 						to: `/collections/${slug}/new`,
 						className: "dy-w-full sm:dy-w-auto",
 						children: /* @__PURE__ */ jsxs(Button, {
@@ -9273,7 +10030,7 @@ function CollectionListPage({ slug }) {
 								})
 							]
 						})
-					})]
+					})] })]
 				})
 			}),
 			/* @__PURE__ */ jsx(AdminComponentSlot, {
@@ -9288,7 +10045,7 @@ function CollectionListPage({ slug }) {
 					isLoading ? /* @__PURE__ */ jsx("div", {
 						className: "dy-flex dy-h-[400px] dy-items-center dy-justify-center",
 						children: /* @__PURE__ */ jsx("div", { className: "dy-h-8 dy-w-8 dy-animate-spin dy-rounded-full dy-border-4 dy-border-primary dy-border-t-transparent" })
-					}) : viewMode === "spreadsheet" ? /* @__PURE__ */ jsx(SpreadsheetEditor, {
+					}) : localPreference.viewMode === "spreadsheet" ? /* @__PURE__ */ jsx(SpreadsheetEditor, {
 						slug,
 						schema,
 						data: response?.docs || [],
@@ -9305,8 +10062,7 @@ function CollectionListPage({ slug }) {
 						searchKey: schema.admin?.useAsTitle || schema.fields.find((f) => !f.admin?.hidden)?.name || "id",
 						onRowSelectionChange: setRowSelection,
 						rowSelection,
-						persistenceKey: columnPreferenceKey,
-						initialColumnVisibility,
+						hideViewButton: true,
 						toolbarActions: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FilterBuilder, {
 							schema,
 							rules,
@@ -9383,6 +10139,12 @@ function CollectionListPage({ slug }) {
 						componentProps: collectionComponentProps
 					})
 				]
+			}),
+			/* @__PURE__ */ jsx(CsvImporterDialog, {
+				open: isImportOpen,
+				onOpenChange: setIsImportOpen,
+				slug,
+				schema
 			})
 		]
 	});
@@ -9744,7 +10506,172 @@ function WorkflowPanel({ collection, documentId, workflowMeta, workflowConfig })
 	});
 }
 //#endregion
+//#region src/hooks/useLayoutPreference.ts
+function useLayoutPreference({ key, defaultKeys }) {
+	const { client } = useDyrected();
+	const queryClient = useQueryClient();
+	const { data, isLoading } = useQuery({
+		queryKey: ["preferences", key],
+		queryFn: async () => {
+			if (!client) return null;
+			return (await client.getPreference(key)).value;
+		},
+		enabled: !!client,
+		staleTime: 5e3,
+		refetchOnWindowFocus: true
+	});
+	const reconciledLayout = useMemo(() => {
+		const isStringArray = defaultKeys.every((k) => typeof k === "string");
+		if (!data || !Array.isArray(data)) return defaultKeys;
+		if (isStringArray) {
+			const normalizedData = data.map((k) => typeof k === "string" ? k : k?.name || "").filter(Boolean);
+			const defaultStrings = defaultKeys;
+			const validKeys = normalizedData.filter((k) => defaultStrings.includes(k));
+			const missingKeys = defaultStrings.filter((k) => !validKeys.includes(k));
+			return [...validKeys, ...missingKeys];
+		} else {
+			const normalizedData = data.map((item) => {
+				if (typeof item === "string") return { name: item };
+				if (item && typeof item === "object" && "name" in item && typeof item.name === "string") return {
+					name: item.name,
+					width: item.width
+				};
+				return { name: "" };
+			}).filter((item) => item.name !== "");
+			const defaultItems = defaultKeys;
+			const defaultNames = defaultItems.map((item) => item.name);
+			const defaultMap = new Map(defaultItems.map((item) => [item.name, item]));
+			const validItems = normalizedData.filter((item) => defaultNames.includes(item.name));
+			const validNames = validItems.map((item) => item.name);
+			const missingItems = defaultNames.filter((name) => !validNames.includes(name)).map((name) => defaultMap.get(name));
+			return [...validItems.map((item) => {
+				const def = defaultMap.get(item.name);
+				return {
+					...item,
+					width: item.width || def?.width
+				};
+			}), ...missingItems];
+		}
+	}, [data, defaultKeys]);
+	const [localLayout, setLocalLayout] = useState(reconciledLayout);
+	const syncLayout = useState(() => {
+		return (next) => {
+			setLocalLayout((prev) => {
+				return prev.length === next.length && prev.every((v, i) => {
+					if (typeof v === "string") return v === next[i];
+					return v.name === next[i].name && v.width === next[i].width;
+				}) ? prev : next;
+			});
+		};
+	})[0];
+	useEffect(() => {
+		syncLayout(reconciledLayout);
+	}, [reconciledLayout, syncLayout]);
+	const saveMutation = useMutation({
+		mutationFn: async ({ scope, value }) => {
+			if (!client) throw new Error("Client not available");
+			await client.setPreference(key, value, { scope });
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["preferences", key] });
+		}
+	});
+	const resetMutation = useMutation({
+		mutationFn: async ({ scope }) => {
+			if (!client) throw new Error("Client not available");
+			await client.deletePreference(key, { scope });
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["preferences", key] });
+		}
+	});
+	return {
+		layout: localLayout,
+		setLayout: setLocalLayout,
+		reconciledLayout,
+		saveLayout: (scope) => saveMutation.mutateAsync({
+			scope,
+			value: localLayout
+		}),
+		resetLayout: (scope) => resetMutation.mutateAsync({ scope }),
+		isLoading,
+		isSaving: saveMutation.isPending,
+		isResetting: resetMutation.isPending
+	};
+}
+//#endregion
 //#region src/pages/collections/edit-page.tsx
+function SortableFieldItem({ id, label, type, width, onChangeWidth }) {
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		style: {
+			transform: CSS.Transform.toString(transform),
+			transition,
+			zIndex: isDragging ? 10 : 1
+		},
+		className: cn("dy-flex dy-items-center dy-gap-3 dy-p-3 dy-bg-card dy-border dy-border-border/60 dy-rounded-xl dy-shadow-sm dy-transition-all", isDragging && "dy-opacity-50 dy-border-primary"),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				...attributes,
+				...listeners,
+				className: "dy-cursor-grab active:dy-cursor-grabbing dy-text-muted-foreground/60 hover:dy-text-foreground dy-p-1",
+				children: /* @__PURE__ */ jsx(GripVertical, { className: "dy-h-4 dy-w-4" })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "dy-flex-1 dy-min-w-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "dy-text-sm dy-font-semibold dy-text-foreground dy-truncate",
+					children: label
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "dy-text-xs dy-text-muted-foreground",
+					children: [
+						id,
+						" • ",
+						/* @__PURE__ */ jsx("span", {
+							className: "dy-uppercase",
+							children: type
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "dy-shrink-0",
+				children: /* @__PURE__ */ jsxs("select", {
+					value: width || "100%",
+					onChange: (e) => onChangeWidth(e.target.value),
+					className: "dy-text-[11px] dy-font-semibold dy-bg-muted/50 hover:dy-bg-muted dy-border dy-border-border/40 dy-rounded-lg dy-px-2 dy-py-1 dy-outline-none dy-cursor-pointer dy-transition-all",
+					children: [
+						/* @__PURE__ */ jsx("option", {
+							value: "25%",
+							children: "25%"
+						}),
+						/* @__PURE__ */ jsx("option", {
+							value: "33.33%",
+							children: "33%"
+						}),
+						/* @__PURE__ */ jsx("option", {
+							value: "50%",
+							children: "50%"
+						}),
+						/* @__PURE__ */ jsx("option", {
+							value: "66.66%",
+							children: "66%"
+						}),
+						/* @__PURE__ */ jsx("option", {
+							value: "75%",
+							children: "75%"
+						}),
+						/* @__PURE__ */ jsx("option", {
+							value: "100%",
+							children: "100%"
+						})
+					]
+				})
+			})
+		]
+	});
+}
 function EditEntryPage() {
 	const { slug, id } = useParams();
 	const [searchParams] = useSearchParams();
@@ -9755,6 +10682,77 @@ function EditEntryPage() {
 	const [isDirty, setIsDirty] = useState(false);
 	const [previewData, setPreviewData] = useState(null);
 	const isEdit = !!id;
+	const [isConfiguringView, setIsConfiguringView] = useState(false);
+	const { data: schemas } = useQuery({
+		queryKey: ["schemas"],
+		queryFn: () => client.getSchemas(),
+		enabled: !!client
+	});
+	const schema = schemas?.collections.find((c) => c.slug === slug);
+	const fieldsList = useMemo(() => {
+		if (!schema) return [];
+		let fields = [...schema.fields];
+		if (schema.upload) {
+			const hasAlt = fields.some((f) => f.name === "alt");
+			const hasCaption = fields.some((f) => f.name === "caption");
+			const mediaFields = [];
+			if (!hasAlt) mediaFields.push({
+				name: "alt",
+				type: "text",
+				label: "Alt Text",
+				admin: { description: "Describe the image for accessibility/screen readers." }
+			});
+			if (!hasCaption) mediaFields.push({
+				name: "caption",
+				type: "textarea",
+				label: "Caption",
+				admin: { description: "Add a caption/description for this media file." }
+			});
+			fields = [...mediaFields, ...fields];
+		}
+		return fields;
+	}, [schema]);
+	const defaultKeys = useMemo(() => {
+		return fieldsList.filter((f) => !!f.name).map((f) => ({
+			name: f.name,
+			width: f.admin?.width || "100%"
+		}));
+	}, [fieldsList]);
+	const { layout, setLayout, saveLayout, resetLayout, reconciledLayout, isLoading: isPreferenceLoading } = useLayoutPreference({
+		key: `layout:collections:${slug}:edit`,
+		defaultKeys
+	});
+	const orderedFields = useMemo(() => {
+		const fieldMap = new Map(fieldsList.map((f) => [f.name, f]));
+		const ordered = [];
+		for (const item of layout) {
+			const field = fieldMap.get(item.name);
+			if (field) {
+				const overriddenField = {
+					...field,
+					admin: {
+						...field.admin,
+						width: item.width || field.admin?.width || "100%"
+					}
+				};
+				ordered.push(overriddenField);
+				fieldMap.delete(item.name);
+			}
+		}
+		for (const field of fieldMap.values()) ordered.push(field);
+		return ordered;
+	}, [fieldsList, layout]);
+	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const handleDragEnd = (event) => {
+		const { active, over } = event;
+		if (!over || active.id === over.id) return;
+		setLayout((items) => {
+			const oldIndex = items.findIndex((item) => item.name === active.id);
+			const newIndex = items.findIndex((item) => item.name === over.id);
+			if (oldIndex === -1 || newIndex === -1) return items;
+			return arrayMove(items, oldIndex, newIndex);
+		});
+	};
 	useEffect(() => {
 		const handleBeforeUnload = (e) => {
 			if (isDirty) {
@@ -9775,18 +10773,19 @@ function EditEntryPage() {
 		window.addEventListener("keydown", handleSave);
 		return () => window.removeEventListener("keydown", handleSave);
 	}, []);
-	const { data: schemas } = useQuery({
-		queryKey: ["schemas"],
-		queryFn: () => client.getSchemas(),
-		enabled: !!client
-	});
-	const schema = schemas?.collections.find((c) => c.slug === slug);
 	const schemaSlug = schema?.slug;
 	const schemaPreviewUrl = schema?.admin?.previewUrl;
+	const syncShowPreview = useState(() => (next) => {
+		setShowPreview((prev) => prev === next ? prev : next);
+	})[0];
 	useEffect(() => {
 		if (!schemaSlug || !schemaPreviewUrl) return;
-		setShowPreview((previous) => previous ? false : previous);
-	}, [schemaSlug, schemaPreviewUrl]);
+		syncShowPreview(false);
+	}, [
+		schemaSlug,
+		schemaPreviewUrl,
+		syncShowPreview
+	]);
 	const { data: entry, isLoading: isEntryLoading } = useQuery({
 		queryKey: [
 			"entry",
@@ -9796,14 +10795,13 @@ function EditEntryPage() {
 		queryFn: () => client.collection(slug).findOne(id),
 		enabled: !!client && isEdit
 	});
+	const syncPreviewData = useState(() => (next) => {
+		setPreviewData((prev) => prev === next ? prev : next);
+	})[0];
 	useEffect(() => {
 		if (!entry) return;
-		setPreviewData((previous) => previous === entry ? previous : entry);
-	}, [
-		entry,
-		id,
-		slug
-	]);
+		syncPreviewData(entry);
+	}, [entry, syncPreviewData]);
 	const isAdminUser = Array.isArray(user?.roles) && user.roles.includes("admin");
 	const isSelf = !!user && !!id && (user.id === id || user.sub === id);
 	const passwordChangeMode = schema?.auth ? isSelf ? "self" : isAdminUser ? "admin" : null : null;
@@ -9979,6 +10977,14 @@ function EditEntryPage() {
 									title: showPreview ? "Hide Preview" : "Live Preview",
 									children: showPreview ? /* @__PURE__ */ jsx(EyeOff, { className: "dy-h-3.5 dy-w-3.5" }) : /* @__PURE__ */ jsx(Eye, { className: "dy-h-3.5 dy-w-3.5" })
 								}),
+								/* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									size: "icon",
+									className: cn("dy-h-8 dy-w-8 dy-rounded-lg dy-transition-all", isConfiguringView ? "dy-bg-background dy-text-primary dy-shadow-sm hover:dy-bg-background" : "dy-text-muted-foreground hover:dy-bg-muted hover:dy-text-foreground"),
+									onClick: () => setIsConfiguringView(!isConfiguringView),
+									title: "View",
+									children: /* @__PURE__ */ jsx(Settings2, { className: "dy-h-3.5 dy-w-3.5" })
+								}),
 								isEdit && canCreate && /* @__PURE__ */ jsx(Button, {
 									variant: "outline",
 									size: "icon",
@@ -10061,33 +11067,111 @@ function EditEntryPage() {
 									})
 								})]
 							}),
-							(() => {
-								let fields = [...schema.fields];
-								if (schema.upload) {
-									const hasAlt = fields.some((f) => f.name === "alt");
-									const hasCaption = fields.some((f) => f.name === "caption");
-									const mediaFields = [];
-									if (!hasAlt) mediaFields.push({
-										name: "alt",
-										type: "text",
-										label: "Alt Text",
-										admin: { description: "Describe the image for accessibility/screen readers." }
-									});
-									if (!hasCaption) mediaFields.push({
-										name: "caption",
-										type: "textarea",
-										label: "Caption",
-										admin: { description: "Add a caption/description for this media file." }
-									});
-									fields = [...mediaFields, ...fields];
-								}
+							isConfiguringView ? /* @__PURE__ */ jsxs("div", {
+								className: "dy-space-y-6",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "dy-p-4 dy-rounded-xl",
+									children: [/* @__PURE__ */ jsx("p", {
+										className: "mb-2 dy-text-sm dy-text-muted-foreground",
+										children: "Drag and drop fields to reorder the form layout. Changes will be saved as your personal preference or global default."
+									}), /* @__PURE__ */ jsx("div", {
+										className: "dy-space-y-2 dy-pr-1 dy-outline-none",
+										children: /* @__PURE__ */ jsx(DndContext, {
+											sensors,
+											collisionDetection: closestCenter,
+											onDragEnd: handleDragEnd,
+											children: /* @__PURE__ */ jsx(SortableContext, {
+												items: layout.map((item) => item.name),
+												strategy: verticalListSortingStrategy,
+												children: /* @__PURE__ */ jsx("div", {
+													className: "dy-space-y-1.5",
+													children: layout.map((item) => {
+														const field = fieldsList.find((f) => f.name === item.name);
+														if (!field) return null;
+														return /* @__PURE__ */ jsx(SortableFieldItem, {
+															id: item.name,
+															label: field.label || field.name,
+															type: field.type,
+															width: item.width || "100%",
+															onChangeWidth: (newWidth) => {
+																setLayout((prev) => prev.map((x) => x.name === item.name ? {
+																	...x,
+																	width: newWidth
+																} : x));
+															}
+														}, item.name);
+													})
+												})
+											})
+										})
+									})]
+								}), /* @__PURE__ */ jsx("div", {
+									className: "dy-sticky dy-bottom-0 dy-left-0 dy-right-0 dy-z-20 dy-pointer-events-none",
+									children: /* @__PURE__ */ jsx("div", {
+										className: "dy-pointer-events-auto dy-mx-auto dy-max-w-2xl dy-px-4 dy-pb-6",
+										children: /* @__PURE__ */ jsxs("div", {
+											className: "dy-flex dy-items-center dy-justify-between dy-gap-3 dy-rounded-2xl dy-border dy-border-border/50 dy-bg-background/80 dy-backdrop-blur-xl dy-px-4 dy-py-3 dy-shadow-xl dy-shadow-black/10 dy-animate-in dy-slide-in-from-bottom-2 dy-fade-in dy-duration-200",
+											children: [/* @__PURE__ */ jsx("p", {
+												className: "dy-text-sm dy-font-medium dy-text-muted-foreground",
+												children: "View"
+											}), /* @__PURE__ */ jsxs("div", {
+												className: "dy-flex dy-items-center dy-gap-2",
+												children: [
+													/* @__PURE__ */ jsx(Button, {
+														variant: "outline",
+														size: "sm",
+														className: "dy-rounded-xl",
+														onClick: async () => {
+															await resetLayout("personal");
+															setIsConfiguringView(false);
+															toast.success("Personal layout reset to default");
+														},
+														children: "Reset"
+													}),
+													isAdminUser && /* @__PURE__ */ jsx(Button, {
+														variant: "outline",
+														size: "sm",
+														className: "dy-rounded-xl",
+														onClick: async () => {
+															await saveLayout("global");
+															setIsConfiguringView(false);
+															toast.success("Saved for everyone successfully");
+														},
+														children: "Save for Everyone"
+													}),
+													/* @__PURE__ */ jsx(Button, {
+														size: "sm",
+														className: "dy-rounded-xl dy-bg-primary dy-text-primary-foreground",
+														onClick: async () => {
+															await saveLayout("personal");
+															setIsConfiguringView(false);
+															toast.success("Saved for me successfully");
+														},
+														children: "Save for Me"
+													}),
+													/* @__PURE__ */ jsx(Button, {
+														variant: "ghost",
+														size: "sm",
+														className: "dy-rounded-xl",
+														onClick: () => {
+															setLayout(reconciledLayout);
+															setIsConfiguringView(false);
+														},
+														children: "Cancel"
+													})
+												]
+											})]
+										})
+									})
+								})]
+							}) : (() => {
 								const queryParamsDefaults = {};
 								if (!isEdit) searchParams.forEach((value, key) => {
 									queryParamsDefaults[key] = value;
 								});
 								return /* @__PURE__ */ jsx(FormEngine, {
 									collection: slug,
-									fields,
+									fields: orderedFields,
 									defaultValues: isEdit ? entry : {
 										...queryParamsDefaults,
 										...entry
@@ -10098,7 +11182,7 @@ function EditEntryPage() {
 										...newData
 									}),
 									onChange: (dirty) => setIsDirty(dirty),
-									isLoading: saveMutation.isPending,
+									isLoading: saveMutation.isPending || isPreferenceLoading,
 									submitLabel: isEdit ? "Save Changes" : "Create Entry",
 									readOnly: isEdit ? !canUpdate : !canCreate,
 									passwordChangeMode: isEdit ? passwordChangeMode : null,
@@ -10240,18 +11324,6 @@ CardFooter.displayName = "CardFooter";
 //#region src/components/ui/aspect-ratio.tsx
 var AspectRatio = AspectRatioPrimitive.Root;
 //#endregion
-//#region src/components/ui/progress.tsx
-var Progress = React$1.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(ProgressPrimitive.Root, {
-	ref,
-	className: cn("dy-relative dy-h-4 dy-w-full dy-overflow-hidden dy-rounded-full dy-bg-secondary", className),
-	...props,
-	children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {
-		className: "dy-h-full dy-w-full dy-flex-1 dy-bg-primary dy-transition-all",
-		style: { transform: `translateX(-${100 - (value || 0)}%)` }
-	})
-}));
-Progress.displayName = ProgressPrimitive.Root.displayName;
-//#endregion
 //#region src/components/ui/separator.tsx
 var Separator = React$1.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
 	ref,