@dyrected/admin 2.5.36 → 2.5.39

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";
@@ -14,12 +14,18 @@ import { cva } from "class-variance-authority";
 import { Toaster, toast } from "sonner";
 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 { flexRender, getCoreRowModel, getFilteredRowModel, 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);
@@ -1809,7 +1810,6 @@ function DataTable({ columns, data, searchKey, rowSelection: externalRowSelectio
 		onSortingChange: setSorting,
 		onColumnFiltersChange: setColumnFilters,
 		getCoreRowModel: getCoreRowModel(),
-		getPaginationRowModel: getPaginationRowModel(),
 		getSortedRowModel: getSortedRowModel(),
 		getFilteredRowModel: getFilteredRowModel(),
 		onColumnVisibilityChange: setColumnVisibility,
@@ -1823,111 +1823,65 @@ function DataTable({ columns, data, searchKey, rowSelection: externalRowSelectio
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "dy-w-full dy-space-y-4",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				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, {
-							asChild: true,
-							children: /* @__PURE__ */ jsxs(Button, {
-								variant: "outline",
-								size: "sm",
-								className: "dy-flex dy-h-9 dy-w-full dy-gap-2 sm:dy-h-8 sm:dy-w-auto",
-								children: [/* @__PURE__ */ jsx(Settings2, { className: "dy-h-4 dy-w-4" }), "View"]
-							})
-						}), /* @__PURE__ */ jsx(DropdownMenuContent, {
-							align: "end",
-							children: table.getAllColumns().filter((column) => column.getCanHide()).map((column) => {
-								return /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
-									className: "dy-capitalize",
-									checked: column.getIsVisible(),
-									onCheckedChange: (value) => column.toggleVisibility(!!value),
-									children: column.id
-								}, column.id);
-							})
-						})] })]
-					}),
-					searchKey && /* @__PURE__ */ jsx(Input, {
-						placeholder: `Search ${searchKey}...`,
-						value: table.getColumn(searchKey)?.getFilterValue() ?? "",
-						onChange: (event) => table.getColumn(searchKey)?.setFilterValue(event.target.value),
-						className: "dy-order-2 dy-h-9 dy-w-full sm:dy-order-1 sm:dy-max-w-sm"
-					}),
-					bulkActions && table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ jsx("div", {
-						className: "dy-order-3 dy-flex dy-w-full dy-items-center dy-gap-2 dy-animate-in dy-slide-in-from-left-2 sm:dy-order-2 sm:dy-w-auto",
-						children: bulkActions(table.getFilteredSelectedRowModel().rows.map((r) => r.original.id))
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "dy-overflow-x-auto dy-rounded-md dy-border dy-border-border/40",
-				children: /* @__PURE__ */ jsxs(Table$1, {
-					className: "dy-min-w-[720px]",
-					children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
-						return /* @__PURE__ */ jsx(TableHead, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
-					}) }, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, {
-						className: "dy-border-t dy-border-border/40",
-						children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
-							"data-state": row.getIsSelected() && "selected",
-							className: "dy-border-none even:dy-bg-primary/[0.03] hover:dy-bg-primary/[0.06] dy-transition-colors dy-duration-200",
-							children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
-								className: "dy-py-4 dy-px-4 dy-border-none first:dy-pl-4 last:dy-pr-4",
-								children: flexRender(cell.column.columnDef.cell, cell.getContext())
-							}, cell.id))
-						}, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
-							colSpan: columns.length,
-							className: "dy-h-24 dy-text-center",
-							children: "No results."
-						}) })
-					})]
-				})
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "dy-flex dy-flex-col dy-gap-3 dy-px-2 sm:dy-flex-row sm:dy-items-center sm:dy-justify-between",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "dy-flex-1 dy-text-xs dy-text-muted-foreground sm:dy-text-sm",
-					children: [
-						table.getFilteredSelectedRowModel().rows.length,
-						" of",
-						" ",
-						table.getFilteredRowModel().rows.length,
-						" row(s) selected."
-					]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "dy-flex dy-items-center dy-justify-between dy-gap-2 sm:dy-justify-end",
-					children: [
-						/* @__PURE__ */ jsx(Button, {
-							variant: "outline",
-							size: "sm",
-							className: "dy-h-9 dy-w-9 dy-p-0",
-							onClick: () => table.previousPage(),
-							disabled: !table.getCanPreviousPage(),
-							children: /* @__PURE__ */ jsx(ChevronLeft, { className: "dy-h-4 dy-w-4" })
-						}),
-						/* @__PURE__ */ jsxs("span", {
-							className: "dy-min-w-0 dy-text-center dy-text-xs dy-font-medium sm:dy-text-sm",
-							children: [
-								"Page ",
-								table.getState().pagination.pageIndex + 1,
-								" of",
-								" ",
-								table.getPageCount()
-							]
-						}),
-						/* @__PURE__ */ jsx(Button, {
+		children: [/* @__PURE__ */ jsxs("div", {
+			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 ? 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",
 							size: "sm",
-							className: "dy-h-9 dy-w-9 dy-p-0",
-							onClick: () => table.nextPage(),
-							disabled: !table.getCanNextPage(),
-							children: /* @__PURE__ */ jsx(ChevronRight, { className: "dy-h-4 dy-w-4" })
+							className: "dy-flex dy-h-9 dy-w-full dy-gap-2 sm:dy-h-8 sm:dy-w-auto",
+							children: [/* @__PURE__ */ jsx(Settings2, { className: "dy-h-4 dy-w-4" }), "View"]
 						})
-					]
+					}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+						align: "end",
+						children: table.getAllColumns().filter((column) => column.getCanHide()).map((column) => {
+							return /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
+								className: "dy-capitalize",
+								checked: column.getIsVisible(),
+								onCheckedChange: (value) => column.toggleVisibility(!!value),
+								children: column.id
+							}, column.id);
+						})
+					})] })]
+				}),
+				searchKey && /* @__PURE__ */ jsx(Input, {
+					placeholder: `Search ${searchKey}...`,
+					value: table.getColumn(searchKey)?.getFilterValue() ?? "",
+					onChange: (event) => table.getColumn(searchKey)?.setFilterValue(event.target.value),
+					className: "dy-order-2 dy-h-9 dy-w-full sm:dy-order-1 sm:dy-max-w-sm"
+				}),
+				bulkActions && table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "dy-order-3 dy-flex dy-w-full dy-items-center dy-gap-2 dy-animate-in dy-slide-in-from-left-2 sm:dy-order-2 sm:dy-w-auto",
+					children: bulkActions(table.getFilteredSelectedRowModel().rows.map((r) => r.original.id))
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "dy-overflow-x-auto dy-rounded-md dy-border dy-border-border/40",
+			children: /* @__PURE__ */ jsxs(Table$1, {
+				className: "dy-min-w-[720px]",
+				children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+					return /* @__PURE__ */ jsx(TableHead, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
+				}) }, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, {
+					className: "dy-border-t dy-border-border/40",
+					children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
+						"data-state": row.getIsSelected() && "selected",
+						className: "dy-border-none even:dy-bg-primary/[0.03] hover:dy-bg-primary/[0.06] dy-transition-colors dy-duration-200",
+						children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
+							className: "dy-py-4 dy-px-4 dy-border-none first:dy-pl-4 last:dy-pr-4",
+							children: flexRender(cell.column.columnDef.cell, cell.getContext())
+						}, cell.id))
+					}, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+						colSpan: columns.length,
+						className: "dy-h-24 dy-text-center",
+						children: "No results."
+					}) })
 				})]
 			})
-		]
+		})]
 	});
 }
 //#endregion
@@ -1943,140 +1897,791 @@ var Checkbox = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 }));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 //#endregion
-//#region src/components/ui/render-cell.tsx
-function RenderCell({ value, field, client, schemas }) {
-	if (value === null || value === void 0) return /* @__PURE__ */ jsx("span", {
-		className: "dy-text-muted-foreground",
-		children: "-"
-	});
-	if (field.type === "boolean" || typeof value === "boolean") return /* @__PURE__ */ jsx(Badge, {
-		variant: value ? "default" : "secondary",
-		children: value ? "Yes" : "No"
-	});
-	if (field.type === "date") {
-		const date = new Date(value);
-		return /* @__PURE__ */ jsxs("div", {
-			className: "dy-flex dy-items-center dy-gap-1.5 dy-text-muted-foreground",
-			children: [/* @__PURE__ */ jsx(Calendar, { className: "dy-h-3 dy-w-3" }), /* @__PURE__ */ jsx("span", {
-				className: "dy-text-xs",
-				children: date.toLocaleDateString()
+//#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"
 			})]
-		});
-	}
-	const relationTo = field.relationTo || field.collection;
-	if (field.type === "image" || field.type === "relationship" && isUploadCollection(relationTo, schemas)) {
-		if (!value) return /* @__PURE__ */ jsx("span", {
-			className: "dy-text-muted-foreground",
-			children: "-"
-		});
-		const url = getMediaUrl(value, client?.getBaseUrl() || "");
-		if (!url) return /* @__PURE__ */ jsx("span", {
-			className: "dy-text-muted-foreground",
-			children: "-"
-		});
-		return /* @__PURE__ */ jsx("div", {
-			className: "dy-h-8 dy-w-8 dy-rounded dy-overflow-hidden dy-border dy-bg-muted dy-shadow-sm",
-			children: /* @__PURE__ */ jsx("img", {
-				src: url,
-				className: "dy-h-full dy-w-full dy-object-cover",
-				alt: ""
-			})
-		});
-	}
-	if (field.type === "relationship" && typeof value === "object") {
-		const relTo = field.relationTo || field.collection;
-		const displayValue = value[(schemas?.collections?.find((c) => c?.slug === relTo))?.admin?.useAsTitle || "title"] || value.name || value.id || "Unknown";
-		return /* @__PURE__ */ jsx("div", {
-			className: "dy-flex dy-items-center dy-gap-2",
-			children: /* @__PURE__ */ jsx(Badge, {
-				variant: "outline",
-				className: "dy-font-normal dy-border-primary/20 dy-bg-primary/5 dy-text-primary",
-				children: String(displayValue)
-			})
-		});
-	}
-	if (Array.isArray(value)) return /* @__PURE__ */ jsxs("div", {
-		className: "dy-flex dy-flex-wrap dy-gap-1",
-		children: [value.slice(0, 2).map((item, i) => /* @__PURE__ */ jsx(Badge, {
-			variant: "outline",
-			className: "dy-text-[10px] dy-px-1.5 dy-h-5",
-			children: typeof item === "object" ? item.title || item.name || item.id : String(item)
-		}, i)), value.length > 2 && /* @__PURE__ */ jsxs("span", {
-			className: "dy-text-[10px] dy-text-muted-foreground",
-			children: [
-				"+",
-				value.length - 2,
-				" more"
-			]
 		})]
-	});
-	if (typeof value === "object" && !Array.isArray(value)) {
-		const entries = Object.entries(value).filter(([_, v]) => typeof v !== "object" && v !== null && v !== void 0).slice(0, 3);
-		if (entries.length > 0) return /* @__PURE__ */ jsxs("span", {
-			className: "dy-text-[11px] dy-text-muted-foreground dy-font-medium dy-leading-tight",
-			children: [entries.map(([k, v]) => `${k}: ${String(v)}`).join(", "), Object.keys(value).length > 3 ? "..." : ""]
-		});
-		return /* @__PURE__ */ jsxs("span", {
-			className: "dy-text-[11px] dy-text-muted-foreground dy-font-mono dy-bg-muted/30 dy-px-1 dy-rounded",
-			children: [JSON.stringify(value).slice(0, 30), JSON.stringify(value).length > 30 ? "..." : ""]
-		});
-	}
-	return /* @__PURE__ */ jsx("span", {
-		className: "dy-text-sm dy-font-medium",
-		children: typeof value === "object" ? JSON.stringify(value).slice(0, 50) : String(value)
-	});
-}
-function isUploadCollection(slug, schemas) {
-	if (!slug) return false;
-	return !!(schemas?.collections?.find((c) => c?.slug === slug))?.upload;
-}
+	})]
+}) }));
+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/page-header.tsx
-function PageHeader({ title, description, icon: Icon, children }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "dy-mb-6 dy-flex dy-flex-col dy-gap-4 sm:dy-mb-8 sm:dy-flex-row sm:dy-items-end sm:dy-justify-between",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "dy-min-w-0",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "dy-mb-1 dy-flex dy-items-start dy-gap-3",
-				children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "dy-mt-1 dy-h-4 dy-w-4 dy-flex-shrink-0 dy-text-primary/60" }), /* @__PURE__ */ jsx("h1", {
-					className: "dy-min-w-0 dy-break-words dy-text-xl dy-font-bold dy-tracking-tight dy-text-foreground sm:dy-text-2xl",
-					children: title
-				})]
-			}), description && /* @__PURE__ */ jsx("p", {
-				className: "dy-max-w-2xl dy-text-[11px] dy-font-medium dy-leading-5 dy-text-muted-foreground/60",
-				children: description
-			})]
-		}), /* @__PURE__ */ jsx("div", {
-			className: "dy-flex dy-w-full dy-flex-col dy-gap-2 sm:dy-w-auto sm:dy-flex-row sm:dy-items-center sm:dy-gap-3",
+//#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/pagination.tsx
-function Pagination({ page, totalPages, total, hasPrevPage, hasNextPage, onPageChange, className }) {
-	if (totalPages <= 1) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: `dy-flex dy-flex-col dy-gap-3 dy-border-t dy-border-border/40 dy-px-4 dy-py-4 sm:dy-flex-row sm:dy-items-center sm:dy-justify-between ${className}`,
-		children: [/* @__PURE__ */ jsxs("p", {
-			className: "dy-text-xs dy-leading-5 dy-text-muted-foreground",
-			children: [
-				"Showing page ",
-				/* @__PURE__ */ jsx("strong", { children: page }),
-				" of ",
-				/* @__PURE__ */ jsx("strong", { children: totalPages }),
-				total != null && /* @__PURE__ */ jsxs(Fragment, { children: [
-					" - ",
-					total,
-					" total entries"
-				] })
-			]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "dy-flex dy-items-center dy-justify-between dy-gap-2 sm:dy-justify-end",
-			children: [/* @__PURE__ */ jsx(Button, {
-				variant: "outline",
-				size: "sm",
+//#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.replace(/[$€£¥₹₦₩₪₺₽฿,]/g, ""));
+				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 "image": try {
+				new URL(strVal);
+				return { value: strVal };
+			} catch {
+				return {
+					value: null,
+					error: "Must be a valid image URL"
+				};
+			}
+			case "url": try {
+				new URL(strVal);
+				return { value: {
+					type: "custom",
+					url: strVal,
+					label: ""
+				} };
+			} catch {
+				return {
+					value: null,
+					error: "Must be a valid URL (e.g. https://example.com)"
+				};
+			}
+			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 {
+				const data = { ...rowResult.data };
+				for (const field of importableFields) {
+					if (field.type !== "image") continue;
+					const url = data[field.name];
+					if (!url || typeof url !== "string") continue;
+					const mediaCollection = field.relationTo || "media";
+					const response = await fetch(url);
+					if (!response.ok) throw new Error(`Failed to fetch image: ${url}`);
+					const blob = await response.blob();
+					const filename = url.split("/").pop()?.split("?")[0] || "image";
+					const file = new File([blob], filename, { type: blob.type });
+					const media = await client.collection(mediaCollection).upload(file);
+					data[field.name] = media.id;
+				}
+				await client.collection(slug).create(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("div", {
+						className: "dy-h-[300px] dy-overflow-y-auto 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("div", {
+						className: "dy-h-[300px] dy-overflow-auto dy-border dy-border-border dy-rounded-xl",
+						children: /* @__PURE__ */ jsxs("table", {
+							className: "dy-w-full dy-min-w-max 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", {
+		className: "dy-text-muted-foreground",
+		children: "-"
+	});
+	if (field.type === "boolean" || typeof value === "boolean") return /* @__PURE__ */ jsx(Badge, {
+		variant: value ? "default" : "secondary",
+		children: value ? "Yes" : "No"
+	});
+	if (field.type === "date") {
+		const date = new Date(value);
+		return /* @__PURE__ */ jsxs("div", {
+			className: "dy-flex dy-items-center dy-gap-1.5 dy-text-muted-foreground",
+			children: [/* @__PURE__ */ jsx(Calendar, { className: "dy-h-3 dy-w-3" }), /* @__PURE__ */ jsx("span", {
+				className: "dy-text-xs",
+				children: date.toLocaleDateString()
+			})]
+		});
+	}
+	const relationTo = field.relationTo || field.collection;
+	if (field.type === "image" || field.type === "relationship" && isUploadCollection(relationTo, schemas)) {
+		if (!value) return /* @__PURE__ */ jsx("span", {
+			className: "dy-text-muted-foreground",
+			children: "-"
+		});
+		const url = getMediaUrl(value, client?.getBaseUrl() || "");
+		if (!url) return /* @__PURE__ */ jsx("span", {
+			className: "dy-text-muted-foreground",
+			children: "-"
+		});
+		return /* @__PURE__ */ jsx("div", {
+			className: "dy-h-8 dy-w-8 dy-rounded dy-overflow-hidden dy-border dy-bg-muted dy-shadow-sm",
+			children: /* @__PURE__ */ jsx("img", {
+				src: url,
+				className: "dy-h-full dy-w-full dy-object-cover",
+				alt: ""
+			})
+		});
+	}
+	if (field.type === "relationship" && typeof value === "object") {
+		const relTo = field.relationTo || field.collection;
+		const displayValue = value[(schemas?.collections?.find((c) => c?.slug === relTo))?.admin?.useAsTitle || "title"] || value.name || value.id || "Unknown";
+		return /* @__PURE__ */ jsx("div", {
+			className: "dy-flex dy-items-center dy-gap-2",
+			children: /* @__PURE__ */ jsx(Badge, {
+				variant: "outline",
+				className: "dy-font-normal dy-border-primary/20 dy-bg-primary/5 dy-text-primary",
+				children: String(displayValue)
+			})
+		});
+	}
+	if (Array.isArray(value)) return /* @__PURE__ */ jsxs("div", {
+		className: "dy-flex dy-flex-wrap dy-gap-1",
+		children: [value.slice(0, 2).map((item, i) => /* @__PURE__ */ jsx(Badge, {
+			variant: "outline",
+			className: "dy-text-[10px] dy-px-1.5 dy-h-5",
+			children: typeof item === "object" ? item.title || item.name || item.id : String(item)
+		}, i)), value.length > 2 && /* @__PURE__ */ jsxs("span", {
+			className: "dy-text-[10px] dy-text-muted-foreground",
+			children: [
+				"+",
+				value.length - 2,
+				" more"
+			]
+		})]
+	});
+	if (typeof value === "object" && !Array.isArray(value)) {
+		const entries = Object.entries(value).filter(([_, v]) => typeof v !== "object" && v !== null && v !== void 0).slice(0, 3);
+		if (entries.length > 0) return /* @__PURE__ */ jsxs("span", {
+			className: "dy-text-[11px] dy-text-muted-foreground dy-font-medium dy-leading-tight",
+			children: [entries.map(([k, v]) => `${k}: ${String(v)}`).join(", "), Object.keys(value).length > 3 ? "..." : ""]
+		});
+		return /* @__PURE__ */ jsxs("span", {
+			className: "dy-text-[11px] dy-text-muted-foreground dy-font-mono dy-bg-muted/30 dy-px-1 dy-rounded",
+			children: [JSON.stringify(value).slice(0, 30), JSON.stringify(value).length > 30 ? "..." : ""]
+		});
+	}
+	return /* @__PURE__ */ jsx("span", {
+		className: "dy-text-sm dy-font-medium",
+		children: typeof value === "object" ? JSON.stringify(value).slice(0, 50) : String(value)
+	});
+}
+function isUploadCollection(slug, schemas) {
+	if (!slug) return false;
+	return !!(schemas?.collections?.find((c) => c?.slug === slug))?.upload;
+}
+//#endregion
+//#region src/components/ui/page-header.tsx
+function PageHeader({ title, description, icon: Icon, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dy-mb-6 dy-flex dy-flex-col dy-gap-4 sm:dy-mb-8 sm:dy-flex-row sm:dy-items-end sm:dy-justify-between",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "dy-min-w-0",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "dy-mb-1 dy-flex dy-items-start dy-gap-3",
+				children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "dy-mt-1 dy-h-4 dy-w-4 dy-flex-shrink-0 dy-text-primary/60" }), /* @__PURE__ */ jsx("h1", {
+					className: "dy-min-w-0 dy-break-words dy-text-xl dy-font-bold dy-tracking-tight dy-text-foreground sm:dy-text-2xl",
+					children: title
+				})]
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "dy-max-w-2xl dy-text-[11px] dy-font-medium dy-leading-5 dy-text-muted-foreground/60",
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "dy-flex dy-w-full dy-flex-col dy-gap-2 sm:dy-w-auto sm:dy-flex-row sm:dy-items-center sm:dy-gap-3",
+			children
+		})]
+	});
+}
+//#endregion
+//#region src/components/ui/pagination.tsx
+function Pagination({ page, totalPages, total, hasPrevPage, hasNextPage, onPageChange, className }) {
+	if (totalPages <= 1) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `dy-flex dy-flex-col dy-gap-3 dy-border-t dy-border-border/40 dy-px-4 dy-py-4 sm:dy-flex-row sm:dy-items-center sm:dy-justify-between ${className}`,
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "dy-text-xs dy-leading-5 dy-text-muted-foreground",
+			children: [
+				"Showing page ",
+				/* @__PURE__ */ jsx("strong", { children: page }),
+				" of ",
+				/* @__PURE__ */ jsx("strong", { children: totalPages }),
+				total != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+					" - ",
+					total,
+					" total entries"
+				] })
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "dy-flex dy-items-center dy-justify-between dy-gap-2 sm:dy-justify-end",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "sm",
 				className: "dy-h-9 dy-w-9 dy-p-0",
 				disabled: !hasPrevPage,
 				onClick: () => onPageChange(Math.max(1, page - 1)),
@@ -2158,14 +2763,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 +2782,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 +2795,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 +2806,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 +2848,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, {
@@ -2313,30 +2869,6 @@ var TabsContent = React$1.forwardRef(({ className, ...props }, ref) => /* @__PUR
 }));
 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" })
-}));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-//#endregion
 //#region src/components/media/media-library-dialog.tsx
 function MediaLibraryDialog({ collection, isOpen, onOpenChange, selectedValues, onSelect, multiple, onConfirm }) {
 	const { client, schemas } = useDyrected();
@@ -7815,8 +8347,8 @@ function FormEngine({ collection, fields, defaultValues = {}, onSubmit, onChange
 	const tabbedFields = visibleFields.filter((f) => !!f.admin?.tab);
 	let fieldsContent;
 	const renderFieldColumn = (field) => /* @__PURE__ */ jsx("div", {
-		className: "dy-min-w-0 dy-px-3",
-		style: { width: field.admin?.width || "100%" },
+		className: "dy-min-w-0 dy-px-3 dy-w-full sm:dy-w-[var(--field-w)]",
+		style: { "--field-w": field.admin?.width || "100%" },
 		children: /* @__PURE__ */ jsx(FormFieldRenderer, {
 			schema: field,
 			basePath: "",
@@ -8222,7 +8754,7 @@ function RelationshipPicker({ value, onChange, label, relationTo, multiple, disa
 }
 //#endregion
 //#region src/components/ui/spreadsheet-editor.tsx
-function SelectCellDisplay({ field, value, collection, siblingValues }) {
+function useFieldOptions(field, collection, siblingValues) {
 	const { client } = useDyrected();
 	const isDynamic = !!(field.options && typeof field.options === "object" && "_dynamic" in field.options);
 	const { data: dynamicOptions } = useQuery({
@@ -8234,7 +8766,7 @@ function SelectCellDisplay({ field, value, collection, siblingValues }) {
 		],
 		queryFn: async () => {
 			const q = new URLSearchParams();
-			if (siblingValues) Object.entries(siblingValues).forEach(([k, v]) => {
+			Object.entries(siblingValues).forEach(([k, v]) => {
 				if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") q.append(k, String(v));
 			});
 			const url = `${client?.getBaseUrl() || ""}/api/dyrected/options/${collection}/${field.name}?${q.toString()}`;
@@ -8250,7 +8782,7 @@ function SelectCellDisplay({ field, value, collection, siblingValues }) {
 		},
 		enabled: !!client && isDynamic && !!collection && !!field.name
 	});
-	const matched = React$1.useMemo(() => {
+	return React$1.useMemo(() => {
 		const rawOptions = isDynamic ? dynamicOptions || [] : field.options;
 		return (Array.isArray(rawOptions) ? rawOptions : []).map((opt) => {
 			if (typeof opt === "object" && opt !== null) return {
@@ -8266,54 +8798,14 @@ function SelectCellDisplay({ field, value, collection, siblingValues }) {
 		isDynamic,
 		dynamicOptions,
 		field.options
-	]).find((opt) => opt.value === String(value ?? ""));
+	]);
+}
+function SelectCellDisplay({ field, value, collection, siblingValues }) {
+	const matched = useFieldOptions(field, collection, siblingValues).find((opt) => opt.value === String(value ?? ""));
 	return /* @__PURE__ */ jsx("span", { children: matched ? matched.label : value !== null && value !== void 0 ? String(value) : "" });
 }
 function SelectPopoverEditor({ field, value, collection, siblingValues, onCommit }) {
-	const { client } = useDyrected();
-	const isDynamic = !!(field.options && typeof field.options === "object" && "_dynamic" in field.options);
-	const { data: dynamicOptions } = useQuery({
-		queryKey: [
-			"options",
-			collection,
-			field.name,
-			siblingValues
-		],
-		queryFn: async () => {
-			const q = new URLSearchParams();
-			if (siblingValues) Object.entries(siblingValues).forEach(([k, v]) => {
-				if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") q.append(k, String(v));
-			});
-			const url = `${client?.getBaseUrl() || ""}/api/dyrected/options/${collection}/${field.name}?${q.toString()}`;
-			const authHeaders = {};
-			const token = typeof window !== "undefined" ? localStorage.getItem("dyrected_token") : null;
-			if (token) authHeaders["Authorization"] = `Bearer ${token}`;
-			const res = await fetch(url, { headers: {
-				"Content-Type": "application/json",
-				...authHeaders
-			} });
-			if (!res.ok) throw new Error("Failed to fetch options");
-			return res.json();
-		},
-		enabled: !!client && isDynamic && !!collection && !!field.name
-	});
-	const options = React$1.useMemo(() => {
-		const rawOptions = isDynamic ? dynamicOptions || [] : field.options;
-		return (Array.isArray(rawOptions) ? rawOptions : []).map((opt) => {
-			if (typeof opt === "object" && opt !== null) return {
-				label: opt.label,
-				value: String(opt.value ?? "")
-			};
-			return {
-				label: String(opt),
-				value: String(opt)
-			};
-		});
-	}, [
-		isDynamic,
-		dynamicOptions,
-		field.options
-	]);
+	const options = useFieldOptions(field, collection, siblingValues);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "dy-max-h-60 dy-overflow-y-auto dy-flex dy-flex-col dy-divide-y dy-divide-border dy-bg-popover dy-rounded-md",
 		children: [options.map((opt) => /* @__PURE__ */ jsx("button", {
@@ -8327,6 +8819,163 @@ function SelectPopoverEditor({ field, value, collection, siblingValues, onCommit
 		})]
 	});
 }
+function MultiSelectCellDisplay({ field, value, collection, siblingValues }) {
+	const options = useFieldOptions(field, collection, siblingValues);
+	const labels = (Array.isArray(value) ? value.map(String) : []).map((v) => options.find((o) => o.value === v)?.label ?? v);
+	return /* @__PURE__ */ jsx("span", { children: labels.length > 0 ? labels.join(", ") : "" });
+}
+function MultiSelectPopoverEditor({ field, value, collection, siblingValues, onToggle }) {
+	const options = useFieldOptions(field, collection, siblingValues);
+	const selected = Array.isArray(value) ? value.map(String) : [];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dy-max-h-60 dy-overflow-y-auto dy-flex dy-flex-col dy-divide-y dy-divide-border dy-bg-popover dy-rounded-md",
+		children: [options.map((opt) => {
+			const checked = selected.includes(opt.value);
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: cn("dy-w-full dy-text-left dy-px-3 dy-py-2 dy-text-xs hover:dy-bg-accent hover:dy-text-accent-foreground dy-transition-colors dy-flex dy-items-center dy-gap-2", checked && "dy-bg-accent/50"),
+				onClick: () => onToggle(checked ? selected.filter((v) => v !== opt.value) : [...selected, opt.value]),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("dy-w-3.5 dy-h-3.5 dy-rounded-sm dy-border dy-border-border dy-flex-shrink-0 dy-flex dy-items-center dy-justify-center", checked && "dy-bg-primary dy-border-primary"),
+					children: checked && /* @__PURE__ */ jsx("span", {
+						className: "dy-text-primary-foreground dy-text-[10px] dy-leading-none",
+						children: "✓"
+					})
+				}), opt.label]
+			}, opt.value);
+		}), options.length === 0 && /* @__PURE__ */ jsx("div", {
+			className: "dy-text-xs dy-text-muted-foreground dy-p-3 dy-text-center",
+			children: "No options available"
+		})]
+	});
+}
+function SubFieldRow({ subField, value, onChange, collection }) {
+	const { user, schemas } = useDyrected();
+	const handleChange = React$1.useCallback((eventOrValue) => {
+		if (eventOrValue != null && typeof eventOrValue === "object" && "target" in eventOrValue) {
+			const e = eventOrValue;
+			if (e.target.type === "checkbox") onChange(e.target.checked);
+			else if (e.target.value === "") onChange(null);
+			else if (subField.type === "number") onChange(Number(e.target.value));
+			else onChange(e.target.value);
+		} else onChange(eventOrValue);
+	}, [onChange, subField.type]);
+	const syntheticField = React$1.useMemo(() => ({
+		value: value ?? (subField.type === "boolean" ? false : ""),
+		onChange: handleChange,
+		name: subField.name ?? "",
+		ref: { current: null }
+	}), [
+		value,
+		handleChange,
+		subField.name,
+		subField.type
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dy-flex dy-flex-col dy-gap-0.5",
+		children: [/* @__PURE__ */ jsx("label", {
+			className: "dy-text-[10px] dy-text-muted-foreground",
+			children: subField.label || subField.name
+		}), /* @__PURE__ */ jsx(FieldRenderer, {
+			schema: subField,
+			field: syntheticField,
+			collection,
+			context: {
+				user: user ?? null,
+				schemas,
+				siblingData: {}
+			}
+		})]
+	});
+}
+function ObjectPopoverEditor({ field, value, onChange, collection }) {
+	const subFields = field.fields || [];
+	const obj = typeof value === "object" && value !== null && !Array.isArray(value) ? value : {};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dy-flex dy-flex-col dy-gap-3 dy-max-h-[400px] dy-overflow-y-auto",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "dy-text-xs dy-font-semibold dy-text-muted-foreground",
+				children: field.label || field.name
+			}),
+			subFields.filter((sf) => ![
+				"object",
+				"array",
+				"blocks",
+				"join",
+				"row",
+				"richText"
+			].includes(sf.type)).map((sf) => /* @__PURE__ */ jsx(SubFieldRow, {
+				subField: sf,
+				value: obj[sf.name],
+				onChange: (val) => onChange({
+					...obj,
+					[sf.name]: val
+				}),
+				collection
+			}, sf.name)),
+			subFields.length === 0 && /* @__PURE__ */ jsx("div", {
+				className: "dy-text-xs dy-text-muted-foreground",
+				children: "No fields defined"
+			})
+		]
+	});
+}
+function ArrayPopoverEditor({ field, value, onChange, collection }) {
+	const subFields = field.fields || [];
+	const items = Array.isArray(value) ? value : [];
+	const updateItem = (idx, key, val) => onChange(items.map((item, i) => i === idx ? {
+		...item,
+		[key]: val
+	} : item));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dy-flex dy-flex-col dy-gap-3 dy-max-h-[400px] dy-overflow-y-auto",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "dy-text-xs dy-font-semibold dy-text-muted-foreground",
+				children: [
+					field.label || field.name,
+					" (",
+					items.length,
+					" items)"
+				]
+			}),
+			items.map((item, idx) => /* @__PURE__ */ jsxs("div", {
+				className: "dy-border dy-rounded-md dy-p-2 dy-flex dy-flex-col dy-gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "dy-flex dy-items-center dy-justify-between",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "dy-text-[10px] dy-font-medium dy-text-muted-foreground",
+						children: ["Item ", idx + 1]
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "dy-text-[10px] dy-text-destructive hover:dy-underline",
+						onClick: () => onChange(items.filter((_, i) => i !== idx)),
+						children: "Remove"
+					})]
+				}), subFields.filter((sf) => ![
+					"object",
+					"array",
+					"blocks",
+					"join",
+					"row",
+					"richText"
+				].includes(sf.type)).map((sf) => /* @__PURE__ */ jsx(SubFieldRow, {
+					subField: sf,
+					value: item[sf.name],
+					onChange: (val) => updateItem(idx, sf.name, val),
+					collection
+				}, sf.name))]
+			}, idx)),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "dy-w-full dy-border dy-border-dashed dy-rounded dy-py-1.5 dy-text-xs dy-text-muted-foreground hover:dy-bg-muted/30 dy-transition-colors",
+				onClick: () => onChange([...items, {}]),
+				children: "+ Add item"
+			})
+		]
+	});
+}
 function SpreadsheetEditor({ slug, schema, data, onSave, isSaving }) {
 	const { client } = useDyrected();
 	const [drafts, setDrafts] = React$1.useState({});
@@ -8417,7 +9066,7 @@ function SpreadsheetEditor({ slug, schema, data, onSave, isSaving }) {
 	};
 	const columns = React$1.useMemo(() => {
 		const cols = [];
-		schema.fields.filter((f) => f.name !== "password" && !f.admin?.hidden && f.type !== "row" && f.type !== "join").forEach((field) => {
+		schema.fields.filter((f) => f.name !== "password" && !f.admin?.hidden && f.type !== "row" && f.type !== "join" && f.type !== "blocks").forEach((field) => {
 			const isReadOnly = !!field.admin?.readOnly;
 			if (field.type === "text" || field.type === "email" || field.type === "url") {
 				cols.push({
@@ -8435,6 +9084,34 @@ function SpreadsheetEditor({ slug, schema, data, onSave, isSaving }) {
 				});
 				return;
 			}
+			if (field.type === "number") {
+				cols.push({
+					...keyColumn(field.name, {
+						component: ({ rowData: value, setRowData: onChange, focus }) => {
+							return /* @__PURE__ */ jsx("input", {
+								type: "number",
+								className: "dy-w-full dy-h-full dy-bg-transparent dy-outline-none dy-px-2 dy-text-xs dy-text-foreground [appearance:textfield] [&::-webkit-outer-spin-button]:dy-appearance-none [&::-webkit-inner-spin-button]:dy-appearance-none",
+								value: value != null ? String(value) : "",
+								onChange: (e) => {
+									const raw = e.target.value;
+									onChange(raw === "" ? null : Number(raw));
+								},
+								disabled: isReadOnly,
+								autoFocus: focus
+							});
+						},
+						deleteValue: () => null,
+						copyValue: ({ rowData: value }) => String(value ?? ""),
+						pasteValue: ({ value }) => {
+							const n = Number(value);
+							return isNaN(n) ? null : n;
+						}
+					}),
+					title: field.label || field.name,
+					disabled: isReadOnly
+				});
+				return;
+			}
 			if (field.type === "date" || field.type === "datetime" || field.type === "time") {
 				const inputType = field.type === "date" ? "date" : field.type === "datetime" ? "datetime-local" : "time";
 				cols.push({
@@ -8478,10 +9155,18 @@ function SpreadsheetEditor({ slug, schema, data, onSave, isSaving }) {
 					if (!rowData) return null;
 					const value = rowData[field.name];
 					const isSelectOrRadio = field.type === "select" || field.type === "radio";
+					const isMultiSelect = field.type === "multiSelect";
+					const isArray = field.type === "array";
+					const isObject = field.type === "object";
 					let display = "";
-					if (!isSelectOrRadio && value !== null && value !== void 0) if (typeof value === "object") display = value.title || value.name || value.filename || JSON.stringify(value);
+					if (!isSelectOrRadio && !isMultiSelect && !isArray && !isObject && value !== null && value !== void 0) if (typeof value === "object") display = value.title || value.name || value.filename || JSON.stringify(value);
 					else display = String(value);
 					if (field.type === "richText" && display) display = display.replace(/<[^>]*>/g, "");
+					if (isArray) display = Array.isArray(value) ? `${value.length} item${value.length !== 1 ? "s" : ""}` : "0 items";
+					if (isObject && typeof value === "object" && value !== null) {
+						const keys = Object.keys(value).filter((k) => value[k] != null);
+						display = keys.length > 0 ? keys.slice(0, 2).map((k) => `${k}: ${String(value[k]).slice(0, 15)}`).join(", ") : "{ empty }";
+					}
 					return /* @__PURE__ */ jsxs("div", {
 						tabIndex: -1,
 						className: "dy-w-full dy-h-full dy-px-2 dy-py-1 dy-truncate dy-cursor-pointer hover:dy-bg-muted/30 dy-flex dy-items-center dy-gap-2 dy-outline-none",
@@ -8508,6 +9193,14 @@ function SpreadsheetEditor({ slug, schema, data, onSave, isSaving }) {
 								collection: slug,
 								siblingValues: rowData
 							})
+						}) : isMultiSelect ? /* @__PURE__ */ jsx("span", {
+							className: "dy-text-xs dy-text-foreground",
+							children: /* @__PURE__ */ jsx(MultiSelectCellDisplay, {
+								field,
+								value,
+								collection: slug,
+								siblingValues: rowData
+							})
 						}) : /* @__PURE__ */ jsx("span", {
 							className: "dy-text-xs dy-text-muted-foreground",
 							children: display || `Click to edit`
@@ -8627,10 +9320,15 @@ function SpreadsheetEditor({ slug, schema, data, onSave, isSaving }) {
 					if (!open) handlePopoverClose();
 				},
 				children: activePopover && activePopover.field.type !== "richText" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PopoverAnchor, { virtualRef: { current: activePopover.element } }), /* @__PURE__ */ jsxs(PopoverContent, {
-					className: "dy-z-[100] dy-p-3 dy-w-80 dy-bg-popover dy-border dy-rounded-md dy-shadow-md",
+					className: cn("dy-z-[100] dy-p-3 dy-bg-popover dy-border dy-rounded-md dy-shadow-md", activePopover.field.type === "object" || activePopover.field.type === "array" ? "dy-w-96" : "dy-w-80"),
 					onInteractOutside: () => {
 						const { rowIdx, field } = activePopover;
-						if (field.type !== "textarea" && field.type !== "json") return;
+						if (![
+							"textarea",
+							"json",
+							"object",
+							"array"
+						].includes(field.type)) return;
 						const row = gridData[rowIdx];
 						if (row) setDrafts((prev) => ({
 							...prev,
@@ -8709,12 +9407,34 @@ function SpreadsheetEditor({ slug, schema, data, onSave, isSaving }) {
 						(activePopover.field.type === "select" || activePopover.field.type === "radio") && /* @__PURE__ */ jsx(SelectPopoverEditor, {
 							field: activePopover.field,
 							value: localDraft,
-							collection: slug,
-							siblingValues: gridData[activePopover.rowIdx] || {},
-							onCommit: (val) => {
-								setLocalDraft(val);
-								commitValue(val);
-							}
+							collection: slug,
+							siblingValues: gridData[activePopover.rowIdx] || {},
+							onCommit: (val) => {
+								setLocalDraft(val);
+								commitValue(val);
+							}
+						}),
+						activePopover.field.type === "multiSelect" && /* @__PURE__ */ jsx(MultiSelectPopoverEditor, {
+							field: activePopover.field,
+							value: Array.isArray(localDraft) ? localDraft : [],
+							collection: slug,
+							siblingValues: gridData[activePopover.rowIdx] || {},
+							onToggle: (val) => {
+								setLocalDraft(val);
+								commitValue(val);
+							}
+						}),
+						activePopover.field.type === "object" && /* @__PURE__ */ jsx(ObjectPopoverEditor, {
+							field: activePopover.field,
+							value: localDraft,
+							onChange: (val) => setLocalDraft(val),
+							collection: slug
+						}),
+						activePopover.field.type === "array" && /* @__PURE__ */ jsx(ArrayPopoverEditor, {
+							field: activePopover.field,
+							value: localDraft,
+							onChange: (val) => setLocalDraft(val),
+							collection: slug
 						})
 					]
 				})] })
@@ -8724,13 +9444,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 +9508,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 +9795,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 +9919,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 +10058,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 +10207,7 @@ function CollectionListPage({ slug }) {
 								})
 							]
 						})
-					})]
+					})] })]
 				})
 			}),
 			/* @__PURE__ */ jsx(AdminComponentSlot, {
@@ -9288,7 +10222,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 +10239,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 +10316,12 @@ function CollectionListPage({ slug }) {
 						componentProps: collectionComponentProps
 					})
 				]
+			}),
+			/* @__PURE__ */ jsx(CsvImporterDialog, {
+				open: isImportOpen,
+				onOpenChange: setIsImportOpen,
+				slug,
+				schema
 			})
 		]
 	});
@@ -9744,7 +10683,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 +10859,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 +10950,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 +10972,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 +11154,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 +11244,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 +11359,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 +11501,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,