@rebasepro/cms 0.22.0 → 0.23.0

package/dist/{util-CyIcgnv2.js → util-DybQBkug.js}

@@ -1,14 +1,14 @@
-import { n as getThumbnailMeasure, r as sanitizeUrl, t as getPreviewSizeFrom } from "./util-DB31IoJE.js";
+import { a as isEmptyPreviewValue, i as getThumbnailMeasure, n as getDatePropertyTimezone, o as sanitizeUrl, r as getPreviewSizeFrom, t as getDatePropertyMode } from "./util-CC0ozHoD.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, shallowEqual } from "fast-equals";
 import { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, Badge, BooleanSwitchWithLabel, Button, CHIP_COLORS, CHIP_SEED_KEYS, CalendarIcon, Card, CardView, CenteredView, CheckCircleIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, Chip, CircleIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, ColumnsIcon, CopyIcon, DateTimeField, Dialog, DialogActions, DialogContent, DialogTitle, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderUpIcon, FunctionSquareIcon, GlobeIcon, HandleIcon, HashIcon, HistoryIcon, IconButton, ImageOffIcon, KanbanIcon, KanbanView, KeyRoundIcon, Label, LayoutGridIcon, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListView, LoadingButton, LucideIconByName, MailIcon, Markdown, Maximize2Icon, Menu, MenuItem, MinusIcon, MoreVerticalIcon, MultiSelect, MultiSelectItem, PanelLeftCloseIcon, PanelLeftOpenIcon, PencilIcon, PlusIcon, Popover, PopoverPrimitive, Portal, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SearchBar, SearchIcon, Select, SelectItem, Separator, SettingsIcon, Sheet, Skeleton, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, Tabs, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, Typography, Unlink2Icon, UploadIcon, UserIcon, VirtualTable, VirtualTableDateField, VirtualTableInput, VirtualTableInput as VirtualTableInput$1, VirtualTableNumberInput, VirtualTableSwitch, VoteIcon, XCircleIcon, XIcon, cls, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedDisabled, getColorSchemeForSeed, iconSize, lazyChunk, paperMixin, useDebouncedCallback, useOutsideAlerter, usePortalContainer } from "@rebasepro/ui";
 import { CollectionRegistry, DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE, canReadCollection, enumToObjectEntries, getArrayResolvedProperties, getDefaultValueFor, getDefaultValueFortype, getDefaultValuesFor, getEntityChildViews, getLabelOrConfigFrom, getReferenceFrom, getRelationFrom, getRelationTargetPath, getSubcollections, getTableName, isPropertyBuilder, normalizeOrderBy, normalizeToEntityRelation, resolveArrayProperties, resolveEnumValues, resolveProperty, resolveRelationProperty, resolveStorageFilenameString, resolveStoragePathString, resolveStorageSource, serializeOrderBy } from "@rebasepro/common";
-import { CONTAINER_FULL_WIDTH, CollectionScopeProvider, DEFAULT_PAGE_SIZE, EntityDisplayCache, ErrorTooltip, ErrorView, IconForView, PluginProviderStack, SIDE_PANEL_DEFAULT_WIDTH, StorageSourceContext, UnsavedChangesDialog, UserDisplay, addInitialSlash, apiBaseOf, buildEnumLabel, createFormexStub, deleteEntityWithCallbacks, entityDisplayKey, flattenKeys, getAdminEntityChildViews, getCollectionBySlugWithin, getCollectionPathsCombinations, getColorScheme, getColumnKeysForProperty, getDisplayPropertyKey, getDisplayResolver, getEntityFromCache, getEntityFromMemoryCache, getEntityImagePreviewPropertyKey, getEntityPreviewKeys, getFormFieldKeys, getIcon, getLastSegment as getLastSegment$1, getLeadingRelationTitleKey, getLocalChangesBackup, getNavigationEntriesFromPath, getParentReferencesFromPath, getPropertyInPath, getRedundantChildViewColumnIds, getRelationIncludeParams, getRowHeight, getTitlePropertyCandidates, getTitlePropertyKey, getTitlePropertyKeyForValues, hasDeclaredDisplay, iconsSearch, isDisabled, isFilterableRelation, isHidden, isReadOnly, looksLikeIdentifierValue, removeEntityFromCache, removeEntityFromMemoryCache, removeInitialAndTrailingSlashes, removeInitialAndTrailingSlashes as removeInitialAndTrailingSlashes$1, removeInitialSlash, removeTrailingSlash, removeTrailingSlash as removeTrailingSlash$1, resolveCollectionPathIds, resolveCollectionPathIds as resolveCollectionPathIds$1, resolveComponentRef, resolveDefaultSelectedView, resolveFilterOperators, resolveFormLayout, saveEntityToCache, saveEntityToMemoryCache, saveEntityWithCallbacks, useAnalyticsController, useApiBase, useApiConfig, useAuthController, useBridgeRegistration, useCollectionScope, useColumnIds, useComponentOverride, useCustomizationController, useData, useDataTableController, useFetch, useLargeLayout, useNavigationBlocker, usePermissions, useRebaseClient, useRebaseContext, useRelationSelector, useResolvedComponent, useScrollRestoration, useSlot, useSnackbarController, useStorageSource, useStorageSources, useStorageUploadController, useTranslation, useUnsavedChangesDialog, useUserConfigurationPersistence } from "@rebasepro/app";
+import { CONTAINER_FULL_WIDTH, CollectionScopeProvider, DEFAULT_PAGE_SIZE, ErrorTooltip, ErrorView, IconForView, PluginProviderStack, SIDE_PANEL_DEFAULT_WIDTH, StorageSourceContext, UnsavedChangesDialog, UserDisplay, addInitialSlash, apiBaseOf, buildEnumLabel, createFormexStub, deleteEntityWithCallbacks, entityDisplayKey, flattenKeys, getAdminEntityChildViews, getCollectionBySlugWithin, getCollectionPathsCombinations, getColorScheme, getColumnKeysForProperty, getDisplayPropertyKey, getDisplayResolver, getEntityFromCache, getEntityFromMemoryCache, getEntityImagePreviewPropertyKey, getEntityPreviewKeys, getFormFieldKeys, getIcon, getLastSegment as getLastSegment$1, getLeadingRelationTitleKey, getLocalChangesBackup, getNavigationEntriesFromPath, getParentReferencesFromPath, getPropertyInPath, getRedundantChildViewColumnIds, getRelationIncludeParams, getRowHeight, getSharedEntityDisplayCache, getTitlePropertyCandidates, getTitlePropertyKey, getTitlePropertyKeyForValues, hasDeclaredDisplay, iconsSearch, isDisabled, isFilterableRelation, isHidden, isReadOnly, looksLikeIdentifierValue, removeEntityFromCache, removeEntityFromMemoryCache, removeInitialAndTrailingSlashes, removeInitialAndTrailingSlashes as removeInitialAndTrailingSlashes$1, removeInitialSlash, removeTrailingSlash, removeTrailingSlash as removeTrailingSlash$1, resolveCollectionPathIds, resolveCollectionPathIds as resolveCollectionPathIds$1, resolveComponentRef, resolveDefaultSelectedView, resolveFilterOperators, resolveFormLayout, saveEntityToCache, saveEntityToMemoryCache, saveEntityWithCallbacks, useAnalyticsController, useApiBase, useApiConfig, useAuthController, useBridgeRegistration, useCollectionScope, useColumnIds, useComponentOverride, useCustomizationController, useData, useDataTableController, useFetch, useLargeLayout, useNavigationBlocker, usePermissions, useRebaseClient, useRebaseContext, useRelationSelector, useResolvedComponent, useScrollRestoration, useSlot, useSnackbarController, useStorageSource, useStorageSources, useStorageUploadController, useTranslation, useUnsavedChangesDialog, useUserConfigurationPersistence } from "@rebasepro/app";
 import { Field, Formex, getIn, setIn, useCreateFormex, useFormex } from "@rebasepro/forms";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { EntityReference, EntityRelation, GeoPoint, MAX_LIST_LIMIT, Vector, getCollectionDataPath, getDataSourceCapabilities, isRelationalCollectionConfig, resourceKeyOf } from "@rebasepro/types";
-import { defaultDateFormat, formatRelativeTime, getHashValue, getValueInPath, hydrateRegExp, isArrayValue, isObject, isPrototypePollutingKey, mergeDeep, pathTraversesPrototype, prettifyIdentifier, randomString, readStoredJson, toArray, writeStoredJson } from "@rebasepro/utils";
+import { defaultDateFormat, formatRelativeTime, getArrayValuesCount, getHashValue, getValueInPath, hydrateRegExp, isArrayValue, isPlainObject, isPrototypePollutingKey, mergeDeep, pathTraversesPrototype, prettifyIdentifier, randomString, readStoredJson, toArray, writeStoredJson } from "@rebasepro/utils";
 import { resolveAdminCollection } from "@rebasepro/cms-types";
 import { format } from "date-fns";
 import { Command } from "cmdk";
@@ -1353,25 +1353,14 @@ function getUserLabel(user) {
 //#endregion
 //#region src/hooks/useEntityDisplay.tsx
 /**
-* One shared store, so every surface agrees on a record and resolves it once.
-*
-* Module-level rather than a provider: two app instances on one page share a
-* cache keyed by collection path and record id, which *is* the same record.
-* Nothing here is user-specific — a resolver that reads per-user data must
-* invalidate on sign-out, which {@link useEntityDisplayCache} exposes.
-*/
-var sharedCache;
-/**
 * The store behind {@link useEntityDisplay}, for invalidating after a write.
 *
-* Built on first use rather than at module scope. Importing a module should not
-* construct anything: it runs during SSR where there is nothing to cache, and it
-* made this module unimportable from any test that stubs `@rebasepro/app` —
-* which several do, and which is a legitimate thing for them to do.
+* The app's one shared store, so every surface agrees on a record and resolves
+* it once, and so it is emptied with the rest of the session's caches when the
+* user signs out.
 */
 function useEntityDisplayCache() {
-	if (!sharedCache) sharedCache = new EntityDisplayCache();
-	return sharedCache;
+	return getSharedEntityDisplayCache();
 }
 /**
 * What fills one display role of one record.
@@ -1936,13 +1925,24 @@ function NestedEntityPreviewBoundary({ children }) {
 		children
 	});
 }
+var EntityPreviewLayoutContext = React$1.createContext("card");
+function useEntityPreviewLayout() {
+	return React$1.useContext(EntityPreviewLayoutContext);
+}
+/** Lays out the previews below it as rows. See {@link EntityPreviewLayout}. */
+function RowEntityPreviewLayout({ children }) {
+	return /* @__PURE__ */ jsx(EntityPreviewLayoutContext.Provider, {
+		value: "row",
+		children
+	});
+}
 //#endregion
 //#region src/components/EntityPreviewBinding.tsx
 /**
 * This component contains the main logic and content for displaying a entity preview,
 * without any container wrapper. Used internally by EntityPreviewBinding.
 */
-function EntityPreviewBindingData({ actions, collection: collectionProp, previewKeys, size = "medium", includeId = true, onSidePanelClick, includeTitle = true, includeEntityLink = true, includeImage = true, entity }) {
+function EntityPreviewBindingData({ actions, collection: collectionProp, previewKeys, size = "medium", includeId = true, onSidePanelClick, includeTitle = true, includeEntityLink = true, includeImage = true, layout = "card", entity }) {
 	const authController = useAuthController();
 	const analyticsController = useAnalyticsController();
 	const sidePanelController = useSidePanel();
@@ -1972,8 +1972,32 @@ function EntityPreviewBindingData({ actions, collection: collectionProp, preview
 	const ofProp = imageProperty && "of" in imageProperty ? imageProperty.of : void 0;
 	const usedImageProperty = ofProp ? Array.isArray(ofProp) ? ofProp[0] : ofProp : imageProperty;
 	const restProperties = listProperties.filter((p) => p !== titleProperty && p !== imagePropertyKey);
+	const openInSidePanel = () => {
+		onSidePanelClick?.(entity);
+		analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
+			path: entity.path,
+			entityId: entity.id
+		});
+		sidePanelController.open({
+			entityId: entity.id,
+			path: entity.path,
+			collection,
+			updateUrl: true
+		});
+	};
 	const imageValue = imagePropertyKey ? getValueInPath(entity.values, imagePropertyKey) : void 0;
 	const usedImageValue = imageProperty !== void 0 ? "of" in imageProperty ? (imageValue ?? []).length > 0 ? imageValue[0] : void 0 : imageValue : void 0;
+	if (layout === "row") return /* @__PURE__ */ jsx(EntityRowPreviewContent, {
+		size,
+		entity,
+		collection,
+		title: title.value ?? String(entity.id),
+		imageProperty: usedImageProperty,
+		imagePropertyKey,
+		imageValue: usedImageValue,
+		supportingKeys: restProperties,
+		onOpen: includeEntityLink ? openInSidePanel : void 0
+	});
 	return /* @__PURE__ */ jsxs(NestedEntityPreviewBoundary, { children: [
 		/* @__PURE__ */ jsxs("div", {
 			className: cls("flex shrink-0 overflow-hidden", {
@@ -2048,17 +2072,7 @@ function EntityPreviewBindingData({ actions, collection: collectionProp, preview
 					onClick: (e) => {
 						e.stopPropagation();
 						e.preventDefault();
-						onSidePanelClick?.(entity);
-						analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
-							path: entity.path,
-							entityId: entity.id
-						});
-						sidePanelController.open({
-							entityId: entity.id,
-							path: entity.path,
-							collection,
-							updateUrl: true
-						});
+						openInSidePanel();
 					},
 					children: /* @__PURE__ */ jsx(ArrowRightToLineIcon, {})
 				})
@@ -2071,6 +2085,75 @@ function EntityPreviewBindingData({ actions, collection: collectionProp, preview
 	] });
 }
 /**
+* A record as a line of a table row: its image, a title that opens it, and the
+* supporting lines that fit — one at `medium`, two at `large`. Supporting
+* values that are empty are skipped rather than drawn as an empty bar, so the
+* line under a name is the first thing the record actually has to say.
+*/
+function EntityRowPreviewContent({ size, entity, collection, title, imageProperty, imagePropertyKey, imageValue, supportingKeys, onOpen }) {
+	const maxLines = size === "large" ? 2 : 1;
+	const lines = supportingKeys.map((key) => ({
+		key,
+		property: getPropertyInPath$1(collection.properties, key),
+		value: getValueInPath(entity.values, key)
+	})).filter((line) => Boolean(line.property) && !isEmptyPreviewValue(line.value)).slice(0, maxLines);
+	const titleNode = /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		children: title
+	});
+	return /* @__PURE__ */ jsx(NestedEntityPreviewBoundary, { children: /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2.5 min-w-0 w-full text-left",
+		children: [imagePropertyKey && /* @__PURE__ */ jsx("div", {
+			className: cls("flex shrink-0 items-center justify-center overflow-hidden rounded-md", size === "large" ? "w-10 h-10" : "w-8 h-8"),
+			children: imageProperty && imageValue ? /* @__PURE__ */ jsx(PropertyPreview, {
+				property: imageProperty,
+				propertyKey: imagePropertyKey,
+				size: "small",
+				value: imageValue
+			}) : /* @__PURE__ */ jsx(IconForView, {
+				collectionOrView: collection,
+				color: "primary",
+				size: "small"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 text-sm font-medium text-text-primary dark:text-text-primary-dark",
+				children: onOpen ? /* @__PURE__ */ jsx(Tooltip, {
+					title: `See details for ${title}`,
+					asChild: true,
+					children: /* @__PURE__ */ jsx("span", {
+						role: "button",
+						tabIndex: 0,
+						className: "inline-flex min-w-0 max-w-full cursor-pointer hover:underline underline-offset-2",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: (event) => {
+							event.preventDefault();
+							event.stopPropagation();
+							onOpen();
+						},
+						onKeyDown: (event) => {
+							if (event.key !== "Enter" && event.key !== " ") return;
+							event.preventDefault();
+							event.stopPropagation();
+							onOpen();
+						},
+						children: titleNode
+					})
+				}) : titleNode
+			}), lines.map(({ key, property, value }) => /* @__PURE__ */ jsx("div", {
+				className: "truncate min-w-0 max-h-5 overflow-hidden text-xs text-text-secondary dark:text-text-secondary-dark",
+				children: /* @__PURE__ */ jsx(PropertyPreview, {
+					propertyKey: key,
+					value,
+					property,
+					size: "small"
+				})
+			}, key))]
+		})]
+	}) });
+}
+/**
 * This view is used to display a preview of a entity.
 * It is used by default in reference fields and whenever a reference is displayed.
 */
@@ -2167,6 +2250,7 @@ function InlineEntityPreview({ entity, collection: collectionProp, label, disabl
 	const content = /* @__PURE__ */ jsxs("span", {
 		tabIndex: interactive ? 0 : void 0,
 		role: interactive ? "button" : void 0,
+		onMouseDown: interactive ? (event) => event.preventDefault() : void 0,
 		onClick: interactive ? handleClick : void 0,
 		onKeyDown: interactive ? (event) => {
 			if (event.key === "Enter" || event.key === " ") handleClick(event);
@@ -2292,7 +2376,9 @@ 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) || size === "small";
+	const nested = useIsNestedEntityPreview();
+	const layout = useEntityPreviewLayout();
+	const inline = nested || Boolean(textOnly) || size === "small";
 	const { entity, dataLoading, dataLoadingError } = useFetch({
 		path: reference.path,
 		entityId: reference.id,
@@ -2346,6 +2432,14 @@ function ReferencePreviewExisting({ reference, collection, previewProperties, si
 		onClick,
 		includeEntityLink: !textOnly && includeEntityLink !== false
 	});
+	if (layout === "row" && ResolvedEntityPreview === EntityPreviewBinding) return /* @__PURE__ */ jsx(EntityPreviewBindingData, {
+		layout: "row",
+		size,
+		entity: usedEntity,
+		collection,
+		previewKeys: previewProperties,
+		includeEntityLink: !disabled && includeEntityLink !== false
+	});
 	return /* @__PURE__ */ jsx(ResolvedEntityPreview, {
 		size,
 		previewKeys: previewProperties,
@@ -2394,7 +2488,7 @@ function ArrayOfReferencesPreview({ propertyKey, value, property, size, textOnly
 	if (property?.type !== "array" || !property.of || property.of.type !== "reference") throw Error("Picked wrong preview component ArrayOfReferencesPreview");
 	const childSize = size === "medium" ? "medium" : "small";
 	const ofProperty = property.of;
-	if (nested || textOnly) return /* @__PURE__ */ jsx(InlineEntityListPreview, {
+	if (nested || textOnly || size === "small") return /* @__PURE__ */ jsx(InlineEntityListPreview, {
 		items: value ?? [],
 		renderItem: (reference, index) => /* @__PURE__ */ jsx(ReferencePreview, {
 			disabled: !ofProperty.path,
@@ -2533,7 +2627,9 @@ function RelationPreviewExisting({ relation, collection, previewProperties, size
 	const passedEntity = relation.data;
 	const ResolvedEntityPreview = useComponentOverride("EntityPreview", EntityPreviewBinding);
 	useCustomizationController();
-	const inline = useIsNestedEntityPreview() || Boolean(textOnly) || size === "small";
+	const nested = useIsNestedEntityPreview();
+	const layout = useEntityPreviewLayout();
+	const inline = nested || Boolean(textOnly) || size === "small";
 	const { entity, dataLoading, dataLoadingError } = useFetch({
 		path: relation.path,
 		entityId: passedEntity ? void 0 : relation.id,
@@ -2587,6 +2683,14 @@ function RelationPreviewExisting({ relation, collection, previewProperties, size
 		onClick,
 		includeEntityLink: !textOnly && includeEntityLink !== false
 	});
+	if (layout === "row" && ResolvedEntityPreview === EntityPreviewBinding) return /* @__PURE__ */ jsx(EntityPreviewBindingData, {
+		layout: "row",
+		size,
+		entity: usedEntity,
+		collection,
+		previewKeys: previewProperties,
+		includeEntityLink: !disabled && includeEntityLink !== false
+	});
 	return /* @__PURE__ */ jsx(ResolvedEntityPreview, {
 		size,
 		previewKeys: previewProperties,
@@ -2610,7 +2714,7 @@ function ArrayOfRelationsPreview({ propertyKey, value, property, size, textOnly
 	if (property?.type !== "array" || !property.of || property.of.type !== "relation") throw Error("Picked wrong preview component ArrayOfRelationsPreview");
 	const ofProperty = property.of;
 	const relationTargetPath = getRelationTargetPath(ofProperty);
-	if (nested || textOnly) return /* @__PURE__ */ jsx(InlineEntityListPreview, {
+	if (nested || textOnly || size === "small") return /* @__PURE__ */ jsx(InlineEntityListPreview, {
 		items: (value ?? []).map((relation) => normalizeToEntityRelation(relation, "relation", relationTargetPath)).filter((relation) => Boolean(relation)),
 		renderItem: (relation, index) => /* @__PURE__ */ jsx(RelationPreview, {
 			disabled: !ofProperty.relation,
@@ -3053,10 +3157,11 @@ function DatePreview({ date, mode = "date_time", timezone }) {
 			options.minute = "2-digit";
 		}
 		const formattedDate = new Intl.DateTimeFormat(customizationController?.locale ?? "en-US", options).format(date);
-		const tzAbbrev = new Intl.DateTimeFormat("en-US", {
+		const parts = new Intl.DateTimeFormat("en-US", {
 			timeZone: timezone,
 			timeZoneName: "short"
-		}).formatToParts(date).find((p) => p.type === "timeZoneName")?.value ?? "";
+		}).formatToParts(date);
+		const tzAbbrev = mode === "date_time" ? parts.find((p) => p.type === "timeZoneName")?.value ?? "" : "";
 		return /* @__PURE__ */ jsxs("span", {
 			className: "flex items-center gap-1 font-mono tabular-nums",
 			children: [formattedDate, tzAbbrev && /* @__PURE__ */ jsxs("span", {
@@ -3316,7 +3421,8 @@ var PropertyPreview = React.memo(function PropertyPreview(props) {
 		const date = asDate(value);
 		if (date) content = /* @__PURE__ */ jsx(DatePreview, {
 			date,
-			mode: property.mode
+			mode: getDatePropertyMode(property),
+			timezone: getDatePropertyTimezone(property)
 		});
 		else content = buildWrongValueType(propertyKey, property.type, value);
 	} else if (property.type === "reference") if (typeof property.path === "string") if (typeof value === "object" && value !== null && "isEntityReference" in value && value.isEntityReference()) content = /* @__PURE__ */ jsx(ReferencePreview, {
@@ -3344,7 +3450,7 @@ var PropertyPreview = React.memo(function PropertyPreview(props) {
 				relation: entityRelation,
 				textOnly: props.textOnly
 			}, `preview_rel_${propertyKey}_${index}`);
-			content = nested || props.textOnly ? /* @__PURE__ */ jsx(InlineEntityListPreview, {
+			content = nested || props.textOnly || size === "small" ? /* @__PURE__ */ jsx(InlineEntityListPreview, {
 				items: relations,
 				renderItem: renderRelation
 			}) : /* @__PURE__ */ jsx("div", {
@@ -3562,16 +3668,16 @@ function ReadOnlyFieldBinding({ propertyKey, value, error, showError, minimalist
 * @ignore
 */
 function useClearRestoreValue({ property, value, setValue }) {
-	const clearedValueRef = useRef(null);
+	const clearedRef = useRef(null);
 	useEffect(() => {
 		if (typeof property.admin?.disabled === "object" && Boolean(property.admin?.disabled.clearOnDisabled)) {
 			if (value != null) {
-				clearedValueRef.current = value;
+				clearedRef.current = { value };
 				setValue(null);
 			}
-		} else if (clearedValueRef.current) {
-			setValue(clearedValueRef.current);
-			clearedValueRef.current = null;
+		} else if (clearedRef.current) {
+			setValue(clearedRef.current.value);
+			clearedRef.current = null;
 		}
 	}, [property]);
 }
@@ -3679,7 +3785,7 @@ function useCellSelected(store, propertyKey, entityPath, entityId) {
 //#endregion
 //#region src/components/CollectionTableBinding/fields/VirtualTableSelect.tsx
 function VirtualTableSelect(props) {
-	const { enumValues, internalValue, disabled, small, focused, updateValue, multiple, valueType } = props;
+	const { enumValues, internalValue, disabled, small, focused, updateValue, multiple, valueType, open, onOpenChange, preview, anchorRef } = props;
 	const validValue = Array.isArray(internalValue) && multiple || !Array.isArray(internalValue) && !multiple;
 	const ref = React.useRef(null);
 	useEffect(() => {
@@ -3700,25 +3806,33 @@ function VirtualTableSelect(props) {
 	]);
 	const resolvedEnumValues = resolveEnumValues(enumValues);
 	const renderValue = (enumKey) => {
+		if (preview !== void 0) return preview;
 		return /* @__PURE__ */ jsx(EnumValuesChip, {
 			enumKey: String(enumKey),
 			enumValues,
 			size: small ? "small" : "medium"
 		}, `${enumKey}`);
 	};
-	const handleOpenChange = useCallback((open) => {
-		if (!open && ref.current) setTimeout(() => {
+	const handleOpenChange = useCallback((nextOpen) => {
+		onOpenChange?.(nextOpen);
+		if (!nextOpen && ref.current) setTimeout(() => {
 			ref.current?.focus({ preventScroll: true });
 		}, 0);
-	}, []);
+	}, [onOpenChange]);
 	return multiple ? /* @__PURE__ */ jsx(MultiSelect, {
 		invisible: true,
 		inputRef: ref,
+		size: "smallest",
 		className: "w-full h-full p-0 bg-transparent outline-none",
 		position: "item-aligned",
 		disabled,
 		includeClear: false,
+		chevron: preview === void 0,
+		anchorRef,
 		useChips: false,
+		open,
+		renderValues: preview !== void 0 ? () => preview : void 0,
+		placeholder: preview,
 		value: validValue ? internalValue.map((v) => v.toString()) : [],
 		onValueChange: onChange,
 		onOpenChange: handleOpenChange,
@@ -3739,7 +3853,11 @@ function VirtualTableSelect(props) {
 		position: "item-aligned",
 		disabled,
 		padding: false,
+		size: "smallest",
+		chevron: preview === void 0,
+		open,
 		value: validValue ? internalValue?.toString() : "",
+		placeholder: preview,
 		onValueChange: onChange,
 		onOpenChange: handleOpenChange,
 		renderValue,
@@ -3754,6 +3872,27 @@ function VirtualTableSelect(props) {
 	});
 }
 //#endregion
+//#region src/components/PickerTrigger.tsx
+/**
+* The trigger of a picker's popover, or — given an anchor — a plain child
+* beside a `Popover.Anchor` on that element.
+*
+* Both at once does not work: Radix's `Trigger` registers itself as the
+* anchor through a ref callback, and a custom anchor through an effect that
+* only reports a change. Under StrictMode the ref callback runs again after
+* the effect, the effect sees nothing new, and the popover stays anchored to
+* a trigger that the custom anchor then unmounts — it opened at the window's
+* top-left corner. The pickers open and close themselves, so they lose
+* nothing by leaving the `Trigger` out.
+*/
+function PickerTrigger({ anchorRef, children }) {
+	if (!anchorRef) return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
+		asChild: true,
+		children
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { virtualRef: anchorRef }), children] });
+}
+//#endregion
 //#region src/components/UserSelector.tsx
 var DEFAULT_PAGE_SIZE$2 = 10;
 /**
@@ -3849,9 +3988,30 @@ function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE$2 } = {}) {
 		}, [])
 	};
 }
-var UserSelector = React$1.forwardRef(({ value, size = "medium", onValueChange, invisible, disabled, placeholder, clearable = true, className, pageSize, searchPlaceholder = "Search users...", noResultsText = "No users found.", loadingText = "Loading..." }, ref) => {
+var UserSelector = React$1.forwardRef(({ value, size = "medium", onValueChange, invisible, disabled, placeholder, clearable = true, className, pageSize, searchPlaceholder = "Search users...", noResultsText = "No users found.", loadingText = "Loading...", open: openProp, onOpenChange, triggerContent, anchorRef }, ref) => {
 	const { items: availableItems, isLoading, hasMore, search, loadMore, getUser } = useUserSelector({ pageSize });
-	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+	const [isPopoverOpen, setIsPopoverOpenState] = useState(false);
+	const isPopoverOpenRef = useRef(false);
+	const onOpenChangeRef = useRef(onOpenChange);
+	onOpenChangeRef.current = onOpenChange;
+	const setIsPopoverOpen = useCallback((next, notify = true) => {
+		const changed = isPopoverOpenRef.current !== next;
+		isPopoverOpenRef.current = next;
+		setIsPopoverOpenState(next);
+		if (changed && notify) onOpenChangeRef.current?.(next);
+	}, []);
+	useEffect(() => {
+		if (openProp === void 0 || openProp === isPopoverOpenRef.current) return;
+		if (openProp && disabled) {
+			onOpenChangeRef.current?.(false);
+			return;
+		}
+		setIsPopoverOpen(openProp, false);
+	}, [
+		openProp,
+		disabled,
+		setIsPopoverOpen
+	]);
 	const [searchString, setSearchString] = useState("");
 	const contextPortalContainer = usePortalContainer();
 	const scrollContainerRef = useRef(null);
@@ -3917,16 +4077,24 @@ var UserSelector = React$1.forwardRef(({ value, size = "medium", onValueChange,
 		if (value === item.uid) onValueChange?.(null);
 		else onValueChange?.(item.uid);
 		setIsPopoverOpen(false);
-	}, [value, onValueChange]);
+	}, [
+		value,
+		onValueChange,
+		setIsPopoverOpen
+	]);
 	const handleClear = useCallback((e) => {
 		e.stopPropagation();
 		e.preventDefault();
 		onValueChange?.(null);
 	}, [onValueChange]);
+	const toggleOpen = useCallback(() => {
+		if (disabled) return;
+		setIsPopoverOpen(!isPopoverOpenRef.current);
+	}, [disabled, setIsPopoverOpen]);
 	const handleRootOpenChange = useCallback((next) => {
 		if (disabled) return;
 		if (next) setIsPopoverOpen(true);
-	}, [disabled]);
+	}, [disabled, setIsPopoverOpen]);
 	useEffect(() => {
 		if (!isPopoverOpen) return;
 		function handlePointerDown(ev) {
@@ -3946,26 +4114,39 @@ var UserSelector = React$1.forwardRef(({ value, size = "medium", onValueChange,
 			document.removeEventListener("mousedown", handlePointerDown, true);
 			document.removeEventListener("keydown", handleKey, true);
 		};
-	}, [isPopoverOpen]);
+	}, [isPopoverOpen, setIsPopoverOpen]);
 	const resolvedPlaceholder = placeholder || /* @__PURE__ */ jsx(EmptyValue, { className: "ml-2" });
 	const portalContainer = contextPortalContainer ?? (typeof document !== "undefined" ? document.body : void 0) ?? void 0;
 	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(PopoverPrimitive.Root, {
 		open: isPopoverOpen,
 		onOpenChange: handleRootOpenChange,
 		modal: false,
-		children: [/* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx("button", {
+		children: [/* @__PURE__ */ jsx(PickerTrigger, {
+			anchorRef,
+			children: triggerContent !== void 0 ? /* @__PURE__ */ jsx("div", {
+				ref: handleButtonRef,
+				role: "button",
+				tabIndex: disabled ? -1 : 0,
+				"aria-disabled": disabled || void 0,
+				"aria-haspopup": "listbox",
+				"aria-expanded": isPopoverOpen,
+				"data-user-selector-trigger": true,
+				onClick: toggleOpen,
+				onKeyDown: (event) => {
+					if (event.key !== "Enter" && event.key !== " ") return;
+					event.preventDefault();
+					toggleOpen();
+				},
+				className: cls("w-full select-none text-left text-sm relative flex items-center outline-none", className),
+				children: triggerContent
+			}) : /* @__PURE__ */ jsx("button", {
 				ref: handleButtonRef,
 				type: "button",
 				"aria-haspopup": "listbox",
 				"aria-expanded": isPopoverOpen,
 				"data-user-selector-trigger": true,
 				disabled,
-				onClick: () => {
-					if (disabled) return;
-					setIsPopoverOpen((o) => !o);
-				},
+				onClick: toggleOpen,
 				className: cls({
 					"min-h-[42px] py-1 px-2": size === "small",
 					"min-h-[56px] py-2 px-4": size === "medium",
@@ -4094,8 +4275,19 @@ UserSelector.displayName = "UserSelector";
 //#endregion
 //#region src/components/CollectionTableBinding/fields/VirtualTableUserSelect.tsx
 function VirtualTableUserSelect(props) {
-	const { internalValue, disabled, small, focused, updateValue, multiple } = props;
+	const { internalValue, disabled, focused, updateValue, open, onOpenChange, preview, anchorRef } = props;
+	const ref = useRef(null);
+	useEffect(() => {
+		if (focused) ref.current?.focus({ preventScroll: true });
+	}, [focused]);
+	const handleOpenChange = (nextOpen) => {
+		onOpenChange?.(nextOpen);
+		if (!nextOpen) setTimeout(() => {
+			if (!document.activeElement || document.activeElement === document.body) ref.current?.focus({ preventScroll: true });
+		}, 0);
+	};
 	return /* @__PURE__ */ jsx(UserSelector, {
+		ref,
 		value: Array.isArray(internalValue) ? internalValue[0] ?? null : internalValue ?? null,
 		onValueChange: (userId) => {
 			updateValue(userId);
@@ -4103,7 +4295,11 @@ function VirtualTableUserSelect(props) {
 		disabled,
 		size: "small",
 		clearable: true,
-		invisible: true
+		invisible: true,
+		open,
+		onOpenChange: handleOpenChange,
+		triggerContent: preview,
+		anchorRef
 	});
 }
 //#endregion
@@ -4388,55 +4584,38 @@ 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`).
+* A reference or relation cell, at the row sizes that carry small previews
+* (`xs`, `s`, `m`), for the pickers that open a selection dialog.
 *
-* 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.
+* The value is one line of inline previews, the same at rest and selected:
+* each title opens its record in the side panel. The cell's opener — the
+* chevron it reveals on hover — opens the dialog, and a cross beside it clears
+* the value. The cross follows the opener: hidden at rest, shown on hover and
+* while the cell is selected. Unlike the opener it saves at once, so hidden it
+* cannot be hit either: a tap where nothing is hovered selects the cell.
 */
-function CompactEntityCellField({ children, empty, disabled, onEdit, onClear, emptyLabel }) {
+function CompactEntityCellField({ children, empty, disabled, selected, onClear }) {
 	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, {
+			children: empty ? /* @__PURE__ */ jsx(EmptyValue, {}) : children
+		}), !disabled && !empty && /* @__PURE__ */ jsx(Tooltip, {
 			title: t("clear"),
 			children: /* @__PURE__ */ jsx(IconButton, {
-				size: "small",
+				size: "smallest",
+				shape: "square",
 				"aria-label": t("clear"),
+				className: cls("w-6 !h-6 min-w-6 min-h-6 p-0 hover:scale-100 transition-opacity duration-100", selected ? "opacity-100" : "opacity-0 pointer-events-none group-hover/cell:opacity-100 group-hover/cell:pointer-events-auto focus-visible:opacity-100"),
+				onMouseDown: (e) => e.preventDefault(),
 				onClick: (e) => {
 					e.stopPropagation();
 					onClear();
 				},
-				children: /* @__PURE__ */ jsx(XIcon, {})
+				children: /* @__PURE__ */ jsx(XIcon, { size: 14 })
 			})
-		})] })]
+		})]
 	});
 }
 //#endregion
@@ -4467,7 +4646,7 @@ function TableReferenceField(props) {
 	return content;
 }
 var TableReferenceFieldInternal = React.memo(function TableReferenceFieldInternal(props) {
-	const { name, internalValue, updateValue, multiselect, path, size, previewProperties, title, disabled, fixedFilter, collection, includeId, includeEntityLink } = props;
+	const { name, internalValue, updateValue, multiselect, path, size, previewProperties, disabled, fixedFilter, collection, includeId, includeEntityLink, selected, open, onOpenChange } = props;
 	const onSingleEntitySelected = useCallback((entity) => {
 		updateValue(entity ? getReferenceFrom(entity) : null);
 	}, [updateValue]);
@@ -4486,72 +4665,27 @@ var TableReferenceFieldInternal = React.memo(function TableReferenceFieldInterna
 		if (disabled) return;
 		referenceDialogController.open();
 	};
+	useEffect(() => {
+		if (!open) return;
+		onOpenChange?.(false);
+		handleOpen();
+	}, [open]);
 	const valueNotSet = !internalValue || Array.isArray(internalValue) && internalValue.length === 0;
-	const buildSingleReferenceField = () => {
-		if (internalValue && !Array.isArray(internalValue) && internalValue.isEntityReference && internalValue.isEntityReference()) return /* @__PURE__ */ jsx(ReferencePreview, {
-			onClick: disabled ? void 0 : handleOpen,
-			size: getPreviewSizeFrom(size),
-			reference: internalValue,
-			hover: !disabled,
-			disabled: !path,
-			previewProperties,
-			includeId,
-			includeEntityLink
-		});
-		else return /* @__PURE__ */ jsx(EntityPreviewContainer, {
-			onClick: disabled ? void 0 : handleOpen,
-			size: getPreviewSizeFrom(size),
-			children: /* @__PURE__ */ jsx(ErrorView, {
-				title: "Value is not a reference.",
-				error: "Click to edit"
-			})
-		});
-	};
-	const buildMultipleReferenceField = () => {
-		if (Array.isArray(internalValue)) return /* @__PURE__ */ jsx(Fragment, { children: internalValue.map((reference, index) => /* @__PURE__ */ jsx("div", {
-			className: "w-full my-0.5",
-			children: /* @__PURE__ */ jsx(ReferencePreview, {
-				onClick: disabled ? void 0 : handleOpen,
-				size: "small",
-				reference,
-				hover: !disabled,
-				disabled: !path,
-				previewProperties,
-				includeId,
-				includeEntityLink
-			})
-		}, `preview_array_ref_${name}_${index}`)) });
-		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, {
+	return /* @__PURE__ */ jsx(CompactEntityCellField, {
 		empty: valueNotSet,
 		disabled,
-		onEdit: handleOpen,
+		selected,
 		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",
+			size: multiselect ? "small" : getPreviewSizeFrom(size),
 			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-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]
-			})
-		]
+		}, `compact_ref_${name}_${index}`) : /* @__PURE__ */ jsx(ErrorView, { error: "Value is not a reference" }, `compact_ref_${name}_${index}`))
 	});
 }, deepEqual);
 //#endregion
@@ -4564,7 +4698,7 @@ function TableMultipleRelationField(props) {
 	});
 }
 var TableMultipleRelationFieldInternal = React.memo(function TableMultipleRelationFieldInternal(props) {
-	const { name, internalValue, updateValue, previewProperties, title, disabled, fixedFilter, collection, includeId, includeEntityLink, size } = props;
+	const { name, internalValue, updateValue, previewProperties, disabled, fixedFilter, collection, includeId, includeEntityLink, selected, open, onOpenChange } = props;
 	const value = Array.isArray(internalValue) ? internalValue : [];
 	const onMultipleEntitiesSelected = useCallback((entities) => {
 		updateValue(entities.map((e) => getRelationFrom(e)));
@@ -4582,33 +4716,18 @@ var TableMultipleRelationFieldInternal = React.memo(function TableMultipleRelati
 		if (disabled) return;
 		relationDialogController.open();
 	};
+	useEffect(() => {
+		if (!open) return;
+		onOpenChange?.(false);
+		handleOpen();
+	}, [open]);
 	const valueNotSet = !internalValue || Array.isArray(internalValue) && internalValue.length === 0;
-	const buildMultipleRelationField = () => {
-		if (Array.isArray(internalValue)) return /* @__PURE__ */ jsx(Fragment, { children: internalValue.map((item, index) => {
-			const relationItem = normalizeToEntityRelation(item);
-			if (!relationItem) return null;
-			return /* @__PURE__ */ jsx("div", {
-				className: "w-full my-0.5",
-				children: /* @__PURE__ */ jsx(RelationPreview, {
-					onClick: disabled ? void 0 : handleOpen,
-					size: "small",
-					relation: relationItem,
-					hover: !disabled,
-					previewProperties,
-					includeId,
-					includeEntityLink
-				})
-			}, `preview_array_ref_${name}_${index}`);
-		}) });
-		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, {
+	return /* @__PURE__ */ jsx(CompactEntityCellField, {
 		empty: valueNotSet,
 		disabled,
-		onEdit: handleOpen,
+		selected,
 		onClear: () => updateValue([]),
-		emptyLabel: title,
 		children: value.map((item, index) => {
 			const relationItem = normalizeToEntityRelation(item);
 			if (!relationItem) return null;
@@ -4619,18 +4738,9 @@ var TableMultipleRelationFieldInternal = React.memo(function TableMultipleRelati
 				previewProperties,
 				includeId,
 				includeEntityLink
-			}, `compact_rel__`);
+			}, `compact_rel_${name}_${index}`);
 		})
 	});
-	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-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]
-		})]
-	});
 }, deepEqual);
 //#endregion
 //#region src/components/CollectionTableBinding/fields/TableRelationField.tsx
@@ -4649,13 +4759,14 @@ function TableRelationField(props) {
 		disabled: props.disabled,
 		internalValue: Array.isArray(props.internalValue) ? props.internalValue : [],
 		updateValue: (newValue) => props.updateValue(newValue),
-		size: props.size,
 		previewProperties: props.previewProperties,
-		title: props.title,
 		relation: props.relation,
 		fixedFilter: props.fixedFilter,
 		includeId: props.includeId,
-		includeEntityLink: props.includeEntityLink
+		includeEntityLink: props.includeEntityLink,
+		selected: props.selected,
+		open: props.open,
+		onOpenChange: props.onOpenChange
 	});
 	return /* @__PURE__ */ jsx(TableRelationFieldInternal, {
 		...props,
@@ -4663,7 +4774,7 @@ function TableRelationField(props) {
 	});
 }
 var TableRelationFieldInternal = React.memo(function TableRelationFieldInternal(props) {
-	const { name, internalValue, updateValue, multiselect, relation, size, previewProperties, title, disabled, fixedFilter, collection, includeId, includeEntityLink } = props;
+	const { name, internalValue, updateValue, multiselect, relation, size, previewProperties, disabled, fixedFilter, collection, includeId, includeEntityLink, selected, open, onOpenChange } = props;
 	const onSingleEntitySelected = useCallback((entity) => {
 		updateValue(entity ? getRelationFrom(entity) : null);
 	}, [updateValue]);
@@ -4684,75 +4795,31 @@ var TableRelationFieldInternal = React.memo(function TableRelationFieldInternal(
 		if (disabled) return;
 		relationDialogController.open();
 	};
+	useEffect(() => {
+		if (!open) return;
+		onOpenChange?.(false);
+		handleOpen();
+	}, [open]);
 	const valueNotSet = !internalValue || Array.isArray(internalValue) && internalValue.length === 0;
-	const buildSingleRelationField = () => {
-		const normalizedRelation = normalizeToEntityRelation(internalValue);
-		if (normalizedRelation) return /* @__PURE__ */ jsx(RelationPreview, {
-			onClick: disabled ? void 0 : handleOpen,
-			size: getPreviewSizeFrom(size),
-			relation: normalizedRelation,
-			hover: !disabled,
-			previewProperties,
-			includeId,
-			includeEntityLink
-		});
-		else return /* @__PURE__ */ jsx(EntityPreviewContainer, {
-			onClick: disabled ? void 0 : handleOpen,
-			size: getPreviewSizeFrom(size),
-			children: /* @__PURE__ */ jsx(ErrorView, {
-				title: "Value is not a relation.",
-				error: "Click to edit"
-			})
-		});
-	};
-	const buildMultipleRelationField = () => {
-		if (Array.isArray(internalValue)) return /* @__PURE__ */ jsx(Fragment, { children: internalValue.map((relationItem, index) => /* @__PURE__ */ jsx("div", {
-			className: "w-full my-0.5",
-			children: /* @__PURE__ */ jsx(RelationPreview, {
-				onClick: disabled ? void 0 : handleOpen,
-				size: "small",
-				relation: relationItem,
-				hover: !disabled,
-				previewProperties,
-				includeId,
-				includeEntityLink
-			})
-		}, `preview_array_ref_${name}_${index}`)) });
-		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, {
+	return /* @__PURE__ */ jsx(CompactEntityCellField, {
 		empty: valueNotSet,
 		disabled,
-		onEdit: handleOpen,
+		selected,
 		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",
+				size: multiselect ? "small" : getPreviewSizeFrom(size),
 				relation: relationItem,
 				hover: false,
 				previewProperties,
 				includeId,
 				includeEntityLink
-			}, `compact_rel__`);
+			}, `compact_rel_${name}_${index}`);
 		})
 	});
-	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-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]
-			})
-		]
-	});
 }, deepEqual);
 //#endregion
 //#region src/components/RelationSelector.tsx
@@ -4764,7 +4831,7 @@ function relationCardinality$2(relation) {
 	if (relation.kind === "belongsTo" || relation.kind === "hasOne") return "one";
 	return relation.cardinality;
 }
-var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChange, invisible, disabled, placeholder, useChips = true, className, relation, multiple: multipleOverride, fixedFilter, pageSize, emptyPlaceholder, searchPlaceholder = "Search...", noResultsText = "No matches.", emptyText = "Select…", emptyCollectionText, loadingText = "Loading...", allowCreate = true }, ref) => {
+var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChange, invisible, disabled, placeholder, useChips = true, className, relation, multiple: multipleOverride, fixedFilter, pageSize, emptyPlaceholder, searchPlaceholder = "Search...", noResultsText = "No matches.", emptyText = "Select…", emptyCollectionText, loadingText = "Loading...", allowCreate = true, open: openProp, onOpenChange, triggerContent, anchorRef }, ref) => {
 	const collection = relation.target();
 	const dataPath = getCollectionDataPath(collection);
 	const dataClient = useData();
@@ -4773,7 +4840,7 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 	const { t } = useTranslation();
 	const contextPortalContainer = usePortalContainer();
 	const multiple = multipleOverride ?? relationCardinality$2(relation) === "many";
-	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+	const [isPopoverOpen, setIsPopoverOpenState] = useState(false);
 	const isPopoverOpenRef = useRef(false);
 	const [listRequested, setListRequested] = useState(false);
 	const [selectedItems, setSelectedItems] = useState([]);
@@ -4781,6 +4848,32 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 	const [searchString, setSearchString] = useState("");
 	const localSelectionIdsRef = useRef(null);
 	const pinnedIdsRef = useRef(null);
+	const selectedItemsForPinRef = useRef([]);
+	selectedItemsForPinRef.current = selectedItems;
+	const onOpenChangeRef = useRef(onOpenChange);
+	onOpenChangeRef.current = onOpenChange;
+	const setPopoverOpen = useCallback((next, notify = true) => {
+		if (next) {
+			pinnedIdsRef.current = /* @__PURE__ */ new Set([...selectedItemsForPinRef.current.map((i) => String(i.id)), ...relationsArrayRef.current.map((rel) => String(typeof rel === "string" || typeof rel === "number" ? rel : rel.id))]);
+			setListRequested(true);
+		} else pinnedIdsRef.current = null;
+		const changed = isPopoverOpenRef.current !== next;
+		isPopoverOpenRef.current = next;
+		setIsPopoverOpenState(next);
+		if (changed && notify) onOpenChangeRef.current?.(next);
+	}, []);
+	useEffect(() => {
+		if (openProp === void 0 || openProp === isPopoverOpenRef.current) return;
+		if (openProp && disabled) {
+			onOpenChangeRef.current?.(false);
+			return;
+		}
+		setPopoverOpen(openProp, false);
+	}, [
+		openProp,
+		disabled,
+		setPopoverOpen
+	]);
 	const { items: availableItems, isLoading, hasMore, search, loadMore, entityToRelationItem } = useRelationSelector({
 		path: dataPath,
 		collection,
@@ -4826,7 +4919,9 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 		let active = true;
 		const currentRelationsArray = relationsArrayRef.current;
 		if (incomingIds === resolvedIdsRef.current && (allHaveData || hasResolvedItemsRef.current)) return;
-		if (localSelectionIdsRef.current !== null && incomingIds === localSelectionIdsRef.current) {
+		const localSelectionIds = localSelectionIdsRef.current;
+		localSelectionIdsRef.current = null;
+		if (localSelectionIds !== null && incomingIds === localSelectionIds) {
 			resolvedIdsRef.current = incomingIds;
 			hasResolvedItemsRef.current = true;
 			return;
@@ -4949,9 +5044,7 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 		if (multiple) newSelected = selectedItems.some((v) => String(v.id) === String(item.id)) ? selectedItems.filter((v) => String(v.id) !== String(item.id)) : [...selectedItems, item];
 		else {
 			newSelected = [item];
-			setIsPopoverOpen(false);
-			isPopoverOpenRef.current = false;
-			pinnedIdsRef.current = null;
+			setPopoverOpen(false);
 		}
 		setSelectedItems(newSelected);
 		localSelectionIdsRef.current = computeSelectionFingerprint(newSelected);
@@ -4960,7 +5053,8 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 		multiple,
 		selectedItems,
 		emitValueChange,
-		computeSelectionFingerprint
+		computeSelectionFingerprint,
+		setPopoverOpen
 	]);
 	const handleClear = useCallback(() => {
 		setSelectedItems([]);
@@ -4979,13 +5073,8 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 	]);
 	const handleRootOpenChange = useCallback((next) => {
 		if (disabled) return;
-		if (next) {
-			pinnedIdsRef.current = new Set(selectedItems.map((i) => String(i.id)));
-			setListRequested(true);
-			setIsPopoverOpen(true);
-			isPopoverOpenRef.current = true;
-		}
-	}, [disabled, selectedItems]);
+		if (next) setPopoverOpen(true);
+	}, [disabled, setPopoverOpen]);
 	useEffect(() => {
 		if (!isPopoverOpen) return;
 		function handlePointerDown(ev) {
@@ -4994,16 +5083,10 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 			const contentEl = contentRef.current;
 			if (triggerEl?.contains(target)) return;
 			if (contentEl?.contains(target)) return;
-			setIsPopoverOpen(false);
-			isPopoverOpenRef.current = false;
-			pinnedIdsRef.current = null;
+			setPopoverOpen(false);
 		}
 		function handleKey(ev) {
-			if (ev.key === "Escape") {
-				setIsPopoverOpen(false);
-				isPopoverOpenRef.current = false;
-				pinnedIdsRef.current = null;
-			}
+			if (ev.key === "Escape") setPopoverOpen(false);
 		}
 		document.addEventListener("mousedown", handlePointerDown, true);
 		document.addEventListener("keydown", handleKey, true);
@@ -5011,12 +5094,12 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 			document.removeEventListener("mousedown", handlePointerDown, true);
 			document.removeEventListener("keydown", handleKey, true);
 		};
-	}, [isPopoverOpen]);
-	const closePopover = useCallback(() => {
-		setIsPopoverOpen(false);
-		isPopoverOpenRef.current = false;
-		pinnedIdsRef.current = null;
-	}, []);
+	}, [isPopoverOpen, setPopoverOpen]);
+	const closePopover = useCallback(() => setPopoverOpen(false), [setPopoverOpen]);
+	const toggleOpen = useCallback(() => {
+		if (disabled) return;
+		setPopoverOpen(!isPopoverOpenRef.current);
+	}, [disabled, setPopoverOpen]);
 	const canCreateTarget = allowCreate && canCreate(collection, dataPath);
 	const buildDefaultValues = useCallback((searchText) => {
 		const trimmed = searchText.trim();
@@ -5062,28 +5145,39 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 		open: isPopoverOpen,
 		onOpenChange: handleRootOpenChange,
 		modal: false,
-		children: [/* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx("button", {
+		children: [/* @__PURE__ */ jsx(PickerTrigger, {
+			anchorRef,
+			children: triggerContent !== void 0 ? /* @__PURE__ */ jsx("div", {
+				ref: handleButtonRef,
+				role: "button",
+				tabIndex: disabled ? -1 : 0,
+				"aria-disabled": disabled || void 0,
+				"aria-haspopup": "listbox",
+				"aria-expanded": isPopoverOpen,
+				"data-relation-selector-trigger": true,
+				onClick: toggleOpen,
+				onClickCapture: (event) => {
+					const target = event.target;
+					if (!(target instanceof Element) || !isPopoverOpenRef.current) return;
+					const interactive = target.closest("a, button, [role=\"button\"]");
+					if (interactive && interactive !== event.currentTarget) setPopoverOpen(false);
+				},
+				onKeyDown: (event) => {
+					if (event.key !== "Enter" && event.key !== " ") return;
+					event.preventDefault();
+					toggleOpen();
+				},
+				className: cls("w-full select-none text-left text-sm relative flex items-center outline-none", className),
+				children: triggerContent
+			}) : /* @__PURE__ */ jsx("button", {
 				ref: handleButtonRef,
 				type: "button",
 				"aria-haspopup": "listbox",
 				"aria-expanded": isPopoverOpen,
 				"data-relation-selector-trigger": true,
 				disabled,
-				onClick: () => {
-					if (disabled) return;
-					setListRequested(true);
-					setIsPopoverOpen((o) => {
-						const next = !o;
-						isPopoverOpenRef.current = next;
-						if (next) pinnedIdsRef.current = new Set(selectedItems.map((i) => String(i.id)));
-						else pinnedIdsRef.current = null;
-						return next;
-					});
-				},
+				onClick: toggleOpen,
 				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"
@@ -5099,36 +5193,19 @@ 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) {
-								if (size === "compact") return item.data ? /* @__PURE__ */ jsx(InlineEntityPreview, {
+							if (!useChips || !multiple) return /* @__PURE__ */ jsx("div", {
+								className: "flex flex-row items-center gap-1 truncate",
+								children: item.data ? /* @__PURE__ */ jsx(EntityPreviewBindingData, {
+									size: "medium",
 									entity: item.data,
-									onClick: () => {
-										closePopover();
-										sidePanelController.open({
-											entityId: item.data.id,
-											path: item.data.path,
-											collection,
-											updateUrl: true
-										});
-									}
-								}, String(item.id)) : /* @__PURE__ */ jsx("span", {
+									includeEntityLink: false,
+									includeId: false,
+									onSidePanelClick: closePopover
+								}) : /* @__PURE__ */ jsx("span", {
 									className: "text-sm truncate",
 									children: item.label
-								}, 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));
-							}
+								})
+							}, String(item.id));
 							return /* @__PURE__ */ jsxs(Chip, {
 								size: "small",
 								className: cls("flex flex-row items-center gap-1 truncate"),
@@ -5154,7 +5231,7 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 						children: resolvedPlaceholder
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex items-center flex-shrink-0",
-						children: [size !== "compact" && !multiple && selectedItems.length === 1 && selectedItems[0]?.data && /* @__PURE__ */ jsx(Tooltip, {
+						children: [!multiple && selectedItems.length === 1 && selectedItems[0]?.data && /* @__PURE__ */ jsx(Tooltip, {
 							title: `Open ${selectedItems[0].label}`,
 							children: /* @__PURE__ */ jsx(IconButton, {
 								component: "div",
@@ -5165,7 +5242,7 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 									e.stopPropagation();
 									e.preventDefault();
 									const entity = selectedItems[0].data;
-									setIsPopoverOpen(false);
+									setPopoverOpen(false);
 									sidePanelController.open({
 										entityId: entity.id,
 										path: entity.path,
@@ -5176,7 +5253,7 @@ var RelationSelector = React$1.forwardRef(({ value, size = "medium", onValueChan
 								children: /* @__PURE__ */ jsx(ArrowRightToLineIcon, { size: iconSize.small })
 							})
 						}), /* @__PURE__ */ jsx(ChevronDownIcon, {
-							size: size === "small" || size === "compact" ? iconSize.small : iconSize.medium,
+							size: size === "small" ? iconSize.small : iconSize.medium,
 							className: cls("transition", isPopoverOpen ? "rotate-180" : "")
 						})]
 					})]
@@ -5337,14 +5414,28 @@ function InnerCheckBox({ checked }) {
 //#endregion
 //#region src/components/CollectionTableBinding/fields/TableRelationSelectorField.tsx
 /** Thin wrapper around RelationSelector for table cells */
-function TableRelationSelectorField({ disabled = false, internalValue, updateValue, relation, fixedFilter, size = "medium" }) {
+function TableRelationSelectorField({ disabled = false, internalValue, updateValue, relation, fixedFilter, focused, open, onOpenChange, preview, anchorRef }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (focused) ref.current?.focus({ preventScroll: true });
+	}, [focused]);
+	const handleOpenChange = (nextOpen) => {
+		onOpenChange?.(nextOpen);
+		if (!nextOpen) setTimeout(() => {
+			if (!document.activeElement || document.activeElement === document.body) ref.current?.focus({ preventScroll: true });
+		}, 0);
+	};
 	return /* @__PURE__ */ jsx(RelationSelector, {
+		ref,
 		disabled,
-		size,
 		value: internalValue || null,
 		onValueChange: (newVal) => updateValue(newVal ?? null),
 		relation,
-		fixedFilter
+		fixedFilter,
+		open,
+		onOpenChange: handleOpenChange,
+		triggerContent: preview,
+		anchorRef
 	});
 }
 //#endregion
@@ -5380,7 +5471,7 @@ function getTableBindingForProperty(property, selected) {
 	else if (selected && property.type === "number") {
 		const numberProperty = property;
 		if (numberProperty.enum) return {
-			Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }) => /* @__PURE__ */ jsx(VirtualTableSelect, {
+			Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue, open, onOpenChange, preview, anchorRef }) => /* @__PURE__ */ jsx(VirtualTableSelect, {
 				name: propertyKey,
 				multiple: false,
 				disabled,
@@ -5390,9 +5481,13 @@ function getTableBindingForProperty(property, selected) {
 				enumValues: numberProperty.enum,
 				error: validationError ?? error,
 				internalValue,
-				updateValue
+				updateValue,
+				open,
+				onOpenChange,
+				preview,
+				anchorRef
 			}),
-			fullHeight: true
+			opener: "dropdown"
 		};
 		else return {
 			Component: ({ align, error, validationError, selected, disabled, internalValue, updateValue }) => /* @__PURE__ */ jsx(VirtualTableNumberInput, {
@@ -5408,7 +5503,7 @@ function getTableBindingForProperty(property, selected) {
 	} else if (selected && property.type === "string") {
 		const stringProperty = property;
 		if (stringProperty.enum) return {
-			Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }) => /* @__PURE__ */ jsx(VirtualTableSelect, {
+			Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue, open, onOpenChange, preview, anchorRef }) => /* @__PURE__ */ jsx(VirtualTableSelect, {
 				name: propertyKey,
 				multiple: false,
 				focused: selected,
@@ -5418,12 +5513,16 @@ function getTableBindingForProperty(property, selected) {
 				enumValues: stringProperty.enum,
 				error: validationError ?? error,
 				internalValue,
-				updateValue
+				updateValue,
+				open,
+				onOpenChange,
+				preview,
+				anchorRef
 			}),
-			fullHeight: true
+			opener: "dropdown"
 		};
 		else if (stringProperty.userSelect) return {
-			Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }) => /* @__PURE__ */ jsx(VirtualTableUserSelect, {
+			Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue, open, onOpenChange, preview, anchorRef }) => /* @__PURE__ */ jsx(VirtualTableUserSelect, {
 				name: propertyKey,
 				multiple: false,
 				focused: selected,
@@ -5431,9 +5530,13 @@ function getTableBindingForProperty(property, selected) {
 				small: getPreviewSizeFrom(size) !== "medium",
 				error: validationError ?? error,
 				internalValue,
-				updateValue
+				updateValue,
+				open,
+				onOpenChange,
+				preview,
+				anchorRef
 			}),
-			fullHeight: true
+			opener: "dropdown"
 		};
 		else if (stringProperty.admin?.markdown || !stringProperty.storage) {
 			const multiline = Boolean(stringProperty.admin?.multiline) || Boolean(stringProperty.admin?.markdown);
@@ -5457,29 +5560,20 @@ function getTableBindingForProperty(property, selected) {
 		updateValue
 	}) };
 	else if (property.type === "date") return {
-		Component: ({ propertyKey, error, validationError, disabled, selected, size, property, internalValue, updateValue }) => {
-			const { locale } = useCustomizationController();
-			return /* @__PURE__ */ jsx(VirtualTableDateField, {
-				name: propertyKey,
-				error: validationError ?? error,
-				disabled,
-				small: getPreviewSizeFrom(size) !== "medium",
-				mode: property.mode,
-				focused: selected,
-				internalValue,
-				updateValue,
-				locale
-			});
-		},
+		Component: DateBindingComponent,
+		opener: "calendar",
 		fullHeight: true,
 		hideOverflow: false,
 		allowScroll: false
 	};
 	else if (property.type === "reference") {
 		if (property.path) return {
-			Component: ({ propertyKey, internalValue, updateValue, disabled, size, property }) => {
+			Component: ({ propertyKey, internalValue, updateValue, disabled, size, property, selected, open, onOpenChange }) => {
 				return /* @__PURE__ */ jsx(TableReferenceField, {
 					name: propertyKey,
+					selected,
+					open,
+					onOpenChange,
 					internalValue,
 					updateValue,
 					disabled,
@@ -5489,20 +5583,22 @@ function getTableBindingForProperty(property, selected) {
 					previewProperties: property.admin?.previewProperties,
 					includeId: property.admin?.includeId,
 					includeEntityLink: property.admin?.includeEntityLink,
-					title: property.name ?? propertyKey,
 					fixedFilter: property.admin?.fixedFilter
 				});
 			},
+			opener: "dialog",
 			allowScroll: false
 		};
 	} else if (property.type === "relation") {
 		if (property.relation) {
 			if (property.admin?.widget === "dialog") return {
 				Component: RelationDialogBindingComponent,
+				opener: "dialog",
 				allowScroll: false
 			};
 			else if (selected) return {
 				Component: RelationSelectorBindingComponent,
+				opener: "dropdown",
 				allowScroll: false
 			};
 		}
@@ -5513,7 +5609,7 @@ function getTableBindingForProperty(property, selected) {
 			const ofProp = arrayProperty.of;
 			if (ofProp.type === "string" || ofProp.type === "number") {
 				if (selected && ofProp.enum) return {
-					Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }) => /* @__PURE__ */ jsx(VirtualTableSelect, {
+					Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue, open, onOpenChange, preview, anchorRef }) => /* @__PURE__ */ jsx(VirtualTableSelect, {
 						name: propertyKey,
 						multiple: true,
 						disabled,
@@ -5523,17 +5619,22 @@ function getTableBindingForProperty(property, selected) {
 						enumValues: ofProp.enum,
 						error: validationError ?? error,
 						internalValue,
-						updateValue
+						updateValue,
+						open,
+						onOpenChange,
+						preview,
+						anchorRef
 					}),
-					allowScroll: true,
-					fullHeight: true,
-					hideOverflow: false
+					opener: "dropdown"
 				};
 			} else if (ofProp.type === "reference") {
 				const refOfProp = ofProp;
 				if (refOfProp.path) return {
-					Component: ({ propertyKey, disabled, internalValue, updateValue, size }) => /* @__PURE__ */ jsx(TableReferenceField, {
+					Component: ({ propertyKey, disabled, internalValue, updateValue, size, selected, open, onOpenChange }) => /* @__PURE__ */ jsx(TableReferenceField, {
 						name: propertyKey,
+						selected,
+						open,
+						onOpenChange,
 						disabled,
 						internalValue,
 						updateValue,
@@ -5541,22 +5642,58 @@ function getTableBindingForProperty(property, selected) {
 						multiselect: true,
 						path: refOfProp.path,
 						previewProperties: refOfProp.admin?.previewProperties,
-						title: arrayProperty.name,
 						fixedFilter: refOfProp.admin?.fixedFilter,
 						includeId: refOfProp.admin?.includeId,
 						includeEntityLink: refOfProp.admin?.includeEntityLink
 					}),
+					opener: "dialog",
 					allowScroll: false
 				};
 			}
 		}
 	}
 }
+/**
+* Stable component for date cells. The input is always there, at rest too, so
+* a date can be typed into; the cell's opener shows the picker through it.
+*/
+function DateBindingComponent({ propertyKey, error, validationError, disabled, selected, size, property, internalValue, updateValue, open, onOpenChange }) {
+	const { locale } = useCustomizationController();
+	const inputRef = useRef(null);
+	useEffect(() => {
+		if (!open) return;
+		onOpenChange?.(false);
+		const input = inputRef.current;
+		if (!input) return;
+		try {
+			input.showPicker();
+		} catch {
+			input.focus();
+		}
+	}, [open]);
+	return /* @__PURE__ */ jsx(VirtualTableDateField, {
+		name: propertyKey,
+		error: validationError ?? error,
+		disabled,
+		small: getPreviewSizeFrom(size) !== "medium",
+		mode: getDatePropertyMode(property),
+		timezone: getDatePropertyTimezone(property),
+		focused: selected,
+		internalValue,
+		updateValue,
+		locale,
+		pickerButton: onOpenChange === void 0,
+		inputRef
+	});
+}
 /** Stable component for relation fields rendered with the dialog widget */
-function RelationDialogBindingComponent({ propertyKey, internalValue, updateValue, disabled, size, property }) {
+function RelationDialogBindingComponent({ propertyKey, internalValue, updateValue, disabled, size, property, selected, open, onOpenChange }) {
 	const relProp = property;
 	return /* @__PURE__ */ jsx(TableRelationField, {
 		name: propertyKey,
+		selected,
+		open,
+		onOpenChange,
 		internalValue,
 		updateValue,
 		disabled,
@@ -5566,21 +5703,24 @@ function RelationDialogBindingComponent({ propertyKey, internalValue, updateValu
 		previewProperties: relProp.admin?.previewProperties,
 		includeId: relProp.admin?.includeId,
 		includeEntityLink: relProp.admin?.includeEntityLink,
-		title: relProp.name ?? propertyKey,
 		fixedFilter: relProp.admin?.fixedFilter
 	});
 }
 /** Stable component for relation fields rendered with the inline selector */
-function RelationSelectorBindingComponent({ propertyKey, internalValue, updateValue, disabled, property, size }) {
+function RelationSelectorBindingComponent({ propertyKey, internalValue, updateValue, disabled, property, selected, open, onOpenChange, preview, anchorRef }) {
 	const relProp = property;
 	return /* @__PURE__ */ jsx(TableRelationSelectorField, {
-		size: getPreviewSizeFrom(size) === "small" ? "compact" : "medium",
 		name: propertyKey,
 		internalValue,
 		updateValue,
 		disabled,
 		relation: relProp.relation,
-		fixedFilter: relProp.admin?.fixedFilter
+		fixedFilter: relProp.admin?.fixedFilter,
+		focused: selected,
+		open,
+		onOpenChange,
+		preview,
+		anchorRef
 	});
 }
 //#endregion
@@ -5683,23 +5823,72 @@ function getZodStringSchema({ property, parentProperty, customFieldValidator, na
 			const regExp = typeof validation.matches === "string" ? hydrateRegExp(validation.matches) : validation.matches;
 			if (regExp) schema = schema.refine((value) => value == null || typeof value === "string" && regExp.test(value), { message: validation.matchesMessage ?? "Invalid format" });
 		}
-		if (validation.trim) schema = z.preprocess((v) => typeof v === "string" ? v.trim() : v, schema);
-		if (validation.lowercase) schema = z.preprocess((v) => typeof v === "string" ? v.toLowerCase() : v, schema);
-		if (validation.uppercase) schema = z.preprocess((v) => typeof v === "string" ? v.toUpperCase() : v, schema);
-		if (property.email) schema = schema.refine((value) => value == null || typeof value === "string" && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value), { message: `${fieldLabel$1(property, name)} must be an email` });
-		if (property.url) if (!property.storage || property.storage?.storeUrl) schema = schema.refine((value) => {
-			if (value == null) return true;
-			try {
-				new URL(value);
-				return true;
-			} catch {
-				return false;
-			}
-		}, { message: `${fieldLabel$1(property, name)} must be a url` });
-		else console.warn(`Property ${fieldLabel$1(property, name)} has a url validation but its storage configuration is not set to store urls`);
+		if (validation.length !== void 0) schema = schema.refine((value) => value == null || typeof value === "string" && value.length === validation.length, { message: `${fieldLabel$1(property, name)} must be exactly ${validation.length} characters long` });
+		if (validation.trim || validation.lowercase || validation.uppercase) schema = z.preprocess((v) => typeof v === "string" ? transformString(v, validation) : v, schema);
 	}
+	if (property.email) schema = schema.refine((value) => value == null || value === "" || typeof value === "string" && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value), { message: `${fieldLabel$1(property, name)} must be an email` });
+	if (property.url) if (!property.storage || property.storage?.storeUrl) schema = schema.refine((value) => {
+		if (value == null || value === "") return true;
+		try {
+			new URL(value);
+			return true;
+		} catch {
+			return false;
+		}
+	}, { message: `${fieldLabel$1(property, name)} must be a url` });
+	else console.warn(`Property ${fieldLabel$1(property, name)} has a url validation but its storage configuration is not set to store urls`);
 	return schema;
 }
+/**
+* A string's declared transforms — `trim`, `lowercase`, `uppercase` — applied.
+* The one definition of them: validation judges its result, and
+* {@link applyValueTransforms} writes it.
+*/
+function transformString(value, validation) {
+	let result = value;
+	if (validation.trim) result = result.trim();
+	if (validation.lowercase) result = result.toLowerCase();
+	if (validation.uppercase) result = result.toUpperCase();
+	return result;
+}
+/**
+* The values as they are to be written: every `trim`, `lowercase` and
+* `uppercase` a string property declares applied to its value, inside maps and
+* arrays too.
+*
+* They are documented as changing the value that is written, and only the
+* panel applies them — the server checks what it receives. Validation judges
+* the transformed value, so without this the form passed "my-slug" and sent
+* "  My-Slug ", which a `matches` on the server then refused.
+*
+* Returns `values` itself when nothing changes.
+*/
+function applyValueTransforms(values, properties) {
+	let result = values;
+	for (const [key, property] of Object.entries(properties)) {
+		if (!(key in values)) continue;
+		const transformed = transformValue(property, values[key]);
+		if (transformed !== values[key]) result = {
+			...result,
+			[key]: transformed
+		};
+	}
+	return result;
+}
+function transformValue(property, value) {
+	if (!property || typeof property !== "object") return value;
+	if (property.type === "string") return typeof value === "string" && property.validation ? transformString(value, property.validation) : value;
+	if (property.type === "map" && property.properties && isPlainObject(value)) return applyValueTransforms(value, property.properties);
+	if (property.type === "array" && property.of && Array.isArray(value)) {
+		const of = property.of;
+		const items = value.map((item, index) => {
+			const itemProperty = Array.isArray(of) ? of[index] : of;
+			return itemProperty ? transformValue(itemProperty, item) : item;
+		});
+		return items.some((item, index) => item !== value[index]) ? items : value;
+	}
+	return value;
+}
 function getZodNumberSchema({ property, parentProperty, customFieldValidator, name, entityId }) {
 	const validation = property.validation;
 	let schema = z.preprocess((val) => {
@@ -5712,8 +5901,8 @@ function getZodNumberSchema({ property, parentProperty, customFieldValidator, na
 	if (validation) {
 		if (validation.min || validation.min === 0) schema = schema.refine((value) => value == null || typeof value === "number" && value >= validation.min, { message: `${fieldLabel$1(property, name)} must be higher or equal to ${validation.min}` });
 		if (validation.max || validation.max === 0) schema = schema.refine((value) => value == null || typeof value === "number" && value <= validation.max, { message: `${fieldLabel$1(property, name)} must be lower or equal to ${validation.max}` });
-		if (validation.lessThan || validation.lessThan === 0) schema = schema.refine((value) => value == null || typeof value === "number" && value < validation.lessThan, { message: `${fieldLabel$1(property, name)} must be higher than ${validation.lessThan}` });
-		if (validation.moreThan || validation.moreThan === 0) schema = schema.refine((value) => value == null || typeof value === "number" && value > validation.moreThan, { message: `${fieldLabel$1(property, name)} must be lower than ${validation.moreThan}` });
+		if (validation.lessThan || validation.lessThan === 0) schema = schema.refine((value) => value == null || typeof value === "number" && value < validation.lessThan, { message: `${fieldLabel$1(property, name)} must be lower than ${validation.lessThan}` });
+		if (validation.moreThan || validation.moreThan === 0) schema = schema.refine((value) => value == null || typeof value === "number" && value > validation.moreThan, { message: `${fieldLabel$1(property, name)} must be higher than ${validation.moreThan}` });
 		if (validation.positive) schema = schema.refine((value) => value == null || typeof value === "number" && value > 0, { message: `${fieldLabel$1(property, name)} must be positive` });
 		if (validation.negative) schema = schema.refine((value) => value == null || typeof value === "number" && value < 0, { message: `${fieldLabel$1(property, name)} must be negative` });
 		if (validation.integer) schema = schema.refine((value) => value == null || typeof value === "number" && Number.isInteger(value), { message: `${fieldLabel$1(property, name)} must be an integer` });
@@ -5733,7 +5922,7 @@ function getZodDateSchema({ property, parentProperty, customFieldValidator, name
 	if (validation) {
 		if (validation.required) schema = schema.refine((value) => value !== void 0 && value !== null, { message: validation?.requiredMessage ? validation.requiredMessage : "Required" });
 		if (validation.min) schema = schema.refine((value) => value == null || value instanceof Date && value >= validation.min, { message: `${fieldLabel$1(property, name)} must be after ${validation.min}` });
-		if (validation.max) schema = schema.refine((value) => value == null || value instanceof Date && value <= validation.max, { message: `${fieldLabel$1(property, name)} must be before ${validation.min}` });
+		if (validation.max) schema = schema.refine((value) => value == null || value instanceof Date && value <= validation.max, { message: `${fieldLabel$1(property, name)} must be before ${validation.max}` });
 	}
 	return schema;
 }
@@ -5773,30 +5962,30 @@ function hasUniqueInArrayModifier(property) {
 function getZodArraySchema({ property, parentProperty, customFieldValidator, name, entityId }) {
 	let arraySchema = z.array(z.any()).nullable().optional();
 	if (property.of) if (Array.isArray(property.of)) {
-		const zodProperties = {};
-		property.of.forEach((p, index) => {
+		const positionSchemas = property.of.map((p, index) => {
 			try {
-				zodProperties[`${name}[${index}]`] = mapPropertyToZod({
+				return mapPropertyToZod({
 					property: p,
 					parentProperty: property,
 					entityId
 				});
 			} catch (e) {
 				console.error(`Error creating validation schema for array item ${index}:`, e);
-				zodProperties[`${name}[${index}]`] = z.any().refine(() => false, { message: `Validation error: ${e instanceof Error ? e.message : "Unknown error"}` });
+				return z.any().refine(() => false, { message: `Validation error: ${e instanceof Error ? e.message : "Unknown error"}` });
 			}
 		});
-		arraySchema = z.array(z.any().superRefine(async (object, ctx) => {
-			for (const [key, zodProperty] of Object.entries(zodProperties)) if (zodProperty) {
-				const result = await zodProperty.safeParseAsync(object);
+		arraySchema = z.array(z.any()).superRefine(async (items, ctx) => {
+			for (let index = 0; index < items.length && index < positionSchemas.length; index++) {
+				const result = await positionSchemas[index].safeParseAsync(items[index]);
 				if (!result.success) result.error.issues.forEach((issue) => {
 					ctx.addIssue({
 						code: "custom",
-						message: issue.message
+						message: issue.message,
+						path: [index, ...issue.path]
 					});
 				});
 			}
-		})).nullable().optional();
+		}).nullable().optional();
 	} else {
 		try {
 			const ofSchema = mapPropertyToZod({
@@ -5843,6 +6032,53 @@ function getZodBinarySchema({ property }) {
 	return schema;
 }
 //#endregion
+//#region src/components/CollectionTableBinding/internal/TableCellOpener.tsx
+/**
+* The one control a cell reveals to open its editor.
+*
+* A cell looks the same at rest, hovered and selected: the value, in the same
+* place. This is the only thing that appears — on hover, and for as long as
+* the cell is selected — in a slot the cell keeps for it whether it is shown
+* or not, so revealing it moves nothing.
+*
+* One click on it opens the editor, from rest: it selects the cell on the way.
+* It never takes the focus on a mouse press, because the cell selects itself
+* on focus and doing so first would re-render the cell under the pointer.
+*/
+function TableCellOpener({ kind, open, selected, focusOnSelect, label, onToggle }) {
+	const ref = useRef(null);
+	const openAtPressRef = useRef(void 0);
+	useEffect(() => {
+		if (selected && focusOnSelect) ref.current?.focus({ preventScroll: true });
+	}, [selected, focusOnSelect]);
+	const Icon = kind === "calendar" ? CalendarIcon : kind === "expand" ? Maximize2Icon : ChevronDownIcon;
+	return /* @__PURE__ */ jsx(IconButton, {
+		ref,
+		size: "smallest",
+		shape: "square",
+		"aria-label": label,
+		"aria-haspopup": kind === "calendar" || kind === "expand" ? "dialog" : "listbox",
+		"aria-expanded": kind === "dropdown" ? open : void 0,
+		tabIndex: -1,
+		"data-table-cell-opener": kind,
+		className: cls("w-6 !h-6 min-w-6 min-h-6 p-0 hover:scale-100", "transition-opacity duration-100", selected || open ? "opacity-100" : "opacity-0 group-hover/cell:opacity-100 focus-visible:opacity-100"),
+		onPointerDown: () => {
+			openAtPressRef.current = open;
+		},
+		onMouseDown: (event) => event.preventDefault(),
+		onClick: (event) => {
+			event.stopPropagation();
+			const wasOpen = openAtPressRef.current ?? open;
+			openAtPressRef.current = void 0;
+			onToggle(!wasOpen);
+		},
+		children: /* @__PURE__ */ jsx(Icon, {
+			size: iconSize.smallest,
+			className: cls(kind === "dropdown" || kind === "dialog" ? "transition-transform duration-150" : "", open && (kind === "dropdown" || kind === "dialog") ? "rotate-180" : "")
+		})
+	});
+}
+//#endregion
 //#region src/components/CollectionTableBinding/internal/EntityTableCell.tsx
 var TableCellInner = ({ justifyContent, scrollable, faded, fullHeight, children }) => {
 	return /* @__PURE__ */ jsx("div", {
@@ -5857,9 +6093,10 @@ var TableCellInner = ({ justifyContent, scrollable, faded, fullHeight, children
 		children
 	});
 };
-var EntityTableCell = React.memo(function EntityTableCell({ children, actions, size, selected, disabled, disabledTooltip, savedTimestamp, error, align, allowScroll, removePadding, fullHeight, onSelect, width, hideOverflow = true, showExpandIcon = true, sortableNodeRef, sortableStyle, sortableAttributes, isDragging, isDraggable, frozen }) {
+var EntityTableCell = React.memo(function EntityTableCell({ children, actions, size, selected, disabled, disabledTooltip, savedTimestamp, error, align, allowScroll, removePadding, fullHeight, opener, cellRef, onSelect, width, hideOverflow = true, showExpandIcon = true, sortableNodeRef, sortableStyle, sortableAttributes, isDragging, isDraggable, frozen }) {
 	const [measureRef, bounds] = useMeasure();
-	const ref = useRef(null);
+	const internalRef = useRef(null);
+	const ref = cellRef ?? internalRef;
 	const maxHeight = useMemo(() => getRowHeight(size), [size]);
 	const [onHover, setOnHover] = useState(false);
 	const [showSaved, setShowSaved] = useState(false);
@@ -5909,6 +6146,16 @@ var EntityTableCell = React.memo(function EntityTableCell({ children, actions, s
 		selected,
 		disabled
 	]);
+	const onOpenerToggle = useCallback((open) => {
+		if (!opener) return;
+		const cellRect = ref.current?.getBoundingClientRect();
+		if (open) onSelectCallback();
+		opener.onToggle(open, cellRect);
+	}, [
+		opener,
+		onSelectCallback,
+		ref
+	]);
 	const onFocus = useCallback((event) => {
 		event.stopPropagation();
 		event.preventDefault();
@@ -5924,8 +6171,24 @@ var EntityTableCell = React.memo(function EntityTableCell({ children, actions, s
 	const setOnHoverTrue = useCallback(() => setOnHover(true), []);
 	const setOnHoverFalse = useCallback(() => setOnHover(false), []);
 	const borderClass = showError ? "border-red-500" : isSelected ? "border-primary" : "border-transparent";
+	const content = /* @__PURE__ */ jsx(RowEntityPreviewLayout, { children: /* @__PURE__ */ jsxs(ErrorBoundary, { children: [fullHeight && !faded && children, (!fullHeight || faded) && /* @__PURE__ */ jsx(TableCellInner, {
+		fullHeight: fullHeight ?? false,
+		justifyContent,
+		scrollable: scrollable ?? false,
+		faded,
+		children: !fullHeight && /* @__PURE__ */ jsx("div", {
+			ref: measureRef,
+			style: {
+				display: "flex",
+				width: "100%",
+				justifyContent,
+				height: fullHeight ? "100%" : void 0
+			},
+			children
+		})
+	})] }) });
 	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-hover" : "", hideOverflow ? "overflow-hidden" : "", isSelected && !showSaved ? "bg-surface-raised" : "", borderClass),
+		className: cls("group/cell 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,
@@ -5938,22 +6201,28 @@ var EntityTableCell = React.memo(function EntityTableCell({ children, actions, s
 		onMouseEnter: setOnHoverTrue,
 		onMouseMove: setOnHoverTrue,
 		onMouseLeave: setOnHoverFalse,
-		children: [/* @__PURE__ */ jsxs(ErrorBoundary, { children: [fullHeight && !faded && children, (!fullHeight || faded) && /* @__PURE__ */ jsx(TableCellInner, {
-			fullHeight: fullHeight ?? false,
-			justifyContent,
-			scrollable: scrollable ?? false,
-			faded,
-			children: !fullHeight && /* @__PURE__ */ jsx("div", {
-				ref: measureRef,
+		children: [
+			opener ? /* @__PURE__ */ jsx("div", {
+				className: "flex flex-1 min-w-0 self-stretch",
 				style: {
-					display: "flex",
-					width: "100%",
 					justifyContent,
-					height: fullHeight ? "100%" : void 0
+					alignItems: disabled || !isOverflowing ? "center" : void 0
 				},
-				children
-			})
-		})] }), actions]
+				children: content
+			}) : content,
+			opener && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 self-center flex items-center pl-1",
+				children: /* @__PURE__ */ jsx(TableCellOpener, {
+					kind: opener.kind,
+					open: opener.open,
+					selected: Boolean(selected),
+					focusOnSelect: opener.focusOnSelect,
+					label: opener.label,
+					onToggle: onOpenerToggle
+				})
+			}),
+			actions
+		]
 	}) });
 	const { tabIndex: _tabIndex, ...sortableAttrsWithoutTabIndex } = sortableAttributes ?? {};
 	return sortableNodeRef ? /* @__PURE__ */ jsx("div", {
@@ -5974,7 +6243,7 @@ var EntityTableCell = React.memo(function EntityTableCell({ children, actions, s
 		children: result
 	}) : result;
 }, (a, b) => {
-	return a.error === b.error && a.value === b.value && a.disabled === b.disabled && a.savedTimestamp === b.savedTimestamp && a.allowScroll === b.allowScroll && a.align === b.align && a.size === b.size && a.disabledTooltip === b.disabledTooltip && a.width === b.width && a.showExpandIcon === b.showExpandIcon && a.removePadding === b.removePadding && a.fullHeight === b.fullHeight && a.selected === b.selected && a.isDragging === b.isDragging && a.isDraggable === b.isDraggable && a.frozen === b.frozen;
+	return a.error === b.error && a.value === b.value && a.disabled === b.disabled && a.savedTimestamp === b.savedTimestamp && a.allowScroll === b.allowScroll && a.align === b.align && a.size === b.size && a.disabledTooltip === b.disabledTooltip && a.width === b.width && a.showExpandIcon === b.showExpandIcon && a.removePadding === b.removePadding && a.fullHeight === b.fullHeight && a.selected === b.selected && a.opener?.kind === b.opener?.kind && a.opener?.open === b.opener?.open && a.opener?.focusOnSelect === b.opener?.focusOnSelect && a.opener?.label === b.opener?.label && a.isDragging === b.isDragging && a.isDraggable === b.isDraggable && a.frozen === b.frozen;
 });
 //#endregion
 //#region src/components/SelectableTable/SelectableTableContext.tsx
@@ -5984,6 +6253,7 @@ var useSelectableTableController = () => useContext(SelectableTableContext);
 //#region src/components/CollectionTableBinding/PropertyTableCell.tsx
 var PropertyTableCell = React.memo(function PropertyTableCell({ propertyKey, customFieldValidator, value, property, align, width, height, path, entity, readonly, disabled: disabledProp, enablePopupIcon = true, sortableNodeRef, sortableStyle, sortableAttributes, isDragging, isDraggable, frozen }) {
 	const { onValueChange, size, selectionStore, select, setPopupCell } = useSelectableTableController();
+	const { t } = useTranslation();
 	const dummySelectionStore = useMemo(() => createSelectionStore(), []);
 	const selected = useCellSelected(selectionStore || dummySelectionStore, propertyKey, entity.path, entity.id);
 	const [internalValue, setInternalValue] = useState(value);
@@ -6017,15 +6287,29 @@ var PropertyTableCell = React.memo(function PropertyTableCell({ propertyKey, cus
 			onValueUpdated();
 		}
 	}, [onValueUpdated, value]);
+	const toWrittenValue = useCallback((typed) => applyValueTransforms({ value: typed }, { value: property }).value, [property]);
+	const [transformedWrite, setTransformedWrite] = useState();
+	useEffect(() => {
+		if (selected || !transformedWrite) return;
+		if (deepEqual(toWrittenValue(internalValue), transformedWrite.value)) setInternalValue(transformedWrite.value);
+		setTransformedWrite(void 0);
+	}, [
+		selected,
+		transformedWrite,
+		internalValue,
+		toWrittenValue
+	]);
 	const saveValues = async (value) => {
-		if (deepEqual(value, internalValueRef.current)) return;
+		const writtenValue = toWrittenValue(value);
+		if (deepEqual(writtenValue, internalValueRef.current)) return;
 		const result = await validation.safeParseAsync(value);
 		if (result.success) {
 			setValidationError(void 0);
-			internalValueRef.current = value;
+			internalValueRef.current = writtenValue;
+			if (!deepEqual(writtenValue, value)) setTransformedWrite({ value: writtenValue });
 			if (onValueChange) try {
 				onValueChange({
-					value,
+					value: writtenValue,
 					propertyKey,
 					setError,
 					onValueUpdated,
@@ -6056,11 +6340,6 @@ var PropertyTableCell = React.memo(function PropertyTableCell({ propertyKey, cus
 		setInternalValue(updatedValue);
 		saveValues(updatedValue);
 	};
-	useClearRestoreValue({
-		property,
-		value: internalValue,
-		setValue: updateValue
-	});
 	const onSelect = useCallback((cellRect) => {
 		if (!cellRect) select(void 0);
 		else select({
@@ -6091,6 +6370,39 @@ var PropertyTableCell = React.memo(function PropertyTableCell({ propertyKey, cus
 		});
 	};
 	const tableBinding = useMemo(() => getTableBindingForProperty(property, selected), [property, selected]);
+	const editorBinding = useMemo(() => getTableBindingForProperty(property, true), [property]);
+	const [editorOpen, setEditorOpen] = useState(false);
+	useEffect(() => {
+		if (!selected) setEditorOpen(false);
+	}, [selected]);
+	const cellRef = useRef(null);
+	const preview = /* @__PURE__ */ jsx(PropertyPreview, {
+		width,
+		height,
+		propertyKey,
+		value: internalValue,
+		property,
+		size: getPreviewSizeFrom(size)
+	});
+	let openerKind;
+	if (!disabled && !readOnlyProperty) {
+		if (!customField && editorBinding) openerKind = editorBinding.opener;
+		else if (enablePopupIcon && setPopupCell) openerKind = "expand";
+	}
+	const onOpenerToggleRef = useRef(() => void 0);
+	onOpenerToggleRef.current = (open, cellRect) => {
+		if (openerKind === "expand") {
+			if (open) openPopup(cellRect);
+		} else setEditorOpen(open);
+	};
+	const onOpenerToggle = useCallback((open, cellRect) => onOpenerToggleRef.current(open, cellRect), []);
+	const opener = openerKind ? {
+		kind: openerKind,
+		open: editorOpen,
+		focusOnSelect: openerKind !== "dropdown",
+		label: openerKind === "expand" ? t("expand") : t("edit_name", { name: property.name ?? propertyKey }),
+		onToggle: onOpenerToggle
+	} : void 0;
 	let innerComponent;
 	let allowScroll = false;
 	let showExpandIcon = false;
@@ -6139,7 +6451,11 @@ var PropertyTableCell = React.memo(function PropertyTableCell({ propertyKey, cus
 				align,
 				entity,
 				path,
-				openPopup: setPopupCell ? openPopup : void 0
+				openPopup: setPopupCell ? openPopup : void 0,
+				open: editorOpen,
+				onOpenChange: setEditorOpen,
+				preview,
+				anchorRef: cellRef
 			});
 			allowScroll = tableBinding.allowScroll ?? false;
 			includeActions = tableBinding.includeActions ?? true;
@@ -6150,16 +6466,8 @@ var PropertyTableCell = React.memo(function PropertyTableCell({ propertyKey, cus
 		}
 	}
 	if (!innerComponent) {
-		allowScroll = false;
-		showExpandIcon = enablePopupIcon && selected && !innerComponent && !disabled && !readOnlyProperty;
-		innerComponent = /* @__PURE__ */ jsx(PropertyPreview, {
-			width,
-			height,
-			propertyKey,
-			value: internalValue,
-			property,
-			size: getPreviewSizeFrom(size)
-		});
+		allowScroll = false;
+		innerComponent = preview;
 	}
 	return /* @__PURE__ */ jsx(EntityTableCell, {
 		size,
@@ -6177,6 +6485,8 @@ var PropertyTableCell = React.memo(function PropertyTableCell({ propertyKey, cus
 		showExpandIcon,
 		value: internalValue,
 		hideOverflow,
+		opener,
+		cellRef,
 		sortableNodeRef,
 		sortableStyle,
 		sortableAttributes,
@@ -6194,7 +6504,7 @@ var PropertyTableCell = React.memo(function PropertyTableCell({ propertyKey, cus
 	}, `cell_${propertyKey}_${entity.path}_${entity.id}`);
 }, areEqual);
 function areEqual(prevProps, nextProps) {
-	return prevProps.height === nextProps.height && prevProps.propertyKey === nextProps.propertyKey && prevProps.align === nextProps.align && prevProps.width === nextProps.width && deepEqual(prevProps.property, nextProps.property) && deepEqual(prevProps.value, nextProps.value) && prevProps.entity.id === nextProps.entity.id && prevProps.entity.path === nextProps.entity.path && prevProps.isDragging === nextProps.isDragging && prevProps.isDraggable === nextProps.isDraggable && prevProps.frozen === nextProps.frozen;
+	return prevProps.height === nextProps.height && prevProps.propertyKey === nextProps.propertyKey && prevProps.align === nextProps.align && prevProps.width === nextProps.width && deepEqual(prevProps.property, nextProps.property) && deepEqual(prevProps.value, nextProps.value) && prevProps.entity.id === nextProps.entity.id && prevProps.entity.path === nextProps.entity.path && (prevProps.entity === nextProps.entity || deepEqual(prevProps.entity.values, nextProps.entity.values)) && prevProps.isDragging === nextProps.isDragging && prevProps.isDraggable === nextProps.isDraggable && prevProps.frozen === nextProps.frozen;
 }
 //#endregion
 //#region src/contexts/SideDialogsControllerContext.tsx
@@ -6308,6 +6618,20 @@ var CollectionRowActions = function CollectionRowActions({ entity, collection, p
 	const uncollapsedActions = actions.filter((a) => a.collapsed === false);
 	const hasDraft = (collection ? getLocalChangesBackup(collection) : false) ? getEntityFromCache(path + "/" + entity.id) : false;
 	const iconSize = "small";
+	const clickProps = {
+		view: "collection",
+		entity,
+		path,
+		collection,
+		context,
+		sidePanelController: sidePanelCtrl,
+		selectionController,
+		highlightEntity,
+		unhighlightEntity,
+		onCollectionChange,
+		openEntityMode: openEntityMode ?? collection?.openEntityMode
+	};
+	const isActionEnabled = (action) => !action.isEnabled || action.isEnabled(clickProps);
 	const content = /* @__PURE__ */ jsxs("div", {
 		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) => {
@@ -6326,21 +6650,10 @@ var CollectionRowActions = function CollectionRowActions({ entity, collection, p
 					const isEditAction = action.key === "edit";
 					const tooltip = isEditAction && hasDraft ? t("unsaved_local_changes") : action.name;
 					let iconButton = /* @__PURE__ */ jsx(IconButton, {
+						disabled: !isActionEnabled(action),
 						onClick: (event) => {
 							event.stopPropagation();
-							action.onClick({
-								view: "collection",
-								entity,
-								path,
-								collection,
-								context,
-								sidePanelController: sidePanelCtrl,
-								selectionController,
-								highlightEntity,
-								unhighlightEntity,
-								onCollectionChange,
-								openEntityMode: openEntityMode ?? collection?.openEntityMode
-							});
+							action.onClick(clickProps);
 						},
 						size: iconSize,
 						children: getIcon(action.icon, void 0, void 0, "smallest")
@@ -6362,21 +6675,10 @@ var CollectionRowActions = function CollectionRowActions({ entity, collection, p
 						children: /* @__PURE__ */ jsx(MoreVerticalIcon, {})
 					}),
 					children: collapsedActions.map((action, index) => /* @__PURE__ */ jsxs(MenuItem, {
+						disabled: !isActionEnabled(action),
 						onClick: (e) => {
 							e.stopPropagation();
-							action.onClick({
-								view: "collection",
-								entity,
-								path,
-								collection,
-								context,
-								sidePanelController: sidePanelCtrl,
-								selectionController,
-								highlightEntity,
-								unhighlightEntity,
-								onCollectionChange,
-								openEntityMode: openEntityMode ?? collection?.openEntityMode
-							});
+							action.onClick(clickProps);
 						},
 						children: [getIcon(action.icon, void 0, void 0, "smallest"), action.name]
 					}, index))
@@ -6638,6 +6940,7 @@ function StringNumberFilterField({ name, value, setValue, type, isArray, enumVal
 	const [operation, setOperation] = useState(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation === "!=" && fieldValue === null ? "is-not-null" : fieldOperation);
 	const [internalValue, setInternalValue] = useState(containsOperations.includes(fieldOperation) ? unwrapContains(fieldValue) : fieldValue);
 	const isNullOperation = operation === "is-null" || operation === "is-not-null";
+	const hasSingleValue = internalValue !== void 0 && internalValue !== null && !Array.isArray(internalValue);
 	if (possibleOperations.length === 0) return null;
 	function updateFilter(op, val) {
 		if (op === "is-null" || op === "is-not-null") {
@@ -6711,11 +7014,11 @@ function StringNumberFilterField({ name, value, setValue, type, isArray, enumVal
 					position: "item-aligned",
 					fullWidth: true,
 					disabled: isNullOperation,
-					value: typeof internalValue === "string" ? internalValue : "",
+					value: hasSingleValue ? String(internalValue) : "",
 					onValueChange: (value) => {
 						if (value !== "") updateFilter(operation, type === "number" ? parseInt(value) : value);
 					},
-					endAdornment: internalValue && /* @__PURE__ */ jsx(IconButton, {
+					endAdornment: hasSingleValue && /* @__PURE__ */ jsx(IconButton, {
 						onClick: (e) => updateFilter(operation, void 0),
 						children: /* @__PURE__ */ jsx(XIcon, {})
 					}),
@@ -7318,7 +7621,8 @@ function DefaultFilterField({ propertyKey, property, isArray, operators, value,
 		value,
 		setValue,
 		name: propertyKey,
-		mode: property.mode,
+		mode: getDatePropertyMode(property),
+		timezone: getDatePropertyTimezone(property),
 		isArray,
 		operators,
 		title
@@ -7391,7 +7695,10 @@ var SelectableTable = function SelectableTable({ onValueChange, cellRenderer, on
 	}, Boolean(localSelectedCell));
 	useEffect(() => {
 		const escFunction = (event) => {
-			if (event.key === "Escape") unselect();
+			if (event.key !== "Escape") return;
+			const target = event.target;
+			if (target instanceof Node && target !== document.body && ref.current && !ref.current.contains(target)) return;
+			unselect();
 		};
 		document.addEventListener("keydown", escFunction, false);
 		return () => {
@@ -8023,7 +8330,9 @@ function useCollectionInlineEditor({ path, collection, dataClient, context }) {
 	}, [path, dataClient]);
 	const onValueChange = useCallback(({ value, propertyKey, onValueUpdated, setError, data: entity }) => {
 		if (!entity) return;
-		const updatedValues = setIn({}, propertyKey, value);
+		const column = propertyKey.split(/[.[]/)[0];
+		const updatedRow = setIn(entity.values ?? {}, propertyKey, value);
+		const updatedValues = { [column]: getIn(updatedRow, column) };
 		return saveEntityWithCallbacks({
 			path: entity.path ?? path,
 			entityId: entity.id,
@@ -8099,40 +8408,25 @@ function getViewModeFromSearch(search, customKeys) {
 	return isViewMode(value, customKeys) ? value : null;
 }
 /**
-* Append the active view mode to a URL so the target route keeps rendering the
-* view the user was last looking at.
-*
-* Every entity/collection navigation must go through this — a missed call site
-* silently resets the user's view mode mid-session.
-*
-* @param url the URL to decorate. May already contain a query string and/or hash.
-* @param search query string to read the view mode from. Defaults to the
-*        current browser location.
-*/
-function withViewMode(url, search) {
-	const source = search ?? (typeof window !== "undefined" ? window.location.search : "");
-	const viewMode = new URLSearchParams(source).get(VIEW_MODE_PARAM);
-	if (!viewMode) return url;
-	const hashIndex = url.indexOf("#");
-	const hash = hashIndex >= 0 ? url.substring(hashIndex) : "";
-	const base = hashIndex >= 0 ? url.substring(0, hashIndex) : url;
-	if (new URLSearchParams(base.split("?")[1] ?? "").has("__view")) return url;
-	return `${base}${base.includes("?") ? "&" : "?"}${VIEW_MODE_PARAM}=${viewMode}${hash}`;
-}
-/**
 * Carry the whole of the collection list's URL state onto a navigation target.
 *
-* `withViewMode` exists because losing the view mode mid-session is jarring.
-* Everything else the list writes to the URL — the search string, the filters,
-* the sort — is state the user built up deliberately, and losing *that* is
-* worse: opening a record from a search and pressing back returned an
-* unfiltered list with an empty search box, so the search had to be retyped
-* for every record they wanted to look at.
+* Every navigation to the collection or one of its records goes through this —
+* a missed call site silently resets the list mid-session. The list reads its
+* state back from the URL on each navigation, so the view mode, the search
+* string, the filters and the sort all have to travel: a URL without them
+* returned an unfiltered list with an empty search box, and the search had to
+* be retyped for every record the user wanted to look at.
 *
 * Copies every param the list currently has rather than an allowlist, because
 * filters are encoded under the field's own name — there is no fixed set to
 * list. Params already on the target win: the caller is more specific.
 *
+* Carries whatever `__view` holds rather than validating it. These call sites
+* are navigations with no collection in hand, so they cannot know whether
+* `map` is one of *this* collection's custom views; checking against the
+* built-ins here would drop every custom view on the first record click. The
+* binding validates on read, which is where the answer is knowable.
+*
 * @param url the URL to decorate. May carry a query string and/or a hash.
 * @param search query string to read from. Defaults to the browser location.
 */
@@ -8185,7 +8479,7 @@ function resolveOpenEntityMode({ collection, viewMode, customView }) {
 * Navigate to a entity using either a side panel or full-screen mode.
 * This is an admin-specific UI concern and lives here (not in common).
 */
-function navigateToEntity({ openEntityMode, collection, entityId, copy, path, selectedTab, defaultValues, sidePanelController, onClose, navigation, replace }) {
+function navigateToEntity({ openEntityMode, collection, entityId, copy, path, selectedTab, defaultValues, sidePanelController, onClose, onUpdate, navigation, replace }) {
 	if (openEntityMode === "side_panel" || openEntityMode === "dialog") sidePanelController.open({
 		entityId,
 		path,
@@ -8194,6 +8488,7 @@ function navigateToEntity({ openEntityMode, collection, entityId, copy, path, se
 		collection,
 		updateUrl: openEntityMode !== "dialog",
 		onClose,
+		onUpdate,
 		defaultValues
 	});
 	else {
@@ -8209,6 +8504,14 @@ function navigateToEntity({ openEntityMode, collection, entityId, copy, path, se
 		navigation.navigate(to, hasOptions ? navigateOptions : void 0);
 	}
 }
+/**
+* Whether `pathname` is the record at `entityPath` or somewhere below it — one
+* of its tabs, its `/edit`. A path segment, not a string prefix:
+* `/c/products/12` is another record, not a place inside `/c/products/1`.
+*/
+function isPathWithinRecord(pathname, entityPath) {
+	return pathname === entityPath || pathname.startsWith(`${entityPath}/`);
+}
 //#endregion
 //#region src/util/entity_actions.ts
 var reservedKeys = [
@@ -8759,21 +9062,234 @@ function unflattenObject(flatObj) {
 		return nestedObj;
 	}, {});
 }
+/**
+* Read a text cell as the number, boolean or array it spells, when it spells
+* one exactly — so the type inference sees `12`, `true` and the export's
+* `["a","b"]` for what they are.
+*
+* Only a cell that is the canonical JSON of its value is read: `JSON.stringify`
+* of the result must give back the cell's text. That makes the read lossless,
+* and the import coerces each value against the property it lands in only
+* later — a string property turns it back into exactly the text in the file.
+* Anything else stays the text it was: `1.10`, `00123`, `1E3`, a twenty-digit
+* SKU that a double cannot hold, the word `null`, and a cell with quotes in it.
+* So does an object: the import flattens objects into `a.b` columns, which
+* would scatter a string property's JSON text into columns that do not exist.
+*/
+function parseCanonicalJsonCell(cell) {
+	if (typeof cell !== "string") return cell;
+	let parsed;
+	try {
+		parsed = JSON.parse(cell);
+	} catch (e) {
+		return cell;
+	}
+	return (typeof parsed === "number" || typeof parsed === "boolean" || Array.isArray(parsed)) && JSON.stringify(parsed) === cell ? parsed : cell;
+}
 function mapJsonParse(obj) {
 	return Object.keys(obj).reduce((acc, key) => {
 		if (isPrototypePollutingKey(key)) {
 			console.warn(`Skipping column "${key}": a header may not reach the prototype chain`);
 			return acc;
 		}
-		try {
-			acc[key] = JSON.parse(obj[key]);
-		} catch (e) {
-			acc[key] = obj[key];
-		}
+		acc[key] = parseCanonicalJsonCell(obj[key]);
 		return acc;
 	}, {});
 }
 //#endregion
+//#region src/data_export/export/export.ts
+function downloadEntitiesExport({ data, additionalData, properties, propertiesOrder, name, flattenArrays, additionalHeaders, exportType, dateExportType }) {
+	console.debug("Downloading export", {
+		dataLength: data.length,
+		properties,
+		exportType,
+		dateExportType
+	});
+	if (exportType === "csv") {
+		const headers = getExportHeaders(properties, propertiesOrder, additionalHeaders, flattenArrays ? getArrayValuesCount(data.map((d) => d.values)) : {});
+		const exportableData = getEntityCSVExportableData(data, additionalData, properties, headers, dateExportType);
+		downloadBlob([entryToCSVRow(headers.map((h) => h.label)), ...exportableData.map((entry) => entryToCSVRow(entry))], `${name}.csv`, "text/csv");
+	} else {
+		const exportableData = getEntityJsonExportableData(data, additionalData, properties, dateExportType);
+		downloadBlob([JSON.stringify(exportableData, null, 2)], `${name}.json`, "application/json");
+	}
+}
+function getEntityCSVExportableData(data, additionalData, properties, headers, dateExportType) {
+	const mergedData = data.map((e) => ({
+		id: e.id,
+		...processValuesForExport(e.values, properties, "csv", dateExportType)
+	}));
+	if (additionalData) additionalData.forEach((additional, index) => {
+		mergedData[index] = {
+			...mergedData[index],
+			...additional
+		};
+	});
+	return mergedData && mergedData.map((entry) => {
+		return headers.map((header) => getValueInPath(entry, header.key));
+	});
+}
+function getEntityJsonExportableData(data, additionalData, properties, dateExportType) {
+	const mergedData = data.map((e) => ({
+		id: e.id,
+		...processValuesForExport(e.values, properties, "json", dateExportType)
+	}));
+	if (additionalData) additionalData.forEach((additional, index) => {
+		mergedData[index] = {
+			...mergedData[index],
+			...additional
+		};
+	});
+	return mergedData;
+}
+function getExportHeaders(properties, propertiesOrder, additionalHeaders, arrayValuesCount) {
+	const headers = [{
+		label: "id",
+		key: "id"
+	}, ...(propertiesOrder ?? Object.keys(properties)).flatMap((childKey) => {
+		const property = properties[childKey];
+		if (!property) {
+			console.warn("Property not found", childKey, properties);
+			return [];
+		}
+		if (arrayValuesCount && arrayValuesCount[childKey] > 1) return Array.from({ length: arrayValuesCount[childKey] }, (_, i) => getHeaders(property, `${childKey}[${i}]`, "")).flat();
+		else return getHeaders(property, childKey, "");
+	})];
+	if (additionalHeaders) headers.push(...additionalHeaders.map((h) => ({
+		label: h,
+		key: h
+	})));
+	return headers;
+}
+/**
+* Get headers for property. There could be more than one header per property
+* @param property
+* @param propertyKey
+* @param prefix
+*/
+function getHeaders(property, propertyKey, prefix = "") {
+	const currentKey = prefix ? `${prefix}.${propertyKey}` : propertyKey;
+	if (property.type === "map" && property.properties) return Object.entries(property.properties).map(([childKey, p]) => getHeaders(p, childKey, currentKey)).flat();
+	else return [{
+		label: currentKey,
+		key: currentKey
+	}];
+}
+/**
+* Read whatever a `date` column actually arrived as into a `Date`.
+*
+* The driver/WebSocket path revives `{ __type: "date" }` into a `Date`; the REST
+* path — which is the one the admin is on — leaves an ISO string, and an epoch
+* number is what a re-imported export carries. Returns `undefined` for anything
+* that is not a date, so the caller can pass the raw value through.
+*/
+function toExportableDate(inputValue) {
+	if (inputValue instanceof Date) return Number.isNaN(inputValue.getTime()) ? void 0 : inputValue;
+	if (typeof inputValue === "number" && Number.isFinite(inputValue)) return new Date(inputValue);
+	if (typeof inputValue === "string" && inputValue.trim() !== "") {
+		const parsed = new Date(inputValue);
+		return Number.isNaN(parsed.getTime()) ? void 0 : parsed;
+	}
+}
+/**
+* The id a relation value points at, for a relation property's value — an
+* `EntityRelation`, or the same thing still in its `{ __type: "relation" }`
+* wire form. `undefined` for anything else, so a bare foreign key passes
+* through as the id it already is.
+*/
+function relationIdForExport(value) {
+	if (value instanceof EntityRelation) return value.id;
+	if (typeof value === "object" && value !== null && "__type" in value && value.__type === "relation" && "id" in value && (typeof value.id === "string" || typeof value.id === "number")) return value.id;
+}
+function processValueForExport(inputValue, property, exportType, dateExportType) {
+	let value;
+	if (property.type === "relation") {
+		const toId = (item) => relationIdForExport(item) ?? item;
+		value = Array.isArray(inputValue) ? inputValue.map(toId) : toId(inputValue);
+	} else if (property.type === "map" && property.properties) value = processValuesForExport(inputValue, property.properties, exportType, dateExportType);
+	else if (property.type === "array") if (property.of && Array.isArray(inputValue)) if (Array.isArray(property.of)) value = property.of.map((p, i) => processValueForExport(inputValue[i], p, exportType, dateExportType));
+	else if (property.of.type === "map") value = exportType === "csv" ? inputValue.map((e) => JSON.stringify(e)) : inputValue.map((e) => processValueForExport(e, property.of, exportType, dateExportType));
+	else value = inputValue.map((e) => processValueForExport(e, property.of, exportType, dateExportType));
+	else value = inputValue;
+	else if (property.type === "reference" && inputValue && typeof inputValue === "object" && "isEntityReference" in inputValue && typeof inputValue.isEntityReference === "function" && inputValue.isEntityReference()) {
+		const ref = inputValue ? inputValue : void 0;
+		value = ref ? ref.fullPath : null;
+	} else if (property.type === "date") {
+		const date = toExportableDate(inputValue);
+		value = date ? dateExportType === "timestamp" ? date.getTime() : date.toISOString() : inputValue;
+	} else value = inputValue;
+	return value;
+}
+function processValuesForExport(inputValues, properties, exportType, dateExportType) {
+	const updatedValues = Object.entries(properties).map(([key, property]) => {
+		const updatedValue = processValueForExport(inputValues && inputValues[key], property, exportType, dateExportType);
+		if (updatedValue === void 0) return {};
+		return { [key]: updatedValue };
+	}).reduce((a, b) => ({
+		...a,
+		...b
+	}), {});
+	return {
+		...inputValues,
+		...updatedValues
+	};
+}
+/**
+* Characters that make a spreadsheet read a cell as a formula rather than text.
+*
+* Quoting is CSV *escaping* and is not enough: Excel, LibreOffice Calc and
+* Sheets strip the CSV quoting at parse time and then evaluate a cell whose
+* first character is one of these — `=HYPERLINK(…)` exfiltrates neighbouring
+* cells on click, `=cmd|'…'!A0` is worse.
+*/
+var FORMULA_TRIGGERS = [
+	"=",
+	"+",
+	"-",
+	"@",
+	"	",
+	"\r"
+];
+/**
+* Neutralise a cell that a spreadsheet would otherwise evaluate, by prefixing a
+* single quote — the standard OWASP mitigation. The apostrophe is consumed by
+* the spreadsheet as "treat the rest as text", so the value reads back intact.
+*/
+function escapeCsvFormula(value) {
+	const first = value.charAt(0);
+	if (!FORMULA_TRIGGERS.includes(first)) return value;
+	if ((first === "-" || first === "+") && value.trim() !== "" && Number.isFinite(Number(value))) return value;
+	return "'" + value;
+}
+/**
+* The inverse of {@link escapeCsvFormula}, for a file read back in: a cell that
+* is an apostrophe followed by a formula trigger loses the apostrophe, as it
+* does when a spreadsheet reads it. Any other apostrophe is text.
+*/
+function unescapeCsvFormula(value) {
+	return value.charAt(0) === "'" && FORMULA_TRIGGERS.includes(value.charAt(1)) ? value.slice(1) : value;
+}
+function toCSVCell(v) {
+	if (v === null || v === void 0) return "";
+	return "\"" + escapeCsvFormula(Array.isArray(v) || typeof v === "object" && !(v instanceof Date) ? JSON.stringify(v) : String(v)).replaceAll("\"", "\"\"") + "\"";
+}
+function entryToCSVRow(entry) {
+	return entry.map(toCSVCell).join(",") + "\r\n";
+}
+function downloadBlob(content, filename, contentType) {
+	const blob = new Blob(content, { type: contentType });
+	const url = URL.createObjectURL(blob);
+	const pom = document.createElement("a");
+	pom.href = url;
+	pom.setAttribute("download", filename);
+	pom.click();
+}
+function downloadDataAsCsv(data, name) {
+	if (data.length === 0) return;
+	const headers = Object.keys(data[0]);
+	downloadBlob([[headers.join(","), ...data.map((row) => headers.map((header) => toCSVCell(row[header])).join(","))].join("\r\n")], `${name}.csv`, "text/csv");
+}
+//#endregion
 //#region src/data_import/utils/csv.ts
 /**
 * Delimiters sniffed from the header row, most common first.
@@ -8791,8 +9307,9 @@ var CANDIDATE_DELIMITERS = [
 * Split CSV text into rows of raw cells, RFC 4180 style.
 *
 * Quoted fields may contain the delimiter, newlines and doubled quotes; this is
-* the exact inverse of what the export's `entryToCSVRow` writes, so a file this
-* admin produced reads back into the cells it was built from.
+* the exact inverse of the quoting the export's `entryToCSVRow` writes, and
+* `parseCsvToObjects` undoes its formula escape, so a file this admin produced
+* reads back into the cells it was built from.
 */
 function parseCsvRows(text, delimiter = ",") {
 	const rows = [];
@@ -8890,7 +9407,7 @@ function parseCsvToObjects(text) {
 		headers: [],
 		data: []
 	};
-	const headers = rows[0].map((header, index) => header.trim() || `Column${index + 1}`);
+	const headers = rows[0].map((header, index) => unescapeCsvFormula(header).trim() || `Column${index + 1}`);
 	return {
 		headers,
 		data: rows.slice(1).map((cells) => {
@@ -8899,7 +9416,7 @@ function parseCsvToObjects(text) {
 				if (isPrototypePollutingKey(header)) return;
 				const cell = cells[index];
 				if (cell === void 0) return;
-				obj[header] = cell;
+				obj[header] = unescapeCsvFormula(cell);
 			});
 			return obj;
 		})
@@ -9302,9 +9819,11 @@ function convertDataToEntity(authController, navigation, data, idColumn, headers
 	const flatObject = flattenEntry(data);
 	if (idColumn) delete flatObject[idColumn];
 	const mappedKeysObject = Object.entries(flatObject).map(([key, value]) => {
-		const mappedKey = getIn(headersMapping, key) ?? key;
+		const mappedKey = Object.prototype.hasOwnProperty.call(headersMapping, key) ? headersMapping[key] : key;
+		if (mappedKey === null) return {};
+		if (value === "") return {};
 		const mappedProperty = getPropertyInPath$1(properties, mappedKey);
-		if (!mappedProperty) return {};
+		if (!mappedProperty || typeof mappedProperty !== "object") return {};
 		const processedValue = processValueMapping(authController, value, navigation, mappedProperty);
 		return { [mappedKey]: processedValue };
 	}).reduce((acc, curr) => ({
@@ -9357,19 +9876,19 @@ function processValueMapping(authController, value, navigation, property) {
 		}
 		return value;
 	}
+	if (from === "string" && to === "array" && typeof value === "string") return processValueMapping(authController, splitListCell(value), navigation, usedProperty);
+	else if (from === "string" && to === "boolean" && typeof value === "string") return readBooleanCell(value);
+	else if (from === "array" && to === "string") return JSON.stringify(value);
 	if (from === "array" && to === "array" && Array.isArray(value) && usedProperty.of && !Array.isArray(usedProperty.of) && !isPropertyBuilder(usedProperty.of)) return value.map((v) => processValueMapping(authController, v, navigation, usedProperty.of));
 	else if (from === "string" && to === "number" && typeof value === "string") {
 		const trimmed = value.trim();
 		if (trimmed === "") return null;
 		const num = Number(trimmed);
 		return Number.isNaN(num) ? null : num;
-	} else if (from === "string" && to === "array" && typeof value === "string" && usedProperty.of && !Array.isArray(usedProperty.of) && !isPropertyBuilder(usedProperty.of)) return value.split(",").map((v) => processValueMapping(authController, v, navigation, usedProperty.of));
-	else if (from === "string" && to === "boolean") return value === "true";
-	else if (from === "number" && to === "boolean") return value === 1;
+	} else if (from === "number" && to === "boolean") return value === 1;
 	else if (from === "boolean" && to === "number") return value ? 1 : 0;
 	else if (from === "boolean" && to === "string") return value ? "true" : "false";
 	else if (from === "number" && to === "string" && typeof value === "number") return value.toString();
-	else if (from === "string" && to === "array" && typeof value === "string") return value.split(",").map((v) => v.trim());
 	else if (from === "string" && to === "date" && typeof value === "string") try {
 		return new Date(value);
 	} catch (e) {
@@ -9398,9 +9917,66 @@ function processValueMapping(authController, value, navigation, property) {
 			databaseId
 		});
 	} else if (from === to) return value;
-	else if (from === "array" && to === "string" && Array.isArray(value)) return value.join(",");
 	return value;
 }
+/**
+* The items of a list cell: a JSON array as written (the export writes lists
+* that way), otherwise the text split on commas. Each item is trimmed and an
+* empty one dropped, so `news, sports` is two tags rather than one with a
+* leading space, and a blank cell is no tags rather than one empty tag.
+*/
+function splitListCell(cell) {
+	const trimmed = cell.trim();
+	if (trimmed.startsWith("[")) try {
+		const parsed = JSON.parse(trimmed);
+		if (Array.isArray(parsed)) return parsed;
+	} catch (e) {}
+	return trimmed.split(",").map((item) => item.trim()).filter((item) => item !== "");
+}
+/**
+* A boolean cell as spreadsheets and people write it: Excel and Sheets export
+* `TRUE`/`FALSE`, and `yes`/`no` and `1`/`0` are common by hand. Anything
+* unreadable is absent — `null`, as a number cell is — rather than a confident
+* `false`.
+*/
+function readBooleanCell(cell) {
+	const normalised = cell.trim().toLowerCase();
+	if ([
+		"true",
+		"1",
+		"yes"
+	].includes(normalised)) return true;
+	if ([
+		"false",
+		"0",
+		"no"
+	].includes(normalised)) return false;
+	return null;
+}
+//#endregion
+//#region src/data_import/utils/id_column.ts
+/**
+* The column an import uses as the row id before the user touches the mapping.
+*
+* The guess decides something destructive: the chosen column is taken out of
+* the values and sent as the id of an upsert, so every row overwrites the record
+* that already has that id. A header that merely *contained* "id" or "key" used
+* to qualify, so a file starting with `width`, `video` or `provider` wrote its
+* widths over the records whose ids they happened to equal.
+*
+* Only the first column is a candidate — the one the export writes the id to —
+* and only when its name says it is the id: the header is `id` (in any case),
+* or it maps onto a property the collection declares with `isId`. Anything else
+* is left for the user to choose in the mapping step.
+*/
+function guessIdColumn(headers, headersMapping, properties) {
+	const firstKey = headers[0];
+	if (firstKey === void 0) return void 0;
+	if (firstKey.trim().toLowerCase() === "id") return firstKey;
+	const mappedKey = headersMapping[firstKey];
+	const mappedProperty = mappedKey ? properties?.[mappedKey] : void 0;
+	if (mappedProperty && "isId" in mappedProperty && mappedProperty.isId) return firstKey;
+}
 //#endregion
 //#region src/data_import/components/DataNewPropertiesMapping.tsx
 function DataNewPropertiesMapping({ importConfig, destinationProperties, buildPropertyView }) {
@@ -9926,8 +10502,8 @@ function EditorCollectionAction({ path, parentCollectionSlugs, parentEntityIds,
 }
 //#endregion
 //#region src/components/CollectionViewBinding/CollectionViewActions.tsx
-var ImportCollectionAction = lazyChunk(() => import("./import-Cxnmpyjl.js").then((n) => n.t).then((m) => ({ default: m.ImportCollectionAction })));
-var ExportCollectionAction = lazyChunk(() => import("./export-LvIpE7sE.js").then((n) => n.t).then((m) => ({ default: m.ExportCollectionAction })));
+var ImportCollectionAction = lazyChunk(() => import("./import-TCgkTVlS.js").then((n) => n.t).then((m) => ({ default: m.ImportCollectionAction })));
+var ExportCollectionAction = lazyChunk(() => import("./export-4bJWdlDK.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();
@@ -11467,27 +12043,32 @@ var ListRow = React.memo(function ListRow({ entity, collection, onClick, selecte
 				className: "flex items-center justify-end gap-0.5 flex-shrink-0 ml-auto",
 				style: { minWidth: actionsWidth },
 				onClick: (e) => e.stopPropagation(),
-				children: listViewActions.map((action, index) => /* @__PURE__ */ jsx(Tooltip, {
-					title: action.name,
-					asChild: true,
-					children: /* @__PURE__ */ jsx(IconButton, {
-						size: "small",
-						onClick: (e) => {
-							e.stopPropagation();
-							action.onClick({
-								view: "collection",
-								entity,
-								path,
-								collection,
-								context,
-								sidePanelController: context?.sidePanelController,
-								selectionController,
-								openEntityMode: openEntityMode ?? collection?.openEntityMode ?? "full_screen"
-							});
-						},
-						children: getIcon(action.icon, void 0, void 0, "smallest")
-					})
-				}, action.key ?? index))
+				children: listViewActions.map((action, index) => {
+					const clickProps = {
+						view: "collection",
+						entity,
+						path,
+						collection,
+						context,
+						sidePanelController: context?.sidePanelController,
+						selectionController,
+						openEntityMode: openEntityMode ?? collection?.openEntityMode ?? "full_screen"
+					};
+					const enabled = !action.isEnabled || action.isEnabled(clickProps);
+					return /* @__PURE__ */ jsx(Tooltip, {
+						title: action.name,
+						asChild: true,
+						children: /* @__PURE__ */ jsx(IconButton, {
+							size: "small",
+							disabled: !enabled,
+							onClick: (e) => {
+								e.stopPropagation();
+								action.onClick(clickProps);
+							},
+							children: getIcon(action.icon, void 0, void 0, "smallest")
+						})
+					}, action.key ?? index);
+				})
 			})
 		]
 	});
@@ -12288,7 +12869,7 @@ function SplitListShowButton({ onClick }) {
 }
 //#endregion
 //#region src/components/EntityInspector.tsx
-var EntityHistoryView = lazyChunk(() => import("./history-DG6Ln7CV.js").then((m) => ({ default: m.EntityHistoryView })));
+var EntityHistoryView = lazyChunk(() => import("./history-BElrZ5Rw.js").then((m) => ({ default: m.EntityHistoryView })));
 /**
 * The JSON tab pulls `prism-react-renderer` — 85 kB, and it was EAGER.
 *
@@ -12691,7 +13272,7 @@ function DetailViewBindingInner({ path, entityId, selectedTab: selectedTabProp,
 			})
 		}, `entity_detail_collection_tab_${view.name}`);
 	});
-	const collectionUrl = withViewMode(urlController.buildUrlCollectionPath(path));
+	const collectionUrl = withListState(urlController.buildUrlCollectionPath(path));
 	const backToCollection = layout === "full_screen" && !onShowList ? () => navigate(collectionUrl) : void 0;
 	const fullScreenButton = !barActions && (layout === "side_panel" || layout === "dialog") && entityId ? /* @__PURE__ */ jsx(Tooltip, {
 		title: "Open full screen",
@@ -13000,7 +13581,7 @@ function SplitListView({ collection, tableController, onEntityClick: externalOnE
 		};
 	}, [selectedEntityId]);
 	const buildUrl = useCallback((subPath) => {
-		return withViewMode(urlController.buildUrlCollectionPath(subPath));
+		return withListState(urlController.buildUrlCollectionPath(subPath));
 	}, [urlController]);
 	const handleCloseDetail = useCallback(() => {
 		navigate(buildUrl(path));
@@ -13450,6 +14031,8 @@ function useBoardDataController({ fullPath, collection, columnProperty, columns,
 			[currentColumnProperty]: ["==", column]
 		};
 		const orderByParam = currentOrderProperty ? [currentOrderProperty, "asc"] : void 0;
+		let active = true;
+		const isCurrent = () => active && !isCleaningUpRef.current;
 		setColumnData((prev) => ({
 			...prev,
 			[column]: {
@@ -13459,7 +14042,7 @@ function useBoardDataController({ fullPath, collection, columnProperty, columns,
 			}
 		}));
 		const onUpdate = async (entities) => {
-			if (isCleaningUpRef.current) return;
+			if (!isCurrent()) return;
 			const pendingMap = pendingItemsRef.current;
 			const mergedEntities = entities.map((e) => {
 				const pending = pendingMap[String(e.id)];
@@ -13518,6 +14101,7 @@ function useBoardDataController({ fullPath, collection, columnProperty, columns,
 			} catch (e) {
 				console.error("Error in afterRead callback:", e);
 			}
+			if (!isCurrent()) return;
 			const newHasMore = entities.length >= itemCount;
 			setColumnData((prev) => {
 				const existing = prev[column];
@@ -13559,10 +14143,10 @@ function useBoardDataController({ fullPath, collection, columnProperty, columns,
 			searchString: currentSearchString
 		});
 		const onError = (error) => {
-			if (isCleaningUpRef.current) return;
+			if (!isCurrent()) return;
 			console.error(`Error loading column ${column}:`, error);
 			fetchOnce().then((res) => onUpdate(res.data)).catch(() => {
-				if (isCleaningUpRef.current) return;
+				if (!isCurrent()) return;
 				setColumnData((prev) => ({
 					...prev,
 					[column]: {
@@ -13588,29 +14172,35 @@ function useBoardDataController({ fullPath, collection, columnProperty, columns,
 				onUpdate(res.data);
 			}, onError);
 			const firstPaintFallback = setTimeout(() => {
-				if (liveDataReceived || isCleaningUpRef.current) return;
+				if (liveDataReceived || !isCurrent()) return;
 				fetchOnce().then((res) => {
-					if (liveDataReceived || isCleaningUpRef.current) return;
+					if (liveDataReceived || !isCurrent()) return;
 					onUpdate(res.data);
 				}).catch(() => void 0);
 			}, LIVE_FIRST_PAINT_TIMEOUT_MS);
 			unsubscribersRef.current[column] = () => {
+				active = false;
 				clearTimeout(firstPaintFallback);
 				unsubscribe?.();
 			};
-		} else fetchOnce().then((res) => onUpdate(res.data)).catch((error) => {
-			if (isCleaningUpRef.current) return;
-			setColumnData((prev) => ({
-				...prev,
-				[column]: {
-					...prev[column],
-					entities: prev[column]?.entities ?? [],
-					loading: false,
-					hasMore: false,
-					error
-				}
-			}));
-		});
+		} else {
+			unsubscribersRef.current[column] = () => {
+				active = false;
+			};
+			fetchOnce().then((res) => onUpdate(res.data)).catch((error) => {
+				if (!isCurrent()) return;
+				setColumnData((prev) => ({
+					...prev,
+					[column]: {
+						...prev[column],
+						entities: prev[column]?.entities ?? [],
+						loading: false,
+						hasMore: false,
+						error
+					}
+				}));
+			});
+		}
 	}, []);
 	useEffect(() => {
 		isCleaningUpRef.current = false;
@@ -13629,6 +14219,7 @@ function useBoardDataController({ fullPath, collection, columnProperty, columns,
 		const currentResolvedPath = resolvedPathRef.current;
 		const currentColumns = columns;
 		const currentColumnItemCounts = columnItemCounts;
+		let cancelled = false;
 		const timeoutId = setTimeout(() => {
 			if (isCleaningUpRef.current) return;
 			currentColumns.forEach((column) => {
@@ -13645,7 +14236,7 @@ function useBoardDataController({ fullPath, collection, columnProperty, columns,
 						where: whereFilter,
 						searchString: currentSearchString
 					}).then((count) => {
-						if (isCleaningUpRef.current) return;
+						if (cancelled || isCleaningUpRef.current) return;
 						setColumnData((prev) => ({
 							...prev,
 							[column]: {
@@ -13661,6 +14252,7 @@ function useBoardDataController({ fullPath, collection, columnProperty, columns,
 			prevColumnItemCountsRef.current = { ...currentColumnItemCounts };
 		}, 0);
 		return () => {
+			cancelled = true;
 			clearTimeout(timeoutId);
 			isCleaningUpRef.current = true;
 			const unsubscribers = { ...unsubscribersRef.current };
@@ -13713,19 +14305,54 @@ function useBoardDataController({ fullPath, collection, columnProperty, columns,
 			[column]: (prev[column] ?? pageSize) + pageSize
 		}));
 	}, [pageSize]);
+	/**
+	* Drop the optimistic overlay for the moves matching `predicate`.
+	*
+	* An entry is otherwise released only when the database "catches up" to
+	* it, which a refused write never does: the card would stay where it was
+	* dropped, on top of whatever the database re-delivers. A refresh is a
+	* request for what the database says, so it lets go of them.
+	*/
+	const dropPendingMoves = useCallback((predicate) => {
+		const pendingMap = pendingItemsRef.current;
+		for (const [id, pending] of Object.entries(pendingMap)) if (predicate(pending.expectedValues)) delete pendingMap[id];
+	}, []);
 	const refreshColumn = useCallback((column) => {
+		dropPendingMoves((expected) => expected[columnPropertyRef.current] === column);
 		setColumnItemCounts((prev) => ({
 			...prev,
 			[column]: pageSize
 		}));
-	}, [pageSize]);
+		prevColumnItemCountsRef.current = {
+			...prevColumnItemCountsRef.current,
+			[column]: pageSize
+		};
+		const unsubscribe = unsubscribersRef.current[column];
+		delete unsubscribersRef.current[column];
+		try {
+			unsubscribe?.();
+		} catch (e) {}
+		setTimeout(() => {
+			if (!isCleaningUpRef.current) subscribeToColumn(column, pageSize);
+		}, 0);
+	}, [
+		pageSize,
+		subscribeToColumn,
+		dropPendingMoves
+	]);
 	const refreshAll = useCallback(() => {
+		dropPendingMoves(() => true);
 		const reset = {};
 		columns.forEach((col) => {
 			reset[col] = pageSize;
 		});
 		setColumnItemCounts(reset);
-	}, [columns, pageSize]);
+		setSubscriptionVersion((v) => v + 1);
+	}, [
+		columns,
+		pageSize,
+		dropPendingMoves
+	]);
 	const moveItemOptimistically = useCallback((itemId, sourceColumn, targetColumn, newValues, newIndex) => {
 		setColumnData((prev) => {
 			const updated = { ...prev };
@@ -13863,6 +14490,8 @@ function isValidOrderKey(value) {
 	}
 }
 function useKanbanDragAndDrop({ collection, fullPath, columnProperty, orderProperty, dataClient, context, boardDataController, analyticsController }) {
+	const snackbarController = useSnackbarController();
+	const { t } = useTranslation();
 	const handleItemsReorder = useCallback(async (items, moveInfo) => {
 		const entity = items.find((item) => item.id === moveInfo?.itemId)?.data;
 		if (!entity || !moveInfo) return;
@@ -13914,16 +14543,16 @@ function useKanbanDragAndDrop({ collection, fullPath, columnProperty, orderPrope
 				...saveProps,
 				collection,
 				data: dataClient,
-				context,
-				afterSave: () => {},
-				afterSaveError: (e) => {
-					console.error("Failed to save entity after reorder:", e);
-					if (boardDataController.refreshAll) boardDataController.refreshAll();
-				}
+				context
 			});
 		} catch (e) {
-			console.error("Error saving entity:", e);
-			if (boardDataController.refreshAll) boardDataController.refreshAll();
+			console.error("Failed to save entity after reorder:", e);
+			snackbarController.open({
+				type: "error",
+				title: t("error_saving_entity"),
+				message: e instanceof Error ? e.message : String(e)
+			});
+			boardDataController.refreshAll();
 		}
 	}, [
 		collection,
@@ -13933,7 +14562,9 @@ function useKanbanDragAndDrop({ collection, fullPath, columnProperty, orderPrope
 		dataClient,
 		boardDataController,
 		analyticsController,
-		fullPath
+		fullPath,
+		snackbarController,
+		t
 	]);
 	return useMemo(() => ({ handleItemsReorder }), [handleItemsReorder]);
 }
@@ -14749,7 +15380,9 @@ function DeleteEntityDialog({ target, collection, onClose, open, onEntityDelete,
 		maxWidth: singleEntity ? "2xl" : "lg",
 		"aria-labelledby": "delete-dialog",
 		open,
-		onOpenChange: (open) => !open ? onClose() : void 0,
+		onOpenChange: (open) => {
+			if (!open) handleCancel();
+		},
 		children: [
 			/* @__PURE__ */ jsx(DialogTitle, {
 				id: "delete-dialog-title",
@@ -14975,7 +15608,7 @@ var copyEntityAction = {
 	name: "Copy",
 	key: "copy",
 	isEnabled: ({ entity }) => Boolean(entity),
-	onClick({ entity, collection, context, path, sidePanelController, highlightEntity, unhighlightEntity, openEntityMode }) {
+	onClick({ entity, collection, context, path, sidePanelController, highlightEntity, unhighlightEntity, onCollectionChange, openEntityMode }) {
 		if (!entity) throw new Error("INTERNAL: copyEntityAction: Entity is undefined");
 		if (!sidePanelController) throw new Error("INTERNAL: copyEntityAction: sidePanelController is undefined");
 		highlightEntity?.(entity);
@@ -14993,6 +15626,7 @@ var copyEntityAction = {
 			copy: true,
 			sidePanelController,
 			onClose: () => unhighlightEntity?.(entity),
+			onUpdate: onCollectionChange,
 			navigation: context.urlController
 		});
 		return Promise.resolve(void 0);
@@ -15332,6 +15966,29 @@ function useWindowSize() {
 }
 //#endregion
 //#region src/components/CollectionTableBinding/internal/popup_field/PopupFormField.tsx
+/**
+* The properties that judge one cell: the property at `propertyKey`, under the
+* maps its key goes through, and nothing beside it.
+*
+* A spread map's child is `address.street`, a path into `properties` rather
+* than a key of it; looked up as a key it found nothing, and the popup
+* validated nothing. The maps on the way carry only the edited child and none
+* of their own rules: the popup shows one field, and an error anywhere else
+* would block the save where no one could see it.
+*/
+function propertiesOfCell(properties, propertyKey) {
+	if (propertyKey in properties) return { [propertyKey]: properties[propertyKey] };
+	const dot = propertyKey.indexOf(".");
+	if (dot === -1) return {};
+	const mapKey = propertyKey.slice(0, dot);
+	const map = properties[mapKey];
+	if (map?.type !== "map" || !map.properties) return {};
+	const children = propertiesOfCell(map.properties, propertyKey.slice(dot + 1));
+	return Object.keys(children).length > 0 ? { [mapKey]: {
+		type: "map",
+		properties: children
+	} } : {};
+}
 function PopupFormField(props) {
 	if (!props.open) return null;
 	return /* @__PURE__ */ jsx(PopupFormFieldLoading, { ...props });
@@ -15431,7 +16088,7 @@ function PopupFormFieldInternal({ tableKey, entityId, customFieldValidator, prop
 	]);
 	const validationSchema = useMemo(() => {
 		if (!collection || !entityId) return;
-		return getEntitySchema(entityId, propertyKey && collection.properties[propertyKey] ? { [propertyKey]: collection.properties[propertyKey] } : {}, customFieldValidator);
+		return getEntitySchema(entityId, propertyKey ? propertiesOfCell(collection.properties, propertyKey) : {}, customFieldValidator);
 	}, [
 		collection,
 		entityId,
@@ -15456,7 +16113,7 @@ function PopupFormFieldInternal({ tableKey, entityId, customFieldValidator, prop
 	const saveValue = async (values) => {
 		setSavingError(null);
 		if (collection && entity && onCellValueChange && propertyKey) return onCellValueChange({
-			value: values[propertyKey],
+			value: getIn(applyValueTransforms(values, collection.properties), propertyKey),
 			propertyKey,
 			data: entity,
 			setError: setSavingError,
@@ -16179,7 +16836,7 @@ function CollectionViewStartActions({ collection, relativePath, parentCollection
 		openNewDocument
 	};
 	const handleBackClick = useCallback(() => {
-		navigate(withViewMode(urlController.buildUrlCollectionPath(path)));
+		navigate(withListState(urlController.buildUrlCollectionPath(path)));
 	}, [
 		navigate,
 		urlController,
@@ -16492,19 +17149,9 @@ var CollectionViewBindingInner = React.memo(function CollectionViewBindingInner(
 		urlController,
 		analyticsController
 	]);
-	const onNewClick = useCallback(() => {
-		const collection = collectionRef.current;
-		analyticsController.onAnalyticsEvent?.("new_entity_click", { path });
-		navigateToEntity({
-			openEntityMode,
-			collection,
-			entityId: void 0,
-			path,
-			sidePanelController,
-			navigation: urlController,
-			onClose: unselectNavigatedEntity
-		});
-	}, [path, sidePanelController]);
+	const onCreatedInPanel = useCallback(() => {
+		setLastDeleteTimestamp(Date.now());
+	}, []);
 	/**
 	* Attach rows that already exist to this parent.
 	*
@@ -16544,7 +17191,7 @@ var CollectionViewBindingInner = React.memo(function CollectionViewBindingInner(
 	const selectionDialog = useSelectionDialog({
 		path: linkedTargetSlug ?? false,
 		multiselect: true,
-		onMultipleEntitiesSelected: linkExistingEntities
+		onSelectionDone: linkExistingEntities
 	});
 	const openNewDocument = useCallback((defaultValues) => {
 		const collection = collectionRef.current;
@@ -16557,15 +17204,18 @@ var CollectionViewBindingInner = React.memo(function CollectionViewBindingInner(
 			path,
 			sidePanelController,
 			navigation: urlController,
-			onClose: unselectNavigatedEntity
+			onClose: unselectNavigatedEntity,
+			onUpdate: onCreatedInPanel
 		});
 	}, [
 		path,
 		sidePanelController,
 		openEntityMode,
 		urlController,
-		unselectNavigatedEntity
+		unselectNavigatedEntity,
+		onCreatedInPanel
 	]);
+	const onNewClick = useCallback(() => openNewDocument(), [openNewDocument]);
 	const onMultipleDeleteClick = () => {
 		analyticsController.onAnalyticsEvent?.("multiple_delete_dialog_open", { path });
 		setDeleteEntityClicked(selection);
@@ -16774,7 +17424,9 @@ var CollectionViewBindingInner = React.memo(function CollectionViewBindingInner(
 		collection,
 		collectionWithLocalOrder,
 		path,
-		sidePanelController
+		sidePanelController,
+		openEntityMode,
+		urlController
 	]);
 	const updateLastDeleteTimestamp = useCallback(() => {
 		setLastDeleteTimestamp(Date.now());
@@ -16836,7 +17488,8 @@ var CollectionViewBindingInner = React.memo(function CollectionViewBindingInner(
 		filter: tableController.filterValues,
 		sortBy: tableController.sortBy,
 		searchString: tableController.searchString,
-		onCountChange: setDocsCount
+		onCountChange: setDocsCount,
+		refreshKey: lastDeleteTimestamp
 	});
 	const liveSelectionQuery = useMemo(() => ({
 		path,
@@ -17215,7 +17868,7 @@ function DefaultCollectionEmptyState({ canCreate, onNewClick, isSearching, searc
 * callers (e.g. React StrictMode double-mount) share the same promise.
 */
 var inflightCountRequests = /* @__PURE__ */ new Map();
-function EntitiesCount({ path, collection, filter, sortBy, searchString, onCountChange }) {
+function EntitiesCount({ path, collection, filter, sortBy, searchString, onCountChange, refreshKey }) {
 	const dataClient = useData();
 	const sortKey = React.useMemo(() => sortBy ? serializeOrderBy(sortBy) ?? "" : "", [sortBy]);
 	const dataClientRef = React.useRef(dataClient);
@@ -17232,7 +17885,7 @@ function EntitiesCount({ path, collection, filter, sortBy, searchString, onCount
 		let cancelled = false;
 		const whereParams = filter && Object.keys(filter).length > 0 ? filter : void 0;
 		const orderByParams = sortBy && sortBy.length > 0 ? sortBy.map(([field, direction]) => [String(field), direction]) : void 0;
-		const cacheKey = `${path}|${filterKey}|${sortKey}|${searchString ?? ""}`;
+		const cacheKey = `${path}|${filterKey}|${sortKey}|${searchString ?? ""}|${refreshKey ?? ""}`;
 		let countPromise = inflightCountRequests.get(cacheKey);
 		if (!countPromise) {
 			countPromise = accessor.count({
@@ -17256,7 +17909,8 @@ function EntitiesCount({ path, collection, filter, sortBy, searchString, onCount
 		path,
 		filterKey,
 		sortKey,
-		searchString
+		searchString,
+		refreshKey
 	]);
 	return null;
 }
@@ -17408,7 +18062,7 @@ function getChanges(source, comparison) {
 				continue;
 			}
 			if (sourceValue.some((item, index) => !deepEqual(item, comparisonArray[index]))) changes[key] = sourceValue;
-		} else if (isObject(sourceValue) && sourceValue && isObject(comparisonValue) && comparisonValue) {
+		} else if (isPlainObject(sourceValue) && isPlainObject(comparisonValue)) {
 			const nestedChanges = getChanges(sourceValue, comparisonValue);
 			if (Object.keys(nestedChanges).length > 0) changes[key] = nestedChanges;
 		} else changes[key] = sourceValue;
@@ -17416,6 +18070,24 @@ function getChanges(source, comparison) {
 	return changes;
 }
 /**
+* What an update of a stored record sends: every top-level property whose value
+* differs from the stored one — whole.
+*
+* Whole, because that is the unit an update replaces. It sets each property it
+* carries, so the value sent *is* the property's new value: a map sent as the
+* one key that changed would erase every key left out, a key-value map with a
+* key removed would arrive empty, and a geopoint with one coordinate moved is
+* refused for lacking the other. {@link getChanges} walks into plain objects to
+* find what changed inside them, which is right for comparing a draft with the
+* form and wrong for a write.
+*/
+function getChangedProperties(values, storedValues) {
+	const changes = {};
+	const keys = /* @__PURE__ */ new Set([...Object.keys(values), ...Object.keys(storedValues)]);
+	for (const key of keys) if (!deepEqual(values[key], storedValues[key])) changes[key] = values[key];
+	return changes;
+}
+/**
 * What the local-changes backup still has to offer, given what the form is
 * already showing — the answer the "unsaved local changes" banner is asking for.
 * `undefined` means there is nothing left to apply, and no banner.
@@ -18051,6 +18723,18 @@ function EditViewBindingInner({ path, entityId, selectedTab: selectedTabProp, co
 		path,
 		entity: usedEntity
 	});
+	const leaveRecord = useCallback(() => {
+		if (layout === "side_panel" || layout === "dialog") sideDialogContext.close(true);
+		else if (onCloseRequest) onCloseRequest();
+		else navigate(withListState(urlController.buildUrlCollectionPath(path)), { replace: true });
+	}, [
+		layout,
+		sideDialogContext,
+		onCloseRequest,
+		navigate,
+		urlController,
+		path
+	]);
 	const recordActionItems = usedEntity && recordActions.length ? recordActions.map((action, index) => {
 		const clickProps = {
 			view: "form",
@@ -18060,7 +18744,7 @@ function EditViewBindingInner({ path, entityId, selectedTab: selectedTabProp, co
 			context,
 			sidePanelController: adminContext.sidePanelController,
 			openEntityMode: layout,
-			navigateBack: navigateBack ?? (() => void 0),
+			navigateBack: leaveRecord,
 			formContext
 		};
 		return /* @__PURE__ */ jsxs(MenuItem, {
@@ -18795,8 +19479,8 @@ var useBuildSidePanel = (collectionRegistryController, urlController, navigation
 				const panelsFromUrl = buildSidePanelsFromUrl(urlController.urlPathToDataPath(location.pathname), collectionRegistryController.collections ?? [], newFlag);
 				for (let i = 0; i < panelsFromUrl.length; i++) {
 					const props = panelsFromUrl[i];
-					if (i === 0) sideDialogsController.replace(propsToSidePanel(props, urlController.buildUrlCollectionPath, urlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController, location.search));
-					else sideDialogsController.open(propsToSidePanel(props, urlController.buildUrlCollectionPath, urlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController, location.search));
+					if (i === 0) sideDialogsController.replace(propsToSidePanel(props, urlController.buildUrlCollectionPath, urlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController));
+					else sideDialogsController.open(propsToSidePanel(props, urlController.buildUrlCollectionPath, urlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController));
 				}
 			}
 			initialised.current = true;
@@ -18810,7 +19494,7 @@ var useBuildSidePanel = (collectionRegistryController, urlController, navigation
 				const panelsFromUrl = buildSidePanelsFromUrl(urlController.urlPathToDataPath(location.pathname), collectionRegistryController.collections ?? [], false);
 				if (panelsFromUrl.length <= currentKeys.length) return;
 				const lastPanel = panelsFromUrl[panelsFromUrl.length - 1];
-				const panelProps = propsToSidePanel(lastPanel, urlController.buildUrlCollectionPath, urlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController, location.search);
+				const panelProps = propsToSidePanel(lastPanel, urlController.buildUrlCollectionPath, urlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController);
 				const lastCurrentPanel = currentKeys.length > 0 ? currentKeys[currentKeys.length - 1] : void 0;
 				if (!lastCurrentPanel || lastCurrentPanel !== panelProps.key) sideDialogsController.replace(panelProps);
 			}
@@ -18842,25 +19526,23 @@ var useBuildSidePanel = (collectionRegistryController, urlController, navigation
 		sideDialogsController.open(propsToSidePanel({
 			...props,
 			selectedTab: props.selectedTab ?? defaultSelectedView
-		}, urlController.buildUrlCollectionPath, urlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController, location.search));
+		}, urlController.buildUrlCollectionPath, urlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController));
 	}, [
 		sideDialogsController,
 		urlController.buildUrlCollectionPath,
 		urlController.resolveDatabasePathsFrom,
 		smallLayout,
-		authController.user,
-		location.search
+		authController.user
 	]);
 	const replace = useCallback((props) => {
 		if (props.copy && !props.entityId) throw Error("If you want to copy a entity you need to provide a entityId");
-		sideDialogsController.replace(propsToSidePanel(props, urlController.buildUrlCollectionPath, urlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController, location.search));
+		sideDialogsController.replace(propsToSidePanel(props, urlController.buildUrlCollectionPath, urlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController));
 	}, [
 		urlController.buildUrlCollectionPath,
 		urlController.resolveDatabasePathsFrom,
 		sideDialogsController,
 		smallLayout,
-		authController.user,
-		location.search
+		authController.user
 	]);
 	return useMemo(() => ({
 		close,
@@ -18917,8 +19599,9 @@ function buildSidePanelsFromUrl(path, collections, newFlag) {
 	};
 	return sidePanel ? [sidePanel] : [];
 }
-var propsToSidePanel = (props, buildUrlCollectionPath, resolveIdsFrom, smallLayout, customizationController, authController, locationSearch) => {
+var propsToSidePanel = (props, buildUrlCollectionPath, resolveIdsFrom, smallLayout, customizationController, authController) => {
 	const collectionPath = removeInitialAndTrailingSlashes(props.path);
+	const locationSearch = typeof window !== "undefined" ? window.location.search : "";
 	const shouldUpdateUrl = props.updateUrl !== false;
 	const urlPath = shouldUpdateUrl ? props.entityId ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}${props.selectedTab ? "/" + props.selectedTab : ""}${locationSearch}#${SIDE_URL_HASH}`) : buildUrlCollectionPath(`${collectionPath}${locationSearch}#${NEW_URL_HASH}`) : void 0;
 	const parentUrlPath = shouldUpdateUrl ? buildUrlCollectionPath(collectionPath) : void 0;
@@ -19096,12 +19779,11 @@ function useHistory(params) {
 		refreshTrigger
 	]);
 	const loadMore = useCallback(() => {
-		if (!isLoading && hasMore && offset + entries.length < total) setOffset((prev) => prev + pageSize);
+		if (!isLoading && hasMore && entries.length < total) setOffset((prev) => prev + pageSize);
 	}, [
 		isLoading,
 		hasMore,
 		pageSize,
-		offset,
 		entries.length,
 		total
 	]);
@@ -20184,7 +20866,7 @@ function SelectionTableBinding(props) {
 		collection: props.collection
 	});
 }
-function SelectionTableBindingInternal({ onSingleEntitySelected, onMultipleEntitiesSelected, multiselect, collection, path: pathInput, selectedEntityIds: selectedEntityIdsProp, description, fixedFilter, maxSelection }) {
+function SelectionTableBindingInternal({ onSingleEntitySelected, onMultipleEntitiesSelected, onSelectionDone, multiselect, collection, path: pathInput, selectedEntityIds: selectedEntityIdsProp, description, fixedFilter, maxSelection }) {
 	const sideDialogContext = useSideDialogContext();
 	const sidePanelController = useSidePanel();
 	const urlController = useUrlController();
@@ -20291,8 +20973,13 @@ function SelectionTableBindingInternal({ onSingleEntitySelected, onMultipleEntit
 	};
 	const onDone = useCallback((event) => {
 		event.stopPropagation();
+		onSelectionDone?.(selectedEntities);
 		sideDialogContext.close(false);
-	}, [sideDialogContext]);
+	}, [
+		sideDialogContext,
+		onSelectionDone,
+		selectedEntities
+	]);
 	const displayedColumnIds = useColumnIds(collection, false);
 	const tableController = useDataTableController({
 		path,
@@ -20457,6 +21144,7 @@ function ArrayOfReferencesFieldBinding({ propertyKey, value, error, showError, d
 	});
 	const onEntryClick = (e) => {
 		e.preventDefault();
+		if (disabled || isSubmitting) return;
 		referenceDialogController.open();
 	};
 	const buildEntry = useCallback(({ index, internalId, storedProps, storeProps }) => {
@@ -20475,7 +21163,9 @@ function ArrayOfReferencesFieldBinding({ propertyKey, value, error, showError, d
 	}, [
 		ofProperty.path,
 		ofProperty.admin?.previewProperties,
-		value
+		value,
+		disabled,
+		isSubmitting
 	]);
 	const title = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LabelWithIcon, {
 		propertyKey,
@@ -20497,7 +21187,7 @@ function ArrayOfReferencesFieldBinding({ propertyKey, value, error, showError, d
 		children: [/* @__PURE__ */ jsx(ArrayContainer, {
 			droppableId: propertyKey,
 			value,
-			disabled: isSubmitting,
+			disabled: disabled || isSubmitting,
 			buildEntry,
 			canAddElements: false,
 			addLabel: property.name ? t("add_reference_to", { name: property.name }) : t("add_reference"),
@@ -20506,14 +21196,9 @@ function ArrayOfReferencesFieldBinding({ propertyKey, value, error, showError, d
 		}), /* @__PURE__ */ jsxs(Button, {
 			className: "ml-3.5 my-4 justify-center text-left",
 			variant: "text",
-			disabled: isSubmitting,
+			disabled: disabled || isSubmitting,
 			onClick: onEntryClick,
-			children: [
-				/* @__PURE__ */ jsx(PencilIcon, { size: 16 }),
-				t("edit"),
-				" ",
-				property.name
-			]
+			children: [/* @__PURE__ */ jsx(PencilIcon, { size: 16 }), t("edit_name", { name: property.name ?? propertyKey })]
 		})]
 	})] });
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -20711,7 +21396,8 @@ function DateTimeFieldBinding({ propertyKey, value, setValue, autoFocus, error,
 		size,
 		value: internalValue,
 		onChange: (dateValue) => setValue(dateValue),
-		mode: property.mode,
+		mode: getDatePropertyMode(property),
+		timezone: getDatePropertyTimezone(property),
 		clearable: property.admin?.clearable,
 		locale,
 		error: showError,
@@ -21294,13 +21980,20 @@ function MarkdownEditorFieldBinding({ property, propertyKey, value, setValue, in
 	const internalValue = useRef(value);
 	useEffect(() => {
 		getMarkdownUtils().then(() => {
-			canonicalRef.current = canonicalizeMarkdown(value);
+			canonicalRef.current = canonicalizeMarkdown(canonicalSourceRef.current);
 		});
 	}, []);
 	const canonicalRef = useRef(useMemo(() => canonicalizeMarkdown(value), []));
+	const canonicalSourceRef = useRef(value);
 	const onContentChange = useCallback((content) => {
 		const normalizedContent = normalizeMarkdown(content);
-		if (normalizedContent === canonicalRef.current) return;
+		if (normalizedContent === canonicalRef.current) {
+			if (value !== canonicalSourceRef.current) {
+				internalValue.current = canonicalSourceRef.current;
+				setValue(canonicalSourceRef.current);
+			}
+			return;
+		}
 		if (normalizedContent === normalizeMarkdown(value)) return;
 		internalValue.current = content;
 		setValue(content);
@@ -21308,6 +22001,7 @@ function MarkdownEditorFieldBinding({ property, propertyKey, value, setValue, in
 	useEffect(() => {
 		if (internalValue.current !== value) {
 			internalValue.current = value;
+			canonicalSourceRef.current = value;
 			canonicalRef.current = canonicalizeMarkdown(value);
 			setFieldVersion((v) => v + 1);
 		}
@@ -21510,6 +22204,7 @@ function ReferenceFieldBinding(props) {
 }
 function ReferenceFieldBindingInternal({ propertyKey, value, setValue, error, showError, isSubmitting, disabled, minimalistView, touched, autoFocus, property, includeDescription, hideLabel, size = "medium" }) {
 	if (!property.path) throw new Error("Property path is required for ReferenceFieldBinding");
+	const { t } = useTranslation();
 	const refValue = value;
 	useClearRestoreValue({
 		property,
@@ -21535,6 +22230,7 @@ function ReferenceFieldBindingInternal({ propertyKey, value, setValue, error, sh
 	});
 	const onEntryClick = (e) => {
 		e.preventDefault();
+		if (disabled || isSubmitting) return;
 		referenceDialogController.open();
 	};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -21559,12 +22255,12 @@ function ReferenceFieldBindingInternal({ propertyKey, value, setValue, error, sh
 			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-hover group-hover:bg-surface-hover"),
-				onClick: onEntryClick,
+				onClick: disabled || isSubmitting ? void 0 : onEntryClick,
 				size: "medium",
 				children: [/* @__PURE__ */ jsx(IconForView, {
 					collectionOrView: collection,
 					className: "text-surface-300 dark:text-surface-600"
-				}), `Edit ${property.name}`.toUpperCase()]
+				}), t("edit_name", { name: property.name ?? propertyKey }).toUpperCase()]
 			})
 		})] }),
 		/* @__PURE__ */ jsx(FieldHelperText, {
@@ -22620,6 +23316,7 @@ function MultipleRelationFieldBinding({ propertyKey, value: valueProp, error, sh
 	});
 	const onEntryClick = (e) => {
 		e.preventDefault();
+		if (disabled || isSubmitting) return;
 		referenceDialogController.open();
 	};
 	const buildEntry = useCallback(({ index, internalId, storedProps, storeProps }) => {
@@ -22637,7 +23334,9 @@ function MultipleRelationFieldBinding({ propertyKey, value: valueProp, error, sh
 	}, [
 		relation,
 		property.admin?.previewProperties,
-		value
+		value,
+		disabled,
+		isSubmitting
 	]);
 	const title = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LabelWithIcon, {
 		propertyKey,
@@ -22659,7 +23358,7 @@ function MultipleRelationFieldBinding({ propertyKey, value: valueProp, error, sh
 		children: [/* @__PURE__ */ jsx(ArrayContainer, {
 			droppableId: propertyKey,
 			value,
-			disabled: isSubmitting,
+			disabled: disabled || isSubmitting,
 			buildEntry,
 			canAddElements: false,
 			addLabel: property.name ? t("add_reference_to", { name: property.name }) : t("add_reference"),
@@ -22669,14 +23368,9 @@ function MultipleRelationFieldBinding({ propertyKey, value: valueProp, error, sh
 			className: "ml-3.5 my-4 justify-center text-left",
 			variant: "text",
 			color: "primary",
-			disabled: isSubmitting,
+			disabled: disabled || isSubmitting,
 			onClick: onEntryClick,
-			children: [
-				/* @__PURE__ */ jsx(PencilIcon, { size: 16 }),
-				t("edit"),
-				" ",
-				property.name
-			]
+			children: [/* @__PURE__ */ jsx(PencilIcon, { size: 16 }), t("edit_name", { name: property.name ?? propertyKey })]
 		})]
 	})] });
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ExpandablePanel, {
@@ -22749,6 +23443,7 @@ function RelationSelectorBinding({ propertyKey, value, size, error, showError, d
 	});
 }
 function SingleRelationFieldBinding({ propertyKey, value, size, error, showError, disabled, isSubmitting, property, includeDescription, hideLabel, setValue, relation }) {
+	const { t } = useTranslation();
 	const normalizedValue = value && !Array.isArray(value) ? normalizeToEntityRelation(value) : null;
 	const validValue = !!normalizedValue;
 	const collection = relation?.target();
@@ -22766,6 +23461,7 @@ function SingleRelationFieldBinding({ propertyKey, value, size, error, showError
 	});
 	const onEntryClick = (e) => {
 		e.preventDefault();
+		if (disabled || isSubmitting) return;
 		referenceDialogController.open();
 	};
 	const usedRelation = Array.isArray(value) ? void 0 : normalizedValue ?? void 0;
@@ -22791,12 +23487,12 @@ function SingleRelationFieldBinding({ propertyKey, value, size, error, showError
 			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-hover group-hover:bg-surface-hover"),
-				onClick: onEntryClick,
+				onClick: disabled || isSubmitting ? void 0 : onEntryClick,
 				size: "medium",
 				children: [/* @__PURE__ */ jsx(IconForView, {
 					collectionOrView: collection,
 					className: "text-surface-300 dark:text-surface-600"
-				}), `Edit ${property.name}`.toUpperCase()]
+				}), t("edit_name", { name: property.name ?? propertyKey }).toUpperCase()]
 			})
 		})] }),
 		/* @__PURE__ */ jsx(FieldHelperText, {
@@ -23402,6 +24098,7 @@ function PropertyFieldBindingInternal({ propertyKey, property, context, includeD
 }
 function FieldInternal({ Component, componentProps: { propertyKey, property, includeDescription, hideLabel, underlyingValueHasChanged, partOfArray, partOfBlock, minimalistView, autoFocus, context, disabled, size, onPropertyChange }, formexFieldProps }) {
 	const { plugins } = useCustomizationController();
+	const { t } = useTranslation();
 	const rebaseContext = useRebaseContext();
 	const fieldSlotProps = React.useMemo(() => ({
 		propertyKey,
@@ -23472,7 +24169,7 @@ function FieldInternal({ Component, componentProps: { propertyKey, property, inc
 		underlyingValueHasChanged && !isSubmitting && /* @__PURE__ */ jsx(Typography, {
 			variant: "caption",
 			className: "ml-3.5",
-			children: "This value has been updated elsewhere"
+			children: t("value_updated_elsewhere")
 		})
 	] });
 }
@@ -23978,7 +24675,13 @@ function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified
 			Promise.resolve(onSubmitProp(valuesToBeSaved, formex)).finally(() => setIsSavingAutoSave(false));
 		}
 	}, false, 2e3);
-	const [underlyingChanges] = useState({});
+	/**
+	* The properties the record changed underneath an edit of the user's own,
+	* keyed to the value they changed to — each one shown as "updated
+	* elsewhere" while the form still holds something else. Filled by the
+	* effect that follows the baseline, below.
+	*/
+	const [underlyingChanges, setUnderlyingChanges] = useState({});
 	const initialEntityId = useMemo(() => {
 		if (status === "new" || status === "copy") return;
 		else return entityIdProp;
@@ -24047,6 +24750,7 @@ function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified
 		}), {}) : {},
 		onSubmit,
 		onReset: () => {
+			setUnderlyingChanges({});
 			onResetProp?.();
 			onValuesModified?.(false, baseInitialValues);
 		},
@@ -24093,12 +24797,13 @@ function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified
 	};
 	const lastSavedValues = useRef(entity?.values);
 	const save = async (values) => {
-		const valuesToSave = status === "existing" ? getChanges(values, entity?.values || {}) : values;
+		const writtenValues = applyValueTransforms(values, collection.properties);
+		const valuesToSave = status === "existing" ? getChangedProperties(writtenValues, entity?.values || {}) : writtenValues;
 		if (status === "existing" && Object.keys(valuesToSave).length === 0 && entity) return Promise.resolve(entity);
 		lastSavedValues.current = values;
 		if (!onSubmitProp) return;
 		if (autoSave ?? false) {
-			setValuesToBeSaved(values);
+			setValuesToBeSaved(valuesToSave);
 			return Promise.resolve();
 		}
 		return Promise.resolve(onSubmitProp(valuesToSave, formex)).then((result) => {
@@ -24155,23 +24860,45 @@ function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified
 		uniqueFieldValidator
 	]);
 	useOnAutoSave(autoSave, formex, lastSavedValues, save);
+	/**
+	* The record changed while the form was open: someone else saved it, and
+	* the listener delivered the new version as a new baseline.
+	*
+	* An unmodified form follows it whole — formex does that. A modified one
+	* keeps the edit, and formex keeps *everything* it holds: a property the
+	* user never changed would still show the old value, differ from the new
+	* stored one, and be written back by the next save, reverting the other
+	* change without a word.
+	*
+	* So each top-level property that changed underneath is judged on its own,
+	* against the baseline the form last followed. One the user has not changed
+	* follows the record. One the user has changed keeps the edit — that is
+	* what a save writes — and is marked as updated elsewhere, so the overwrite
+	* is not a surprise.
+	*/
+	const followedBaseline = useRef(baseInitialValues);
 	useEffect(() => {
-		if (!autoSave && !formex.isSubmitting && underlyingChanges && entity) Object.entries(underlyingChanges).forEach(([key, value]) => {
-			const formValue = formex.values[key];
-			if (!deepEqual(value, formValue) && !formex.touched[key]) {
-				console.debug("Updated value from the driver:", key, value);
-				formex.setFieldValue(key, value !== void 0 ? value : null);
-			}
+		const previous = followedBaseline.current ?? {};
+		const next = baseInitialValues ?? {};
+		followedBaseline.current = baseInitialValues;
+		if (previous === next) return;
+		const current = formex.values;
+		if (deepEqual(previous, current)) return;
+		const conflicts = {};
+		const changedUnderneath = /* @__PURE__ */ new Set([...Object.keys(previous), ...Object.keys(next)]);
+		for (const key of changedUnderneath) if (deepEqual(previous[key], next[key])) changedUnderneath.delete(key);
+		else if (deepEqual(current[key], previous[key])) formex.setFieldValue(key, next[key]);
+		else if (!deepEqual(current[key], next[key])) conflicts[key] = next[key];
+		if (changedUnderneath.size === 0) return;
+		setUnderlyingChanges((prev) => {
+			const updated = { ...prev };
+			changedUnderneath.forEach((key) => {
+				if (key in conflicts) updated[key] = conflicts[key];
+				else delete updated[key];
+			});
+			return updated;
 		});
-	}, [
-		formex.isSubmitting,
-		autoSave,
-		underlyingChanges,
-		entity,
-		formex.values,
-		formex.touched,
-		formex.setFieldValue
-	]);
+	}, [baseInitialValues]);
 	const formFieldKeys = getFormFieldKeys(collection);
 	const layout = useMemo(() => resolveFormLayout({
 		collection,
@@ -24248,7 +24975,7 @@ function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified
 			console.warn(`Property ${field.key} not found in collection ${collection.name} in properties or additional fields. Skipping.`);
 			return null;
 		}
-		const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(field.key) && formex.touched[field.key];
+		const underlyingValueHasChanged = field.key in underlyingChanges && !deepEqual(formex.values[field.key], underlyingChanges[field.key]);
 		const disabled = isFieldDisabled(property);
 		const selfLabelling = isSelfLabellingProperty(property);
 		const cmsFormFieldProps = {
@@ -25658,6 +26385,6 @@ function getFullIdPath(propertyKey, propertyNamespace) {
 	return idToPropertiesPath(propertyNamespace ? `${propertyNamespace}.${propertyKey}` : propertyKey);
 }
 //#endregion
-export { NAVIGATION_DEFAULT_GROUP_NAME as $, CollectionRegistryContext as $n, getCollectionBySlugWithin as $t, getFieldId as A, ReadOnlyFieldBinding as An, getIconForWidget as Ar, convertDataToEntity as At, MapFieldBinding as B, MapPropertyPreview as Bn, detectCsvDelimiter as Bt, EntityFormBinding as C, NavigationStateContext as Cn, LABEL_ICON_SIZE as Cr, EntityCardBinding as Ct, getDefaultFieldConfig as D, SelectableTableContext as Dn, getBracketNotation as Dr, useCollectionEditorDialogsState as Dt, DEFAULT_FIELD_CONFIGS as E, SideDialogsControllerContext as En, PropertyKeyHint as Er, ConfigControllerProvider as Et, SelectFieldBinding as F, UserPreview as Fn, isRelationProperty as Fr, ImportSaveInProgress as Ft, useSelectionDialog as G, ArrayOfStorageComponentsPreview as Gn, SearchIconsView as Gt, DateTimeFieldBinding as H, ArrayOfStringsPreview as Hn, parseCsvToObjects as Ht, RepeatFieldBinding as I, NumberPropertyPreview as In, IMPORT_BATCH_SIZE as It, useBuildUrlController as J, InlineEntityListPreview as Jn, BreadcrumbsProvider as Jt, SelectionTableBinding as K, RelationPreview as Kn, FieldCaption as Kt, ReferenceFieldBinding as L, BooleanPreview as Ln, saveImportedEntities as Lt, TextFieldBinding as M, FieldHelperText as Mn, getPropertyInPath$1 as Mr, processValueMapping as Mt, SwitchFieldBinding as N, ArrayOfMapsPreview as Nn, getResolvedPropertyInPath as Nr, getInferenceType as Nt, getDefaultFieldId as O, ArrayCustomShapedFieldBinding as On, getDefaultPropertiesOrder as Or, ImportNewPropertyFieldPreview as Ot, StorageUploadFieldBinding as P, PropertyPreview as Pn, isReferenceProperty as Pr, useImportConfig as Pt, useResolvedCollections as Q, useSidePanel as Qn, addInitialSlash as Qt, MultiSelectFieldBinding as R, DatePreview as Rn, ImportFileUpload as Rt, isSchemaChangeCancelled as S, useUrlController as Sn, FieldBlock as Sr, CollectionCardViewBinding as St, PropertyFieldBinding as T, useSideDialogsController as Tn, spanClass as Tr, useCollectionEditorController as Tt, BlockFieldBinding as U, ArrayPropertyEnumPreview as Un, ArrayContainer as Ut, KeyValueFieldBinding as V, ArrayOneOfPreview as Vn, parseCsvRows as Vt, ArrayOfReferencesFieldBinding as W, ArrayEnumPreview as Wn, PropertyConfigBadge as Wt, useTopLevelNavigation as X, EntityPreviewBinding as Xn, resolveEntityView as Xt, useBuildNavigationStateController as Y, ReferencePreview as Yn, resolveEntityAction as Yt, useResolvedViews as Z, SidePanelControllerContext as Zn, mergeEntityActions as Zt, useCollectionsConfigController as _, CollectionTableBinding as _n, ImagePreview as _r, editEntityAction as _t, namespaceToPropertiesPath as a, resolveCollectionPathIds$1 as an, getEntityTitlePropertyKeyForEntity as ar, getEntityViewWidth as at, asUnavailable as b, useAdminContext as bn, FormRail as br, DetailViewBinding as bt, buildCollectionGenerationCallback as c, SelectionMenu as cn, EnumValuesChip as cr, useSafeSnackbarController as ct, fromSerializableCollectionConfigs as d, resolveSelection as dn, SkeletonPropertyComponent as dr, getInitialEntityValues as dt, getCollectionPathsCombinations as en, useCollectionRegistryController as er, useBuildCollectionRegistryController as et, fromSerializableProperties as f, selectionQueryToFindParams as fn, renderSkeletonCaptionText as fr, removeEmptyContainers as ft, toSerializableProperty as g, VirtualTableInput$1 as gn, UrlComponentPreview as gr, deleteEntityAction as gt, toSerializableProperties as h, useSelectionController as hn, renderSkeletonText as hr, copyEntityAction as ht, namespaceToPropertiesOrderPath as i, removeTrailingSlash$1 as in, getEntityTitlePropertyKey as ir, buildSidePanelsFromUrl as it, VectorFieldBinding as j, LabelWithIcon as jn, getPropertiesWithPropertiesOrder as jr, flattenEntry as jt, getFieldConfig as k, useClearRestoreValue as kn, getIconForProperty as kr, DataNewPropertiesMapping as kt, validateCollectionJson as l, MAX_SELECTION_ROWS as ln, StorageThumbnail as lr, extractTouchedValues as lt, toSerializableCollectionConfig as m, walkEntityPages as mn, renderSkeletonImageThumbnail as mr, CollectionViewBinding as mt, getFullIdPath as n, removeInitialAndTrailingSlashes$1 as nn, useResolvedUser as nr, resolveNavigationFrom as nt, CollectionGenerationApiError as o, resolveOpenEntityMode as on, ArrayPropertyPreview as or, useBuildSidePanel as ot, fromSerializableProperty as p, serializeSelectionQuery as pn, renderSkeletonIcon as pr, zodToFormErrors as pt, SideDialogs as q, ArrayOfReferencesPreview as qn, useBreadcrumbsController as qt, idToPropertiesPath as r, removeInitialSlash as rn, getEntityPreviewKeys as rr, useResolvedNavigationFrom as rt, DEFAULT_COLLECTION_GENERATION_ENDPOINT as s, resolveViewMode as sn, StringPropertyPreview as sr, EditViewBinding as st, getFullId as t, getLastSegment$1 as tn, getUserLabel as tr, useHistory as tt, fromSerializableCollectionConfig as u, SELECTION_PAGE_SIZE as un, StorageThumbnailInternal as ur, getChanges as ut, LiveSchemaError as v, SelectableTable as vn, EmptyValue as vr, resetPasswordAction as vt, EntityForm as w, useNavigationStateController as wn, isSelfLabellingProperty as wr, CollectionViewActions as wt, createLiveSchemaClient as x, UrlContext as xn, RecordMeta as xr, EntityViewBinding as xt, SchemaChangeCancelled as y, CollectionRowActions as yn, FormSections as yr, CreationResultDialog as yt, MarkdownEditorFieldBinding as z, KeyValuePreview as zn, convertFileToJson as zt };
+export { NAVIGATION_DEFAULT_GROUP_NAME as $, ArrayPropertyEnumPreview as $n, PropertyConfigBadge as $t, getFieldId as A, useAdminContext as An, FormRail as Ar, guessIdColumn as At, MapFieldBinding as B, ReadOnlyFieldBinding as Bn, getIconForWidget as Br, convertFileToJson as Bt, EntityFormBinding as C, serializeSelectionQuery as Cn, renderSkeletonIcon as Cr, EntityCardBinding as Ct, getDefaultFieldConfig as D, CollectionTableBinding as Dn, ImagePreview as Dr, useCollectionEditorDialogsState as Dt, DEFAULT_FIELD_CONFIGS as E, VirtualTableInput$1 as En, UrlComponentPreview as Er, ConfigControllerProvider as Et, SelectFieldBinding as F, useSideDialogsController as Fn, spanClass as Fr, useImportConfig as Ft, useSelectionDialog as G, UserPreview as Gn, isRelationProperty as Gr, downloadDataAsCsv as Gt, DateTimeFieldBinding as H, FieldHelperText as Hn, getPropertyInPath$1 as Hr, parseCsvRows as Ht, RepeatFieldBinding as I, SideDialogsControllerContext as In, PropertyKeyHint as Ir, ImportSaveInProgress as It, useBuildUrlController as J, DatePreview as Jn, escapeCsvFormula as Jt, SelectionTableBinding as K, NumberPropertyPreview as Kn, downloadEntitiesExport as Kt, ReferenceFieldBinding as L, SelectableTableContext as Ln, getBracketNotation as Lr, IMPORT_BATCH_SIZE as Lt, TextFieldBinding as M, useUrlController as Mn, FieldBlock as Mr, flattenEntry as Mt, SwitchFieldBinding as N, NavigationStateContext as Nn, LABEL_ICON_SIZE as Nr, processValueMapping as Nt, getDefaultFieldId as O, SelectableTable as On, EmptyValue as Or, ImportNewPropertyFieldPreview as Ot, StorageUploadFieldBinding as P, useNavigationStateController as Pn, isSelfLabellingProperty as Pr, getInferenceType as Pt, useResolvedCollections as Q, ArrayOfStringsPreview as Qn, ArrayContainer as Qt, MultiSelectFieldBinding as R, ArrayCustomShapedFieldBinding as Rn, getDefaultPropertiesOrder as Rr, saveImportedEntities as Rt, isSchemaChangeCancelled as S, selectionQueryToFindParams as Sn, renderSkeletonCaptionText as Sr, CollectionCardViewBinding as St, PropertyFieldBinding as T, useSelectionController as Tn, renderSkeletonText as Tr, useCollectionEditorController as Tt, BlockFieldBinding as U, ArrayOfMapsPreview as Un, getResolvedPropertyInPath as Ur, parseCsvToObjects as Ut, KeyValueFieldBinding as V, LabelWithIcon as Vn, getPropertiesWithPropertiesOrder as Vr, detectCsvDelimiter as Vt, ArrayOfReferencesFieldBinding as W, PropertyPreview as Wn, isReferenceProperty as Wr, downloadBlob as Wt, useTopLevelNavigation as X, MapPropertyPreview as Xn, getEntityJsonExportableData as Xt, useBuildNavigationStateController as Y, KeyValuePreview as Yn, getEntityCSVExportableData as Yt, useResolvedViews as Z, ArrayOneOfPreview as Zn, unescapeCsvFormula as Zt, useCollectionsConfigController as _, resolveViewMode as _n, StringPropertyPreview as _r, editEntityAction as _t, namespaceToPropertiesPath as a, resolveEntityView as an, ReferencePreview as ar, getEntityViewWidth as at, asUnavailable as b, SELECTION_PAGE_SIZE as bn, StorageThumbnailInternal as br, DetailViewBinding as bt, buildCollectionGenerationCallback as c, getCollectionBySlugWithin as cn, useSidePanel as cr, useSafeSnackbarController as ct, fromSerializableCollectionConfigs as d, isPathWithinRecord as dn, getUserLabel as dr, getInitialEntityValues as dt, SearchIconsView as en, ArrayEnumPreview as er, useBuildCollectionRegistryController as et, fromSerializableProperties as f, removeInitialAndTrailingSlashes$1 as fn, useResolvedUser as fr, removeEmptyContainers as ft, toSerializableProperty as g, resolveOpenEntityMode as gn, ArrayPropertyPreview as gr, deleteEntityAction as gt, toSerializableProperties as h, resolveCollectionPathIds$1 as hn, getEntityTitlePropertyKeyForEntity as hr, copyEntityAction as ht, namespaceToPropertiesOrderPath as i, resolveEntityAction as in, InlineEntityListPreview as ir, buildSidePanelsFromUrl as it, VectorFieldBinding as j, UrlContext as jn, RecordMeta as jr, convertDataToEntity as jt, getFieldConfig as k, CollectionRowActions as kn, FormSections as kr, DataNewPropertiesMapping as kt, validateCollectionJson as l, getCollectionPathsCombinations as ln, CollectionRegistryContext as lr, extractTouchedValues as lt, toSerializableCollectionConfig as m, removeTrailingSlash$1 as mn, getEntityTitlePropertyKey as mr, CollectionViewBinding as mt, getFullIdPath as n, useBreadcrumbsController as nn, RelationPreview as nr, resolveNavigationFrom as nt, CollectionGenerationApiError as o, mergeEntityActions as on, EntityPreviewBinding as or, useBuildSidePanel as ot, fromSerializableProperty as p, removeInitialSlash as pn, getEntityPreviewKeys as pr, zodToFormErrors as pt, SideDialogs as q, BooleanPreview as qn, entryToCSVRow as qt, idToPropertiesPath as r, BreadcrumbsProvider as rn, ArrayOfReferencesPreview as rr, useResolvedNavigationFrom as rt, DEFAULT_COLLECTION_GENERATION_ENDPOINT as s, addInitialSlash as sn, SidePanelControllerContext as sr, EditViewBinding as st, getFullId as t, FieldCaption as tn, ArrayOfStorageComponentsPreview as tr, useHistory as tt, fromSerializableCollectionConfig as u, getLastSegment$1 as un, useCollectionRegistryController as ur, getChanges as ut, LiveSchemaError as v, SelectionMenu as vn, EnumValuesChip as vr, resetPasswordAction as vt, EntityForm as w, walkEntityPages as wn, renderSkeletonImageThumbnail as wr, CollectionViewActions as wt, createLiveSchemaClient as x, resolveSelection as xn, SkeletonPropertyComponent as xr, EntityViewBinding as xt, SchemaChangeCancelled as y, MAX_SELECTION_ROWS as yn, StorageThumbnail as yr, CreationResultDialog as yt, MarkdownEditorFieldBinding as z, useClearRestoreValue as zn, getIconForProperty as zr, ImportFileUpload as zt };
 
-//# sourceMappingURL=util-CyIcgnv2.js.map
+//# sourceMappingURL=util-DybQBkug.js.map