@dyrected/admin 2.5.38 → 2.5.40

package/dist/admin.css

@@ -1828,6 +1828,10 @@
     width: 2.25rem;
 }
 
+.dy-w-96{
+    width: 24rem;
+}
+
 .dy-w-\[--cell-size\]{
     width: var(--cell-size);
 }
@@ -1965,6 +1969,11 @@
     min-width: var(--radix-select-trigger-width);
 }
 
+.dy-min-w-max{
+    min-width: -moz-max-content;
+    min-width: max-content;
+}
+
 .dy-max-w-2xl{
     max-width: 42rem;
 }
@@ -4202,6 +4211,12 @@
     --cell-size: 2.25rem;
 }
 
+.\[appearance\:textfield\]{
+    -webkit-appearance: textfield;
+       -moz-appearance: textfield;
+            appearance: textfield;
+}
+
 .dy-admin-ui .media-preview-dialod-details-form div[style="min-width: 100%;display: table;"] {
   display: flex !important;
 }
@@ -5595,6 +5610,10 @@
         width: 95vw;
     }
 
+    .sm\:dy-w-\[var\(--field-w\)\]{
+        width: var(--field-w);
+    }
+
     .sm\:dy-w-auto{
         width: auto;
     }
@@ -5826,11 +5845,6 @@
         line-height: 1.75rem;
     }
 
-    .sm\:dy-text-sm{
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-    }
-
     .sm\:dy-text-xl{
         font-size: 1.25rem;
         line-height: 1.75rem;
@@ -6179,6 +6193,16 @@
     }
 }
 
+.\[\&\:\:-webkit-inner-spin-button\]\:dy-appearance-none::-webkit-inner-spin-button{
+    -webkit-appearance: none;
+            appearance: none;
+}
+
+.\[\&\:\:-webkit-outer-spin-button\]\:dy-appearance-none::-webkit-outer-spin-button{
+    -webkit-appearance: none;
+            appearance: none;
+}
+
 .\[\&\:has\(\[role\=checkbox\]\)\]\:dy-pr-0:has([role=checkbox]){
     padding-right: 0px;
 }

package/dist/index.mjs

@@ -14,7 +14,7 @@ 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";
@@ -1810,7 +1810,6 @@ function DataTable({ columns, data, searchKey, rowSelection: externalRowSelectio
 		onSortingChange: setSorting,
 		onColumnFiltersChange: setColumnFilters,
 		getCoreRowModel: getCoreRowModel(),
-		getPaginationRowModel: getPaginationRowModel(),
 		getSortedRowModel: getSortedRowModel(),
 		getFilteredRowModel: getFilteredRowModel(),
 		onColumnVisibilityChange: setColumnVisibility,
@@ -1824,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 ? 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-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
@@ -2092,7 +2045,7 @@ function CsvImporter({ slug, schema, onClose }) {
 		const strVal = String(val).trim();
 		switch (field.type) {
 			case "number": {
-				const num = Number(strVal);
+				const num = Number(strVal.replace(/[$€£¥₹₦₩₪₺₽฿,]/g, ""));
 				if (isNaN(num)) return {
 					value: null,
 					error: "Must be a valid number"
@@ -2117,6 +2070,28 @@ function CsvImporter({ slug, schema, onClose }) {
 				};
 				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) {
@@ -2186,7 +2161,21 @@ function CsvImporter({ slug, schema, onClose }) {
 				continue;
 			}
 			try {
-				await client.collection(slug).create(rowResult.data);
+				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) {
@@ -2267,8 +2256,8 @@ function CsvImporter({ slug, schema, onClose }) {
 						className: "dy-p-4 dy-bg-muted/40 dy-border dy-border-border dy-rounded-xl dy-text-sm dy-text-muted-foreground",
 						children: "Map the columns in your CSV file to the corresponding fields of the collection. All required fields must be mapped to proceed."
 					}),
-					/* @__PURE__ */ jsx(ScrollArea, {
-						className: "dy-h-[300px] dy-pr-4 dy-border dy-border-border dy-rounded-xl",
+					/* @__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) => {
@@ -2361,10 +2350,10 @@ function CsvImporter({ slug, schema, onClose }) {
 							]
 						})]
 					}),
-					/* @__PURE__ */ jsx(ScrollArea, {
-						className: "dy-h-[300px] dy-border dy-border-border dy-rounded-xl",
+					/* @__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-text-left dy-border-collapse",
+							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", {
@@ -8358,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: "",
@@ -8765,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({
@@ -8777,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()}`;
@@ -8793,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 {
@@ -8809,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", {
@@ -8870,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({});
@@ -8960,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({
@@ -8978,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({
@@ -9021,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",
@@ -9051,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`
@@ -9170,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,
@@ -9258,6 +9413,28 @@ function SpreadsheetEditor({ slug, schema, data, onSave, isSaving }) {
 								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
 						})
 					]
 				})] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dyrected/admin",
-  "version": "2.5.38",
+  "version": "2.5.40",
   "type": "module",
   "files": [
     "dist"
@@ -64,8 +64,8 @@
     "tailwind-merge": "^3.5.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.25.76",
-    "@dyrected/core": "^2.5.38",
-    "@dyrected/sdk": "^2.5.38"
+    "@dyrected/core": "^2.5.40",
+    "@dyrected/sdk": "^2.5.40"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",