@questpie/admin 3.5.0 → 3.5.1

package/dist/client/components/blocks/block-canvas.mjs

@@ -63,7 +63,7 @@ function BlockCanvas() {
 			children: [
 				/* @__PURE__ */ jsx(Icon, {
 					icon: "ph:dots-six-vertical",
-					className: "text-muted-foreground h-4 w-4"
+					className: "text-muted-foreground size-4"
 				}),
 				/* @__PURE__ */ jsx(BlockIcon, {
 					icon: activeBlockSchema?.admin?.icon,

package/dist/client/components/blocks/block-editor-layout.mjs

@@ -67,7 +67,7 @@ function BlockEditorLayout({ className, minHeight = 500 }) {
 					children: [
 						/* @__PURE__ */ jsx(Icon, {
 							icon: "ph:stack",
-							className: "text-muted-foreground/30 mx-auto mb-4 h-12 w-12"
+							className: "text-muted-foreground/30 mx-auto mb-4 size-12"
 						}),
 						/* @__PURE__ */ jsx("p", {
 							className: "text-sm font-medium",
@@ -85,7 +85,7 @@ function BlockEditorLayout({ className, minHeight = 500 }) {
 					onClick: handleOpenSidebar,
 					children: [/* @__PURE__ */ jsx(Icon, {
 						icon: "ph:plus",
-						className: "mr-2 h-4 w-4"
+						className: "mr-2 size-4"
 					}), t("blocks.add")]
 				})]
 			}),

package/dist/client/components/blocks/block-insert-button.mjs

@@ -48,10 +48,10 @@ function BlockInsertButton({ position, compact = false, variant = "default", par
 		className: cn("group text-muted-foreground hover:text-foreground relative flex min-h-10 items-center gap-2 text-xs font-medium transition-colors active:scale-[0.96]", className),
 		onClick: handleOpen,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "border-border bg-background text-muted-foreground group-hover:border-foreground group-hover:text-foreground relative z-10 flex h-5 w-5 items-center justify-center rounded-full border transition-[background-color,border-color,color]",
+			className: "border-border bg-background text-muted-foreground group-hover:border-foreground group-hover:text-foreground relative z-10 flex size-5 items-center justify-center rounded-full border transition-[background-color,border-color,color]",
 			children: /* @__PURE__ */ jsx(Icon, {
 				icon: "ph:plus",
-				className: "h-3 w-3"
+				className: "size-3"
 			})
 		}), /* @__PURE__ */ jsx("span", {
 			className: "truncate",
@@ -64,7 +64,7 @@ function BlockInsertButton({ position, compact = false, variant = "default", par
 		onClick: handleOpen,
 		children: [/* @__PURE__ */ jsx(Icon, {
 			icon: "ph:plus",
-			className: "mr-2 h-4 w-4"
+			className: "mr-2 size-4"
 		}), t("blocks.add")]
 	});
 }

package/dist/client/components/blocks/block-item-menu.mjs

@@ -71,32 +71,32 @@ function MenuItems({ blockId, canHaveChildren, onDuplicate, onRemove, MenuItem,
 		blockTypes.length > 0 && blockPosition && /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsxs(SubMenu, { children: [/* @__PURE__ */ jsxs(SubMenuTrigger, { children: [/* @__PURE__ */ jsx(Icon, {
 				icon: "ph:arrow-up",
-				className: "h-4 w-4"
+				className: "size-4"
 			}), t("blocks.addAbove")] }), /* @__PURE__ */ jsx(SubMenuContent, { children: blockTypes.map(({ type, label }) => /* @__PURE__ */ jsxs(MenuItem, {
 				onClick: () => handleAddAbove(type),
 				children: [/* @__PURE__ */ jsx(BlockTypeIcon, {
 					type,
-					className: "h-4 w-4"
+					className: "size-4"
 				}), label]
 			}, type)) })] }),
 			/* @__PURE__ */ jsxs(SubMenu, { children: [/* @__PURE__ */ jsxs(SubMenuTrigger, { children: [/* @__PURE__ */ jsx(Icon, {
 				icon: "ph:arrow-down",
-				className: "h-4 w-4"
+				className: "size-4"
 			}), t("blocks.addBelow")] }), /* @__PURE__ */ jsx(SubMenuContent, { children: blockTypes.map(({ type, label }) => /* @__PURE__ */ jsxs(MenuItem, {
 				onClick: () => handleAddBelow(type),
 				children: [/* @__PURE__ */ jsx(BlockTypeIcon, {
 					type,
-					className: "h-4 w-4"
+					className: "size-4"
 				}), label]
 			}, type)) })] }),
 			canHaveChildren && /* @__PURE__ */ jsxs(SubMenu, { children: [/* @__PURE__ */ jsxs(SubMenuTrigger, { children: [/* @__PURE__ */ jsx(Icon, {
 				icon: "ph:plus",
-				className: "h-4 w-4"
+				className: "size-4"
 			}), t("blocks.addChild")] }), /* @__PURE__ */ jsx(SubMenuContent, { children: blockTypes.map(({ type, label }) => /* @__PURE__ */ jsxs(MenuItem, {
 				onClick: () => handleAddChild(type),
 				children: [/* @__PURE__ */ jsx(BlockTypeIcon, {
 					type,
-					className: "h-4 w-4"
+					className: "size-4"
 				}), label]
 			}, type)) })] }),
 			/* @__PURE__ */ jsx(Separator, {})
@@ -105,7 +105,7 @@ function MenuItems({ blockId, canHaveChildren, onDuplicate, onRemove, MenuItem,
 			onClick: handleDuplicate,
 			children: [/* @__PURE__ */ jsx(Icon, {
 				icon: "ph:copy",
-				className: "h-4 w-4"
+				className: "size-4"
 			}), t("common.duplicate")]
 		}),
 		/* @__PURE__ */ jsx(Separator, {}),
@@ -114,7 +114,7 @@ function MenuItems({ blockId, canHaveChildren, onDuplicate, onRemove, MenuItem,
 			onClick: handleRemove,
 			children: [/* @__PURE__ */ jsx(Icon, {
 				icon: "ph:trash",
-				className: "h-4 w-4"
+				className: "size-4"
 			}), t("common.delete")]
 		})
 	] });
@@ -133,7 +133,7 @@ function BlockItemDropdownMenu({ className, ...menuProps }) {
 			}),
 			children: [/* @__PURE__ */ jsx(Icon, {
 				icon: "ph:dots-three-vertical",
-				className: "h-4 w-4"
+				className: "size-4"
 			}), /* @__PURE__ */ jsx("span", {
 				className: "sr-only",
 				children: "Block actions"

package/dist/client/components/blocks/block-item.mjs

@@ -86,19 +86,19 @@ const BlockItem = React.memo(function BlockItem$1({ block, level, index: _index,
 								onClick: (e) => e.stopPropagation(),
 								children: /* @__PURE__ */ jsx(Icon, {
 									icon: "ph:dots-six-vertical",
-									className: "text-muted-foreground h-4 w-4"
+									className: "text-muted-foreground size-4"
 								})
 							}),
 							/* @__PURE__ */ jsx("div", {
 								className: "text-muted-foreground",
 								children: /* @__PURE__ */ jsx(Icon, {
 									icon: "ph:caret-right",
-									className: cn("h-4 w-4 transition-transform duration-150 ease-in-out", isExpanded && "rotate-90")
+									className: cn("size-4 transition-transform duration-150 ease-in-out", isExpanded && "rotate-90")
 								})
 							}),
 							isUnknownType ? /* @__PURE__ */ jsx(Icon, {
 								icon: "ph:warning",
-								className: "text-destructive h-3.5 w-3.5"
+								className: "text-destructive size-3.5"
 							}) : /* @__PURE__ */ jsx(BlockIcon, {
 								icon: blockSchema?.admin?.icon,
 								size: 14,
@@ -121,7 +121,7 @@ const BlockItem = React.memo(function BlockItem$1({ block, level, index: _index,
 									canHaveChildren,
 									onDuplicate: handleDuplicate,
 									onRemove: handleRemove,
-									className: "h-7 w-7 opacity-0 transition-opacity group-hover:opacity-100"
+									className: "size-7 opacity-0 transition-opacity group-hover:opacity-100"
 								})
 							})
 						]
@@ -139,7 +139,7 @@ const BlockItem = React.memo(function BlockItem$1({ block, level, index: _index,
 							className: "text-destructive flex items-center gap-2 text-sm",
 							children: [/* @__PURE__ */ jsx(Icon, {
 								icon: "ph:warning",
-								className: "h-4 w-4 shrink-0"
+								className: "size-4 shrink-0"
 							}), /* @__PURE__ */ jsx("span", { children: t("blocks.unknownType", { type: block.type }) })]
 						})
 					})

package/dist/client/components/blocks/block-library-sidebar.mjs

@@ -100,7 +100,7 @@ function BlockLibrarySidebar({ open, onClose }) {
 						className: "relative",
 						children: [/* @__PURE__ */ jsx(Icon, {
 							icon: "ph:magnifying-glass",
-							className: "text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+							className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2"
 						}), /* @__PURE__ */ jsx(Input, {
 							ref: searchInputRef,
 							placeholder: t("blocks.searchPlaceholder"),
@@ -117,7 +117,7 @@ function BlockLibrarySidebar({ open, onClose }) {
 						children: [
 							/* @__PURE__ */ jsx(Icon, {
 								icon: "ph:cube",
-								className: "text-muted-foreground/50 mb-4 h-12 w-12"
+								className: "text-muted-foreground/50 mb-4 size-12"
 							}),
 							/* @__PURE__ */ jsx("p", {
 								className: "text-muted-foreground text-sm",
@@ -134,7 +134,7 @@ function BlockLibrarySidebar({ open, onClose }) {
 							className: "mb-3 flex items-center gap-2",
 							children: [category.config.icon && /* @__PURE__ */ jsx(Icon, {
 								icon: category.config.icon.props.name,
-								className: "text-muted-foreground h-4 w-4"
+								className: "text-muted-foreground size-4"
 							}), /* @__PURE__ */ jsx("h4", {
 								className: "text-muted-foreground font-chrome chrome-meta text-xs font-semibold",
 								children: getCategoryDisplayLabel(category.config)

package/dist/client/components/fields/array-field.mjs

@@ -145,7 +145,7 @@ function PrimitiveArrayField({ name, value, label, description, placeholder, req
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "qa-array-field space-y-3",
 			children: [fields.length === 0 ? /* @__PURE__ */ jsx("div", {
-				className: "panel-surface border-border-subtle border-dashed px-3 py-3",
+				className: "panel-surface border-border-subtle border-dashed p-3",
 				children: /* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground text-sm text-pretty",
 					children: resolvedPlaceholder || emptyLabel
@@ -225,7 +225,7 @@ function PrimitiveArrayField({ name, value, label, description, placeholder, req
 				disabled,
 				children: [/* @__PURE__ */ jsx(Icon, {
 					icon: "ph:plus",
-					className: "h-4 w-4"
+					className: "size-4"
 				}), addLabel]
 			})]
 		})

package/dist/client/components/fields/date-field.mjs

@@ -6,16 +6,17 @@ import { jsx } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
 
 //#region src/client/components/fields/date-field.tsx
+function parseDateFieldValue(value) {
+	if (!value) return null;
+	const date = value instanceof Date ? value : new Date(String(value));
+	return Number.isNaN(date.getTime()) ? null : date;
+}
 function DateField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, minDate, maxDate, format }) {
 	return /* @__PURE__ */ jsx(Controller, {
 		name,
 		control: useResolvedControl(control),
 		render: ({ field, fieldState }) => {
-			const dateValue = (() => {
-				if (!field.value) return null;
-				const d = field.value instanceof Date ? field.value : new Date(field.value);
-				return Number.isNaN(d.getTime()) ? null : d;
-			})();
+			const dateValue = parseDateFieldValue(field.value);
 			return /* @__PURE__ */ jsx(FieldWrapper, {
 				name,
 				label,

package/dist/client/components/fields/datetime-field.mjs

@@ -6,12 +6,17 @@ import { jsx } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
 
 //#region src/client/components/fields/datetime-field.tsx
+function parseDateTimeFieldValue(value) {
+	if (!value) return null;
+	const date = value instanceof Date ? value : new Date(String(value));
+	return Number.isNaN(date.getTime()) ? null : date;
+}
 function DatetimeField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, minDate, maxDate, format, precision }) {
 	return /* @__PURE__ */ jsx(Controller, {
 		name,
 		control: useResolvedControl(control),
 		render: ({ field, fieldState }) => {
-			const dateValue = field.value instanceof Date ? field.value : field.value ? new Date(field.value) : null;
+			const dateValue = parseDateTimeFieldValue(field.value);
 			return /* @__PURE__ */ jsx(FieldWrapper, {
 				name,
 				label,

package/dist/client/components/fields/object-array-field.mjs

@@ -263,7 +263,7 @@ function ObjectArrayField({ name, label, description, placeholder, required, dis
 		if (!open) setActiveIndex(null);
 	}, []);
 	const emptyState = /* @__PURE__ */ jsx("div", {
-		className: "panel-surface border-border-subtle border-dashed px-3 py-3",
+		className: "panel-surface border-border-subtle border-dashed p-3",
 		children: /* @__PURE__ */ jsx("p", {
 			className: "text-muted-foreground text-sm text-pretty",
 			children: resolvedPlaceholder || emptyLabel
@@ -327,7 +327,7 @@ function ObjectArrayField({ name, label, description, placeholder, required, dis
 				disabled,
 				children: [/* @__PURE__ */ jsx(Icon, {
 					icon: "ph:plus",
-					className: "h-4 w-4"
+					className: "size-4"
 				}), addLabel]
 			}),
 			showEditor && mode === "modal" && /* @__PURE__ */ jsx(Dialog, {

package/dist/client/components/fields/relation/displays/cards-display.mjs

@@ -68,7 +68,7 @@ function CardsDisplay({ items, collection, actions, editable = false, fields, gr
 					children: /* @__PURE__ */ jsx("img", {
 						src: image,
 						alt: getTitle(item),
-						className: "image-outline h-full w-full object-cover"
+						className: "image-outline size-full object-cover"
 					})
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "p-3",

package/dist/client/components/fields/relation/displays/grid-display.mjs

@@ -52,7 +52,7 @@ function GridDisplay({ items, collection, collectionIcon, actions, editable = fa
 						children: /* @__PURE__ */ jsx("img", {
 							src: image,
 							alt: getTitle(item),
-							className: "image-outline h-full w-full object-cover"
+							className: "image-outline size-full object-cover"
 						})
 					}) : collectionIcon ? /* @__PURE__ */ jsx("div", {
 						className: "bg-muted flex size-8 shrink-0 items-center justify-center rounded-sm",

package/dist/client/components/fields/relation/displays/list-display.mjs

@@ -61,7 +61,7 @@ function ListDisplay({ items, collection, collectionIcon, actions, editable = fa
 					"aria-label": t("field.dragToReorder"),
 					children: /* @__PURE__ */ jsx(Icon, {
 						icon: "ph:dots-six-vertical",
-						className: "h-4 w-4"
+						className: "size-4"
 					})
 				}),
 				/* @__PURE__ */ jsxs("div", {
@@ -81,7 +81,7 @@ function ListDisplay({ items, collection, collectionIcon, actions, editable = fa
 					"aria-label": t("field.editItem"),
 					children: /* @__PURE__ */ jsx(Icon, {
 						icon: "ph:pencil",
-						className: "h-3 w-3"
+						className: "size-3"
 					})
 				}),
 				actions?.onRemove && /* @__PURE__ */ jsx(Button, {
@@ -94,7 +94,7 @@ function ListDisplay({ items, collection, collectionIcon, actions, editable = fa
 					"aria-label": t("field.removeItem"),
 					children: /* @__PURE__ */ jsx(Icon, {
 						icon: "ph:x",
-						className: "h-3 w-3"
+						className: "size-3"
 					})
 				})
 			]

package/dist/client/components/fields/relation/displays/table-display.mjs

@@ -25,7 +25,7 @@ function TableSkeleton({ count = 3, columns = ["_title"], hasActions = false })
 			className: "flex items-center justify-end gap-1",
 			children: /* @__PURE__ */ jsx(Skeleton, {
 				variant: "text",
-				className: "h-6 w-6"
+				className: "size-6"
 			})
 		}) })] }, key)) })] })
 	});

package/dist/client/components/fields/relation-picker.mjs

@@ -80,12 +80,12 @@ function RelationPicker({ name, value, onChange, targetCollection, label, filter
 			if (response?.docs) for (const doc of response.docs) map.set(doc.id, doc);
 			return map;
 		},
-		enabled: !!client && selectedIds.length > 0,
+		enabled: !!client && !!targetCollection && selectedIds.length > 0,
 		staleTime: 3e4,
 		placeholderData: (prev) => prev
 	});
 	const loadOptions = React.useCallback(async (search) => {
-		if (!client) return [];
+		if (!client || !targetCollection) return [];
 		try {
 			const options = { limit: 50 };
 			if (search) options.search = search;
@@ -266,7 +266,7 @@ function RelationPicker({ name, value, onChange, targetCollection, label, filter
 					"aria-label": createLabel,
 					children: /* @__PURE__ */ jsx(Icon, {
 						icon: "ph:plus",
-						className: "h-4 w-4"
+						className: "size-4"
 					})
 				})]
 			}),

package/dist/client/components/fields/relation-select.mjs

@@ -42,7 +42,7 @@ function RelationSelect({ name, value, onChange, targetCollection, label, filter
 	const client = useAdminStore(selectClient);
 	const collectionIconRef = (serverConfig?.collections?.[targetCollection])?.icon;
 	const loadOptions = React.useCallback(async (search) => {
-		if (!client) return [];
+		if (!client || !targetCollection) return [];
 		try {
 			const options = {
 				limit: 50,
@@ -101,7 +101,7 @@ function RelationSelect({ name, value, onChange, targetCollection, label, filter
 		targetCollection,
 		value
 	]);
-	const { data: selectedItem, isLoading: isLoadingSelectedItem } = useCollectionItem(targetCollection, value || "", void 0, { enabled: !!value });
+	const { data: selectedItem, isLoading: isLoadingSelectedItem } = useCollectionItem(targetCollection, value || "", void 0, { enabled: !!value && !!targetCollection });
 	const selectedOptions = React.useMemo(() => {
 		if (!selectedItem) return [];
 		return [{

package/dist/client/components/filter-builder/filter-builder-sheet.mjs

@@ -140,10 +140,10 @@ function FilterBuilderSheet({ collection, availableFields, currentConfig, onConf
 								description: t("viewOptions.realtimeDescription"),
 								control: /* @__PURE__ */ jsx(Switch, {
 									checked: localConfig.realtime ?? true,
-									onCheckedChange: (checked) => setLocalConfig({
-										...localConfig,
+									onCheckedChange: (checked) => setLocalConfig((prevConfig) => ({
+										...prevConfig,
 										realtime: checked
-									})
+									}))
 								})
 							}),
 							supportsSoftDelete && /* @__PURE__ */ jsx(ViewOptionRow, {
@@ -151,10 +151,10 @@ function FilterBuilderSheet({ collection, availableFields, currentConfig, onConf
 								description: t("viewOptions.showDeletedDescription"),
 								control: /* @__PURE__ */ jsx(Switch, {
 									checked: localConfig.includeDeleted ?? false,
-									onCheckedChange: (checked) => setLocalConfig({
-										...localConfig,
+									onCheckedChange: (checked) => setLocalConfig((prevConfig) => ({
+										...prevConfig,
 										includeDeleted: checked
-									})
+									}))
 								})
 							}),
 							groupableFields.length > 0 && /* @__PURE__ */ jsx(ViewOptionRow, {
@@ -165,15 +165,15 @@ function FilterBuilderSheet({ collection, availableFields, currentConfig, onConf
 									value: localConfig.groupBy ?? NO_GROUPING_VALUE,
 									onChange: (value) => {
 										const nextGroupBy = !value || value === NO_GROUPING_VALUE ? null : value;
-										setLocalConfig({
-											...localConfig,
+										setLocalConfig((prevConfig) => ({
+											...prevConfig,
 											groupBy: nextGroupBy,
 											collapsedGroups: [],
 											pagination: {
-												...localConfig.pagination ?? { pageSize: 25 },
+												...prevConfig.pagination ?? { pageSize: 25 },
 												page: 1
 											}
-										});
+										}));
 									},
 									options: groupByOptions,
 									clearable: false,
@@ -216,10 +216,10 @@ function FilterBuilderSheet({ collection, availableFields, currentConfig, onConf
 								children: /* @__PURE__ */ jsx(ColumnsTab, {
 									fields: availableFields,
 									visibleColumns: localConfig.visibleColumns,
-									onVisibleColumnsChange: (columns) => setLocalConfig({
-										...localConfig,
+									onVisibleColumnsChange: (columns) => setLocalConfig((prevConfig) => ({
+										...prevConfig,
 										visibleColumns: columns
-									})
+									}))
 								})
 							}),
 							/* @__PURE__ */ jsx(TabsContent, {
@@ -227,10 +227,10 @@ function FilterBuilderSheet({ collection, availableFields, currentConfig, onConf
 								children: /* @__PURE__ */ jsx(FiltersTab, {
 									fields: availableFields,
 									filters: localConfig.filters,
-									onFiltersChange: (filters) => setLocalConfig({
-										...localConfig,
+									onFiltersChange: (filters) => setLocalConfig((prevConfig) => ({
+										...prevConfig,
 										filters
-									})
+									}))
 								})
 							}),
 							/* @__PURE__ */ jsx(TabsContent, {

package/dist/client/components/history-sidebar.mjs

@@ -27,6 +27,14 @@ const VERSION_META_KEYS = new Set([
 ]);
 const EMPTY_AUDIT_ENTRIES = [];
 const RELATIVE_TIME_FORMATTERS = /* @__PURE__ */ new Map();
+const HISTORY_SKELETON_ROW_KEYS = [
+	"first",
+	"second",
+	"third",
+	"fourth",
+	"fifth",
+	"sixth"
+];
 function getRelativeTimeFormatter(locale) {
 	let formatter = RELATIVE_TIME_FORMATTERS.get(locale);
 	if (!formatter) {
@@ -317,7 +325,7 @@ function VersionDiffPanel({ previousVersion, changes, fields }) {
 				const field = fields?.[change.name];
 				const kind = getDiffKindConfig(change.kind);
 				return /* @__PURE__ */ jsxs("div", {
-					className: "item-surface border-border-subtle bg-surface-low px-3 py-3",
+					className: "item-surface border-border-subtle bg-surface-low p-3",
 					children: [
 						/* @__PURE__ */ jsxs("div", {
 							className: "flex items-start justify-between gap-3",
@@ -407,7 +415,7 @@ function HistoryListSkeleton({ rows = 4 }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "space-y-4 py-2",
 		"aria-busy": "true",
-		children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("div", {
+		children: HISTORY_SKELETON_ROW_KEYS.slice(0, rows).map((rowKey) => /* @__PURE__ */ jsxs("div", {
 			className: "flex gap-3",
 			children: [/* @__PURE__ */ jsx(Skeleton, { className: "mt-1 size-7 shrink-0 rounded-full" }), /* @__PURE__ */ jsxs("div", {
 				className: "min-w-0 flex-1 space-y-2",
@@ -419,7 +427,7 @@ function HistoryListSkeleton({ rows = 4 }) {
 					className: "h-3 w-40"
 				})]
 			})]
-		}, index))
+		}, rowKey))
 	});
 }
 function ActivityTimeline({ entries, isLoading }) {
@@ -548,7 +556,7 @@ function VersionsList({ versions, fields, isLoading, isReverting, onRevert }) {
 				value: key,
 				className: "px-0",
 				children: [/* @__PURE__ */ jsx(AccordionTrigger, {
-					className: "min-h-20 items-start px-3 py-3 hover:no-underline",
+					className: "min-h-20 items-start p-3 hover:no-underline",
 					children: /* @__PURE__ */ jsxs("div", {
 						className: "flex min-w-0 flex-1 flex-col gap-2",
 						children: [

package/dist/client/components/layout/field-layout-renderer.mjs

@@ -19,6 +19,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * - Object field component (scoped names: parent.field)
 * - Collection/global forms (via auto-form-fields.tsx)
 */
+function getLayoutItemKey(item, index) {
+	if (isFieldReference(item)) return getFieldName(item) ?? `field-${index}`;
+	if (item.type === "section") return `section-${typeof item.label === "string" ? item.label : JSON.stringify(item.label ?? "")}-${index}`;
+	return `tabs-${item.tabs.map((tab) => tab.id).join("-") || index}`;
+}
 /**
 * Render an array of FieldLayoutItem using the provided context.
 * Handles field references, sections, and tabs recursively.
@@ -37,11 +42,11 @@ function FieldLayoutRenderer({ items, ctx }) {
 				section: item,
 				index,
 				ctx
-			}, `section-${index}`);
+			}, getLayoutItemKey(item, index));
 			case "tabs": return /* @__PURE__ */ jsx(TabsRenderer, {
 				tabsLayout: item,
 				ctx
-			}, `tabs-${index}`);
+			}, getLayoutItemKey(item, index));
 			default: return null;
 		}
 		return null;
@@ -64,7 +69,7 @@ function SectionRenderer({ section, index, ctx }) {
 				if (!isFieldReference(fieldItem)) return /* @__PURE__ */ jsx(FieldLayoutRenderer, {
 					items: [fieldItem],
 					ctx
-				}, `nested-${idx}`);
+				}, getLayoutItemKey(fieldItem, idx));
 				const fieldName = getFieldName(fieldItem);
 				if (!fieldName) return null;
 				const className = typeof fieldItem === "object" && "className" in fieldItem ? fieldItem.className : void 0;

package/dist/client/components/media/media-grid.mjs

@@ -77,10 +77,10 @@ function AssetItem({ asset, selected, selectionMode, onToggle, onClick }) {
 			thumbnailUrl && isImageType && !imageError ? /* @__PURE__ */ jsx("img", {
 				src: thumbnailUrl,
 				alt: asset.alt || asset.filename || "Asset",
-				className: "image-outline h-full w-full object-cover",
+				className: "image-outline size-full object-cover",
 				onError: () => setImageError(true)
 			}) : /* @__PURE__ */ jsx("div", {
-				className: cn("flex h-full w-full items-center justify-center", getAssetTypeColor(asset.mimeType)),
+				className: cn("flex size-full items-center justify-center", getAssetTypeColor(asset.mimeType)),
 				children: /* @__PURE__ */ jsx("span", {
 					className: "text-muted-foreground chrome-meta text-xs font-medium",
 					children: asset.mimeType?.split("/")[1]?.slice(0, 4) || "FILE"

package/dist/client/components/preview/live-preview-mode.mjs

@@ -195,7 +195,7 @@ function LivePreviewContent({ open, children, previewUrl, previewRef, onFieldVal
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ jsx(Icon, {
 						icon: "ph:eye",
-						className: "text-muted-foreground h-4 w-4"
+						className: "text-muted-foreground size-4"
 					}), /* @__PURE__ */ jsx("span", {
 						className: "font-medium",
 						children: t("preview.livePreview")
@@ -228,7 +228,7 @@ function LivePreviewContent({ open, children, previewUrl, previewRef, onFieldVal
 						title: t("preview.exitTooltip"),
 						children: [/* @__PURE__ */ jsx(Icon, {
 							icon: "ph:sign-out",
-							className: "h-4 w-4"
+							className: "size-4"
 						}), /* @__PURE__ */ jsx("span", {
 							className: "hidden sm:inline",
 							children: t("preview.exitPreview")
@@ -261,7 +261,7 @@ function LivePreviewContent({ open, children, previewUrl, previewRef, onFieldVal
 						className: "flex h-full items-center justify-center",
 						children: [/* @__PURE__ */ jsx(Icon, {
 							icon: "ph:spinner",
-							className: "text-muted-foreground h-6 w-6 animate-spin"
+							className: "text-muted-foreground size-6 animate-spin"
 						}), /* @__PURE__ */ jsx("span", {
 							className: "text-muted-foreground ml-2 text-sm",
 							children: t("preview.loadingPreview")
@@ -290,7 +290,7 @@ function LivePreviewContent({ open, children, previewUrl, previewRef, onFieldVal
 						className: "flex h-full items-center justify-center",
 						children: [/* @__PURE__ */ jsx(Icon, {
 							icon: "ph:spinner",
-							className: "text-muted-foreground h-6 w-6 animate-spin"
+							className: "text-muted-foreground size-6 animate-spin"
 						}), /* @__PURE__ */ jsx("span", {
 							className: "text-muted-foreground ml-2 text-sm",
 							children: t("preview.loadingPreview")

package/dist/client/components/preview/preview-pane.mjs

@@ -294,13 +294,13 @@ const PreviewPane = React.forwardRef(({ url, selectedBlockId, onFieldClick, onBl
 		}, 3e3);
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative h-full w-full", className),
+		className: cn("relative size-full", className),
 		children: [
 			isLoading && /* @__PURE__ */ jsxs("div", {
 				className: "bg-muted absolute inset-0 z-10 flex items-center justify-center",
 				children: [/* @__PURE__ */ jsx(Icon, {
 					icon: "ph:spinner",
-					className: "text-muted-foreground h-6 w-6 animate-spin"
+					className: "text-muted-foreground size-6 animate-spin"
 				}), /* @__PURE__ */ jsx("span", {
 					className: "text-muted-foreground ml-2 text-sm",
 					children: t("preview.loadingPreview")
@@ -320,7 +320,7 @@ const PreviewPane = React.forwardRef(({ url, selectedBlockId, onFieldClick, onBl
 				className: "bg-background absolute top-4 right-4 z-10 flex items-center gap-2 border px-3 py-2 shadow-md",
 				children: [/* @__PURE__ */ jsx(Icon, {
 					icon: "ph:spinner",
-					className: "text-muted-foreground h-4 w-4 animate-spin"
+					className: "text-muted-foreground size-4 animate-spin"
 				}), /* @__PURE__ */ jsx("span", {
 					className: "text-muted-foreground text-sm",
 					children: t("preview.refreshing")
@@ -329,7 +329,7 @@ const PreviewPane = React.forwardRef(({ url, selectedBlockId, onFieldClick, onBl
 			previewUrlResolved && /* @__PURE__ */ jsx("iframe", {
 				ref: iframeRef,
 				src: previewUrlResolved,
-				className: "h-full w-full border-0",
+				className: "size-full border-0",
 				title: t("common.preview"),
 				onLoad: handleLoad,
 				sandbox: "allow-scripts allow-same-origin allow-forms"