@rebasepro/cms 0.19.1 → 0.19.2-canary.g08eed46

package/dist/{util-DE1WQW6h.js → util-4oPxPkbp.js}

@@ -1,4 +1,4 @@
-import { n as getThumbnailMeasure, r as sanitizeUrl, t as getPreviewSizeFrom } from "./util-CfLFggP7.js";
+import { n as getThumbnailMeasure, r as sanitizeUrl, t as getPreviewSizeFrom } from "./util-DB31IoJE.js";
 import * as React$1 from "react";
 import React, { Suspense, createContext, createElement, forwardRef, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { deepEqual } from "fast-equals";
@@ -277,7 +277,7 @@ function FieldBlock({ propertyKey, property, showLabel, mode = "edit", label, ic
 			showLabel && /* @__PURE__ */ jsx(PropertyIdCopyTooltip, {
 				propertyKey,
 				children: /* @__PURE__ */ jsxs("div", {
-					className: cls("flex items-center gap-1.5 font-medium leading-tight mb-1.5", "text-[13px] text-text-secondary dark:text-text-secondary-dark"),
+					className: cls("flex items-center gap-1.5 font-medium leading-tight mb-1.5", "text-[13px] text-text-primary dark:text-text-primary-dark"),
 					children: [
 						(property || icon) && /* @__PURE__ */ jsx("span", {
 							className: "shrink-0 text-text-disabled dark:text-text-disabled-dark",
@@ -375,7 +375,7 @@ function isPromise(value) {
 function FormRail({ fields, showRecordMeta, entity, renderField }) {
 	if (!fields.length && !showRecordMeta) return null;
 	return /* @__PURE__ */ jsxs("aside", {
-		className: cls("flex flex-col gap-6 shrink-0 w-76 @7xl/form:w-84 border-l overflow-y-auto", "px-5 py-6 bg-surface-50 dark:bg-surface-900", defaultBorderMixin),
+		className: cls("flex flex-col gap-6 shrink-0 w-76 @7xl/form:w-84 overflow-y-auto", "px-5 py-6 bg-surface-sheet"),
 		children: [fields.length > 0 && /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col gap-5",
 			children: fields.map(renderField)
@@ -575,7 +575,7 @@ function useRailVisible(ref) {
 * @group Preview components
 */
 function EmptyValue({ className }) {
-	return /* @__PURE__ */ jsx("div", { className: "rounded-full bg-surface-200 bg-opacity-30 bg-surface-200/30 dark:bg-opacity-20 dark:bg-surface-200/20 w-5 h-2 inline-block" });
+	return /* @__PURE__ */ jsx("div", { className: "rounded-full bg-surface-200/30 dark:bg-surface-200/20 w-5 h-2 inline-block" });
 }
 //#endregion
 //#region src/preview/components/ImagePreview.tsx
@@ -592,7 +592,7 @@ function ImagePreview({ size, url, fill }) {
 	const { t } = useTranslation();
 	if (fill) {
 		if (hasError) return /* @__PURE__ */ jsx("div", {
-			className: "w-full h-full flex items-center justify-center bg-surface-100 dark:bg-surface-900 rounded-md",
+			className: "w-full h-full flex items-center justify-center bg-surface-raised rounded-md",
 			children: /* @__PURE__ */ jsx(ImageOffIcon, { className: "text-surface-400 dark:text-surface-500" })
 		});
 		return /* @__PURE__ */ jsx("img", {
@@ -604,7 +604,7 @@ function ImagePreview({ size, url, fill }) {
 	}
 	if (size === "small") {
 		if (hasError) return /* @__PURE__ */ jsx("div", {
-			className: "flex items-center justify-center bg-surface-100 dark:bg-surface-900 rounded-md",
+			className: "flex items-center justify-center bg-surface-raised rounded-md",
 			style: {
 				width: imageSize,
 				height: imageSize,
@@ -632,7 +632,7 @@ function ImagePreview({ size, url, fill }) {
 			height: imageSize
 		},
 		children: [hasError ? /* @__PURE__ */ jsx("div", {
-			className: "w-full h-full flex items-center justify-center bg-surface-100 dark:bg-surface-900 rounded-md",
+			className: "w-full h-full flex items-center justify-center bg-surface-raised rounded-md",
 			children: /* @__PURE__ */ jsx(ImageOffIcon, { className: "text-surface-400 dark:text-surface-500" })
 		}) : /* @__PURE__ */ jsx("img", {
 			src: url,
@@ -2045,7 +2045,7 @@ var EntityPreviewContainer = React$1.forwardRef(({ children, hover, onClick, siz
 		ref,
 		tabIndex: 0,
 		style,
-		className: cls("bg-white dark:bg-surface-900", size === "small" ? "min-h-[32px]" : "min-h-[48px]", fullwidth ? "w-full" : "", "items-center overflow-hidden", hover ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800" : "", size === "small" ? "p-1" : "px-2 py-1", "flex border rounded-lg", onClick ? "cursor-pointer" : "", defaultBorderMixin, className),
+		className: cls("bg-surface-card", size === "small" ? "min-h-[32px]" : "min-h-[48px]", fullwidth ? "w-full" : "", "items-center overflow-hidden", hover ? "hover:bg-surface-hover group-hover:bg-surface-hover" : "", size === "small" ? "p-1" : "px-2 py-1", "flex border rounded-lg", onClick ? "cursor-pointer" : "", defaultBorderMixin, className),
 		role: onClick ? "button" : void 0,
 		onClick: (event) => {
 			if (onClick) {
@@ -2239,7 +2239,7 @@ function ReferencePreviewInternal(props) {
 function ReferencePreviewExisting({ reference, collection, previewProperties, size, disabled, includeEntityLink, includeId, onClick, hover, textOnly }) {
 	const ResolvedEntityPreview = useComponentOverride("EntityPreview", EntityPreviewBinding);
 	useCustomizationController();
-	const inline = useIsNestedEntityPreview() || Boolean(textOnly);
+	const inline = useIsNestedEntityPreview() || Boolean(textOnly) || size === "small";
 	const { entity, dataLoading, dataLoadingError } = useFetch({
 		path: reference.path,
 		entityId: reference.id,
@@ -2480,7 +2480,7 @@ function RelationPreviewExisting({ relation, collection, previewProperties, size
 	const passedEntity = relation.data;
 	const ResolvedEntityPreview = useComponentOverride("EntityPreview", EntityPreviewBinding);
 	useCustomizationController();
-	const inline = useIsNestedEntityPreview() || Boolean(textOnly);
+	const inline = useIsNestedEntityPreview() || Boolean(textOnly) || size === "small";
 	const { entity, dataLoading, dataLoadingError } = useFetch({
 		path: relation.path,
 		entityId: passedEntity ? void 0 : relation.id,
@@ -3005,7 +3005,7 @@ function DatePreview({ date, mode = "date_time", timezone }) {
 			timeZoneName: "short"
 		}).formatToParts(date).find((p) => p.type === "timeZoneName")?.value ?? "";
 		return /* @__PURE__ */ jsxs("span", {
-			className: "flex items-center gap-1",
+			className: "flex items-center gap-1 font-mono tabular-nums",
 			children: [formattedDate, tzAbbrev && /* @__PURE__ */ jsxs("span", {
 				className: "text-xs text-slate-500 dark:text-slate-400",
 				children: [
@@ -3019,7 +3019,10 @@ function DatePreview({ date, mode = "date_time", timezone }) {
 	let dateFormat;
 	if (mode === "date") dateFormat = customizationController?.dateTimeFormat ? customizationController.dateTimeFormat.replace(/[, ]*[HhKk].*$/, "").trim() : "PP";
 	else dateFormat = customizationController?.dateTimeFormat ?? defaultDateFormat;
-	return /* @__PURE__ */ jsx(Fragment, { children: format(date, dateFormat, { locale: dateUtilsLocale }) });
+	return /* @__PURE__ */ jsx("span", {
+		className: "font-mono tabular-nums",
+		children: format(date, dateFormat, { locale: dateUtilsLocale })
+	});
 }
 //#endregion
 //#region src/preview/components/BooleanPreview.tsx
@@ -3033,7 +3036,7 @@ function BooleanPreview({ value, size, property, hideLabel }) {
 			checked: value,
 			padding: false,
 			size,
-			color: "secondary"
+			color: "primary"
 		}), !hideLabel && property.name && /* @__PURE__ */ jsx("span", {
 			className: cls("text-text-secondary dark:text-text-secondary-dark", size === "small" ? "text-sm" : ""),
 			children: property.name
@@ -3082,7 +3085,7 @@ function NumberPropertyPreview({ value, property, size }) {
 		const enumKey = numValue;
 		const enumValues = enumToObjectEntries(property.enum);
 		if (!enumValues) return /* @__PURE__ */ jsx("span", {
-			className: size === "small" ? "text-sm" : "",
+			className: size === "small" ? "font-mono tabular-nums text-sm" : "font-mono tabular-nums",
 			children: numValue
 		});
 		return /* @__PURE__ */ jsx(EnumValuesChip, {
@@ -3091,7 +3094,7 @@ function NumberPropertyPreview({ value, property, size }) {
 			size: size !== "medium" ? "small" : "medium"
 		});
 	} else return /* @__PURE__ */ jsx("span", {
-		className: size === "small" ? "text-sm" : "",
+		className: size === "small" ? "font-mono tabular-nums text-sm" : "font-mono tabular-nums",
 		children: formatNumber(numValue, property.admin?.format, customizationController?.locale)
 	});
 }
@@ -3484,7 +3487,7 @@ function ReadOnlyFieldBinding({ propertyKey, value, error, showError, minimalist
 			className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3"
 		}),
 		/* @__PURE__ */ jsx("div", {
-			className: cls("w-full overflow-x-scroll no-scrollbar flex items-center", skipCardWrapper ? "" : "rounded-lg border border-surface-200 dark:border-surface-700 px-3 min-h-12 opacity-80"),
+			className: cls("w-full overflow-x-scroll no-scrollbar flex items-center", skipCardWrapper ? "" : "rounded-lg border border-hairline-strong px-3 min-h-12 opacity-80"),
 			children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyPreview, {
 				propertyKey,
 				value,
@@ -3661,6 +3664,7 @@ function VirtualTableSelect(props) {
 		}, 0);
 	}, []);
 	return multiple ? /* @__PURE__ */ jsx(MultiSelect, {
+		invisible: true,
 		inputRef: ref,
 		className: "w-full h-full p-0 bg-transparent outline-none",
 		position: "item-aligned",
@@ -3680,6 +3684,7 @@ function VirtualTableSelect(props) {
 		}, enumConfig.id))
 	}) : /* @__PURE__ */ jsx(Select, {
 		inputRef: ref,
+		invisible: true,
 		fullWidth: true,
 		className: "w-full h-full p-0 bg-transparent outline-none [&_button]:ring-0 [&_button]:ring-offset-0",
 		inputClassName: "ring-0 ring-offset-0 focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-offset-0",
@@ -3947,7 +3952,7 @@ var UserSelector = React$1.forwardRef(({ value, size = "medium", onValueChange,
 			children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
 				ref: contentRef,
 				"data-user-selector-content": true,
-				className: cls("z-50 overflow-hidden border bg-white dark:bg-surface-800 rounded-lg min-w-72", defaultBorderMixin),
+				className: cls("z-50 overflow-hidden border bg-surface-card rounded-lg min-w-72", defaultBorderMixin),
 				align: "start",
 				sideOffset: 8,
 				side: "bottom",
@@ -4012,7 +4017,7 @@ var UserSelector = React$1.forwardRef(({ value, size = "medium", onValueChange,
 												e.stopPropagation();
 											},
 											onSelect: () => handleItemClick(item),
-											className: cls("flex flex-row items-center gap-1.5 m-1 p-1.5 rounded-xs cursor-pointer ring-offset-transparent", isSelected && "bg-surface-accent-200 dark:bg-surface-accent-950", "aria-selected:outline-hidden aria-selected:ring-2 aria-selected:ring-primary/75 aria-selected:ring-offset-2 aria-selected:bg-surface-accent-100 dark:aria-selected:bg-surface-accent-900"),
+											className: cls("flex flex-row items-center gap-1.5 m-1 p-1.5 rounded-xs cursor-pointer ring-offset-transparent", isSelected && "bg-surface-active", "aria-selected:outline-hidden aria-selected:bg-surface-active"),
 											children: /* @__PURE__ */ jsx(UserDisplay, { user: item.user })
 										}, item.uid);
 									}),
@@ -4333,6 +4338,60 @@ function TableStorageItemPreview({ propertyKey, property, value, size, entity })
 	});
 }
 //#endregion
+//#region src/components/CollectionTableBinding/fields/CompactEntityCellField.tsx
+/**
+* The one-line editor a reference or relation cell shows while selected, at
+* the row sizes that carry small previews (`xs`, `s`, `m`).
+*
+* The flow it replaces: at 48px the selected cell swapped its resting inline
+* line for the card editor built for 140px rows, which was clipped to its top
+* third and whose only click opened the picker — there was no way to look at
+* the record. Here the line stays (its title opens the record in the side
+* panel, exactly as it does at rest), a pencil opens the picker and a cross
+* clears the value. Click the name to see it, click the pencil to change it.
+*/
+function CompactEntityCellField({ children, empty, disabled, onEdit, onClear, emptyLabel }) {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full min-w-0 flex items-center gap-0.5 min-h-8",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "grow min-w-0 flex items-center gap-x-3 overflow-hidden text-sm",
+			children: empty ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled,
+				onClick: (e) => {
+					e.stopPropagation();
+					onEdit();
+				},
+				className: cls("truncate text-left text-text-secondary dark:text-text-secondary-dark", !disabled && "cursor-pointer hover:text-text-primary dark:hover:text-text-primary-dark"),
+				children: emptyLabel ?? t("select_reference")
+			}) : children
+		}), !disabled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
+			title: t("edit"),
+			children: /* @__PURE__ */ jsx(IconButton, {
+				size: "small",
+				"aria-label": t("edit"),
+				onClick: (e) => {
+					e.stopPropagation();
+					onEdit();
+				},
+				children: /* @__PURE__ */ jsx(PencilIcon, {})
+			})
+		}), !empty && /* @__PURE__ */ jsx(Tooltip, {
+			title: t("clear"),
+			children: /* @__PURE__ */ jsx(IconButton, {
+				size: "small",
+				"aria-label": t("clear"),
+				onClick: (e) => {
+					e.stopPropagation();
+					onClear();
+				},
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})
+		})] })]
+	});
+}
+//#endregion
 //#region src/components/CollectionTableBinding/fields/TableReferenceField.tsx
 var DefaultMissingReference = () => null;
 function TableReferenceFieldResolver(props) {
@@ -4417,13 +4476,29 @@ var TableReferenceFieldInternal = React.memo(function TableReferenceFieldInterna
 		else return /* @__PURE__ */ jsx(ErrorView, { error: "Data is not an array of references" });
 	};
 	if (!collection) return /* @__PURE__ */ jsx(ErrorView, { error: "The specified collection does not exist" });
+	if (getPreviewSizeFrom(size) === "small") return /* @__PURE__ */ jsx(CompactEntityCellField, {
+		empty: valueNotSet,
+		disabled,
+		onEdit: handleOpen,
+		onClear: () => updateValue(multiselect ? [] : null),
+		emptyLabel: title,
+		children: (!internalValue ? [] : Array.isArray(internalValue) ? internalValue : [internalValue]).map((reference, index) => reference && reference.isEntityReference && reference.isEntityReference() ? /* @__PURE__ */ jsx(ReferencePreview, {
+			size: "small",
+			reference,
+			hover: false,
+			disabled: !path,
+			previewProperties,
+			includeId,
+			includeEntityLink
+		}, `compact_ref__`) : /* @__PURE__ */ jsx(ErrorView, { error: "Value is not a reference" }, `compact_ref__`))
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w-full group",
 		children: [
 			internalValue && !multiselect && buildSingleReferenceField(),
 			internalValue && multiselect && buildMultipleReferenceField(),
 			valueNotSet && /* @__PURE__ */ jsxs(EntityPreviewContainer, {
-				className: cls("px-3 py-2 text-sm font-medium flex items-center", multiselect ? "gap-4" : "gap-6", disabled ? "text-surface-accent-500" : "cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800"),
+				className: cls("px-3 py-2 text-sm font-medium flex items-center", multiselect ? "gap-4" : "gap-6", disabled ? "text-surface-accent-500" : "cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:bg-surface-hover group-hover:bg-surface-hover"),
 				onClick: handleOpen,
 				size: "medium",
 				children: [/* @__PURE__ */ jsx(PencilIcon, { className: "ml-2 mr-1 text-surface-300 dark:text-surface-600" }), title]
@@ -4441,7 +4516,7 @@ function TableMultipleRelationField(props) {
 	});
 }
 var TableMultipleRelationFieldInternal = React.memo(function TableMultipleRelationFieldInternal(props) {
-	const { name, internalValue, updateValue, previewProperties, title, disabled, fixedFilter, collection, includeId, includeEntityLink } = props;
+	const { name, internalValue, updateValue, previewProperties, title, disabled, fixedFilter, collection, includeId, includeEntityLink, size } = props;
 	const value = Array.isArray(internalValue) ? internalValue : [];
 	const onMultipleEntitiesSelected = useCallback((entities) => {
 		updateValue(entities.map((e) => getRelationFrom(e)));
@@ -4480,10 +4555,29 @@ var TableMultipleRelationFieldInternal = React.memo(function TableMultipleRelati
 		else return /* @__PURE__ */ jsx(ErrorView, { error: "Data is not an array of relations" });
 	};
 	if (!collection) return /* @__PURE__ */ jsx(ErrorView, { error: "The specified collection does not exist" });
+	if (getPreviewSizeFrom(size) === "small") return /* @__PURE__ */ jsx(CompactEntityCellField, {
+		empty: valueNotSet,
+		disabled,
+		onEdit: handleOpen,
+		onClear: () => updateValue([]),
+		emptyLabel: title,
+		children: value.map((item, index) => {
+			const relationItem = normalizeToEntityRelation(item);
+			if (!relationItem) return null;
+			return /* @__PURE__ */ jsx(RelationPreview, {
+				size: "small",
+				relation: relationItem,
+				hover: false,
+				previewProperties,
+				includeId,
+				includeEntityLink
+			}, `compact_rel__`);
+		})
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w-full group",
 		children: [internalValue && buildMultipleRelationField(), valueNotSet && /* @__PURE__ */ jsxs(EntityPreviewContainer, {
-			className: cls("px-3 py-2 text-sm font-medium flex items-center gap-4", disabled ? "text-surface-accent-500" : "cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800"),
+			className: cls("px-3 py-2 text-sm font-medium flex items-center gap-4", disabled ? "text-surface-accent-500" : "cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:bg-surface-hover group-hover:bg-surface-hover"),
 			onClick: handleOpen,
 			size: "medium",
 			children: [/* @__PURE__ */ jsx(PencilIcon, { className: "ml-2 mr-1 text-surface-300 dark:text-surface-600" }), title]
@@ -4579,13 +4673,32 @@ var TableRelationFieldInternal = React.memo(function TableRelationFieldInternal(
 		else return /* @__PURE__ */ jsx(ErrorView, { error: "Data is not an array of relations" });
 	};
 	if (!collection) return /* @__PURE__ */ jsx(ErrorView, { error: "The specified collection does not exist" });
+	if (getPreviewSizeFrom(size) === "small") return /* @__PURE__ */ jsx(CompactEntityCellField, {
+		empty: valueNotSet,
+		disabled,
+		onEdit: handleOpen,
+		onClear: () => updateValue(multiselect ? [] : null),
+		emptyLabel: title,
+		children: (!internalValue ? [] : Array.isArray(internalValue) ? internalValue : [internalValue]).map((item, index) => {
+			const relationItem = normalizeToEntityRelation(item);
+			if (!relationItem) return null;
+			return /* @__PURE__ */ jsx(RelationPreview, {
+				size: "small",
+				relation: relationItem,
+				hover: false,
+				previewProperties,
+				includeId,
+				includeEntityLink
+			}, `compact_rel__`);
+		})
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w-full group",
 		children: [
 			internalValue && !multiselect && buildSingleRelationField(),
 			internalValue && multiselect && buildMultipleRelationField(),
 			valueNotSet && /* @__PURE__ */ jsxs(EntityPreviewContainer, {
-				className: cls("px-3 py-2 text-sm font-medium flex items-center", multiselect ? "gap-4" : "gap-6", disabled ? "text-surface-accent-500" : "cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800"),
+				className: cls("px-3 py-2 text-sm font-medium flex items-center", multiselect ? "gap-4" : "gap-6", disabled ? "text-surface-accent-500" : "cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:bg-surface-hover group-hover:bg-surface-hover"),
 				onClick: handleOpen,
 				size: "medium",
 				children: [/* @__PURE__ */ jsx(PencilIcon, { className: "ml-2 mr-1 text-surface-300 dark:text-surface-600" }), title]
@@ -4922,6 +5035,7 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 					});
 				},
 				className: cls({
+					"min-h-8 py-0.5 px-2": size === "compact",
 					"min-h-[42px] py-1 px-2": size === "small",
 					"min-h-[56px] py-2 px-4": size === "medium",
 					"min-h-[48px] py-1 px-4": size === "large"
@@ -4937,19 +5051,36 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 					}) : selectedItems.length > 0 ? /* @__PURE__ */ jsx("div", {
 						className: "flex flex-wrap items-center gap-1.5 text-start flex-1 min-w-0 mr-2",
 						children: selectedItems.map((item) => {
-							if (!useChips || !multiple) return /* @__PURE__ */ jsx("div", {
-								className: "flex flex-row items-center gap-1 truncate",
-								children: item.data ? /* @__PURE__ */ jsx(EntityPreviewBindingData, {
-									size: "medium",
+							if (!useChips || !multiple) {
+								if (size === "compact") return item.data ? /* @__PURE__ */ jsx(InlineEntityPreview, {
 									entity: item.data,
-									includeEntityLink: false,
-									includeId: false,
-									onSidePanelClick: closePopover
-								}) : /* @__PURE__ */ jsx("span", {
+									onClick: () => {
+										closePopover();
+										sidePanelController.open({
+											entityId: item.data.id,
+											path: item.data.path,
+											collection,
+											updateUrl: true
+										});
+									}
+								}, String(item.id)) : /* @__PURE__ */ jsx("span", {
 									className: "text-sm truncate",
 									children: item.label
-								})
-							}, String(item.id));
+								}, String(item.id));
+								return /* @__PURE__ */ jsx("div", {
+									className: "flex flex-row items-center gap-1 truncate",
+									children: item.data ? /* @__PURE__ */ jsx(EntityPreviewBindingData, {
+										size: "medium",
+										entity: item.data,
+										includeEntityLink: false,
+										includeId: false,
+										onSidePanelClick: closePopover
+									}) : /* @__PURE__ */ jsx("span", {
+										className: "text-sm truncate",
+										children: item.label
+									})
+								}, String(item.id));
+							}
 							return /* @__PURE__ */ jsxs(Chip, {
 								size: "small",
 								className: cls("flex flex-row items-center gap-1 truncate"),
@@ -4975,7 +5106,7 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 						children: resolvedPlaceholder
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex items-center flex-shrink-0",
-						children: [!multiple && selectedItems.length === 1 && selectedItems[0]?.data && /* @__PURE__ */ jsx(Tooltip, {
+						children: [size !== "compact" && !multiple && selectedItems.length === 1 && selectedItems[0]?.data && /* @__PURE__ */ jsx(Tooltip, {
 							title: `Open ${selectedItems[0].label}`,
 							children: /* @__PURE__ */ jsx(IconButton, {
 								component: "div",
@@ -4997,7 +5128,7 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 								children: /* @__PURE__ */ jsx(ArrowRightToLineIcon, { size: iconSize.small })
 							})
 						}), /* @__PURE__ */ jsx(ChevronDownIcon, {
-							size: size === "small" ? iconSize.small : iconSize.medium,
+							size: size === "small" || size === "compact" ? iconSize.small : iconSize.medium,
 							className: cls("transition", isPopoverOpen ? "rotate-180" : "")
 						})]
 					})]
@@ -5008,7 +5139,7 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 			children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
 				ref: contentRef,
 				"data-relation-selector-content": true,
-				className: cls("z-50 overflow-hidden border bg-white dark:bg-surface-800 rounded-lg min-w-72", defaultBorderMixin),
+				className: cls("z-50 overflow-hidden border bg-surface-card rounded-lg min-w-72", defaultBorderMixin),
 				align: "start",
 				sideOffset: 8,
 				side: "bottom",
@@ -5086,7 +5217,7 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 												e.stopPropagation();
 											},
 											onSelect: () => onItemClick(item),
-											className: cls("flex flex-row items-center gap-1.5 m-1 p-1 rounded-xs cursor-pointer ring-offset-transparent", isSelected && "bg-surface-accent-200 dark:bg-surface-accent-950", "aria-selected:outline-hidden aria-selected:ring-2 aria-selected:ring-primary/75 aria-selected:ring-offset-2 aria-selected:bg-surface-accent-100 dark:aria-selected:bg-surface-accent-900"),
+											className: cls("flex flex-row items-center gap-1.5 m-1 p-1 rounded-xs cursor-pointer ring-offset-transparent", isSelected && "bg-surface-active", "aria-selected:outline-hidden aria-selected:bg-surface-active"),
 											children: [multiple && /* @__PURE__ */ jsx(InnerCheckBox, { checked: isSelected }), item.data ? /* @__PURE__ */ jsx("div", {
 												className: "flex flex-row items-center gap-2 min-w-0 w-full",
 												children: /* @__PURE__ */ jsx(EntityPreviewBindingData, {
@@ -5130,7 +5261,7 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 								e.stopPropagation();
 							},
 							onClick: handleCreateNew,
-							className: cls("w-full flex flex-row items-center gap-2 px-4 py-3 text-sm text-left", "text-primary hover:bg-surface-accent-50 dark:hover:bg-surface-800"),
+							className: cls("w-full flex flex-row items-center gap-2 px-4 py-3 text-sm text-left", "text-primary hover:bg-surface-hover"),
 							children: [/* @__PURE__ */ jsx(PlusIcon, { size: iconSize.smallest }), /* @__PURE__ */ jsx("span", {
 								className: "truncate",
 								children: searchString.trim() ? t("add_named", { name: searchString.trim() }) : t("add_specific", { name: collection.singularName ?? collection.name })
@@ -5147,7 +5278,7 @@ function InnerCheckBox({ checked }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cls("p-2 w-8 h-8 inline-flex items-center justify-center text-sm font-medium focus:outline-hidden transition-colors ease-in-out duration-150"),
 		children: /* @__PURE__ */ jsx("div", {
-			className: cls("border-2 relative transition-colors ease-in-out duration-150 w-4 h-4 rounded-xs flex items-center justify-center", checked ? "bg-primary text-surface-accent-100 dark:text-surface-accent-900 border-transparent" : "bg-white dark:bg-surface-accent-900 border-surface-accent-800 dark:border-surface-accent-200"),
+			className: cls("border-2 relative transition-colors ease-in-out duration-150 w-4 h-4 rounded-xs flex items-center justify-center", checked ? "bg-primary text-surface-accent-100 dark:text-surface-accent-900 border-transparent" : "bg-surface-card border-surface-accent-800 dark:border-surface-accent-500"),
 			children: checked && /* @__PURE__ */ jsx(CheckIcon, {
 				size: iconSize.smallest,
 				className: "absolute"
@@ -5392,14 +5523,14 @@ function RelationDialogBindingComponent({ propertyKey, internalValue, updateValu
 	});
 }
 /** Stable component for relation fields rendered with the inline selector */
-function RelationSelectorBindingComponent({ propertyKey, internalValue, updateValue, disabled, property }) {
+function RelationSelectorBindingComponent({ propertyKey, internalValue, updateValue, disabled, property, size }) {
 	const relProp = property;
 	return /* @__PURE__ */ jsx(TableRelationSelectorField, {
+		size: getPreviewSizeFrom(size) === "small" ? "compact" : "medium",
 		name: propertyKey,
 		internalValue,
 		updateValue,
 		disabled,
-		size: "small",
 		relation: relProp.relation,
 		fixedFilter: relProp.admin?.fixedFilter
 	});
@@ -5746,7 +5877,7 @@ var EntityTableCell = React.memo(function EntityTableCell({ children, actions, s
 	const setOnHoverFalse = useCallback(() => setOnHover(false), []);
 	const borderClass = showError ? "border-red-500" : isSelected ? "border-primary" : "border-transparent";
 	const result = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
-		className: cls("transition-colors duration-500", `flex relative h-full rounded-md p-${p} border-4`, showSaved ? "bg-primary/20 dark:bg-primary/20" : onHover && !disabled ? "bg-surface-50 dark:bg-surface-900" : "", hideOverflow ? "overflow-hidden" : "", isSelected && !showSaved ? "bg-surface-accent-50 dark:bg-surface-accent-900" : "", borderClass),
+		className: cls("transition-colors duration-500", `flex relative h-full rounded-md p-${p} border-4`, showSaved ? "bg-primary/20 dark:bg-primary/20" : onHover && !disabled ? "bg-surface-hover" : "", hideOverflow ? "overflow-hidden" : "", isSelected && !showSaved ? "bg-surface-raised" : "", borderClass),
 		ref,
 		style: {
 			justifyContent,
@@ -5780,7 +5911,7 @@ var EntityTableCell = React.memo(function EntityTableCell({ children, actions, s
 	return sortableNodeRef ? /* @__PURE__ */ jsx("div", {
 		ref: sortableNodeRef,
 		style: sortableStyle,
-		className: cls("flex-shrink-0", frozen && "sticky left-0 z-10 bg-white dark:bg-surface-900"),
+		className: cls("flex-shrink-0", frozen && "sticky left-0 z-10 bg-surface-card"),
 		...sortableAttrsWithoutTabIndex,
 		children: showError ? /* @__PURE__ */ jsx(ErrorTooltip, {
 			className: "flex h-full w-full",
@@ -6116,18 +6247,18 @@ var CollectionRowActions = function CollectionRowActions({ entity, collection, p
 	const hasDraft = (collection ? getLocalChangesBackup(collection) : false) ? getEntityFromCache(path + "/" + entity.id) : false;
 	const iconSize = "small";
 	const content = /* @__PURE__ */ jsxs("div", {
-		className: cls("h-full flex items-center justify-center flex-col z-10", isSelected ? "bg-surface-accent-50 dark:bg-surface-accent-900" : "bg-surface-50/90 dark:bg-surface-900/90", frozen ? "sticky left-0" : ""),
+		className: cls("h-full flex items-center justify-center flex-col z-10", isSelected ? "bg-surface-raised" : "bg-surface-card group-hover:bg-surface-card-hover", frozen ? "sticky left-0" : ""),
 		onClick: useCallback((event) => {
 			event.stopPropagation();
 		}, []),
 		style: {
 			width,
-			position: frozen ? "sticky" : "initial",
+			position: frozen ? "sticky" : "relative",
 			left: frozen ? 0 : "initial",
 			contain: "strict"
 		},
 		children: [(hasActions || selectionEnabled) && /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-center gap-0.5",
+			className: cls("absolute inset-0 flex items-center justify-center gap-0.5", isSelected ? "bg-surface-raised" : "bg-surface-card group-hover:bg-surface-card-hover opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-100"),
 			children: [
 				uncollapsedActions.map((action, index) => {
 					const isEditAction = action.key === "edit";
@@ -6196,7 +6327,7 @@ var CollectionRowActions = function CollectionRowActions({ entity, collection, p
 					})
 				})
 			]
-		}), !hideId && size !== "xs" && /* @__PURE__ */ jsx("div", {
+		}), !hideId && /* @__PURE__ */ jsx("div", {
 			className: "w-[138px] overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2 align-center justify-center flex items-center gap-1",
 			onClick: (event) => {
 				event.stopPropagation();
@@ -6212,7 +6343,7 @@ var CollectionRowActions = function CollectionRowActions({ entity, collection, p
 		return /* @__PURE__ */ jsx("div", {
 			ref: sortableNodeRef,
 			style: sortableStyle,
-			className: cls("flex-shrink-0", frozen && "sticky left-0 z-10 bg-white dark:bg-surface-900"),
+			className: cls("flex-shrink-0", frozen && "sticky left-0 z-10 bg-surface-card"),
 			...sortableAttrsWithoutTabIndex,
 			children: content
 		});
@@ -6228,7 +6359,7 @@ function CollectionTableToolbar({ actions, actionsStart, loading, onTextSearch,
 	const addButton = actionChildren.length > 0 ? actionChildren[actionChildren.length - 1] : null;
 	const secondaryActions = actionChildren.slice(0, -1);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cls(defaultBorderMixin, "no-scrollbar min-h-[52px] overflow-x-auto px-2 md:px-4 bg-surface-50 dark:bg-surface-900 border-b flex flex-row justify-between items-center w-full"),
+		className: cls("no-scrollbar min-h-[52px] overflow-x-auto px-2 md:px-4 bg-surface-sheet flex flex-row justify-between items-center w-full"),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1 md:mr-4 mr-2 min-w-0",
 			children: [
@@ -6313,7 +6444,6 @@ function propertiesToColumns({ properties, sortable, fixedFilter, engine, Additi
 		return [{
 			key,
 			align: getTableCellAlignment(property),
-			icon: getIconForProperty(property, "small"),
 			title: property.name ?? key,
 			sortable: sortable && sortableProperty(property),
 			filter: !disabledFilter && filterable,
@@ -6838,7 +6968,7 @@ function ReferenceFilterField({ value, setValue, isArray, path, includeId = true
 					children: multiple ? t("select_references") : t("select_reference")
 				}),
 				!isArray && /* @__PURE__ */ jsxs(Label, {
-					className: "border cursor-pointer rounded-md p-2 flex items-center gap-2 bg-surface-50 dark:bg-surface-900 hover:bg-surface-100 dark:hover:bg-surface-800",
+					className: "border border-hairline cursor-pointer rounded-md p-2 flex items-center gap-2 bg-surface-field hover:bg-surface-field-hover",
 					htmlFor: nullFilterId,
 					children: [/* @__PURE__ */ jsx(Checkbox, {
 						id: nullFilterId,
@@ -6999,7 +7129,7 @@ function RelationFilterField({ value, setValue, relation, name: _name, hidden: _
 				disabled: nullFiltered,
 				size: "medium"
 			}), /* @__PURE__ */ jsxs(Label, {
-				className: "border cursor-pointer rounded-md p-2 flex items-center gap-2 bg-surface-50 dark:bg-surface-900 hover:bg-surface-100 dark:hover:bg-surface-800",
+				className: "border border-hairline cursor-pointer rounded-md p-2 flex items-center gap-2 bg-surface-field hover:bg-surface-field-hover",
 				htmlFor: nullFilterId,
 				children: [/* @__PURE__ */ jsx(Checkbox, {
 					id: nullFilterId,
@@ -7240,7 +7370,7 @@ var SelectableTable = function SelectableTable({ onValueChange, cellRenderer, on
 	return /* @__PURE__ */ jsx(SelectableTableContext.Provider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "h-full w-full flex flex-col bg-white dark:bg-surface-900",
+			className: "h-full w-full flex flex-col bg-surface-card",
 			ref,
 			children: /* @__PURE__ */ jsx(VirtualTable, {
 				data,
@@ -7263,7 +7393,7 @@ var SelectableTable = function SelectableTable({ onValueChange, cellRenderer, on
 				checkFilterCombination,
 				createFilterField: filterable ? createFilterField : void 0,
 				rowClassName: useCallback((entity) => {
-					return highlightedRow?.(entity) ? "bg-surface-accent-50 dark:!bg-surface-accent-900" : "";
+					return highlightedRow?.(entity) ? "!bg-surface-raised" : "";
 				}, [highlightedRow]),
 				className: "grow",
 				emptyComponent,
@@ -7502,7 +7632,7 @@ var CollectionTableBinding = function CollectionTableBinding({ className, style,
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		style,
-		className: cls("h-full w-full flex flex-col bg-white dark:bg-surface-900", className),
+		className: cls("h-full w-full flex flex-col bg-surface-card", className),
 		children: [!hideToolbar && /* @__PURE__ */ jsx(CollectionTableToolbar, {
 			onTextSearch,
 			title,
@@ -7977,7 +8107,7 @@ function ArrayContainerItem({ nodeRef, style, dragHandleProps, index, internalId
 	return /* @__PURE__ */ jsx("div", {
 		ref: nodeRef,
 		style,
-		className: `relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20 dark\\:hover\\:bg-surface-800/20" : ""} rounded-md opacity-100`,
+		className: `relative ${!isDragging ? "hover:bg-surface-hover" : ""} rounded-md opacity-100`,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex items-start",
 			children: [/* @__PURE__ */ jsx("div", {
@@ -8250,15 +8380,26 @@ function getRandomId$1() {
 //#endregion
 //#region src/data_import/utils/file_headers.ts
 /**
-* Extract column headers from the first row of an ExcelJS worksheet.
-* Returns an array of header strings in column order.
+* Read the header names out of the first row.
+*
+* A column whose header is blank is left out entirely, so it contributes
+* neither a field nor a value — the same intent as the old `filter(Boolean)`,
+* without the shift.
 */
-function getWorksheetHeaders(worksheet) {
-	const headers = [];
-	worksheet.getRow(1).eachCell({ includeEmpty: false }, (cell, colNumber) => {
-		headers[colNumber - 1] = cell.text ?? `Column${colNumber}`;
+function getWorksheetHeaders(headerRow) {
+	const byColumn = /* @__PURE__ */ new Map();
+	const order = [];
+	headerRow.forEach((cell, index) => {
+		if (cell === null || cell === void 0) return;
+		const name = (cell instanceof Date ? cell.toISOString() : String(cell)).trim();
+		if (!name) return;
+		byColumn.set(index, name);
+		order.push(name);
 	});
-	return headers.filter(Boolean);
+	return {
+		byColumn,
+		order
+	};
 }
 //#endregion
 //#region src/data_import/utils/transforms.ts
@@ -8449,10 +8590,15 @@ function parseCsvToObjects(text) {
 }
 //#endregion
 //#region src/data_import/utils/file_to_json.ts
-var excelJsModule;
-function loadExcelJs() {
-	excelJsModule ??= import("exceljs").then((mod) => mod.default ?? mod);
-	return excelJsModule;
+var xlsxReader;
+function loadXlsxReader() {
+	xlsxReader ??= import("read-excel-file/browser").then((mod) => {
+		const candidate = mod.default ?? mod;
+		const fn = typeof candidate === "function" ? candidate : candidate?.default;
+		if (typeof fn !== "function") throw new Error("read-excel-file did not resolve to a function");
+		return fn;
+	});
+	return xlsxReader;
 }
 /**
 * Whether this file is delimited text rather than a workbook.
@@ -8516,27 +8662,49 @@ function convertFileToJson(file) {
 			reader.onload = async function(e) {
 				try {
 					const buffer = e.target?.result;
-					const workbook = new (await (loadExcelJs())).Workbook();
-					await workbook.xlsx.load(buffer);
-					const worksheet = workbook.worksheets[0];
-					if (!worksheet) {
+					const readXlsxFile = await loadXlsxReader();
+					const magic = new Uint8Array(buffer, 0, Math.min(2, buffer.byteLength));
+					if (magic[0] !== 80 || magic[1] !== 75) {
+						reject(/* @__PURE__ */ new Error(`'${file.name}' is not a readable .xlsx workbook. Export it again as .xlsx, or save it as .csv.`));
+						return;
+					}
+					let sheets;
+					try {
+						sheets = await readXlsxFile(buffer);
+					} catch (readError) {
+						console.debug("Spreadsheet reader failed", readError);
+						reject(/* @__PURE__ */ new Error("No worksheets found in file — it has no sheets, or none this reader can open."));
+						return;
+					}
+					const firstSheet = sheets[0];
+					if (!firstSheet) {
 						reject(/* @__PURE__ */ new Error("No worksheets found in file"));
 						return;
 					}
-					const headers = getWorksheetHeaders(worksheet);
+					const [headerRow, ...dataRows] = firstSheet.data;
+					if (!headerRow) {
+						reject(/* @__PURE__ */ new Error("The spreadsheet is empty"));
+						return;
+					}
+					const headers = getWorksheetHeaders(headerRow);
+					if (headers.order.length === 0) {
+						reject(/* @__PURE__ */ new Error("The spreadsheet has no column headers in its first row"));
+						return;
+					}
 					const parsedData = [];
-					worksheet.eachRow({ includeEmpty: false }, (row, rowNumber) => {
-						if (rowNumber === 1) return;
+					for (const row of dataRows) {
+						if (row.every((cell) => cell === null || cell === void 0)) continue;
 						const obj = {};
-						row.eachCell({ includeEmpty: false }, (cell, colNumber) => {
-							const header = headers[colNumber - 1];
-							if (header && !isPrototypePollutingKey(header)) obj[header] = cell.value;
+						row.forEach((cell, index) => {
+							if (cell === null || cell === void 0) return;
+							const header = headers.byColumn.get(index);
+							if (header && !isPrototypePollutingKey(header)) obj[header] = cell;
 						});
 						parsedData.push(obj);
-					});
+					}
 					resolve({
 						data: toImportRows(parsedData),
-						propertiesOrder: headers
+						propertiesOrder: headers.order
 					});
 				} catch (err) {
 					console.error("Error parsing Excel file", err);
@@ -9426,8 +9594,8 @@ function EditorCollectionAction({ path, parentCollectionSlugs, parentEntityIds,
 }
 //#endregion
 //#region src/components/CollectionViewBinding/CollectionViewActions.tsx
-var ImportCollectionAction = lazyChunk(() => import("./import-DTkXNoBg.js").then((n) => n.t).then((m) => ({ default: m.ImportCollectionAction })));
-var ExportCollectionAction = lazyChunk(() => import("./export--arni_VY.js").then((n) => n.t).then((m) => ({ default: m.ExportCollectionAction })));
+var ImportCollectionAction = lazyChunk(() => import("./import-C4VQ0rwO.js").then((n) => n.t).then((m) => ({ default: m.ImportCollectionAction })));
+var ExportCollectionAction = lazyChunk(() => import("./export-DJoGYb89.js").then((n) => n.t).then((m) => ({ default: m.ExportCollectionAction })));
 function CollectionViewActions({ collection, relativePath, parentCollectionSlugs, parentEntityIds, onNewClick, onAddExistingClick, onMultipleDeleteClick, selectionEnabled, path, selectionController, tableController, collectionEntitiesCount, compact, children, openNewDocument }) {
 	const context = useAdminContext();
 	const { canCreate, canDelete } = usePermissions();
@@ -9444,12 +9612,13 @@ function CollectionViewActions({ collection, relativePath, parentCollectionSlugs
 		variant: "filled",
 		color: "primary",
 		children: t("add_specific", { name: collection.singularName ?? collection.name })
-	}) : /* @__PURE__ */ jsx(Button, {
+	}) : /* @__PURE__ */ jsx(IconButton, {
 		id: `add_entity_${path}`,
 		onClick: onNewClick,
 		variant: "filled",
-		color: compact ? "neutral" : "primary",
+		shape: "square",
 		size: "small",
+		"aria-label": t("add_specific", { name: collection.singularName ?? collection.name }),
 		children: /* @__PURE__ */ jsx(PlusIcon, { size: iconSize.small })
 	}));
 	const linkButton = onAddExistingClick && (largeLayout && !compact ? /* @__PURE__ */ jsx(Button, {
@@ -10031,10 +10200,10 @@ function EntityCardBinding({ entity, collection, onClick, selected, highlighted,
 		onSelectionChange?.(entity, checked);
 	};
 	return /* @__PURE__ */ jsxs(Card, {
-		className: cls("cursor-pointer overflow-hidden group relative", "transition-all duration-200", "hover:shadow-lg hover:-translate-y-0.5", selected && "ring-2 ring-primary bg-surface-accent-50 dark:bg-surface-accent-900", highlighted && !selected && "ring-2 ring-primary ring-opacity-50 bg-surface-accent-50/50 dark:bg-surface-accent-900"),
+		className: cls("cursor-pointer overflow-hidden group relative", "transition-all duration-200", "hover:shadow-lg hover:-translate-y-0.5", selected && "ring-2 ring-primary bg-surface-raised", highlighted && !selected && "ring-2 ring-primary/50 bg-surface-card-hover"),
 		onClick: handleClick,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "aspect-[4/3] relative overflow-hidden bg-surface-100 dark:bg-surface-900",
+			className: "aspect-[4/3] relative overflow-hidden bg-surface-raised",
 			children: [
 				slots.image ? /* @__PURE__ */ jsx("div", {
 					className: "w-full h-full",
@@ -10050,7 +10219,7 @@ function EntityCardBinding({ entity, collection, onClick, selected, highlighted,
 						color: "disabled"
 					})
 				}),
-				/* @__PURE__ */ jsx("div", { className: cls("absolute inset-0 bg-black/0 group-hover:bg-black/10", "transition-colors duration-200") }),
+				/* @__PURE__ */ jsx("div", { className: cls("absolute inset-0 bg-white/0 group-hover:bg-white/[0.06]", "transition-colors duration-200") }),
 				selectionEnabled && /* @__PURE__ */ jsx("div", {
 					className: cls("absolute", size === "xs" || size === "s" ? "top-1 left-1" : "top-2 left-2"),
 					onClick: handleCheckboxClick,
@@ -10221,15 +10390,15 @@ function getIdealColumnWidth(prop) {
 */
 function getRowClasses(size) {
 	switch (size) {
-		case "xs": return "py-2 px-5";
-		case "s": return "py-2.5 px-5";
-		case "m": return "py-3 px-5";
-		case "l": return "py-4 px-5";
-		case "xl": return "py-5 px-5";
-		default: return "py-3 px-5";
+		case "xs": return "py-2 px-3";
+		case "s": return "py-2.5 px-3";
+		case "m": return "py-3 px-3";
+		case "l": return "py-4 px-3";
+		case "xl": return "py-5 px-3";
+		default: return "py-3 px-3";
 	}
 }
-/** `px-5` on both sides. */
+/** `mx-2` + `px-3` on both sides: the row is an inset, rounded highlight, not an edge-to-edge bar. */
 var ROW_PADDING_WIDTH = 40;
 /** `gap-4` between every cell of the row. */
 var COLUMN_GAP = 16;
@@ -10399,9 +10568,22 @@ function CollectionListViewBinding({ collection, tableController, onEntityClick,
 	* silently drop.
 	*/
 	const sortableKeys = useMemo(() => new Set(getSortablePropertyOptions(resolvedCollection.properties).map((option) => option.key)), [resolvedCollection.properties]);
-	/** The row's identity cell: the leading column, or the title slot. */
+	/**
+	* The row's identity cell — the thumbnail, the title and the subtitle.
+	*
+	* Labelled by the title slot, because that is what the cell renders. In
+	* column mode it used to be labelled by `listProperties[0]` instead, which
+	* was right only when the two happened to be the same property and a lie
+	* whenever they were not: `listProperties: ["roles", "createdAt"]` on the
+	* users collection put a "Roles" header over the name-and-email cell, and
+	* the roles themselves appeared in no column at all — the header was the
+	* only trace of the property the developer had asked for.
+	*
+	* The first list property is therefore only consumed here when it *is* the
+	* title; otherwise it stays in {@link declaredColumns} and gets a cell.
+	*/
 	const titleColumn = useMemo(() => {
-		const key = columnMode ? resolvedCollection.listProperties?.[0] : titlePropertyKey;
+		const key = titlePropertyKey ?? (columnMode ? resolvedCollection.listProperties?.[0] : void 0);
 		if (!key) return void 0;
 		const property = resolvedCollection.properties[key];
 		return {
@@ -10427,7 +10609,7 @@ function CollectionListViewBinding({ collection, tableController, onEntityClick,
 	*/
 	const declaredColumns = useMemo(() => {
 		if (columnMode) {
-			const keys = resolvedCollection.listProperties.slice(1);
+			const keys = resolvedCollection.listProperties.filter((key) => key !== titleColumn?.key);
 			return keys.flatMap((key, index) => {
 				const property = resolvedCollection.properties[key];
 				if (!property) return [];
@@ -10479,6 +10661,7 @@ function CollectionListViewBinding({ collection, tableController, onEntityClick,
 	}, [
 		columnMode,
 		resolvedCollection,
+		titleColumn?.key,
 		slotKeys.tagsKey,
 		statusPropertyKey,
 		datePropertyKey,
@@ -10838,10 +11021,9 @@ var ListRow = React.memo(function ListRow({ entity, collection, onClick, selecte
 	]);
 	const useColumnMode = !!collection.listProperties && collection.listProperties.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cls("@container flex items-center gap-4 cursor-pointer group transition-colors duration-200 relative h-full", rowClasses, isActive ? "bg-surface-accent-100 dark:bg-surface-accent-950 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-950" : selected ? "bg-surface-accent-50 dark:bg-surface-accent-900 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-950" : highlighted ? "bg-surface-accent-50 dark:bg-surface-accent-900 hover:bg-surface-50 dark:hover:bg-surface-800/40" : "bg-white dark:bg-surface-900 hover:bg-surface-50 dark:hover:bg-surface-800/40"),
+		className: cls("@container flex items-center gap-4 cursor-pointer group transition-colors duration-200 relative h-full mx-2 rounded-lg", rowClasses, isActive || selected ? "bg-surface-active" : highlighted ? "bg-surface-hover" : "hover:bg-surface-hover"),
 		onClick: handleClick,
 		children: [
-			selected && !isActive && /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 bottom-0 w-0.5 bg-primary-500 rounded-r-full" }),
 			selectionEnabled && !combineSelection && /* @__PURE__ */ jsx("div", {
 				className: "flex-shrink-0 w-8",
 				onClick: handleCheckboxClick,
@@ -10854,14 +11036,14 @@ var ListRow = React.memo(function ListRow({ entity, collection, onClick, selecte
 			showImage && /* @__PURE__ */ jsxs("div", {
 				className: "flex-shrink-0 relative w-10 h-10",
 				children: [slots.image ? /* @__PURE__ */ jsx("div", {
-					className: cls("w-10 h-10 rounded-lg border relative overflow-hidden bg-surface-100 dark:bg-surface-900", defaultBorderMixin),
+					className: cls("w-10 h-10 rounded-lg border relative overflow-hidden bg-surface-raised", defaultBorderMixin),
 					children: /* @__PURE__ */ jsx(SlotValue, {
 						slot: slots.image,
 						size: "small",
 						fill: true
 					})
 				}) : /* @__PURE__ */ jsx("div", {
-					className: cls("w-10 h-10 rounded-lg bg-surface-100 dark:bg-surface-900 flex items-center justify-center border", defaultBorderMixin),
+					className: cls("w-10 h-10 rounded-lg bg-surface-raised flex items-center justify-center border", defaultBorderMixin),
 					children: /* @__PURE__ */ jsx(IconForView, {
 						collectionOrView: collection,
 						className: "text-surface-500 dark:text-surface-400",
@@ -11055,7 +11237,7 @@ function ListHeader({ titleColumn, columns, selectionEnabled, showImage, actions
 		onSort: column.sortable && sortIsAvailable(column.key) ? (additive) => onColumnSort(column.key, additive) : void 0
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: cls("flex items-center gap-4 px-5 py-1.5 select-none border-b bg-surface-50 dark:bg-surface-900", defaultBorderMixin),
+		className: cls("flex items-center gap-4 px-5 py-1.5 select-none border-b bg-surface-sheet", defaultBorderMixin),
 		children: [
 			selectionEnabled && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-8" }),
 			showImage && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-10" }),
@@ -11182,7 +11364,7 @@ function EntityDisplayHeader({ entity, collection, showTitle = false, className
 	return /* @__PURE__ */ jsxs("div", {
 		className: cls("flex items-start gap-4 min-w-0", className),
 		children: [hasImage && /* @__PURE__ */ jsx("div", {
-			className: "shrink-0 w-16 h-16 rounded-lg overflow-hidden flex items-center justify-center bg-surface-100 dark:bg-surface-800",
+			className: "shrink-0 w-16 h-16 rounded-lg overflow-hidden flex items-center justify-center bg-surface-raised",
 			children: /* @__PURE__ */ jsx(RoleValue, {
 				role: display.image,
 				propertyFallback: typeof display.image.value === "string" ? /* @__PURE__ */ jsx("img", {
@@ -11387,7 +11569,7 @@ function EntityViewBinding({ entity, collection, className, asPage = false, open
 				showLabel: true,
 				mode: "read",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "min-h-8 flex flex-col justify-center min-w-0 text-text-primary dark:text-text-primary-dark",
+					className: "min-h-8 flex flex-col justify-center min-w-0 text-sm text-text-primary dark:text-text-primary-dark",
 					children: /* @__PURE__ */ jsx(PropertyPreview, {
 						propertyKey: field.key,
 						value: getValueInPath(entity.values, field.key),
@@ -11503,7 +11685,7 @@ function EntityIdentityBar({ collection, collectionUrl, title, entityId, status,
 	const saveAndCloseMenu = Boolean(onSaveAndClose) && saveAndClosePlacement === "menu";
 	const saveTooltip = hasErrors ? t("fix_errors_before_saving") ?? "Fix highlighted errors before saving" : void 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cls("h-[52px] shrink-0 flex items-center gap-2 pl-1.5 pr-2 border-b", "bg-surface-50 dark:bg-surface-900", defaultBorderMixin),
+		className: cls("h-[52px] shrink-0 flex items-center gap-2 pl-1.5 pr-2", "bg-surface-sheet"),
 		children: [
 			leading,
 			onBack && /* @__PURE__ */ jsx(Tooltip, {
@@ -11615,18 +11797,16 @@ function EntityIdentityBar({ collection, collectionUrl, title, entityId, status,
 				]
 			}),
 			trailing,
-			onClose && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {
-				orientation: "vertical",
-				className: "h-5 mx-1 shrink-0"
-			}), /* @__PURE__ */ jsx(Tooltip, {
+			onClose && /* @__PURE__ */ jsx(Tooltip, {
 				title: `${t("close")} · Esc`,
 				children: /* @__PURE__ */ jsx(IconButton, {
 					size: "small",
 					onClick: onClose,
 					"aria-label": t("close"),
+					className: "ml-2",
 					children: /* @__PURE__ */ jsx(XIcon, { size: iconSize.smallest })
 				})
-			})] })
+			})
 		]
 	});
 }
@@ -11669,7 +11849,7 @@ function IdChip({ value }) {
 			type: "button",
 			onClick: copy,
 			"aria-label": `${t("copy_id")} ${value}`,
-			className: cls("hidden md:inline-flex items-center gap-1.5 shrink-0 whitespace-nowrap px-2 py-0.5 rounded-md", "font-mono text-[11px] text-text-secondary dark:text-text-secondary-dark", "bg-surface-accent-200/50 dark:bg-white/[0.055]", "hover:bg-surface-accent-200/75 dark:hover:bg-white/[0.09] transition-colors"),
+			className: cls("hidden md:inline-flex items-center gap-1.5 shrink-0 whitespace-nowrap px-2 py-0.5 rounded-md", "font-mono text-[11px] text-text-secondary dark:text-text-secondary-dark", "bg-surface-field", "hover:bg-surface-field-hover transition-colors"),
 			children: [truncated, copied ? /* @__PURE__ */ jsx(CheckIcon, { size: iconSize.smallest }) : /* @__PURE__ */ jsx(CopyIcon, { size: iconSize.smallest })]
 		})
 	});
@@ -11775,7 +11955,7 @@ function JsonPreviewBinding({ values }) {
 }
 //#endregion
 //#region src/components/EntityInspector.tsx
-var EntityHistoryView = lazyChunk(() => import("./history-C2TpoQwi.js").then((m) => ({ default: m.EntityHistoryView })));
+var EntityHistoryView = lazyChunk(() => import("./history-BBpsdTrJ.js").then((m) => ({ default: m.EntityHistoryView })));
 /**
 * Raw values and revision history, as an inspector rather than as tabs.
 *
@@ -11803,7 +11983,7 @@ function EntityInspector({ tab, onTabChange, onClose, collection, entity, formCo
 	}, [open, onClose]);
 	if (!open) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cls("relative flex flex-col shrink-0 h-full w-full max-w-md border-l", "bg-white dark:bg-surface-800", defaultBorderMixin),
+		className: cls("relative flex flex-col shrink-0 h-full w-full max-w-md border-l", "bg-surface-card", defaultBorderMixin),
 		role: "complementary",
 		"aria-label": t("inspect_record") ?? "Inspect record",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -11894,7 +12074,7 @@ var MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
 * tab's underline stopped short of the record it opens. Paired with
 * `items-stretch` on the Tabs root, which the variant leaves centred.
 */
-var ENTITY_VIEW_TAB_CLASS = "h-full data-[state=active]:bg-white dark:data-[state=active]:bg-surface-800";
+var ENTITY_VIEW_TAB_CLASS = "h-full";
 //#endregion
 //#region src/components/DetailViewBinding.tsx
 function DetailViewBinding({ entityId, ...props }) {
@@ -12135,7 +12315,7 @@ function DetailViewBindingInner({ path, entityId, selectedTab: selectedTabProp,
 	const subcollectionTabs = subcollections && subcollections.map((subcollection) => {
 		const icon = getIcon(subcollection.icon, void 0, void 0, "smallest");
 		return /* @__PURE__ */ jsx(Tab, {
-			className: cls("h-full data-[state=active]:bg-white dark:data-[state=active]:bg-surface-800", "text-sm min-w-[90px]"),
+			className: cls("h-full", "text-sm min-w-[90px]"),
 			value: subcollection.slug,
 			children: /* @__PURE__ */ jsxs("span", {
 				className: "flex items-center gap-1.5",
@@ -12191,7 +12371,7 @@ function DetailViewBindingInner({ path, entityId, selectedTab: selectedTabProp,
 		children: propertyDetailView()
 	});
 	let result = /* @__PURE__ */ jsxs("div", {
-		className: "relative flex flex-col h-full w-full bg-white dark:bg-surface-800",
+		className: "relative flex flex-col h-full w-full bg-surface-card",
 		children: [
 			/* @__PURE__ */ jsx(EntityIdentityBar, {
 				collection,
@@ -12225,7 +12405,7 @@ function DetailViewBindingInner({ path, entityId, selectedTab: selectedTabProp,
 				] })
 			}),
 			hasAdditionalViews && /* @__PURE__ */ jsx("div", {
-				className: cls("h-10 shrink-0 flex items-stretch border-b px-2 min-w-0", "bg-surface-50 dark:bg-surface-900", defaultBorderMixin),
+				className: cls("h-10 shrink-0 flex items-stretch border-b px-2 min-w-0", "bg-surface-sheet", defaultBorderMixin),
 				children: /* @__PURE__ */ jsxs(Tabs, {
 					className: "!w-full items-stretch",
 					innerClassName: "h-full",
@@ -12238,7 +12418,7 @@ function DetailViewBindingInner({ path, entityId, selectedTab: selectedTabProp,
 						customViewTabsStart,
 						/* @__PURE__ */ jsx(Tab, {
 							value: "__main_##Q$SC^#S6",
-							className: cls("h-full data-[state=active]:bg-white dark:data-[state=active]:bg-surface-800", "text-sm min-w-[90px]"),
+							className: cls("h-full", "text-sm min-w-[90px]"),
 							children: /* @__PURE__ */ jsxs("span", {
 								className: "flex items-center gap-1.5",
 								children: [getIcon(collection.icon, void 0, void 0, "smallest"), collection.singularName ?? collection.name]
@@ -12560,7 +12740,7 @@ function SplitListView({ collection, tableController, onEntityClick: externalOnE
 	});
 	const detailPanel = renderedEntityId !== void 0 ? /* @__PURE__ */ jsx("div", {
 		ref: detailPanelRef,
-		className: cls("flex-1 flex flex-col min-w-0 h-full transition-all ease-out w-full", animationPhase === "entered" ? "opacity-100 translate-x-0" : largeLayout ? "opacity-0 translate-x-8" : "opacity-0 translate-x-1/3"),
+		className: cls("flex-1 flex flex-col min-w-0 h-full transition-all ease-out w-full", largeLayout && "border-l border-hairline", animationPhase === "entered" ? "opacity-100 translate-x-0" : largeLayout ? "opacity-0 translate-x-8" : "opacity-0 translate-x-1/3"),
 		style: { transitionDuration: `${TRANSITION_DURATION}ms` },
 		children: /* @__PURE__ */ jsx(ErrorBoundary, { children: collection.defaultEntityAction === "view" && !isEditMode ? /* @__PURE__ */ jsx(DetailViewBinding, {
 			path,
@@ -12685,9 +12865,9 @@ function BoardCardBindingInner({ item, isDragging, isGroupedOver, style, collect
 		onSelectionChange?.(entity, checked);
 	}, [entity, onSelectionChange]);
 	const backgroundColor = useMemo(() => {
-		if (isDragging) return "bg-surface-100 dark:bg-surface-800";
-		if (isGroupedOver) return "bg-surface-200 dark:bg-surface-700";
-		return "bg-white dark:bg-surface-800 hover:bg-surface-50 dark:hover:bg-surface-700";
+		if (isDragging) return "bg-surface-raised";
+		if (isGroupedOver) return "bg-surface-raised";
+		return "bg-surface-card hover:bg-surface-hover";
 	}, [isDragging, isGroupedOver]);
 	const borderColor = useMemo(() => isDragging ? "ring-2 ring-primary" : "", [isDragging]);
 	const cardClassName = useMemo(() => cls("group/card p-2 flex items-start border rounded-lg cursor-pointer transition-all duration-200", defaultBorderMixin, borderColor, backgroundColor, selected ? "ring-2 ring-primary bg-primary/[0.03] dark:bg-primary/[0.06]" : "hover:shadow-sm"), [
@@ -12714,7 +12894,7 @@ function BoardCardBindingInner({ item, isDragging, isGroupedOver, style, collect
 						fill: true
 					})
 				}) : /* @__PURE__ */ jsx("div", {
-					className: cls("w-10 h-10 rounded-md bg-surface-100 dark:bg-surface-900 flex items-center justify-center transition-opacity duration-200", selectionEnabled && "group-hover/card:opacity-30", selected && "opacity-0"),
+					className: cls("w-10 h-10 rounded-md bg-surface-raised flex items-center justify-center transition-opacity duration-200", selectionEnabled && "group-hover/card:opacity-30", selected && "opacity-0"),
 					children: /* @__PURE__ */ jsx(IconForView, {
 						collectionOrView: collection,
 						color: "disabled",
@@ -14260,7 +14440,7 @@ function CreationResultDialog({ result, onClose }) {
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-2 mt-1",
 						children: [/* @__PURE__ */ jsx("code", {
-							className: "flex-grow bg-surface-100 dark:bg-surface-900 border border-surface-300 dark:border-surface-600 rounded px-3 py-2 font-mono text-base select-all",
+							className: "flex-grow bg-surface-raised border border-hairline-strong rounded px-3 py-2 font-mono text-base select-all",
 							children: result.temporaryPassword
 						}), /* @__PURE__ */ jsx(Tooltip, {
 							title: t("copy_password") ?? "Copy password",
@@ -14893,7 +15073,7 @@ function PopupFormFieldInternal({ tableKey, entityId, customFieldValidator, prop
 		children: internalForm
 	});
 	const form = /* @__PURE__ */ jsxs("div", {
-		className: `text-surface-900 dark:text-white overflow-auto rounded-xs rounded-md bg-white dark:bg-surface-800 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`,
+		className: `text-surface-900 dark:text-white overflow-auto rounded-xs rounded-md bg-surface-card ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`,
 		children: [internalForm, savingError && /* @__PURE__ */ jsx(Typography, {
 			color: "error",
 			children: savingError.message
@@ -14901,7 +15081,7 @@ function PopupFormFieldInternal({ tableKey, entityId, customFieldValidator, prop
 	});
 	const draggable = /* @__PURE__ */ jsx("div", {
 		style: { boxShadow: "0 0 0 2px rgba(128,128,128,0.2)" },
-		className: `inline-block fixed z-20 shadow-outline rounded-md bg-white dark:bg-surface-800 ${!open ? "invisible" : "visible"} cursor-grab overflow-visible`,
+		className: `inline-block fixed z-20 shadow-outline rounded-md bg-surface-card ${!open ? "invisible" : "visible"} cursor-grab overflow-visible`,
 		ref: draggableRef,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "overflow-hidden",
@@ -15475,7 +15655,7 @@ function SortButton({ tableController, properties, compact }) {
 							"aria-label": keys.length > 0 ? `${t("sort_then_by")} ${title}` : `${t("sort_by")} ${title}`,
 							disabled,
 							onClick: () => onOptionClick(key),
-							className: cls("flex items-center gap-2 px-3 py-1.5 text-sm text-left w-full", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900"),
+							className: cls("flex items-center gap-2 px-3 py-1.5 text-sm text-left w-full", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:bg-surface-hover"),
 							children: [/* @__PURE__ */ jsx("span", {
 								className: "flex-shrink-0 flex items-center",
 								children: getIconForProperty(property, "smallest")
@@ -15577,7 +15757,7 @@ function CollectionViewStartActions({ collection, relativePath, parentCollection
 	const countBadge = !iconOnlyToolbar && entitiesCount !== void 0 ? /* @__PURE__ */ jsx(Tooltip, {
 		title: t("records_in_view"),
 		children: entitiesCount === null ? /* @__PURE__ */ jsx(Skeleton, { className: "w-8 h-4 rounded-md mx-1" }) : /* @__PURE__ */ jsx("span", {
-			className: "mx-1 text-xs text-surface-accent-600 dark:text-surface-accent-400 bg-surface-100 dark:bg-surface-800 px-1.5 py-0.5 rounded tabular-nums",
+			className: "mx-1 text-xs font-mono tabular-nums text-text-secondary dark:text-text-secondary-dark",
 			children: entitiesCount.toLocaleString()
 		})
 	}, "entities_count") : null;
@@ -16418,7 +16598,7 @@ var CollectionViewBindingInner = React.memo(function CollectionViewBindingInner(
 		]
 	}) : innerView;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cls("overflow-hidden h-full w-full rounded-md flex flex-col dark:bg-surface-800", className),
+		className: cls("overflow-hidden h-full w-full rounded-md flex flex-col bg-surface-sheet", className),
 		ref: containerRef,
 		children: [
 			countFetcher,
@@ -16601,7 +16781,7 @@ function EntityIdHeaderWidget({ collection, path, idPath, openEntityMode }) {
 				children: /* @__PURE__ */ jsx(SearchIcon, { size: iconSize.small })
 			}),
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cls("my-2 rounded-lg bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-white"),
+				className: cls("my-2 rounded-lg bg-surface-sheet text-surface-900 dark:text-white"),
 				children: [/* @__PURE__ */ jsx("form", {
 					noValidate: true,
 					onSubmit: (e) => {
@@ -16632,7 +16812,7 @@ function EntityIdHeaderWidget({ collection, path, idPath, openEntityMode }) {
 							},
 							value: searchString,
 							className: "flex-grow",
-							inputClassName: cls("rounded-lg bg-white dark:bg-surface-900", focusedDisabled)
+							inputClassName: cls("rounded-lg bg-surface-card", focusedDisabled)
 						}), /* @__PURE__ */ jsx(Button, {
 							variant: "text",
 							disabled: !searchString.trim(),
@@ -17499,7 +17679,7 @@ function EditViewBindingInner({ path, entityId, selectedTab: selectedTabProp, co
 	const subcollectionTabs = subcollections && subcollections.map((subcollection) => {
 		const icon = getIcon(subcollection.icon, void 0, void 0, "smallest");
 		return /* @__PURE__ */ jsx(Tab, {
-			className: cls("h-full data-[state=active]:bg-white dark:data-[state=active]:bg-surface-800", "text-sm min-w-[90px]"),
+			className: cls("h-full", "text-sm min-w-[90px]"),
 			value: subcollection.slug,
 			children: /* @__PURE__ */ jsxs("span", {
 				className: "flex items-center gap-1.5",
@@ -17543,7 +17723,7 @@ function EditViewBindingInner({ path, entityId, selectedTab: selectedTabProp, co
 		})
 	}) : null;
 	let result = /* @__PURE__ */ jsxs("div", {
-		className: "relative flex flex-col h-full w-full bg-white dark:bg-surface-800",
+		className: "relative flex flex-col h-full w-full bg-surface-card",
 		children: [
 			/* @__PURE__ */ jsx(EntityIdentityBar, {
 				collection,
@@ -17602,7 +17782,7 @@ function EditViewBindingInner({ path, entityId, selectedTab: selectedTabProp, co
 				] })
 			}),
 			hasAdditionalViews && /* @__PURE__ */ jsx("div", {
-				className: cls("h-10 shrink-0 flex items-stretch border-b px-2 min-w-0", "bg-surface-50 dark:bg-surface-900", defaultBorderMixin),
+				className: cls("h-10 shrink-0 flex items-stretch border-b px-2 min-w-0", "bg-surface-sheet", defaultBorderMixin),
 				children: /* @__PURE__ */ jsxs(Tabs, {
 					className: "!w-full items-stretch",
 					innerClassName: "h-full",
@@ -17615,7 +17795,7 @@ function EditViewBindingInner({ path, entityId, selectedTab: selectedTabProp, co
 						customViewTabsStart,
 						/* @__PURE__ */ jsx(Tab, {
 							value: "__main_##Q$SC^#S6",
-							className: cls("h-full data-[state=active]:bg-white dark:data-[state=active]:bg-surface-800", "text-sm min-w-[90px]"),
+							className: cls("h-full", "text-sm min-w-[90px]"),
 							children: /* @__PURE__ */ jsxs("span", {
 								className: "flex items-center gap-1.5",
 								children: [getIcon(collection.icon, void 0, void 0, "smallest"), collection.singularName ?? collection.name]
@@ -19408,7 +19588,7 @@ function SideDialogView({ offsetPosition, panel, panelIndex, isTopPanel }) {
 			onInteractOutside: !isTopPanel ? preventDismiss : void 0,
 			title: "Side dialog " + panel?.key,
 			children: [panel && /* @__PURE__ */ jsx("div", {
-				className: "transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-surface-800 ",
+				className: "transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-surface-card ",
 				style: {
 					width: panel.width,
 					transform: `translateX(-${offsetPosition * 200}px)`
@@ -20475,7 +20655,7 @@ function MapFieldBinding({ propertyKey, value, showError, error, disabled, prope
 					expanded
 				} });
 			},
-			innerClassName: "px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900",
+			innerClassName: "px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-surface-card",
 			title: /* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
 				propertyKey,
 				icon: getIconForProperty(property, "small"),
@@ -20498,7 +20678,7 @@ function MapFieldBinding({ propertyKey, value, showError, error, disabled, prope
 //#endregion
 //#region src/form/field_bindings/MarkdownEditorFieldBinding.tsx
 var RichTextEditor = lazyChunk(() => import("./editor.js").then((m) => ({ default: m.RichTextEditor })));
-var loadMarkdownUtils = () => import("./markdown-CklalUUk.js").then((n) => n.t);
+var loadMarkdownUtils = () => import("./markdown-CCqp8ibf.js").then((n) => n.t);
 var _markdownUtils = null;
 var getMarkdownUtils = async () => {
 	if (!_markdownUtils) _markdownUtils = await loadMarkdownUtils();
@@ -20683,7 +20863,7 @@ function MarkdownEditorFieldBinding({ property, propertyKey, value, setValue, in
 * and tables to the specified properties.
 * @group Form fields
 */
-function MultiSelectFieldBinding({ propertyKey, value, setValue, error, showError, disabled, property, includeDescription, hideLabel, size = "large", autoFocus }) {
+function MultiSelectFieldBinding({ propertyKey, value, setValue, error, showError, disabled, property, includeDescription, hideLabel, size = "small", autoFocus }) {
 	const of = property.of;
 	if (!of) throw Error("Using wrong component ArrayEnumSelect");
 	if (Array.isArray(of)) throw Error("Using array properties instead of single one in `of` in ArrayProperty");
@@ -20819,7 +20999,7 @@ function ReferenceFieldBindingInternal({ propertyKey, value, setValue, error, sh
 		}), !refValue && /* @__PURE__ */ jsx("div", {
 			className: "justify-center text-left",
 			children: /* @__PURE__ */ jsxs(EntityPreviewContainer, {
-				className: cls("px-6 h-12 text-sm font-medium flex items-center gap-6", disabled || isSubmitting ? "text-surface-accent-500" : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800"),
+				className: cls("px-6 h-12 text-sm font-medium flex items-center gap-6", disabled || isSubmitting ? "text-surface-accent-500" : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-hover group-hover:bg-surface-hover"),
 				onClick: onEntryClick,
 				size: "medium",
 				children: [/* @__PURE__ */ jsx(IconForView, {
@@ -20941,7 +21121,7 @@ function RepeatFieldBinding({ propertyKey, value, error, showError, isSubmitting
 * and tables to the specified properties.
 * @group Form fields
 */
-function SelectFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, touched, property, includeDescription, hideLabel, size = "large" }) {
+function SelectFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, touched, property, includeDescription, hideLabel, size = "small" }) {
 	const enumValues = resolveEnumValues(property.enum ?? []);
 	useClearRestoreValue({
 		property,
@@ -21011,7 +21191,7 @@ function StorageItemPreview({ name, property, value, onRemove, disabled, size, p
 		className: cls("relative border-box flex items-center justify-center", size === "large" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]", paperMixin, className),
 		children: [
 			!placeholder && !disabled && /* @__PURE__ */ jsx("div", {
-				className: "absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-surface-900",
+				className: "absolute rounded-full -top-2 -right-2 z-10 bg-surface-card",
 				children: /* @__PURE__ */ jsx(Tooltip, {
 					asChild: true,
 					title: t("remove"),
@@ -21303,7 +21483,7 @@ function StorageUpload({ property, name, value, setInternalValue, onChange, mult
 * and tables to the specified properties.
 * @group Form fields
 */
-var SwitchFieldBinding = function SwitchFieldBinding({ propertyKey, value, setValue, error, showError, autoFocus, disabled, size = "large", property, includeDescription, hideLabel }) {
+var SwitchFieldBinding = function SwitchFieldBinding({ propertyKey, value, setValue, error, showError, autoFocus, disabled, size = "small", property, includeDescription, hideLabel }) {
 	useClearRestoreValue({
 		property,
 		value,
@@ -21341,7 +21521,7 @@ var SwitchFieldBinding = function SwitchFieldBinding({ propertyKey, value, setVa
 * and tables to the specified properties.
 * @group Form fields
 */
-function TextFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, hideLabel, size = "large" }) {
+function TextFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, hideLabel, size = "small" }) {
 	let multiline;
 	let url;
 	if (property.type === "string") {
@@ -21396,7 +21576,7 @@ function TextFieldBinding({ propertyKey, value, setValue, error, showError, disa
 						autoFocus,
 						disabled,
 						"aria-label": accessibleName,
-						className: cls("rounded-md resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3", label ? "pt-8 pb-2" : "py-2", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", showError && error ? "text-red-500 dark:text-red-600" : "")
+						className: cls("rounded-md resize-none w-full outline-none text-sm bg-transparent min-h-[64px] px-3", label ? "pt-8 pb-2" : "py-2", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", showError && error ? "text-red-500 dark:text-red-600" : "")
 					}),
 					property.admin?.clearable && /* @__PURE__ */ jsx("div", {
 						className: "flex flex-row justify-center items-center absolute h-full right-0 top-0 mr-4",
@@ -21451,7 +21631,7 @@ function TextFieldBinding({ propertyKey, value, setValue, error, showError, disa
 * Vector object structure expected by Rebase driver.
 * @group Form fields
 */
-function VectorFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, hideLabel, size = "large" }) {
+function VectorFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, hideLabel, size = "small" }) {
 	const isVectorObject = (val) => {
 		return typeof val === "object" && val !== null && "value" in val;
 	};
@@ -21499,7 +21679,7 @@ function VectorFieldBinding({ propertyKey, value, setValue, error, showError, di
 				children: /* @__PURE__ */ jsx("div", {
 					className: "w-full",
 					children: !isEditing ? /* @__PURE__ */ jsxs("div", {
-						className: cls("flex flex-col gap-3 p-4 rounded-xl border bg-surface-50/50 dark:bg-surface-800/20 backdrop-blur-sm transition-all duration-200", defaultBorderMixin),
+						className: cls("flex flex-col gap-3 p-4 rounded-xl border bg-surface-field transition-all duration-200", defaultBorderMixin),
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "flex items-center justify-between flex-wrap gap-2",
 							children: [/* @__PURE__ */ jsxs("div", {
@@ -21511,7 +21691,7 @@ function VectorFieldBinding({ propertyKey, value, setValue, error, showError, di
 										children: isPopulated ? `${arrayValue.length} Dimensions` : "Empty Vector"
 									}),
 									isPopulated && /* @__PURE__ */ jsx("span", {
-										className: "text-xs text-text-secondary dark:text-text-secondary-dark px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-800 font-medium",
+										className: "text-xs text-text-secondary dark:text-text-secondary-dark px-2 py-0.5 rounded-full bg-surface-raised font-medium",
 										children: "Embedding"
 									})
 								]
@@ -21541,11 +21721,11 @@ function VectorFieldBinding({ propertyKey, value, setValue, error, showError, di
 								]
 							})]
 						}), showValues && isPopulated && /* @__PURE__ */ jsx("div", {
-							className: "mt-1 p-3 rounded-lg bg-surface-100/50 dark:bg-surface-900/40 border border-surface-200/50 dark:border-surface-800/50 max-h-36 overflow-y-auto font-mono text-[11px] leading-relaxed text-text-secondary dark:text-text-secondary-dark break-all selection:bg-primary-100 dark:selection:bg-primary-900/40",
+							className: "mt-1 p-3 rounded-lg bg-surface-well border border-hairline max-h-36 overflow-y-auto font-mono text-[11px] leading-relaxed text-text-secondary dark:text-text-secondary-dark break-all selection:bg-primary-100 dark:selection:bg-primary-900/40",
 							children: arrayValue.join(", ")
 						})]
 					}) : /* @__PURE__ */ jsxs("div", {
-						className: cls("flex flex-col gap-2 p-4 rounded-xl border bg-surface-50/20 dark:bg-surface-800/10", defaultBorderMixin),
+						className: cls("flex flex-col gap-2 p-4 rounded-xl border bg-surface-field", defaultBorderMixin),
 						children: [/* @__PURE__ */ jsx(TextField, {
 							size,
 							"aria-label": `${property.name ?? propertyKey} vector values`,
@@ -21625,7 +21805,7 @@ var inRange = (n, [min, max]) => n >= min && n <= max;
 *
 * @group Form fields
 */
-function GeopointFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, hideLabel, size = "large" }) {
+function GeopointFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, hideLabel, size = "small" }) {
 	const coordinates = readCoordinates(value);
 	const [latText, setLatText] = useState(() => coordinates ? String(coordinates.latitude) : "");
 	const [lngText, setLngText] = useState(() => coordinates ? String(coordinates.longitude) : "");
@@ -21763,7 +21943,7 @@ function humanSize(bytes) {
 *
 * @group Form fields
 */
-function BinaryFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, hideLabel, size = "large" }) {
+function BinaryFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, hideLabel, size = "small" }) {
 	const [text, setText] = useState(typeof value === "string" ? value : "");
 	const [isEditing, setIsEditing] = useState(false);
 	useEffect(() => {
@@ -21805,7 +21985,7 @@ function BinaryFieldBinding({ propertyKey, value, setValue, error, showError, di
 				children: /* @__PURE__ */ jsx("div", {
 					className: "w-full",
 					children: !isEditing ? /* @__PURE__ */ jsxs("div", {
-						className: cls("flex items-center justify-between gap-2 p-4 rounded-xl border bg-surface-50/50 dark:bg-surface-800/20", defaultBorderMixin),
+						className: cls("flex items-center justify-between gap-2 p-4 rounded-xl border bg-surface-field", defaultBorderMixin),
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "flex items-center gap-2.5 min-w-0",
 							children: [/* @__PURE__ */ jsx("div", { className: `w-2.5 h-2.5 rounded-full shrink-0 ${isPopulated ? "bg-emerald-500" : "bg-surface-300 dark:bg-surface-600"}` }), /* @__PURE__ */ jsx("span", {
@@ -22068,7 +22248,7 @@ function SingleRelationFieldBinding({ propertyKey, value, size, error, showError
 		}), !value && /* @__PURE__ */ jsx("div", {
 			className: "justify-center text-left",
 			children: /* @__PURE__ */ jsxs(EntityPreviewContainer, {
-				className: cls("px-6 h-12 text-sm font-medium flex items-center gap-6", disabled || isSubmitting ? "text-surface-accent-500" : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800"),
+				className: cls("px-6 h-12 text-sm font-medium flex items-center gap-6", disabled || isSubmitting ? "text-surface-accent-500" : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-hover group-hover:bg-surface-hover"),
 				onClick: onEntryClick,
 				size: "medium",
 				children: [/* @__PURE__ */ jsx(IconForView, {
@@ -22097,7 +22277,7 @@ function SingleRelationFieldBinding({ propertyKey, value, size, error, showError
 * and tables to the specified properties.
 * @group Form fields
 */
-function UserSelectFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, touched, property, includeDescription, hideLabel, size = "large" }) {
+function UserSelectFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, touched, property, includeDescription, hideLabel, size = "small" }) {
 	const selectorSize = size;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		!hideLabel && /* @__PURE__ */ jsx(PropertyIdCopyTooltip, {
@@ -23518,7 +23698,7 @@ function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified
 			context: formContext,
 			partOfArray: false,
 			minimalistView: false,
-			size: "large",
+			size: "small",
 			autoFocus: autoFocusKey === field.key
 		};
 		return /* @__PURE__ */ jsx("div", {
@@ -24206,6 +24386,7 @@ function toSerializableBaseFields(property) {
 	if (property.propertyConfig) result.propertyConfig = property.propertyConfig;
 	if (property.columnName) result.columnName = property.columnName;
 	if (property.excludeFromApi !== void 0) result.excludeFromApi = property.excludeFromApi;
+	if (property.access !== void 0) result.access = property.access;
 	if (property.defaultValue !== void 0) result.defaultValue = property.defaultValue;
 	if (property.conditions) result.conditions = property.conditions;
 	if (property.metadata) result.metadata = property.metadata;
@@ -24232,6 +24413,7 @@ function toSerializableProperty(property) {
 			if (sp.userSelect) result.userSelect = sp.userSelect;
 			if (sp.email) result.email = sp.email;
 			if (sp.url) result.url = sp.url;
+			if (sp.autoValue) result.autoValue = sp.autoValue;
 			if (sp.validation) {
 				const { matches, ...restValidation } = sp.validation;
 				const serializedValidation = { ...restValidation };
@@ -24253,6 +24435,8 @@ function toSerializableProperty(property) {
 			if (np.validation) result.validation = np.validation;
 			if (np.isId !== void 0) result.isId = np.isId;
 			if (np.enum) result.enum = np.enum;
+			if (np.precision !== void 0) result.precision = np.precision;
+			if (np.scale !== void 0) result.scale = np.scale;
 			return result;
 		}
 		case "boolean": {
@@ -24908,4 +25092,4 @@ function getFullIdPath(propertyKey, propertyNamespace) {
 //#endregion
 export { NAVIGATION_DEFAULT_GROUP_NAME as $, getEntityTitlePropertyKeyForEntity as $n, getCollectionBySlugWithin as $t, getFieldId as A, NumberPropertyPreview as An, convertDataToEntity as At, MapFieldBinding as B, RelationPreview as Bn, detectCsvDelimiter as Bt, EntityFormBinding as C, ReadOnlyFieldBinding as Cn, getIconForProperty as Cr, EntityCardBinding as Ct, getDefaultFieldConfig as D, ArrayOfMapsPreview as Dn, getResolvedPropertyInPath as Dr, useCollectionEditorDialogsState as Dt, DEFAULT_FIELD_CONFIGS as E, FieldHelperText as En, getPropertyInPath$1 as Er, ConfigControllerProvider as Et, SelectFieldBinding as F, ArrayOneOfPreview as Fn, ImportSaveInProgress as Ft, useSelectionDialog as G, SidePanelControllerContext as Gn, SearchIconsView as Gt, DateTimeFieldBinding as H, InlineEntityListPreview as Hn, parseCsvToObjects as Ht, RepeatFieldBinding as I, ArrayOfStringsPreview as In, IMPORT_BATCH_SIZE as It, useBuildUrlController as J, useCollectionRegistryController as Jn, BreadcrumbsProvider as Jt, SelectionTableBinding as K, useSidePanel as Kn, FieldCaption as Kt, ReferenceFieldBinding as L, ArrayPropertyEnumPreview as Ln, saveImportedEntities as Lt, TextFieldBinding as M, DatePreview as Mn, processValueMapping as Mt, SwitchFieldBinding as N, KeyValuePreview as Nn, getInferenceType as Nt, getDefaultFieldId as O, PropertyPreview as On, isReferenceProperty as Or, ImportNewPropertyFieldPreview as Ot, StorageUploadFieldBinding as P, MapPropertyPreview as Pn, useImportConfig as Pt, useResolvedCollections as Q, getEntityTitlePropertyKey as Qn, addInitialSlash as Qt, MultiSelectFieldBinding as R, ArrayEnumPreview as Rn, ImportFileUpload as Rt, isSchemaChangeCancelled as S, useClearRestoreValue as Sn, getDefaultPropertiesOrder as Sr, CollectionCardViewBinding as St, PropertyFieldBinding as T, LabelWithIcon as Tn, getPropertiesWithPropertiesOrder as Tr, useCollectionEditorController as Tt, BlockFieldBinding as U, ReferencePreview as Un, ArrayContainer as Ut, KeyValueFieldBinding as V, ArrayOfReferencesPreview as Vn, parseCsvRows as Vt, ArrayOfReferencesFieldBinding as W, EntityPreviewBinding as Wn, PropertyConfigBadge as Wt, useTopLevelNavigation as X, useResolvedUser as Xn, resolveEntityView as Xt, useBuildNavigationStateController as Y, getUserLabel as Yn, resolveEntityAction as Yt, useResolvedViews as Z, getEntityPreviewKeys as Zn, mergeEntityActions as Zt, useCollectionsConfigController as _, useNavigationStateController as _n, LABEL_ICON_SIZE as _r, editEntityAction as _t, namespaceToPropertiesPath as a, resolveCollectionPathIds$1 as an, SkeletonPropertyComponent as ar, getEntityViewWidth as at, asUnavailable as b, SelectableTableContext as bn, PropertyIdCopyTooltip as br, DetailViewBinding as bt, buildCollectionGenerationCallback as c, useSelectionController as cn, renderSkeletonImageThumbnail as cr, useSafeSnackbarController as ct, fromSerializableCollectionConfigs as d, SelectableTable as dn, ImagePreview as dr, getInitialEntityValues as dt, getCollectionPathsCombinations as en, ArrayPropertyPreview as er, useBuildCollectionRegistryController as et, fromSerializableProperties as f, CollectionRowActions as fn, EmptyValue as fr, removeEmptyContainers as ft, toSerializableProperty as g, NavigationStateContext as gn, FieldBlock as gr, deleteEntityAction as gt, toSerializableProperties as h, useUrlController as hn, RecordMeta as hr, copyEntityAction as ht, namespaceToPropertiesOrderPath as i, removeTrailingSlash$1 as in, StorageThumbnailInternal as ir, buildSidePanelsFromUrl as it, VectorFieldBinding as j, BooleanPreview as jn, flattenEntry as jt, getFieldConfig as k, UserPreview as kn, isRelationProperty as kr, DataNewPropertiesMapping as kt, validateCollectionJson as l, VirtualTableInput$1 as ln, renderSkeletonText as lr, extractTouchedValues as lt, toSerializableCollectionConfig as m, UrlContext as mn, FormRail as mr, CollectionViewBinding as mt, getFullIdPath as n, removeInitialAndTrailingSlashes$1 as nn, EnumValuesChip as nr, resolveNavigationFrom as nt, CollectionGenerationApiError as o, resolveOpenEntityMode as on, renderSkeletonCaptionText as or, useBuildSidePanel as ot, fromSerializableProperty as p, useAdminContext as pn, FormSections as pr, zodToFormErrors as pt, SideDialogs as q, CollectionRegistryContext as qn, useBreadcrumbsController as qt, idToPropertiesPath as r, removeInitialSlash as rn, StorageThumbnail as rr, useResolvedNavigationFrom as rt, DEFAULT_COLLECTION_GENERATION_ENDPOINT as s, resolveViewMode as sn, renderSkeletonIcon as sr, EditViewBinding as st, getFullId as t, getLastSegment$1 as tn, StringPropertyPreview as tr, useHistory as tt, fromSerializableCollectionConfig as u, CollectionTableBinding as un, UrlComponentPreview as ur, getChanges as ut, LiveSchemaError as v, useSideDialogsController as vn, isSelfLabellingProperty as vr, resetPasswordAction as vt, EntityForm as w, LabelWithIconAndTooltip as wn, getIconForWidget as wr, CollectionViewActions as wt, createLiveSchemaClient as x, ArrayCustomShapedFieldBinding as xn, getBracketNotation as xr, EntityViewBinding as xt, SchemaChangeCancelled as y, SideDialogsControllerContext as yn, spanClass as yr, CreationResultDialog as yt, MarkdownEditorFieldBinding as z, ArrayOfStorageComponentsPreview as zn, convertFileToJson as zt };
 
-//# sourceMappingURL=util-DE1WQW6h.js.map
+//# sourceMappingURL=util-4oPxPkbp.js.map