@rebasepro/admin 0.12.1-canary.gf5f1d39 → 0.13.0

package/dist/{util-B5fJm1FA.js → util-GiwPgxnL.js}

@@ -1,9 +1,9 @@
 import * as React$1 from "react";
 import React, { Suspense, createContext, createElement, forwardRef, lazy, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { deepEqual } from "fast-equals";
-import { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, ArrowLeftIcon, ArrowRightToLineIcon, Badge, BooleanSwitchWithLabel, Button, CHIP_COLORS, 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, LoaderIcon, LoadingButton, MailIcon, Markdown, Maximize2Icon, Menu, MenuItem, MinusIcon, MoreVerticalIcon, MultiSelect, MultiSelectItem, 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, TableView, Tabs, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, Typography, Unlink2Icon, UploadIcon, UserIcon, VirtualTableDateField, VirtualTableInput, VirtualTableInput as VirtualTableInput$1, VirtualTableNumberInput, VirtualTableSwitch, VoteIcon, XCircleIcon, XIcon, cls, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedDisabled, getColorSchemeForSeed, iconSize, lucideIcons, paperMixin, useDebouncedCallback, useInjectStyles, useOutsideAlerter } from "@rebasepro/ui";
+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, MailIcon, Markdown, Maximize2Icon, Menu, MenuItem, MinusIcon, MoreVerticalIcon, MultiSelect, MultiSelectItem, 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, lucideIcons, paperMixin, useDebouncedCallback, useInjectStyles, useOutsideAlerter } from "@rebasepro/ui";
 import { CollectionRegistry, DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE, canReadCollection, enumToObjectEntries, getArrayResolvedProperties, getDefaultValueFor, getDefaultValueFortype, getDefaultValuesFor, getEntityChildViews, getLabelOrConfigFrom, getReferenceFrom, getRelationFrom, getSubcollections, getTableName, isPropertyBuilder, normalizeToEntityRelation, resolveArrayProperties, resolveEnumValues, resolveProperty, resolveRelationProperty, resolveStorageFilenameString, resolveStoragePathString, resolveStorageSource } from "@rebasepro/common";
-import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, CollectionScopeProvider, DEFAULT_PAGE_SIZE, ErrorTooltip, ErrorView, FORM_CONTAINER_WIDTH, IconForView, PluginProviderStack, StorageSourceContext, UnsavedChangesDialog, UserDisplay, addInitialSlash, buildEnumLabel, createFormexStub, deleteEntityWithCallbacks, flattenKeys, getAdminEntityChildViews, getCollectionBySlugWithin, getCollectionPathsCombinations, getColorScheme, getColumnKeysForProperty, getEntityFromCache, getEntityFromMemoryCache, getEntityImagePreviewPropertyKey, getFormFieldKeys, getIcon, getLastSegment as getLastSegment$1, getLocalChangesBackup, getNavigationEntriesFromPath, getParentReferencesFromPath, getRelationIncludeParams, getRowHeight, getTitlePropertyCandidates, getTitlePropertyKey, getTitlePropertyKeyForValues, iconsSearch, 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, saveEntityToCache, saveEntityToMemoryCache, saveEntityWithCallbacks, useAnalyticsController, useApiConfig, useAuthController, useCollectionScope, useColumnIds, useComponentOverride, useCustomizationController, useData, useDataTableController, useFetch, useLargeLayout, useModeController, 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, flattenKeys, getAdminEntityChildViews, getCollectionBySlugWithin, getCollectionPathsCombinations, getColorScheme, getColumnKeysForProperty, getEntityFromCache, getEntityFromMemoryCache, getEntityImagePreviewPropertyKey, getFormFieldKeys, getIcon, getLastSegment as getLastSegment$1, getLeadingRelationTitleKey, getLocalChangesBackup, getNavigationEntriesFromPath, getParentReferencesFromPath, getRelationIncludeParams, getRowHeight, getTitlePropertyCandidates, getTitlePropertyKey, getTitlePropertyKeyForValues, iconsSearch, 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, useCollectionScope, useColumnIds, useComponentOverride, useCustomizationController, useData, useDataTableController, useFetch, useLargeLayout, useModeController, 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 { defaultDateFormat, getHashValue, getValueInPath, hydrateRegExp, isObject, mergeDeep, randomString, toArray } from "@rebasepro/utils";
@@ -14,7 +14,7 @@ import { useDropzone } from "react-dropzone";
 import { EntityReference, EntityRelation, GeoPoint, Vector, getCollectionDataPath, getDataSourceCapabilities, isRelationalCollectionConfig } from "@rebasepro/types";
 import { z } from "zod";
 import useMeasure from "react-use-measure";
-import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import { useLocation, useNavigate, useSearchParams } from "react-router";
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
@@ -24,40 +24,139 @@ import { inferTypeFromValue } from "@rebasepro/inference";
 import { Highlight, themes } from "prism-react-renderer";
 import { generateKeyBetween, generateNKeysBetween } from "fractional-indexing";
 import { resolveAdminCollection } from "@rebasepro/admin-types";
-//#region src/form/components/FormEntry.tsx
-function FormEntry({ propertyKey, widthPercentage = 100, children }) {
-	return /* @__PURE__ */ jsx("div", {
-		id: `form_field_${propertyKey}`,
-		className: "relative",
-		style: { width: widthPercentage === 100 ? "100%" : `calc(${widthPercentage}% - 8px)` },
-		children: /* @__PURE__ */ jsx(ErrorBoundary, { children })
-	});
+//#region src/util/property_utils.tsx
+/**
+* Resolve a size value (string token or number) to a numeric pixel value
+* suitable for passing to Lucide icons.
+*/
+function resolveSize(size) {
+	if (typeof size === "number") return size;
+	return iconSize[size];
 }
-//#endregion
-//#region src/form/components/FormLayout.tsx
-function FormLayout({ children, className }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cls("flex flex-wrap gap-x-4 w-full space-y-6", className),
-		children
-	});
+function isReferenceProperty(property) {
+	if (!property) return null;
+	if (property.type === "reference") return true;
+	if (property.type === "array") if (Array.isArray(property.of)) return false;
+	else return property.of?.type === "reference";
+	return false;
+}
+function isRelationProperty(property) {
+	if (!property) return null;
+	if (property.type === "relation") return true;
+	if (property.type === "array") if (Array.isArray(property.of)) return false;
+	else return property.of?.type === "relation";
+	return false;
+}
+function getIconForWidget(widget, size) {
+	return /* @__PURE__ */ jsx(widget?.Icon ?? CircleIcon, { size: resolveSize(size) });
 }
-//#endregion
-//#region src/form/components/LabelWithIcon.tsx
 /**
-* Render the label of with an icon and the title of a property
-* @group Form custom fields
+* Returns a default Lucide icon component based on property type.
+* This provides a sensible fallback when no PropertyConfig is available.
 */
-var LabelWithIcon = forwardRef(({ icon, title, small, className, required }, ref) => {
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: cls("align-middle inline-flex items-center my-0.5", small ? "gap-1" : "gap-2", className),
-		children: [icon, /* @__PURE__ */ jsx("span", {
-			className: `text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`,
-			children: (title ?? "") + (required ? " *" : "")
-		})]
+function getDefaultIconForProperty(property) {
+	switch (property.type) {
+		case "string":
+			if (property.storage) return UploadIcon;
+			if (property.admin?.urlPreview) return GlobeIcon;
+			if (property.email) return MailIcon;
+			if (property.admin?.multiline || property.admin?.markdown) return AlignLeftIcon;
+			return TextIcon;
+		case "number": return HashIcon;
+		case "boolean": return FlagIcon;
+		case "date": return CalendarIcon;
+		case "map": return VoteIcon;
+		case "array": {
+			const of = property.of;
+			if (property.oneOf) return Rows3Icon;
+			if (of && !Array.isArray(of)) {
+				if (of.type === "reference") return LinkIcon;
+				if (of.type === "string" && of.storage) return UploadIcon;
+			}
+			return RepeatIcon;
+		}
+		case "reference": return LinkIcon;
+		case "relation": return LinkIcon;
+		case "vector": return HashIcon;
+		default: return CircleIcon;
+	}
+}
+function getIconForProperty(property, size = "small", fields = {}) {
+	const px = resolveSize(size);
+	if (isPropertyBuilder(property)) return /* @__PURE__ */ jsx(FunctionSquareIcon, { size: px });
+	const configId = property.propertyConfig || void 0;
+	const widget = configId ? fields[configId] : void 0;
+	if (widget?.Icon) return getIconForWidget(widget, size);
+	return /* @__PURE__ */ jsx(getDefaultIconForProperty(property), { size: px });
+}
+/**
+* Get a property in a property tree from a path like
+* `address.street`
+* @param properties
+* @param path
+*/
+function getPropertyInPath(properties, path) {
+	if (typeof properties === "object") {
+		if (path in properties) return properties[path];
+		if (path.includes(".")) {
+			const pathSegments = path.split(".");
+			const childProperty = properties[pathSegments[0]];
+			if (typeof childProperty === "object" && childProperty.type === "map" && childProperty.properties) return getPropertyInPath(childProperty.properties, pathSegments.slice(1).join("."));
+		}
+	}
+}
+function getResolvedPropertyInPath(properties, path) {
+	if (typeof properties === "object") {
+		if (path in properties) return properties[path];
+		if (path.includes(".")) {
+			const pathSegments = path.split(".");
+			const childProperty = properties[pathSegments[0]];
+			if (childProperty.type === "map" && childProperty.properties) return getResolvedPropertyInPath(childProperty.properties, pathSegments.slice(1).join("."));
+		}
+	}
+}
+function getBracketNotation(path) {
+	return path.replace(/\.([^.]*)/g, "[$1]");
+}
+/**
+* Get properties sorted by their order, but include ALL properties.
+* Nested keys (like "data.mode") in propertiesOrder are ignored - they're for column ordering.
+* @param properties
+* @param propertiesOrder
+*/
+function getPropertiesWithPropertiesOrder(properties, propertiesOrder) {
+	if (!propertiesOrder) return properties;
+	const propertyKeys = Object.keys(properties);
+	const validOrderKeys = propertiesOrder.filter((key) => !key.includes(".") && properties[key]);
+	const result = {};
+	validOrderKeys.forEach((key) => {
+		const property = properties[key];
+		if (typeof property === "object" && property.type === "map" && property.properties) {
+			const mapProp = property;
+			result[key] = {
+				...mapProp,
+				properties: getPropertiesWithPropertiesOrder(mapProp.properties, mapProp.propertiesOrder ?? [])
+			};
+		} else if (property) result[key] = property;
 	});
-});
-LabelWithIcon.displayName = "LabelWithIcon";
+	propertyKeys.forEach((key) => {
+		if (!result[key]) {
+			const property = properties[key];
+			if (typeof property === "object" && property.type === "map" && property.properties) {
+				const mapProp = property;
+				result[key] = {
+					...mapProp,
+					properties: getPropertiesWithPropertiesOrder(mapProp.properties, mapProp.propertiesOrder ?? [])
+				};
+			} else if (property) result[key] = property;
+		}
+	});
+	return result;
+}
+function getDefaultPropertiesOrder(collection) {
+	if (collection.propertiesOrder) return collection.propertiesOrder;
+	return [...Object.keys(collection.properties), ...(collection.additionalFields ?? []).map((field) => field.key)];
+}
 //#endregion
 //#region src/components/PropertyIdCopyTooltip.tsx
 function PropertyIdCopyTooltip({ propertyKey, className, children }) {
@@ -98,6 +197,289 @@ function PropertyIdCopyTooltipContent({ propertyKey }) {
 	});
 }
 //#endregion
+//#region src/form/components/FieldBlock.tsx
+/**
+* Does this property's editor supply its own heading?
+*
+* Arrays, maps, `oneOf` blocks and key-value editors render as a collapsible
+* panel whose header *is* the label — hiding it would leave a panel you cannot
+* identify or, worse, cannot expand. Those keep their own; everything else gets
+* its label from {@link FieldBlock}, which is what makes a text field and a
+* select finally agree on where a label goes.
+*
+* Exported because the layout resolver's span rules and this rule have to stay
+* in step: the self-labelling types are exactly the ones that take a full row.
+*/
+function isSelfLabellingProperty(property) {
+	if (!property) return false;
+	switch (property.type) {
+		case "map": return !property.admin?.spreadChildren;
+		case "array": {
+			if (property.oneOf) return true;
+			if (Array.isArray(property.of) || !property.of) return true;
+			const of = property.of;
+			if (of.type === "string" && (of.enum || of.storage)) return false;
+			if (of.type === "number" && of.enum) return false;
+			return true;
+		}
+		default: return false;
+	}
+}
+/**
+* One field's worth of the form grid: label, control, description.
+*
+* The label carries a small type icon so a number reads differently from a
+* relation at a glance, and the description sits under the control where it
+* annotates what you just filled in.
+*/
+function FieldBlock({ propertyKey, property, showLabel, children }) {
+	const description = property?.description?.trim();
+	const required = Boolean(property?.validation?.required);
+	return /* @__PURE__ */ jsxs("div", {
+		id: `form_field_${propertyKey}`,
+		className: "relative flex flex-col min-w-0",
+		children: [
+			showLabel && /* @__PURE__ */ jsx(PropertyIdCopyTooltip, {
+				propertyKey,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: cls("flex items-center gap-1.5 text-sm font-medium leading-tight mb-1.5", "text-text-secondary dark:text-text-secondary-dark"),
+					children: [
+						property && /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-text-disabled dark:text-text-disabled-dark",
+							children: getIconForProperty(property, "smallest")
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: property?.name ?? propertyKey
+						}),
+						required && /* @__PURE__ */ jsx("span", {
+							className: "text-red-500 dark:text-red-500 -ml-1",
+							children: "*"
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-w-0",
+				children: /* @__PURE__ */ jsx(ErrorBoundary, { children })
+			}),
+			showLabel && description && /* @__PURE__ */ jsx(Typography, {
+				variant: "caption",
+				color: "disabled",
+				className: "mt-1.5 ml-0.5 leading-snug",
+				children: description
+			})
+		]
+	});
+}
+//#endregion
+//#region src/form/components/FormRail.tsx
+/**
+* The metadata column beside the form.
+*
+* This replaces a `w-80 2xl:w-96` rail that held a Save button and several
+* hundred pixels of nothing. It renders only when it has something to say, and
+* the actions it used to hold now live in the identity bar, where they stay
+* visible while you scroll.
+*/
+function FormRail({ fields, showRecordMeta, entity, renderField }) {
+	if (!fields.length && !showRecordMeta) return null;
+	return /* @__PURE__ */ jsxs("aside", {
+		className: cls("flex flex-col gap-6 shrink-0 w-72 border-l overflow-y-auto", "px-5 py-6 bg-surface-50 dark:bg-surface-900", defaultBorderMixin),
+		children: [fields.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-5",
+			children: fields.map(renderField)
+		}), showRecordMeta && entity && /* @__PURE__ */ jsx(RecordMeta, { entity })]
+	});
+}
+function RecordMeta({ entity }) {
+	const createdAt = pickDate(entity.values, [
+		"created_at",
+		"createdAt",
+		"created_on"
+	]);
+	const updatedAt = pickDate(entity.values, [
+		"updated_at",
+		"updatedAt",
+		"modified_at"
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2.5",
+		children: [
+			/* @__PURE__ */ jsx(Typography, {
+				variant: "caption",
+				className: "text-xs font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark",
+				children: "Record"
+			}),
+			/* @__PURE__ */ jsx(MetaRow, {
+				label: "ID",
+				value: String(entity.id),
+				copyable: true
+			}),
+			createdAt && /* @__PURE__ */ jsx(MetaRow, {
+				label: "Created",
+				value: createdAt
+			}),
+			updatedAt && /* @__PURE__ */ jsx(MetaRow, {
+				label: "Updated",
+				value: updatedAt
+			})
+		]
+	});
+}
+function MetaRow({ label, value, copyable }) {
+	const [copied, setCopied] = React.useState(false);
+	const copy = () => {
+		navigator.clipboard?.writeText(value).then(() => {
+			setCopied(true);
+			setTimeout(() => setCopied(false), 1600);
+		}, () => void 0);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-baseline justify-between gap-3 min-w-0",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-xs text-text-disabled dark:text-text-disabled-dark shrink-0",
+			children: label
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-1 min-w-0",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "font-mono text-xs text-text-secondary dark:text-text-secondary-dark truncate",
+				title: value,
+				children: value
+			}), copyable && /* @__PURE__ */ jsx(Tooltip, {
+				title: copied ? "Copied" : "Copy",
+				children: /* @__PURE__ */ jsx(IconButton, {
+					size: "smallest",
+					onClick: copy,
+					children: copied ? /* @__PURE__ */ jsx(CheckIcon, { size: iconSize.smallest }) : /* @__PURE__ */ jsx(CopyIcon, { size: iconSize.smallest })
+				})
+			})]
+		})]
+	});
+}
+/**
+* Audit timestamps are a convention, not a contract — a collection may name them
+* anything or not have them at all — so this reads the values it recognises and
+* stays quiet otherwise rather than rendering an empty row.
+*/
+function pickDate(values, keys) {
+	if (!values) return void 0;
+	for (const key of keys) {
+		const value = values[key];
+		if (value instanceof Date) return value.toLocaleDateString();
+		if (typeof value === "string" && value) {
+			const parsed = new Date(value);
+			if (!Number.isNaN(parsed.getTime())) return parsed.toLocaleDateString();
+		}
+	}
+}
+//#endregion
+//#region src/form/components/FormSections.tsx
+function FormSections({ sections, collapsed, onToggle, errorKeys, renderField }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-8",
+		children: sections.map((section) => {
+			const hasError = section.fields.some((f) => errorKeys.has(f.key));
+			const isCollapsed = section.collapsible && collapsed.has(section.key) && !hasError;
+			return /* @__PURE__ */ jsxs("section", {
+				className: "min-w-0",
+				children: [section.title && /* @__PURE__ */ jsx(Header, {
+					title: section.title,
+					collapsible: section.collapsible,
+					collapsed: isCollapsed,
+					controls: `form_section_${section.key}`,
+					onToggle: () => onToggle(section.key)
+				}), !isCollapsed && /* @__PURE__ */ jsx("div", {
+					id: `form_section_${section.key}`,
+					className: cls("grid gap-x-4 gap-y-5 min-w-0", "grid-cols-1 @2xl:grid-cols-4"),
+					children: section.fields.map(renderField)
+				})]
+			}, section.key);
+		})
+	});
+}
+function Header({ title, collapsible, collapsed, controls, onToggle }) {
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		collapsible && /* @__PURE__ */ jsx(ChevronDownIcon, {
+			size: iconSize.smallest,
+			className: cls("text-text-disabled dark:text-text-disabled-dark transition-transform duration-150", collapsed && "-rotate-90")
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "text-xs font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark whitespace-nowrap",
+			children: title
+		}),
+		/* @__PURE__ */ jsx("span", { className: cls("flex-1 border-t", defaultBorderMixin) })
+	] });
+	const className = "flex items-center gap-2.5 w-full mb-3.5";
+	if (!collapsible) return /* @__PURE__ */ jsx("div", {
+		className,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onToggle,
+		"aria-expanded": !collapsed,
+		"aria-controls": collapsed ? void 0 : controls,
+		className: cls(className, "text-left hover:opacity-80 transition-opacity"),
+		children: content
+	});
+}
+//#endregion
+//#region src/form/components/useRailVisible.tsx
+/**
+* Below this the form is a single column and the rail is not shown.
+*
+* Roughly the 288px rail plus a content column still wide enough to hold a
+* four-up row. Above it the rail is worth having even in the split view; below
+* it — a narrow split pane, the side panel, the dialog, a phone — its fields
+* fold back into the column.
+*/
+var RAIL_MIN_WIDTH = 1e3;
+/**
+* Is there room beside the form for the metadata rail?
+*
+* Measured on the form element rather than the viewport, because the same form
+* renders in a side panel and a dialog inside a wide window — a media query
+* would say "desktop" and hand a 600px panel a rail it cannot fit.
+*
+* This has to be a real measurement rather than a CSS `hidden` class: the
+* layout resolver *moves* fields into the rail, so hiding it with CSS did not
+* fold them back into the column, it made them unreachable. Status, category
+* and any other rail field simply could not be edited in the side panel, the
+* dialog, or on a phone.
+*/
+function useRailVisible(ref) {
+	const [visible, setVisible] = useState(false);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const measure = () => setVisible(element.getBoundingClientRect().width >= RAIL_MIN_WIDTH);
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [ref]);
+	return visible;
+}
+//#endregion
+//#region src/form/components/LabelWithIcon.tsx
+/**
+* Render the label of with an icon and the title of a property
+* @group Form custom fields
+*/
+var LabelWithIcon = forwardRef(({ icon, title, small, className, required }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cls("align-middle inline-flex items-center my-0.5", small ? "gap-1" : "gap-2", className),
+		children: [icon, /* @__PURE__ */ jsx("span", {
+			className: `text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`,
+			children: (title ?? "") + (required ? " *" : "")
+		})]
+	});
+});
+LabelWithIcon.displayName = "LabelWithIcon";
+//#endregion
 //#region src/form/components/LabelWithIconAndTooltip.tsx
 /**
 * Render the label of with an icon and the title of a property
@@ -580,170 +962,36 @@ function StringPropertyPreview({ propertyKey, value, property, size, textOnly })
 //#region src/preview/property_previews/ArrayPropertyPreview.tsx
 /**
 * @group Preview components
-*/
-function ArrayPropertyPreview({ propertyKey, value, property, size }) {
-	if (property.type !== "array") throw Error("Picked wrong preview component ArrayPreview");
-	if (!property.of) throw Error(`You need to specify an 'of' prop (or specify a custom field) in your array property ${propertyKey}`);
-	const authController = useAuthController();
-	const resolvedProperties = resolveArrayProperties({
-		propertyKey,
-		property,
-		propertyConfigs: useCustomizationController().propertyConfigs,
-		authController
-	});
-	const values = value;
-	if (!values) return null;
-	const childSize = size === "medium" ? "medium" : "small";
-	return /* @__PURE__ */ jsx("div", {
-		className: "w-full flex flex-col gap-2",
-		children: values && values.map((val, index) => {
-			if (!resolvedProperties) throw Error("Property resolvedProperties is undefined");
-			const of = resolvedProperties[index] ?? resolvedProperties[index] ?? (Array.isArray(property.of) ? property.of[index] : property.of);
-			return of ? /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx("div", {
-				className: cls(defaultBorderMixin, "m-1 border-b last:border-b-0"),
-				children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyPreview, {
-					propertyKey,
-					value: val,
-					property: of,
-					size: childSize
-				}) })
-			}) }, "preview_array_" + index) : null;
-		})
-	});
-}
-//#endregion
-//#region src/util/property_utils.tsx
-/**
-* Resolve a size value (string token or number) to a numeric pixel value
-* suitable for passing to Lucide icons.
-*/
-function resolveSize(size) {
-	if (typeof size === "number") return size;
-	return iconSize[size];
-}
-function isReferenceProperty(property) {
-	if (!property) return null;
-	if (property.type === "reference") return true;
-	if (property.type === "array") if (Array.isArray(property.of)) return false;
-	else return property.of?.type === "reference";
-	return false;
-}
-function isRelationProperty(property) {
-	if (!property) return null;
-	if (property.type === "relation") return true;
-	if (property.type === "array") if (Array.isArray(property.of)) return false;
-	else return property.of?.type === "relation";
-	return false;
-}
-function getIconForWidget(widget, size) {
-	return /* @__PURE__ */ jsx(widget?.Icon ?? CircleIcon, { size: resolveSize(size) });
-}
-/**
-* Returns a default Lucide icon component based on property type.
-* This provides a sensible fallback when no PropertyConfig is available.
-*/
-function getDefaultIconForProperty(property) {
-	switch (property.type) {
-		case "string":
-			if (property.storage) return UploadIcon;
-			if (property.admin?.urlPreview) return GlobeIcon;
-			if (property.email) return MailIcon;
-			if (property.admin?.multiline || property.admin?.markdown) return AlignLeftIcon;
-			return TextIcon;
-		case "number": return HashIcon;
-		case "boolean": return FlagIcon;
-		case "date": return CalendarIcon;
-		case "map": return VoteIcon;
-		case "array": {
-			const of = property.of;
-			if (property.oneOf) return Rows3Icon;
-			if (of && !Array.isArray(of)) {
-				if (of.type === "reference") return LinkIcon;
-				if (of.type === "string" && of.storage) return UploadIcon;
-			}
-			return RepeatIcon;
-		}
-		case "reference": return LinkIcon;
-		case "relation": return LinkIcon;
-		case "vector": return HashIcon;
-		default: return CircleIcon;
-	}
-}
-function getIconForProperty(property, size = "small", fields = {}) {
-	const px = resolveSize(size);
-	if (isPropertyBuilder(property)) return /* @__PURE__ */ jsx(FunctionSquareIcon, { size: px });
-	const configId = property.propertyConfig || void 0;
-	const widget = configId ? fields[configId] : void 0;
-	if (widget?.Icon) return getIconForWidget(widget, size);
-	return /* @__PURE__ */ jsx(getDefaultIconForProperty(property), { size: px });
-}
-/**
-* Get a property in a property tree from a path like
-* `address.street`
-* @param properties
-* @param path
-*/
-function getPropertyInPath(properties, path) {
-	if (typeof properties === "object") {
-		if (path in properties) return properties[path];
-		if (path.includes(".")) {
-			const pathSegments = path.split(".");
-			const childProperty = properties[pathSegments[0]];
-			if (typeof childProperty === "object" && childProperty.type === "map" && childProperty.properties) return getPropertyInPath(childProperty.properties, pathSegments.slice(1).join("."));
-		}
-	}
-}
-function getResolvedPropertyInPath(properties, path) {
-	if (typeof properties === "object") {
-		if (path in properties) return properties[path];
-		if (path.includes(".")) {
-			const pathSegments = path.split(".");
-			const childProperty = properties[pathSegments[0]];
-			if (childProperty.type === "map" && childProperty.properties) return getResolvedPropertyInPath(childProperty.properties, pathSegments.slice(1).join("."));
-		}
-	}
-}
-function getBracketNotation(path) {
-	return path.replace(/\.([^.]*)/g, "[$1]");
-}
-/**
-* Get properties sorted by their order, but include ALL properties.
-* Nested keys (like "data.mode") in propertiesOrder are ignored - they're for column ordering.
-* @param properties
-* @param propertiesOrder
-*/
-function getPropertiesWithPropertiesOrder(properties, propertiesOrder) {
-	if (!propertiesOrder) return properties;
-	const propertyKeys = Object.keys(properties);
-	const validOrderKeys = propertiesOrder.filter((key) => !key.includes(".") && properties[key]);
-	const result = {};
-	validOrderKeys.forEach((key) => {
-		const property = properties[key];
-		if (typeof property === "object" && property.type === "map" && property.properties) {
-			const mapProp = property;
-			result[key] = {
-				...mapProp,
-				properties: getPropertiesWithPropertiesOrder(mapProp.properties, mapProp.propertiesOrder ?? [])
-			};
-		} else if (property) result[key] = property;
+*/
+function ArrayPropertyPreview({ propertyKey, value, property, size }) {
+	if (property.type !== "array") throw Error("Picked wrong preview component ArrayPreview");
+	if (!property.of) throw Error(`You need to specify an 'of' prop (or specify a custom field) in your array property ${propertyKey}`);
+	const authController = useAuthController();
+	const resolvedProperties = resolveArrayProperties({
+		propertyKey,
+		property,
+		propertyConfigs: useCustomizationController().propertyConfigs,
+		authController
 	});
-	propertyKeys.forEach((key) => {
-		if (!result[key]) {
-			const property = properties[key];
-			if (typeof property === "object" && property.type === "map" && property.properties) {
-				const mapProp = property;
-				result[key] = {
-					...mapProp,
-					properties: getPropertiesWithPropertiesOrder(mapProp.properties, mapProp.propertiesOrder ?? [])
-				};
-			} else if (property) result[key] = property;
-		}
+	const values = value;
+	if (!values) return null;
+	const childSize = size === "medium" ? "medium" : "small";
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full flex flex-col gap-2",
+		children: values && values.map((val, index) => {
+			if (!resolvedProperties) throw Error("Property resolvedProperties is undefined");
+			const of = resolvedProperties[index] ?? resolvedProperties[index] ?? (Array.isArray(property.of) ? property.of[index] : property.of);
+			return of ? /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx("div", {
+				className: cls(defaultBorderMixin, "m-1 border-b last:border-b-0"),
+				children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyPreview, {
+					propertyKey,
+					value: val,
+					property: of,
+					size: childSize
+				}) })
+			}) }, "preview_array_" + index) : null;
+		})
 	});
-	return result;
-}
-function getDefaultPropertiesOrder(collection) {
-	if (collection.propertiesOrder) return collection.propertiesOrder;
-	return [...Object.keys(collection.properties), ...(collection.additionalFields ?? []).map((field) => field.key)];
 }
 //#endregion
 //#region src/util/previews.ts
@@ -875,6 +1123,43 @@ var SidePanelControllerContext = React.createContext({});
 */
 var useSidePanel = () => useContext(SidePanelControllerContext);
 //#endregion
+//#region src/components/EntityPreviewNesting.tsx
+/**
+* How deep the current entity preview is nested inside another one.
+*
+* A reference or relation rendered on its own (a form field, a table cell) is
+* at depth 0 and gets the full card treatment: image slot, id, title, preview
+* properties and a link to the side panel. A reference rendered *inside*
+* another entity preview is at depth 1+, where repeating that card produces a
+* box-inside-a-box with its own borders, id line and action button. Nested
+* previews collapse to a compact chip instead.
+*/
+var EntityPreviewDepthContext = React$1.createContext(0);
+/**
+* Current entity preview nesting depth. 0 means "not inside another preview".
+*/
+function useEntityPreviewDepth() {
+	return React$1.useContext(EntityPreviewDepthContext);
+}
+/**
+* True when the preview being rendered lives inside another entity preview,
+* and should therefore render its compact variant.
+*/
+function useIsNestedEntityPreview() {
+	return useEntityPreviewDepth() > 0;
+}
+/**
+* Marks its children as being rendered inside an entity preview, so any
+* reference or relation below collapses to a chip.
+*/
+function NestedEntityPreviewBoundary({ children }) {
+	const depth = useEntityPreviewDepth();
+	return /* @__PURE__ */ jsx(EntityPreviewDepthContext.Provider, {
+		value: depth + 1,
+		children
+	});
+}
+//#endregion
 //#region src/components/EntityPreviewBinding.tsx
 /**
 * This component contains the main logic and content for displaying a entity preview,
@@ -906,7 +1191,7 @@ function EntityPreviewBindingData({ actions, collection: collectionProp, preview
 	const restProperties = listProperties.filter((p) => p !== titleProperty && p !== imagePropertyKey);
 	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;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(NestedEntityPreviewBoundary, { children: [
 		/* @__PURE__ */ jsxs("div", {
 			className: cls("flex  shrink-0", {
 				"w-6 h-6 mx-1 my-0.5": size === "small" || size === "smallest",
@@ -1050,15 +1335,118 @@ var EntityPreviewContainer = React$1.forwardRef(({ children, hover, onClick, siz
 });
 EntityPreviewContainer.displayName = "EntityPreviewContainer";
 //#endregion
+//#region src/components/InlineEntityPreview.tsx
+var inlineMixin = "inline-flex items-center gap-1 min-w-0 max-w-full align-middle";
+/**
+* An entity rendered as one line of text: a small link glyph that marks it as
+* pointing elsewhere, then the target's title in whatever typography surrounds
+* it.
+*
+* This is what a reference or relation renders as when it is *not* the subject
+* of its slot — nested inside another entity preview, or filling a title slot.
+* The card treatment (image, id, preview properties, side-panel button) only
+* makes sense at the top level; repeating it one level down produces a bordered
+* box inside a bordered box, each with its own action buttons.
+*
+* @group Preview components
+*/
+function InlineEntityPreview({ entity, collection: collectionProp, label, disabled, onClick, includeEntityLink = true, iconSize = 12, className }) {
+	const collectionRegistryController = useCollectionRegistryController();
+	const analyticsController = useAnalyticsController();
+	const sidePanelController = useSidePanel();
+	const collection = collectionProp ?? collectionRegistryController.getCollection(entity.path);
+	const titlePropertyKey = collection ? getEntityTitlePropertyKeyForEntity(collection, entity.values, entity.id) : void 0;
+	const titleValue = titlePropertyKey ? getValueInPath(entity.values, titlePropertyKey) : void 0;
+	const resolvedLabel = label ?? (titleValue !== void 0 && titleValue !== null && String(titleValue).trim().length > 0 ? String(titleValue) : String(entity.id));
+	const interactive = !disabled && (onClick !== void 0 || includeEntityLink && collection !== void 0);
+	const handleClick = (event) => {
+		if (!interactive) return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (onClick) {
+			onClick(event);
+			return;
+		}
+		analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
+			path: entity.path,
+			entityId: entity.id
+		});
+		sidePanelController.open({
+			entityId: entity.id,
+			path: entity.path,
+			collection,
+			updateUrl: true
+		});
+	};
+	const content = /* @__PURE__ */ jsxs("span", {
+		tabIndex: interactive ? 0 : void 0,
+		role: interactive ? "button" : void 0,
+		onClick: interactive ? handleClick : void 0,
+		onKeyDown: interactive ? (event) => {
+			if (event.key === "Enter" || event.key === " ") handleClick(event);
+		} : void 0,
+		className: cls(inlineMixin, interactive ? "cursor-pointer hover:underline underline-offset-2" : "", className),
+		children: [/* @__PURE__ */ jsx(LinkIcon, {
+			size: iconSize,
+			className: "shrink-0 opacity-40"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: resolvedLabel
+		})]
+	});
+	if (!interactive) return content;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: `See details for ${resolvedLabel}`,
+		asChild: true,
+		children: content
+	});
+}
+/**
+* Placeholder shown while the target of an inline reference is being fetched.
+*/
+function InlineEntityPreviewSkeleton({ className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cls(inlineMixin, className),
+		children: [/* @__PURE__ */ jsx(LinkIcon, {
+			size: 12,
+			className: "shrink-0 opacity-40"
+		}), /* @__PURE__ */ jsx(Skeleton, { className: "w-20 h-3" })]
+	});
+}
+/**
+* Shown when the target of an inline reference cannot be resolved — a deleted
+* row, or a collection that is not registered. Keeps the line readable instead
+* of dropping an error box into the middle of a card.
+*/
+function InlineEntityPreviewMissing({ label, tooltip, className }) {
+	const content = /* @__PURE__ */ jsxs("span", {
+		className: cls(inlineMixin, "text-text-secondary dark:text-text-secondary-dark", className),
+		children: [/* @__PURE__ */ jsx(LinkIcon, {
+			size: 12,
+			className: "shrink-0 opacity-40"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate italic",
+			children: label
+		})]
+	});
+	if (!tooltip) return content;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: tooltip,
+		asChild: true,
+		children: content
+	});
+}
+//#endregion
 //#region src/preview/components/ReferencePreview.tsx
 /**
 * @group Preview components
 */
 var ReferencePreview = function ReferencePreview(props) {
 	const reference = props.reference;
+	const nested = useIsNestedEntityPreview();
 	if (!(typeof reference === "object" && "isEntityReference" in reference && reference.isEntityReference())) {
 		console.warn("Reference preview received value of type", typeof reference);
-		if (props.textOnly) return /* @__PURE__ */ jsx("span", { children: String(reference) });
+		if (props.textOnly || nested) return /* @__PURE__ */ jsx("span", { children: String(reference) });
 		return /* @__PURE__ */ jsx(EntityPreviewContainer, {
 			onClick: props.onClick,
 			size: props.size ?? "medium",
@@ -1073,9 +1461,14 @@ var ReferencePreview = function ReferencePreview(props) {
 var DefaultMissingReference$2 = () => null;
 function ReferencePreviewInternalInner({ disabled, reference, previewProperties, size, hover, onClick, includeEntityLink = true, includeId = true, textOnly, collection }) {
 	const ResolvedMissingReference = useComponentOverride("Entity.MissingReference", DefaultMissingReference$2);
+	const nested = useIsNestedEntityPreview();
 	if (!collection) if (ResolvedMissingReference !== DefaultMissingReference$2) return /* @__PURE__ */ jsx(ResolvedMissingReference, { path: reference.path });
 	else {
 		if (textOnly) return /* @__PURE__ */ jsx("span", { children: reference.path });
+		if (nested) return /* @__PURE__ */ jsx(InlineEntityPreviewMissing, {
+			label: String(reference.id),
+			tooltip: `Collection not found: ${reference.path}`
+		});
 		return /* @__PURE__ */ jsx(EntityPreviewContainer, {
 			onClick,
 			size: size ?? "medium",
@@ -1113,6 +1506,7 @@ function ReferencePreviewInternal(props) {
 function ReferencePreviewExisting({ reference, collection, previewProperties, size, disabled, includeEntityLink, includeId, onClick, hover, textOnly }) {
 	const ResolvedEntityPreview = useComponentOverride("EntityPreview", EntityPreviewBinding);
 	useCustomizationController();
+	const inline = useIsNestedEntityPreview() || Boolean(textOnly);
 	const { entity, dataLoading, dataLoadingError } = useFetch({
 		path: reference.path,
 		entityId: reference.id,
@@ -1128,7 +1522,10 @@ function ReferencePreviewExisting({ reference, collection, previewProperties, si
 		tooltip: reference.path
 	});
 	if (body) {
-		if (textOnly) return /* @__PURE__ */ jsx("span", { children: reference.id });
+		if (inline) return /* @__PURE__ */ jsx(InlineEntityPreviewMissing, {
+			label: String(reference.id),
+			tooltip: reference.pathWithId
+		});
 		return /* @__PURE__ */ jsx(EntityPreviewContainer, {
 			onClick: disabled ? void 0 : onClick,
 			hover: disabled ? void 0 : hover,
@@ -1137,7 +1534,7 @@ function ReferencePreviewExisting({ reference, collection, previewProperties, si
 		});
 	}
 	if (dataLoading && !usedEntity) {
-		if (textOnly) return /* @__PURE__ */ jsx(Skeleton, { className: "inline-block w-20 h-4" });
+		if (inline) return /* @__PURE__ */ jsx(InlineEntityPreviewSkeleton, {});
 		return /* @__PURE__ */ jsx(EntityPreviewContainer, {
 			onClick: disabled ? void 0 : onClick,
 			hover: disabled ? void 0 : hover,
@@ -1146,7 +1543,10 @@ function ReferencePreviewExisting({ reference, collection, previewProperties, si
 		});
 	}
 	if (!usedEntity) {
-		if (textOnly) return /* @__PURE__ */ jsx("span", { children: reference.id });
+		if (inline) return /* @__PURE__ */ jsx(InlineEntityPreviewMissing, {
+			label: String(reference.id),
+			tooltip: "Entity not found"
+		});
 		return /* @__PURE__ */ jsx(EntityPreviewContainer, {
 			onClick: disabled ? void 0 : onClick,
 			hover: disabled ? void 0 : hover,
@@ -1154,14 +1554,13 @@ function ReferencePreviewExisting({ reference, collection, previewProperties, si
 			children: /* @__PURE__ */ jsx(ErrorView, { error: "Entity not found" })
 		});
 	}
-	if (textOnly) {
-		const titleProperty = getEntityTitlePropertyKeyForEntity(collection, usedEntity.values, usedEntity.id);
-		const titleValue = titleProperty ? getValueInPath(usedEntity.values, titleProperty) : void 0;
-		return /* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: titleValue !== void 0 && titleValue !== null ? String(titleValue) : String(reference.id)
-		});
-	}
+	if (inline) return /* @__PURE__ */ jsx(InlineEntityPreview, {
+		entity: usedEntity,
+		collection,
+		disabled,
+		onClick,
+		includeEntityLink: !textOnly && includeEntityLink !== false
+	});
 	return /* @__PURE__ */ jsx(ResolvedEntityPreview, {
 		size,
 		previewKeys: previewProperties,
@@ -1176,14 +1575,53 @@ function ReferencePreviewExisting({ reference, collection, previewProperties, si
 }
 var referencesCache = /* @__PURE__ */ new Map();
 //#endregion
+//#region src/preview/components/InlineEntityListPreview.tsx
+/**
+* How many links a nested list shows before collapsing the rest into a count.
+*/
+var MAX_INLINE_ITEMS = 3;
+/**
+* One wrapping line of inline entity links, with the overflow collapsed into a
+* `+N`. Used for arrays of references or relations that are nested inside
+* another preview, where stacking full-width cards turns a card into a wall.
+*
+* @group Preview components
+*/
+function InlineEntityListPreview({ items, renderItem, max = MAX_INLINE_ITEMS, className }) {
+	if (!items || items.length === 0) return null;
+	const shown = items.slice(0, max);
+	const overflow = items.length - shown.length;
+	return /* @__PURE__ */ jsxs("span", {
+		className: cls("inline-flex flex-wrap items-center gap-x-2 gap-y-0.5 min-w-0 max-w-full", className),
+		children: [shown.map((item, index) => renderItem(item, index)), overflow > 0 && /* @__PURE__ */ jsxs("span", {
+			className: "text-text-secondary dark:text-text-secondary-dark shrink-0",
+			children: ["+", overflow]
+		})]
+	});
+}
+//#endregion
 //#region src/preview/property_previews/ArrayOfReferencesPreview.tsx
 /**
 * @group Preview components
 */
-function ArrayOfReferencesPreview({ propertyKey, value, property, size }) {
+function ArrayOfReferencesPreview({ propertyKey, value, property, size, textOnly }) {
+	const nested = useIsNestedEntityPreview();
 	if (Array.isArray(property?.of)) throw Error("Using array properties instead of single one in `of` in ArrayProperty");
 	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, {
+		items: value ?? [],
+		renderItem: (reference, index) => /* @__PURE__ */ jsx(ReferencePreview, {
+			disabled: !ofProperty.path,
+			previewProperties: ofProperty.admin?.previewProperties,
+			size: childSize,
+			reference,
+			textOnly,
+			includeId: ofProperty.admin?.includeId,
+			includeEntityLink: ofProperty.admin?.includeEntityLink
+		}, `preview_array_ref_${propertyKey}_${index}`)
+	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex flex-col w-full",
 		children: value ? value.map((reference, index) => {
@@ -1248,9 +1686,10 @@ function extractDisplayFromPlainObject(obj) {
 */
 var RelationPreview = function RelationPreview(props) {
 	const relation = props.relation;
+	const nested = useIsNestedEntityPreview();
 	if (!(typeof relation === "object" && "isEntityRelation" in relation && relation.isEntityRelation())) {
 		console.warn("Relation preview received value of type", typeof relation);
-		if (props.textOnly) return /* @__PURE__ */ jsx("span", {
+		if (props.textOnly || nested) return /* @__PURE__ */ jsx("span", {
 			className: "truncate",
 			children: extractDisplayFromPlainObject(relation)
 		});
@@ -1268,9 +1707,14 @@ var RelationPreview = function RelationPreview(props) {
 var DefaultMissingReference$1 = () => null;
 function RelationPreviewInternalInner({ disabled, relation, previewProperties, size, hover, onClick, includeEntityLink = true, includeId = true, textOnly, collection }) {
 	const ResolvedMissingReference = useComponentOverride("Entity.MissingReference", DefaultMissingReference$1);
+	const nested = useIsNestedEntityPreview();
 	if (!collection) if (ResolvedMissingReference !== DefaultMissingReference$1) return /* @__PURE__ */ jsx(ResolvedMissingReference, { path: relation.path });
 	else {
 		if (textOnly) return /* @__PURE__ */ jsx("span", { children: relation.path });
+		if (nested) return /* @__PURE__ */ jsx(InlineEntityPreviewMissing, {
+			label: String(relation.id),
+			tooltip: `Collection not found: ${relation.path}`
+		});
 		return /* @__PURE__ */ jsx(EntityPreviewContainer, {
 			size,
 			children: /* @__PURE__ */ jsx(ErrorView, { error: `Collection not found: ${relation.path}` })
@@ -1305,6 +1749,7 @@ function RelationPreviewExisting({ relation, collection, previewProperties, size
 	const passedEntity = relation.data;
 	const ResolvedEntityPreview = useComponentOverride("EntityPreview", EntityPreviewBinding);
 	useCustomizationController();
+	const inline = useIsNestedEntityPreview() || Boolean(textOnly);
 	const { entity, dataLoading, dataLoadingError } = useFetch({
 		path: relation.path,
 		entityId: passedEntity ? void 0 : relation.id,
@@ -1320,7 +1765,10 @@ function RelationPreviewExisting({ relation, collection, previewProperties, size
 		tooltip: relation.path
 	});
 	if (body) {
-		if (textOnly) return /* @__PURE__ */ jsx("span", { children: relation.id });
+		if (inline) return /* @__PURE__ */ jsx(InlineEntityPreviewMissing, {
+			label: String(relation.id),
+			tooltip: relation.pathWithId
+		});
 		return /* @__PURE__ */ jsx(EntityPreviewContainer, {
 			onClick: disabled ? void 0 : onClick,
 			hover: disabled ? void 0 : hover,
@@ -1329,7 +1777,7 @@ function RelationPreviewExisting({ relation, collection, previewProperties, size
 		});
 	}
 	if (dataLoading && !usedEntity) {
-		if (textOnly) return /* @__PURE__ */ jsx(Skeleton, { className: "inline-block w-20 h-4" });
+		if (inline) return /* @__PURE__ */ jsx(InlineEntityPreviewSkeleton, {});
 		return /* @__PURE__ */ jsx(EntityPreviewContainer, {
 			onClick: disabled ? void 0 : onClick,
 			hover: disabled ? void 0 : hover,
@@ -1338,7 +1786,10 @@ function RelationPreviewExisting({ relation, collection, previewProperties, size
 		});
 	}
 	if (!usedEntity) {
-		if (textOnly) return /* @__PURE__ */ jsx("span", { children: relation.id });
+		if (inline) return /* @__PURE__ */ jsx(InlineEntityPreviewMissing, {
+			label: String(relation.id),
+			tooltip: "Entity not found"
+		});
 		return /* @__PURE__ */ jsx(EntityPreviewContainer, {
 			onClick: disabled ? void 0 : onClick,
 			hover: disabled ? void 0 : hover,
@@ -1346,14 +1797,13 @@ function RelationPreviewExisting({ relation, collection, previewProperties, size
 			children: /* @__PURE__ */ jsx(ErrorView, { error: "Entity not found" })
 		});
 	}
-	if (textOnly) {
-		const titleProperty = getEntityTitlePropertyKeyForEntity(collection, usedEntity.values, usedEntity.id);
-		const titleValue = titleProperty ? getValueInPath(usedEntity.values, titleProperty) : void 0;
-		return /* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: titleValue !== void 0 && titleValue !== null ? String(titleValue) : String(relation.id)
-		});
-	}
+	if (inline) return /* @__PURE__ */ jsx(InlineEntityPreview, {
+		entity: usedEntity,
+		collection,
+		disabled,
+		onClick,
+		includeEntityLink: !textOnly && includeEntityLink !== false
+	});
 	return /* @__PURE__ */ jsx(ResolvedEntityPreview, {
 		size,
 		previewKeys: previewProperties,
@@ -1372,10 +1822,23 @@ var relationsCache = /* @__PURE__ */ new Map();
 /**
 * @group Preview components
 */
-function ArrayOfRelationsPreview({ propertyKey, value, property, size }) {
+function ArrayOfRelationsPreview({ propertyKey, value, property, size, textOnly }) {
+	const nested = useIsNestedEntityPreview();
 	if (Array.isArray(property?.of)) throw Error("Using array properties instead of single one in `of` in ArrayProperty");
 	if (property?.type !== "array" || !property.of || property.of.type !== "relation") throw Error("Picked wrong preview component ArrayOfRelationsPreview");
 	const ofProperty = property.of;
+	if (nested || textOnly) return /* @__PURE__ */ jsx(InlineEntityListPreview, {
+		items: (value ?? []).map((relation) => normalizeToEntityRelation(relation)).filter((relation) => Boolean(relation)),
+		renderItem: (relation, index) => /* @__PURE__ */ jsx(RelationPreview, {
+			disabled: !ofProperty.relation,
+			previewProperties: ofProperty.admin?.previewProperties,
+			size: "small",
+			relation,
+			textOnly,
+			includeId: ofProperty.admin?.includeId,
+			includeEntityLink: ofProperty.admin?.includeEntityLink
+		}, `preview_array_rel_${propertyKey}_${index}`)
+	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex flex-col w-full gap-0.5",
 		children: value ? value.map((relation, index) => {
@@ -1696,11 +2159,11 @@ function getCache(baseUrl) {
 	}
 	return cache;
 }
-async function fetchUsers(baseUrl, ids, token) {
+async function fetchUsers(apiBase, ids, token) {
 	const resolved = /* @__PURE__ */ new Map();
 	for (const id of ids) resolved.set(id, null);
 	const params = new URLSearchParams({ ids: ids.join(",") });
-	const response = await fetch(`${baseUrl}/api/users?${params}`, { headers: token ? { Authorization: `Bearer ${token}` } : {} });
+	const response = await fetch(`${apiBase}/admin/users?${params}`, { headers: token ? { Authorization: `Bearer ${token}` } : {} });
 	if (!response.ok) return resolved;
 	const data = await response.json();
 	const rows = data.users ?? data.data ?? [];
@@ -1753,7 +2216,7 @@ function requestUser(baseUrl, uid, getAuthToken) {
 function useResolvedUser(uid) {
 	const client = useRebaseClient();
 	const { getAuthToken } = useAuthController();
-	const baseUrl = client?.baseUrl;
+	const baseUrl = apiBaseOf(client);
 	const [user, setUser] = useState(() => baseUrl && uid ? getCache(baseUrl).users.get(uid) ?? null : null);
 	useEffect(() => {
 		if (!baseUrl || !uid) {
@@ -1815,6 +2278,7 @@ function UserPreview({ value }) {
 var PropertyPreview = React.memo(function PropertyPreview(props) {
 	const authController = useAuthController();
 	const customizationController = useCustomizationController();
+	const nested = useIsNestedEntityPreview();
 	let content;
 	const { property: inputProperty, propertyKey, value, size, height, width, interactive, fill } = props;
 	const property = resolveProperty({
@@ -1935,12 +2399,14 @@ var PropertyPreview = React.memo(function PropertyPreview(props) {
 		property
 	});
 	else content = buildWrongValueType(propertyKey, property.type, value);
-	else if (property.type === "date") if (value instanceof Date) content = /* @__PURE__ */ jsx(DatePreview, {
-		date: value,
-		mode: property.mode
-	});
-	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, {
+	else if (property.type === "date") {
+		const date = asDate(value);
+		if (date) content = /* @__PURE__ */ jsx(DatePreview, {
+			date,
+			mode: property.mode
+		});
+		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, {
 		disabled: !property.path,
 		previewProperties: property.admin?.previewProperties,
 		includeId: property.admin?.includeId,
@@ -1952,26 +2418,28 @@ var PropertyPreview = React.memo(function PropertyPreview(props) {
 	else content = buildWrongValueType(propertyKey, property.type, value);
 	else content = /* @__PURE__ */ jsx(EmptyValue, {});
 	else if (property.type === "relation") if (!value) content = /* @__PURE__ */ jsx(EmptyValue, {});
-	else if (Array.isArray(value)) content = /* @__PURE__ */ jsx("div", {
-		className: "flex flex-col w-full gap-0.5",
-		children: value.map((item, index) => {
-			const entityRelation = normalizeToEntityRelation(item, "relation");
-			if (!entityRelation) return null;
-			return /* @__PURE__ */ jsx("div", {
+	else if (Array.isArray(value)) {
+		const relations = value.map((item) => normalizeToEntityRelation(item, "relation")).filter(Boolean);
+		const renderRelation = (entityRelation, index) => /* @__PURE__ */ jsx(RelationPreview, {
+			disabled: !property.relation,
+			previewProperties: property.admin?.previewProperties,
+			includeId: property.admin?.includeId,
+			includeEntityLink: property.admin?.includeEntityLink,
+			size: "small",
+			relation: entityRelation,
+			textOnly: props.textOnly
+		}, `preview_rel_${propertyKey}_${index}`);
+		content = nested || props.textOnly ? /* @__PURE__ */ jsx(InlineEntityListPreview, {
+			items: relations,
+			renderItem: renderRelation
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col w-full gap-0.5",
+			children: relations.map((entityRelation, index) => /* @__PURE__ */ jsx("div", {
 				className: "w-full",
-				children: /* @__PURE__ */ jsx(RelationPreview, {
-					disabled: !property.relation,
-					previewProperties: property.admin?.previewProperties,
-					includeId: property.admin?.includeId,
-					includeEntityLink: property.admin?.includeEntityLink,
-					size: "small",
-					relation: entityRelation,
-					textOnly: props.textOnly
-				})
-			}, `preview_rel_${propertyKey}_${index}`);
-		})
-	});
-	else {
+				children: renderRelation(entityRelation, index)
+			}, `preview_rel_wrapper_${propertyKey}_${index}`))
+		});
+	} else {
 		const relationValue = normalizeToEntityRelation(value, "relation");
 		if (relationValue) content = /* @__PURE__ */ jsx(RelationPreview, {
 			disabled: !property.relation,
@@ -1999,6 +2467,16 @@ var PropertyPreview = React.memo(function PropertyPreview(props) {
 	else content = JSON.stringify(value);
 	return content === void 0 || content === null || Array.isArray(content) && content.length === 0 ? /* @__PURE__ */ jsx(EmptyValue, {}) : content;
 }, deepEqual);
+/**
+* A `Date`, or a string/number that unambiguously names one. Returns null for
+* anything else, so an actual type mismatch still reports as one.
+*/
+function asDate(value) {
+	if (value instanceof Date) return isNaN(value.getTime()) ? null : value;
+	if (typeof value !== "string" && typeof value !== "number") return null;
+	const parsed = new Date(value);
+	return isNaN(parsed.getTime()) ? null : parsed;
+}
 function buildWrongValueType(name, type, value) {
 	console.warn(`Unexpected value for property ${name}, of type ${type}`, value);
 	return /* @__PURE__ */ jsx(ErrorView, {
@@ -2104,10 +2582,10 @@ function FieldHelperText({ error, showError, property, includeDescription = true
 * and tables to the specified properties.
 * @group Form fields
 */
-function ReadOnlyFieldBinding({ propertyKey, value, error, showError, minimalistView, property, includeDescription, context }) {
+function ReadOnlyFieldBinding({ propertyKey, value, error, showError, minimalistView, property, includeDescription, hideLabel, context }) {
 	const skipCardWrapper = property.type === "relation" || property.type === "reference";
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		!minimalistView && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
+		!minimalistView && !hideLabel && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
 			propertyKey,
 			icon: getIconForProperty(property, "small"),
 			required: property.validation?.required,
@@ -2265,8 +2743,10 @@ function VirtualTableSelect(props) {
 		if (ref.current && focused) ref.current?.focus({ preventScroll: true });
 	}, [focused, ref]);
 	const onChange = useCallback((updatedValue) => {
-		if (valueType === "number") if (multiple) updateValue(updatedValue.map((v) => parseFloat(v)));
-		else updateValue(parseFloat(updatedValue));
+		if (valueType === "number") if (multiple) {
+			const newValue = updatedValue.map((v) => parseFloat(v));
+			updateValue(newValue);
+		} else updateValue(parseFloat(updatedValue));
 		else if (valueType === "string") if (!updatedValue) updateValue(null);
 		else updateValue(updatedValue);
 		else throw Error("Missing mapping in TableSelect");
@@ -2344,7 +2824,8 @@ function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE$2 } = {}) {
 	const offsetRef = useRef(0);
 	const userCacheRef = useRef(/* @__PURE__ */ new Map());
 	const fetchUsers = useCallback(async (searchStr, offset, append) => {
-		if (!client?.baseUrl) return;
+		const apiBase = apiBaseOf(client);
+		if (!apiBase) return;
 		setIsLoading(true);
 		try {
 			const token = await getAuthToken?.();
@@ -2353,12 +2834,12 @@ function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE$2 } = {}) {
 				offset: String(offset)
 			});
 			if (searchStr) params.set("search", searchStr);
-			const response = await fetch(`${client.baseUrl}/api/users?${params}`, { headers: token ? { Authorization: `Bearer ${token}` } : {} });
+			const response = await fetch(`${apiBase}/admin/users?${params}`, { headers: token ? { Authorization: `Bearer ${token}` } : {} });
 			if (!response.ok) throw new Error("Failed to fetch users");
 			const data = await response.json();
 			const newItems = (data.data ?? data.users ?? []).map((r) => {
 				const user = {
-					uid: r.id ?? "",
+					uid: r.uid ?? r.id ?? "",
 					email: r.email ?? "",
 					displayName: r.displayName ?? r.display_name ?? null,
 					photoURL: r.photoURL ?? r.photo_url ?? null,
@@ -2383,6 +2864,7 @@ function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE$2 } = {}) {
 		}
 	}, [
 		client?.baseUrl,
+		client?.apiPath,
 		getAuthToken,
 		pageSize
 	]);
@@ -3811,12 +4293,13 @@ function getTableBindingForProperty(property, selected) {
 		updateValue
 	}) };
 	else if (property.type === "date") return {
-		Component: ({ propertyKey, error, validationError, disabled, selected, property, internalValue, updateValue }) => {
+		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,
@@ -4427,6 +4910,7 @@ var PropertyTableCell = React.memo(function PropertyTableCell({ propertyKey, cus
 			propertyKey
 		});
 	};
+	const tableBinding = useMemo(() => getTableBindingForProperty(property, selected), [property, selected]);
 	let innerComponent;
 	let allowScroll = false;
 	let showExpandIcon = false;
@@ -4460,7 +4944,6 @@ var PropertyTableCell = React.memo(function PropertyTableCell({ propertyKey, cus
 		})
 	}, `${propertyKey}_${entity.path}_${entity.id}`);
 	if (!customField && (!customPreview || selected)) {
-		const tableBinding = getTableBindingForProperty(property, selected);
 		if (tableBinding) {
 			const Component = tableBinding.Component;
 			innerComponent = /* @__PURE__ */ jsx(Component, {
@@ -4828,7 +5311,7 @@ function propertiesToColumns({ properties, sortable, fixedFilter, engine, Additi
 			align: getTableCellAlignment(property),
 			icon: getIconForProperty(property, "small"),
 			title: property.name ?? key,
-			sortable,
+			sortable: sortable && sortableProperty(property),
 			filter: !disabledFilter && filterable,
 			width: getTablePropertyColumnWidth(property),
 			resizable: true,
@@ -4844,6 +5327,49 @@ function propertiesToColumns({ properties, sortable, fixedFilter, engine, Additi
 		};
 	});
 }
+/**
+* The properties a sort can be applied to, as keys and titles.
+*
+* Only the table renders headers, so the list, card and split views had no way
+* to order anything — the controller has carried `sortBy` all along, with no
+* control bound to it outside the table. This is the same walk
+* `propertiesToColumns` makes, under the same keys and the same
+* `sortableProperty` authority, so a sort picked from the toolbar means exactly
+* what clicking the header would have meant, and the two cannot drift into
+* offering different columns.
+*/
+function getSortablePropertyOptions(properties) {
+	return Object.entries(properties).flatMap(([key, property]) => getColumnKeysForProperty(property, key)).flatMap(({ key }) => {
+		const property = getResolvedPropertyInPath(properties, key);
+		if (!property || !sortableProperty(property)) return [];
+		return [{
+			key,
+			title: property.name ?? key,
+			property
+		}];
+	});
+}
+/**
+* Whether this column can be ordered by.
+*
+* `sortable` arrived as one flag for the whole table while `filter` was
+* computed per property, so every column advertised a sort — including the ones
+* no `ORDER BY` can be written for. A to-many relation is a *set* per row
+* (`posts.tags`), and there is no single value to order on; the driver used to
+* answer by silently dropping the sort and returning rows in whatever order
+* Postgres pleased, which is how a header that did nothing went unnoticed.
+*
+* Now that the driver refuses instead, offering the control would turn a
+* useless header into a failed request. Same authority as the filter side: ask
+* the property, not the table.
+*/
+function sortableProperty(property) {
+	if (property.type !== "relation") return true;
+	const relationProperty = property;
+	const kind = relationProperty.relation?.kind ?? relationProperty.resolvedRelation?.kind;
+	if (!kind) return true;
+	return kind === "belongsTo";
+}
 function filterableProperty(property, partOfArray = false, engine) {
 	if (!isFilterableRelation(property, engine)) return false;
 	if (partOfArray) return [
@@ -4974,7 +5500,8 @@ function StringNumberFilterField({ name, value, setValue, type, isArray, enumVal
 					disabled: isNullOperation,
 					placeholder: isNullOperation ? "null" : void 0,
 					onChange: (evt) => {
-						updateFilter(operation, type === "number" ? parseFloat(evt.target.value) : evt.target.value);
+						const val = type === "number" ? parseFloat(evt.target.value) : evt.target.value;
+						updateFilter(operation, val);
 					},
 					endAdornment: internalValue !== void 0 && internalValue != null && /* @__PURE__ */ jsx(IconButton, {
 						onClick: (e) => updateFilter(operation, void 0),
@@ -5710,7 +6237,7 @@ var SelectableTable = function SelectableTable({ onValueChange, cellRenderer, on
 		children: /* @__PURE__ */ jsx("div", {
 			className: "h-full w-full flex flex-col bg-white dark:bg-surface-900",
 			ref,
-			children: /* @__PURE__ */ jsx(TableView, {
+			children: /* @__PURE__ */ jsx(VirtualTable, {
 				data,
 				columns,
 				cellRenderer: (props) => cellRenderer(props),
@@ -5842,6 +6369,13 @@ var CollectionTableBinding = function CollectionTableBinding({ className, style,
 		}), {}) : entity;
 		const Builder = additionalField.Builder;
 		if (!Builder && !additionalField.value) throw new Error("When using additional fields you need to provide a Builder or a value");
+		const child = Builder ? /* @__PURE__ */ jsx(Builder, {
+			entity,
+			context
+		}) : /* @__PURE__ */ jsx(Fragment, { children: additionalField.value?.({
+			entity,
+			context
+		})?.toString() });
 		return /* @__PURE__ */ jsx(EntityTableCell, {
 			width,
 			size,
@@ -5858,13 +6392,7 @@ var CollectionTableBinding = function CollectionTableBinding({ className, style,
 			isDragging,
 			isDraggable,
 			frozen,
-			children: /* @__PURE__ */ jsx(ErrorBoundary, { children: Builder ? /* @__PURE__ */ jsx(Builder, {
-				entity,
-				context
-			}) : /* @__PURE__ */ jsx(Fragment, { children: additionalField.value?.({
-				entity,
-				context
-			})?.toString() }) })
+			children: /* @__PURE__ */ jsx(ErrorBoundary, { children: child })
 		}, `additional_table_cell_${entity.id}_${column.key}`);
 	}, [size]);
 	const engine = useCollectionScope()?.engine;
@@ -6035,35 +6563,6 @@ function useSelectionController(onSelectionChange) {
 	]);
 }
 //#endregion
-//#region src/util/resolutions.ts
-/**
-* Built-in entity views that are resolved by token name.
-* These are always available without needing to be registered
-* in the customization controller's entityViews array.
-*/
-var BUILTIN_ENTITY_VIEWS = { "__rebase_history": {
-	key: "__rebase_history",
-	name: "History",
-	tabComponent: React.createElement(HistoryIcon, { size: 20 }),
-	position: "end"
-} };
-function resolveEntityView(entityView, contextEntityViews) {
-	if (typeof entityView === "string") return BUILTIN_ENTITY_VIEWS[entityView] ?? contextEntityViews?.find((entry) => entry.key === entityView);
-	else return entityView;
-}
-function resolveEntityAction(entityAction, contextEntityActions) {
-	if (typeof entityAction === "string") return contextEntityActions?.find((entry) => entry.key === entityAction);
-	else return entityAction;
-}
-function resolvedSelectedEntityView(customViews, customizationController, selectedTab, _canEdit) {
-	const resolvedEntityViews = customViews ? customViews.map((e) => resolveEntityView(e, customizationController.entityViews)).filter(Boolean).filter((e) => e.key !== "__rebase_history") : [];
-	return {
-		resolvedEntityViews,
-		selectedEntityView: resolvedEntityViews.find((e) => e.key === selectedTab),
-		selectedSecondaryForm: customViews && resolvedEntityViews.filter((e) => e.includeActions).find((e) => e.key === selectedTab)
-	};
-}
-//#endregion
 //#region src/components/CollectionViewBinding/hooks/useCollectionInlineEditor.ts
 function useCollectionInlineEditor({ path, collection, dataClient, context }) {
 	const uniqueFieldValidator = useCallback(async ({ name, value, property, entityId }) => {
@@ -6233,6 +6732,35 @@ function mergeEntityActions(currentActions, newActions) {
 	});
 	return updatedActions;
 }
+//#endregion
+//#region src/util/resolutions.ts
+/**
+* Built-in entity views that are resolved by token name.
+* These are always available without needing to be registered
+* in the customization controller's entityViews array.
+*/
+var BUILTIN_ENTITY_VIEWS = { "__rebase_history": {
+	key: "__rebase_history",
+	name: "History",
+	tabComponent: React.createElement(HistoryIcon, { size: 20 }),
+	position: "end"
+} };
+function resolveEntityView(entityView, contextEntityViews) {
+	if (typeof entityView === "string") return BUILTIN_ENTITY_VIEWS[entityView] ?? contextEntityViews?.find((entry) => entry.key === entityView);
+	else return entityView;
+}
+function resolveEntityAction(entityAction, contextEntityActions) {
+	if (typeof entityAction === "string") return contextEntityActions?.find((entry) => entry.key === entityAction);
+	else return entityAction;
+}
+function resolvedSelectedEntityView(customViews, customizationController, selectedTab, _canEdit) {
+	const resolvedEntityViews = customViews ? customViews.map((e) => resolveEntityView(e, customizationController.entityViews)).filter(Boolean).filter((e) => e.key !== "__rebase_history") : [];
+	return {
+		resolvedEntityViews,
+		selectedEntityView: resolvedEntityViews.find((e) => e.key === selectedTab),
+		selectedSecondaryForm: customViews && resolvedEntityViews.filter((e) => e.includeActions).find((e) => e.key === selectedTab)
+	};
+}
 var BreadcrumbContext = React.createContext({
 	breadcrumbs: [],
 	set: () => {},
@@ -6315,7 +6843,10 @@ function SearchIconsView({ selectedIcon = "", onIconSelected }) {
 	const [query, setQuery] = React.useState("");
 	const updateSearchResults = React.useMemo(() => debounce((value) => {
 		if (!value || value === "") setKeys(null);
-		else setKeys(iconsSearch.search(value).slice(0, 50).map((e) => e.item.key));
+		else {
+			const limited = iconsSearch.search(value).slice(0, 50);
+			setKeys(limited.map((e) => e.item.key));
+		}
 	}, UPDATE_SEARCH_INDEX_WAIT_MS), []);
 	React.useEffect(() => {
 		updateSearchResults(query);
@@ -6516,15 +7047,18 @@ function ArrayContainer({ droppableId, addLabel, value, disabled = false, buildE
 	}, []);
 	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), useSensor(KeyboardSensor, {}));
 	useEffect(() => {
-		if (hasValue && value && value.length !== internalIds.length) setInternalIds(value.map((v, index) => {
-			const hashValue = (getHashValue(v) ?? String(index)) + index;
-			if (hashValue in internalIdsRef.current) return internalIdsRef.current[hashValue];
-			else {
-				const newInternalId = getRandomId$1();
-				internalIdsRef.current[hashValue] = newInternalId;
-				return newInternalId;
-			}
-		}));
+		if (hasValue && value && value.length !== internalIds.length) {
+			const newInternalIds = value.map((v, index) => {
+				const hashValue = (getHashValue(v) ?? String(index)) + index;
+				if (hashValue in internalIdsRef.current) return internalIdsRef.current[hashValue];
+				else {
+					const newInternalId = getRandomId$1();
+					internalIdsRef.current[hashValue] = newInternalId;
+					return newInternalId;
+				}
+			});
+			setInternalIds(newInternalIds);
+		}
 	}, [
 		hasValue,
 		internalIds.length,
@@ -6585,7 +7119,8 @@ function ArrayContainer({ droppableId, addLabel, value, disabled = false, buildE
 		const oldIndex = internalIds.indexOf(active.id);
 		const newIndex = internalIds.indexOf(over.id);
 		if (oldIndex === -1 || newIndex === -1) return;
-		setInternalIds(arrayMove$1(internalIds, oldIndex, newIndex));
+		const newIds = arrayMove$1(internalIds, oldIndex, newIndex);
+		setInternalIds(newIds);
 		onValueChange(arrayMove$1(value ?? [], oldIndex, newIndex));
 	};
 	return sortable ? /* @__PURE__ */ jsx(DndContext, {
@@ -6921,6 +7456,7 @@ var useImportConfig = () => {
 //#endregion
 //#region src/data_import/utils/get_import_inference_type.ts
 function getInferenceType(value) {
+	if (value === null || value === void 0) return "string";
 	if (typeof value === "number") return "number";
 	else if (typeof value === "string") return "string";
 	else if (typeof value === "boolean") return "boolean";
@@ -7308,8 +7844,9 @@ var ConfigControllerProvider = React.memo(function ConfigControllerProvider({ ch
 			editedCollectionId
 		});
 		const namespace = propertyKey && propertyKey.includes(".") ? propertyKey.substring(0, propertyKey.lastIndexOf(".")) : void 0;
+		const propertyKeyWithoutNamespace = propertyKey && propertyKey.includes(".") ? propertyKey.substring(propertyKey.lastIndexOf(".") + 1) : propertyKey;
 		setCurrentPropertyDialog({
-			propertyKey: propertyKey && propertyKey.includes(".") ? propertyKey.substring(propertyKey.lastIndexOf(".") + 1) : propertyKey,
+			propertyKey: propertyKeyWithoutNamespace,
 			property,
 			namespace,
 			currentPropertiesOrder,
@@ -7365,7 +7902,10 @@ var ConfigControllerProvider = React.memo(function ConfigControllerProvider({ ch
 			onFetchTableMetadata,
 			handleClose: (collection) => {
 				if (currentDialog?.redirect) {
-					if (collection && currentDialog?.isNewCollection && !currentDialog.parentCollectionSlugs.length) navigate(urlController.buildUrlCollectionPath(collection.slug));
+					if (collection && currentDialog?.isNewCollection && !currentDialog.parentCollectionSlugs.length) {
+						const url = urlController.buildUrlCollectionPath(collection.slug);
+						navigate(url);
+					}
 				}
 				setCurrentDialog(void 0);
 			}
@@ -7532,8 +8072,8 @@ function EditorCollectionAction({ path, parentCollectionSlugs, parentEntityIds,
 }
 //#endregion
 //#region src/components/CollectionViewBinding/CollectionViewActions.tsx
-var ImportCollectionAction = lazy(() => import("./import-BjUG-cIY.js").then((n) => n.t).then((m) => ({ default: m.ImportCollectionAction })));
-var ExportCollectionAction = lazy(() => import("./export-BzIpUdSK.js").then((n) => n.t).then((m) => ({ default: m.ExportCollectionAction })));
+var ImportCollectionAction = lazy(() => import("./import-BvYl--U4.js").then((n) => n.t).then((m) => ({ default: m.ImportCollectionAction })));
+var ExportCollectionAction = lazy(() => import("./export-J79rMoNj.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();
@@ -7578,8 +8118,9 @@ function CollectionViewActions({ collection, relativePath, parentCollectionSlugs
 		})
 	}));
 	const multipleDeleteEnabled = canDelete(collection, path, null);
+	const hasSelection = Boolean(selectedEntities?.length);
 	let multipleDeleteButton;
-	{
+	if (hasSelection) {
 		const button = largeLayout && !compact ? /* @__PURE__ */ jsxs(Button, {
 			variant: "text",
 			disabled: !selectedEntities?.length || !multipleDeleteEnabled,
@@ -7673,7 +8214,9 @@ function relationCardinality(relation) {
 * Pure function — call inside `useMemo`.
 */
 function resolveCollectionSlotKeys(collection, authController, propertyConfigs) {
-	const titleKeyCandidates = getTitlePropertyCandidates(collection);
+	const rankedCandidates = getTitlePropertyCandidates(collection);
+	const leadingRelationKey = getLeadingRelationTitleKey(collection);
+	const titleKeyCandidates = leadingRelationKey ? [leadingRelationKey, ...rankedCandidates.filter((key) => key !== leadingRelationKey)] : rankedCandidates;
 	const titleKey = titleKeyCandidates[0];
 	const imageKey = getEntityImagePreviewPropertyKey(collection);
 	let statusKey;
@@ -7721,9 +8264,9 @@ function resolveCollectionSlotKeys(collection, authController, propertyConfigs)
 	const hasExplicitOrder = !!collection.propertiesOrder;
 	const relationKeys = [];
 	if (!hasExplicitOrder) {
-		for (const [key, prop] of Object.entries(collection.properties)) if (prop.type === "relation") relationKeys.push(key);
+		for (const [key, prop] of Object.entries(collection.properties)) if (prop.type === "relation" && key !== titleKey) relationKeys.push(key);
 	}
-	const excludeKeys = new Set([
+	const excludeKeys = /* @__PURE__ */ new Set([
 		titleKey,
 		imageKey,
 		statusKey,
@@ -7882,9 +8425,7 @@ function resolveEntitySlots(entity, collection, slotKeys) {
 			}
 		}
 		if (items.length > 0) {
-			const relIndex = relationKeys.indexOf(relKey);
-			const chipColors = Object.values(CHIP_COLORS);
-			const colorScheme = chipColors[relIndex % chipColors.length];
+			const colorScheme = CHIP_COLORS[CHIP_SEED_KEYS[relationKeys.indexOf(relKey) % CHIP_SEED_KEYS.length]];
 			relations.push({
 				property: prop,
 				propertyKey: relKey,
@@ -8356,7 +8897,7 @@ function CollectionListViewBinding({ collection, tableController, onEntityClick,
 		const showStatus = statusPropertyKey && size !== "xs" && size !== "s";
 		const subtitleKey = previewKeys.length > 0 ? previewKeys[0] : void 0;
 		const allKeys = resolvedCollection.propertiesOrder || Object.keys(resolvedCollection.properties);
-		const usedKeys = new Set([
+		const usedKeys = /* @__PURE__ */ new Set([
 			titlePropertyKey,
 			imagePropertyKey,
 			statusPropertyKey,
@@ -8948,44 +9489,228 @@ var PropertyCollectionView = ({ data, properties, baseKey = "", suppressHeader =
 };
 //#endregion
 //#region src/components/EntityViewBinding.tsx
+/**
+* The read-only rendering of a record's values.
+*
+* This used to prepend a synthetic `Id` row of its own. Between that row, the
+* collection's own id property, and the `path/id` chip above it, the same UUID
+* appeared three times — and in the ~340px split pane each copy wrapped over
+* four lines, so most of the first screen was one id repeated. The id is now a
+* copyable chip in the identity bar, once.
+*/
 function EntityViewBinding({ entity, collection, path, className }) {
 	const customizationController = useCustomizationController();
-	const properties = collection.properties;
-	return /* @__PURE__ */ jsx("div", {
-		className: "w-full " + className,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "w-full mb-4 p-4",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: `grid grid-cols-12 gap-x-4 py-4 items-start border-b ${defaultBorderMixin}`,
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "col-span-4 pr-2",
-					children: /* @__PURE__ */ jsx(Typography, {
-						variant: "caption",
-						color: "secondary",
-						component: "span",
-						className: "break-words",
-						children: "Id"
+	const properties = React.useMemo(() => {
+		const entries = Object.entries(collection.properties ?? {});
+		const idKeys = entries.filter(([, p]) => p && "isId" in p && p.isId);
+		if (idKeys.length !== 1) return collection.properties;
+		return Object.fromEntries(entries.filter(([key]) => key !== idKeys[0][0]));
+	}, [collection.properties]);
+	const externalLink = customizationController?.entityLinkBuilder?.({ entity });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full " + (className ?? ""),
+		children: [externalLink && /* @__PURE__ */ jsx("div", {
+			className: "flex justify-end mb-2",
+			children: /* @__PURE__ */ jsx(Tooltip, {
+				title: "Open in the live site",
+				children: /* @__PURE__ */ jsx("a", {
+					href: externalLink,
+					rel: "noopener noreferrer",
+					target: "_blank",
+					children: /* @__PURE__ */ jsx(IconButton, {
+						size: "small",
+						children: /* @__PURE__ */ jsx(ExternalLinkIcon, {})
 					})
-				}), /* @__PURE__ */ jsx("div", {
-					className: "col-span-8",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "flex-grow text-surface-900 dark:text-white flex items-center",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "flex-grow mr-2",
-							children: entity.id
-						}), customizationController?.entityLinkBuilder && /* @__PURE__ */ jsx("a", {
-							href: customizationController.entityLinkBuilder({ entity }),
-							rel: "noopener noreferrer",
-							target: "_blank",
-							children: /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(ExternalLinkIcon, {}) })
-						})]
+				})
+			})
+		}), /* @__PURE__ */ jsx(PropertyCollectionView, {
+			data: entity.values,
+			properties,
+			size: "medium"
+		})]
+	});
+}
+//#endregion
+//#region src/components/EntityIdentityBar.tsx
+/**
+* The persistent header of an entity view: who this record is, and what you can
+* do to it.
+*
+* The title and the id used to live inside the scrolling form, above 72px of
+* empty space — 219px of chrome that carried nothing and scrolled away the
+* moment you touched the wheel, leaving no indication of which record you were
+* editing. They live here instead, and the left half of a bar that was
+* previously empty now does the work.
+*/
+function EntityIdentityBar({ collection, title, entityId, status, dirty, saving, onSave, onDiscard, saveDisabled, hasErrors, onSaveAndClose, onBack, onInspect, onViewHistory, recordActions, pluginActions, trailing, leading }) {
+	const { t } = useTranslation();
+	const saveLabel = status === "existing" ? t("save") : status === "copy" ? t("create_copy") : t("create");
+	const closeLabel = status === "existing" ? t("save_and_close") : status === "copy" ? t("create_copy_and_close") : t("create_and_close");
+	const hasMenu = Boolean(recordActions) || Boolean(onInspect) || Boolean(onViewHistory);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("h-[52px] shrink-0 flex items-center gap-2 pl-1.5 pr-2 border-b", "bg-surface-50 dark:bg-surface-900", defaultBorderMixin),
+		children: [
+			leading,
+			onBack && /* @__PURE__ */ jsx(Tooltip, {
+				title: t("back"),
+				children: /* @__PURE__ */ jsx(IconButton, {
+					size: "small",
+					onClick: onBack,
+					"aria-label": t("back"),
+					children: /* @__PURE__ */ jsx(ArrowLeftIcon, { size: iconSize.smallest })
+				})
+			}),
+			/* @__PURE__ */ jsxs(Typography, {
+				variant: "caption",
+				className: "text-text-disabled dark:text-text-disabled-dark whitespace-nowrap hidden sm:block",
+				children: [collection.name, "\xA0/"]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "font-headers font-semibold text-[15px] tracking-tight truncate min-w-0",
+				title,
+				children: title
+			}),
+			entityId !== void 0 && /* @__PURE__ */ jsx(IdChip, { value: String(entityId) }),
+			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+			onSave && /* @__PURE__ */ jsx(SaveState, {
+				dirty,
+				saving,
+				status,
+				t
+			}),
+			pluginActions,
+			onDiscard && dirty && !saving && /* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				size: "small",
+				onClick: onDiscard,
+				children: status === "existing" ? t("discard") : t("clear")
+			}),
+			onSave && /* @__PURE__ */ jsx(Tooltip, {
+				title: hasErrors ? t("fix_errors_before_saving") ?? "Fix highlighted errors before saving" : void 0,
+				children: /* @__PURE__ */ jsx(LoadingButton, {
+					variant: onSaveAndClose ? "text" : "filled",
+					color: "primary",
+					size: "small",
+					loading: saving && !onSaveAndClose,
+					disabled: saveDisabled,
+					onClick: onSave,
+					children: saveLabel
+				})
+			}),
+			onSaveAndClose && /* @__PURE__ */ jsx(LoadingButton, {
+				variant: "filled",
+				color: "primary",
+				size: "small",
+				loading: saving,
+				disabled: saveDisabled,
+				onClick: onSaveAndClose,
+				children: closeLabel
+			}),
+			hasMenu && /* @__PURE__ */ jsxs(Menu, {
+				align: "end",
+				trigger: /* @__PURE__ */ jsx(IconButton, {
+					size: "small",
+					"aria-label": t("more_actions") ?? "More actions",
+					children: /* @__PURE__ */ jsx(MoreVerticalIcon, { size: iconSize.smallest })
+				}),
+				children: [
+					recordActions,
+					recordActions && (onInspect || onViewHistory) && /* @__PURE__ */ jsx(Separator, { orientation: "horizontal" }),
+					onViewHistory && /* @__PURE__ */ jsxs(MenuItem, {
+						onClick: onViewHistory,
+						children: [/* @__PURE__ */ jsx(HistoryIcon, { size: iconSize.smallest }), t("record_history") ?? "History"]
+					}),
+					onInspect && /* @__PURE__ */ jsxs(MenuItem, {
+						onClick: onInspect,
+						children: [/* @__PURE__ */ jsx(CodeIcon, { size: iconSize.smallest }), t("inspect_record") ?? "Inspect record"]
 					})
-				})]
-			}), /* @__PURE__ */ jsx(PropertyCollectionView, {
-				data: entity.values,
-				properties,
-				size: "medium"
-			})]
+				]
+			}),
+			trailing
+		]
+	});
+}
+/**
+* The words the unlabelled floating circle never said.
+*
+* That indicator was a ✓ / pencil / spinner chip stuck to the top-right of the
+* scroll area in an `h-0 overflow-visible` container, so it drifted across
+* field values as you scrolled — and it duplicated what the Save button was
+* already able to tell you.
+*/
+function SaveState({ dirty, saving, status, t }) {
+	if (saving) return /* @__PURE__ */ jsx(StateText, { children: t("saving") });
+	if (dirty) return /* @__PURE__ */ jsx(StateText, { children: t("unsaved_changes_title") });
+	if (status === "existing") return /* @__PURE__ */ jsx(StateText, { children: t("entity_saved") ?? "Saved" });
+	return null;
+}
+function StateText({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-xs text-text-disabled dark:text-text-disabled-dark whitespace-nowrap hidden md:inline",
+		children
+	});
+}
+/**
+* The id, as a chip you can copy rather than a full-width alert holding a UUID.
+*/
+function IdChip({ value }) {
+	const { t } = useTranslation();
+	const [copied, setCopied] = useState(false);
+	const truncated = value.length > 14 ? `${value.slice(0, 8)}…${value.slice(-4)}` : value;
+	const copy = () => {
+		navigator.clipboard?.writeText(value).then(() => {
+			setCopied(true);
+			setTimeout(() => setCopied(false), 1600);
+		}, () => void 0);
+	};
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: copied ? t("copied") : value,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: copy,
+			"aria-label": `${t("copy_id")} ${value}`,
+			className: cls("hidden md:inline-flex items-center gap-1.5 shrink-0 px-2 py-0.5 rounded-md", "font-mono text-[11px] text-text-secondary dark:text-text-secondary-dark", "bg-surface-accent-200/50 dark:bg-white/[0.055]", "hover:bg-surface-accent-200/75 dark:hover:bg-white/[0.09] transition-colors"),
+			children: [truncated, copied ? /* @__PURE__ */ jsx(CheckIcon, { size: iconSize.smallest }) : /* @__PURE__ */ jsx(CopyIcon, { size: iconSize.smallest })]
+		})
+	});
+}
+//#endregion
+//#region src/components/CollectionViewBinding/SplitViewContext.tsx
+var SplitViewContext = React.createContext(void 0);
+/**
+* The enclosing split view, or `undefined` when the component is not rendered
+* inside one (a side panel, a dialog, a full-screen route).
+*/
+function useSplitView() {
+	return useContext(SplitViewContext);
+}
+function SplitViewProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(SplitViewContext.Provider, {
+		value,
+		children
+	});
+}
+//#endregion
+//#region src/components/CollectionViewBinding/SplitListCloseButton.tsx
+/**
+* Closes the list of a split view, leaving the open record on its own.
+*
+* It leads the record's own app bar, where the breadcrumb starts — this is the
+* entity pane's old "Open full screen" button, moved to that edge and wearing an
+* X: closing the list and opening the record full screen are the same thing, so
+* there is one control and one route (`#full`) rather than two.
+*/
+function SplitListCloseButton() {
+	const { t } = useTranslation();
+	const splitView = useSplitView();
+	if (!splitView?.detailOpen) return null;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: t("hide_list"),
+		children: /* @__PURE__ */ jsx(IconButton, {
+			size: "small",
+			onClick: splitView.openFullScreen,
+			"aria-label": t("hide_list"),
+			children: /* @__PURE__ */ jsx(XIcon, { size: iconSize.smallest })
 		})
 	});
 }
@@ -9018,15 +9743,90 @@ function JsonPreviewBinding({ values }) {
 	});
 }
 //#endregion
+//#region src/components/EntityInspector.tsx
+var EntityHistoryView = lazy(() => import("./history-D7L_JlLO.js").then((m) => ({ default: m.EntityHistoryView })));
+/**
+* Raw values and revision history, as an inspector rather than as tabs.
+*
+* These were the first two entries in the entity tab strip — two icon-only tabs
+* with no label and no tooltip, sitting *before* the record you opened the page
+* to edit. They are developer tools, not places the record lives, so they belong
+* behind one affordance in the bar; a content editor should never meet `<>`.
+*
+* The panel sits below the identity bar and beside the record deliberately: you
+* keep seeing which record you are inspecting, and keep being able to edit it.
+*/
+function EntityInspector({ tab, onTabChange, onClose, collection, entity, formContext, values, includeHistory, refreshToken }) {
+	const { t } = useTranslation();
+	const open = tab !== null;
+	useEffect(() => {
+		if (!open) return;
+		const onKeyDown = (e) => {
+			if (e.key === "Escape") {
+				e.stopPropagation();
+				onClose();
+			}
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [open, onClose]);
+	if (!open) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("relative flex flex-col shrink-0 h-full w-full max-w-md border-l", "bg-white dark:bg-surface-800", defaultBorderMixin),
+		role: "complementary",
+		"aria-label": t("inspect_record") ?? "Inspect record",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cls("h-11 shrink-0 flex items-center gap-2 pl-4 pr-1.5 border-b", defaultBorderMixin),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-semibold",
+					children: t("inspect") ?? "Inspect"
+				}),
+				/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+				includeHistory ? /* @__PURE__ */ jsxs(Tabs, {
+					value: tab ?? "json",
+					className: "!w-fit",
+					onValueChange: (v) => onTabChange(v),
+					children: [/* @__PURE__ */ jsx(Tab, {
+						value: "json",
+						className: "text-xs",
+						children: t("json")
+					}), /* @__PURE__ */ jsx(Tab, {
+						value: "history",
+						className: "text-xs",
+						children: t("record_history") ?? "History"
+					})]
+				}) : null,
+				/* @__PURE__ */ jsx(IconButton, {
+					size: "small",
+					onClick: onClose,
+					"aria-label": t("close_inspector") ?? "Close inspector",
+					children: /* @__PURE__ */ jsx(XIcon, { size: iconSize.smallest })
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex-1 min-h-0 overflow-auto",
+			children: /* @__PURE__ */ jsxs(ErrorBoundary, { children: [tab === "json" && /* @__PURE__ */ jsx(JsonPreviewBinding, { values: values ?? entity?.values ?? {} }), tab === "history" && includeHistory && formContext && /* @__PURE__ */ jsx(Suspense, {
+				fallback: /* @__PURE__ */ jsx(CircularProgressCenter, {}),
+				children: /* @__PURE__ */ jsx(EntityHistoryView, {
+					collection,
+					entity,
+					formContext,
+					refreshToken,
+					modifiedValues: values ?? entity?.values
+				})
+			})] })
+		})]
+	});
+}
+//#endregion
 //#region src/util/view_constants.ts
 /**
 * Shared tab value constants used by EditViewBinding and DetailViewBinding.
 */
 var MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
-var JSON_TAB_VALUE = "__json";
 //#endregion
 //#region src/components/DetailViewBinding.tsx
-var EntityHistoryView$1 = lazy(() => import("./history-g9688IaK.js").then((m) => ({ default: m.EntityHistoryView })));
 function DetailViewBinding({ entityId, ...props }) {
 	const { entity, dataLoading, dataLoadingError } = useFetch({
 		path: props.path,
@@ -9050,7 +9850,7 @@ function DetailViewBinding({ entityId, ...props }) {
 		children: content
 	});
 }
-function DetailViewBindingInner({ path, entityId, selectedTab: selectedTabProp, collection, parentCollectionSlugs, parentEntityIds, onTabChange, onEditClick, entity, dataLoading, layout = "full_screen", barActions }) {
+function DetailViewBindingInner({ path, entityId, selectedTab: selectedTabProp, collection, parentCollectionSlugs, parentEntityIds, onTabChange, onEditClick, entity, dataLoading, layout = "full_screen", barActions, barActionsStart }) {
 	const ResolvedCollectionView = useComponentOverride("Collection.View", CollectionViewBinding);
 	const { t } = useTranslation();
 	const context = useRebaseContext();
@@ -9093,22 +9893,20 @@ function DetailViewBindingInner({ path, entityId, selectedTab: selectedTabProp,
 	const customViewsCount = customViews?.length ?? 0;
 	const includeJsonView = collection.includeJsonView === void 0 ? true : collection.includeJsonView;
 	const includeHistoryView = Boolean(collection.history);
-	const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView || includeHistoryView;
+	const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
+	const [inspectorTab, setInspectorTab] = useState(null);
+	const legacyInspectorTab = selectedTab === "__json" ? "json" : selectedTab === "__rebase_history" ? "history" : void 0;
+	useEffect(() => {
+		if (legacyInspectorTab) setInspectorTab(legacyInspectorTab);
+	}, [legacyInspectorTab]);
 	const { resolvedEntityViews } = resolvedSelectedEntityView(customViews, customizationController, void 0, canEdit);
 	const activeTab = useMemo(() => {
-		return new Set([
+		return /* @__PURE__ */ new Set([
 			"__main_##Q$SC^#S6",
-			...includeJsonView ? ["__json"] : [],
-			...includeHistoryView ? ["__rebase_history"] : [],
 			...resolvedEntityViews.map((v) => v.key),
 			...subcollections.map((s) => s.slug)
 		]);
-	}, [
-		includeJsonView,
-		includeHistoryView,
-		resolvedEntityViews,
-		subcollections
-	]).has(selectedTab) ? selectedTab : MAIN_TAB_VALUE;
+	}, [resolvedEntityViews, subcollections]).has(selectedTab) ? selectedTab : MAIN_TAB_VALUE;
 	const { selectedEntityView } = resolvedSelectedEntityView(customViews, customizationController, activeTab, canEdit);
 	const mainViewVisible = activeTab === MAIN_TAB_VALUE;
 	const mountedTabsRef = useRef(/* @__PURE__ */ new Set());
@@ -9198,25 +9996,6 @@ function DetailViewBindingInner({ path, entityId, selectedTab: selectedTabProp,
 		}, `custom_view_${customView.key}`);
 	}).filter(Boolean);
 	const globalLoading = dataLoading && !usedEntity;
-	const jsonTabMounted = mountedTabsRef.current.has(JSON_TAB_VALUE);
-	const jsonView = activeTab === "__json" || jsonTabMounted ? /* @__PURE__ */ jsx("div", {
-		className: cls("relative flex-1 h-full overflow-auto w-full", { "hidden": activeTab !== JSON_TAB_VALUE }),
-		role: "tabpanel",
-		children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(JsonPreviewBinding, { values: usedEntity?.values ?? {} }) })
-	}, "json_view") : null;
-	const historyView = includeHistoryView && activeTab === "__rebase_history" ? /* @__PURE__ */ jsx("div", {
-		className: "relative flex-1 h-full overflow-auto w-full",
-		role: "tabpanel",
-		children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Suspense, {
-			fallback: /* @__PURE__ */ jsx(CircularProgressCenter, {}),
-			children: /* @__PURE__ */ jsx(EntityHistoryView$1, {
-				collection,
-				entity: usedEntity,
-				formContext: readOnlyFormContext,
-				modifiedValues: usedEntity?.values
-			})
-		}) })
-	}, "history_view") : null;
 	const subCollectionsViews = childViews && childViews.map(({ collection: subcollection }) => {
 		const subcollectionId = subcollection.slug;
 		const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(getCollectionDataPath(subcollection))}` : void 0;
@@ -9315,13 +10094,13 @@ function DetailViewBindingInner({ path, entityId, selectedTab: selectedTabProp,
 			children: /* @__PURE__ */ jsx(ArrowLeftIcon, { size: iconSize.smallest })
 		})
 	}) : null;
-	const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews || layout === "side_panel" || layout === "dialog" || Boolean(backToCollectionButton);
-	const fullScreenButton = !barActions && (layout === "side_panel" || layout === "split" || layout === "dialog") && entityId ? /* @__PURE__ */ jsx(Tooltip, {
+	const fullScreenButton = !barActions && (layout === "side_panel" || layout === "dialog") && entityId ? /* @__PURE__ */ jsx(Tooltip, {
 		title: "Open full screen",
 		children: /* @__PURE__ */ jsx(IconButton, {
 			size: "small",
 			onClick: () => {
-				navigate(`${urlController.buildUrlCollectionPath(`${path}/${entityId}`)}#full`);
+				const entityUrl = urlController.buildUrlCollectionPath(`${path}/${entityId}`);
+				navigate(`${entityUrl}#full`);
 			},
 			children: /* @__PURE__ */ jsx(Maximize2Icon, { size: iconSize.smallest })
 		})
@@ -9336,59 +10115,27 @@ function DetailViewBindingInner({ path, entityId, selectedTab: selectedTabProp,
 	}) : null;
 	const mainView = /* @__PURE__ */ jsx("div", {
 		className: cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", !mainViewVisible ? "hidden" : ""),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit"),
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: cls("flex flex-col w-full", layout === "dialog" ? "pt-4 pb-12 px-6 sm:px-8" : "pt-12 pb-16 px-4 sm:px-8 md:px-10"),
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "w-full flex flex-col items-start my-4 lg:my-6",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center justify-between w-full",
-							children: [/* @__PURE__ */ jsx(Typography, {
-								className: cls("my-4 grow line-clamp-1", collection.hideIdFromForm ? "mb-6" : ""),
-								variant: "h4",
-								children: title
-							}), editButton]
-						}), /* @__PURE__ */ jsx(Alert, {
-							color: "base",
-							outerClassName: "w-full",
-							size: "small",
-							children: /* @__PURE__ */ jsxs("code", {
-								className: "text-xs select-all text-text-secondary dark:text-text-secondary-dark",
-								children: [
-									usedEntity?.path ?? path,
-									"/",
-									entityId
-								]
-							})
-						})]
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "mt-12 flex flex-col gap-8",
-						children: propertyDetailView()
-					}),
-					/* @__PURE__ */ jsx("div", { className: "h-16" })
-				]
-			}), canEdit && onEditClick && layout === "full_screen" && /* @__PURE__ */ jsx("div", {
-				className: cls("overflow-auto h-full hidden @6xl:flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin),
-				children: /* @__PURE__ */ jsx(Button, {
-					fullWidth: true,
-					variant: "filled",
-					color: "primary",
-					startIcon: /* @__PURE__ */ jsx(PencilIcon, { size: iconSize.small }),
-					onClick: onEditClick,
-					children: t("edit_entity")
-				})
-			})]
+		children: /* @__PURE__ */ jsx("div", {
+			className: cls("w-full max-w-3xl 2xl:max-w-4xl flex flex-col", layout === "dialog" ? "pt-5 pb-12 px-6 sm:px-8" : "pt-6 pb-16 px-5 sm:px-8"),
+			children: propertyDetailView()
 		})
 	});
 	let result = /* @__PURE__ */ jsxs("div", {
 		className: "relative flex flex-col h-full w-full bg-white dark:bg-surface-800",
 		children: [
-			shouldShowTopBar && /* @__PURE__ */ jsxs("div", {
-				className: cls("h-[52px] items-center flex overflow-hidden w-full border-b pl-2 pr-2 flex bg-surface-50 dark:bg-surface-900", defaultBorderMixin),
-				children: [
+			/* @__PURE__ */ jsx(EntityIdentityBar, {
+				collection,
+				title,
+				entityId,
+				status: "existing",
+				dirty: false,
+				saving: false,
+				onInspect: includeJsonView ? () => setInspectorTab("json") : void 0,
+				onViewHistory: includeHistoryView ? () => setInspectorTab("history") : void 0,
+				leading: /* @__PURE__ */ jsxs(Fragment, { children: [barActionsStart, layout === "split" && /* @__PURE__ */ jsx(SplitListCloseButton, {})] }),
+				trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+					editButton,
+					pluginActionsTop,
 					backToCollectionButton,
 					fullScreenButton,
 					barActions?.({
@@ -9396,51 +10143,53 @@ function DetailViewBindingInner({ path, entityId, selectedTab: selectedTabProp,
 						entityId,
 						values: usedEntity?.values ?? {},
 						status: "existing"
-					}),
-					pluginActionsTop,
-					hasAdditionalViews && /* @__PURE__ */ jsx("div", {
-						className: "flex-1 flex justify-end min-w-0 shrink-0",
-						children: /* @__PURE__ */ jsxs(Tabs, {
-							className: "!w-fit max-w-full",
-							value: activeTab,
-							onValueChange: (value) => {
-								onSideTabClick(value);
-							},
-							children: [
-								includeJsonView && /* @__PURE__ */ jsx(Tab, {
-									disabled: !hasAdditionalViews,
-									value: "__json",
-									className: "text-sm",
-									children: /* @__PURE__ */ jsx(CodeIcon, { size: iconSize.smallest })
-								}),
-								includeHistoryView && /* @__PURE__ */ jsx(Tab, {
-									disabled: !hasAdditionalViews,
-									value: "__rebase_history",
-									className: "text-sm",
-									children: /* @__PURE__ */ jsx(HistoryIcon, { size: iconSize.smallest })
-								}),
-								/* @__PURE__ */ jsx(Tab, {
-									disabled: !hasAdditionalViews,
-									value: "__main_##Q$SC^#S6",
-									className: "text-sm min-w-[90px]",
-									children: /* @__PURE__ */ jsxs("span", {
-										className: "flex items-center gap-1.5",
-										children: [getIcon(collection.icon, void 0, void 0, "smallest"), collection.singularName ?? collection.name]
-									})
-								}),
-								customViewTabsStart,
-								customViewTabsEnd,
-								subcollectionTabs
-							]
-						})
 					})
-				]
+				] })
+			}),
+			hasAdditionalViews && /* @__PURE__ */ jsx("div", {
+				className: cls("h-10 shrink-0 flex items-stretch border-b px-2 min-w-0", defaultBorderMixin),
+				children: /* @__PURE__ */ jsxs(Tabs, {
+					className: "!w-full",
+					innerClassName: "h-full",
+					variant: "boxy",
+					value: activeTab,
+					onValueChange: (value) => {
+						onSideTabClick(value);
+					},
+					children: [
+						/* @__PURE__ */ jsx(Tab, {
+							value: "__main_##Q$SC^#S6",
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-1.5",
+								children: [getIcon(collection.icon, void 0, void 0, "smallest"), collection.singularName ?? collection.name]
+							})
+						}),
+						customViewTabsStart,
+						customViewTabsEnd,
+						subcollectionTabs
+					]
+				})
 			}),
-			globalLoading ? /* @__PURE__ */ jsx(DetailViewSkeleton, { collection }) : mainView,
-			jsonView,
-			historyView,
-			customViewsView,
-			subCollectionsViews
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-h-0 flex",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex-1 min-w-0 flex flex-col",
+					children: [
+						globalLoading ? /* @__PURE__ */ jsx(DetailViewSkeleton, { collection }) : mainView,
+						customViewsView,
+						subCollectionsViews
+					]
+				}), /* @__PURE__ */ jsx(EntityInspector, {
+					tab: inspectorTab,
+					onTabChange: setInspectorTab,
+					onClose: () => setInspectorTab(null),
+					collection,
+					entity: usedEntity,
+					formContext: readOnlyFormContext,
+					values: usedEntity?.values,
+					includeHistory: includeHistoryView
+				})]
+			})
 		]
 	});
 	if (plugins && plugins.length > 0) result = /* @__PURE__ */ jsx(PluginProviderStack, {
@@ -9753,27 +10502,43 @@ function SplitListView({ collection, tableController, onEntityClick: externalOnE
 			}
 		}, String(renderedEntityId)) })
 	}) : /* @__PURE__ */ jsx(Fragment, {});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ResizablePanels, {
-		stacked: !largeLayout,
-		firstPanel: listPanel,
-		secondPanel: detailPanel,
-		showSecondPanel: isDetailVisible,
-		panelSizePercent: animationPhase === "entering" ? 100 : panelSize,
-		onPanelSizeChange: setPanelSize,
-		minPanelSizePx: 240
-	}), /* @__PURE__ */ jsx(UnsavedChangesDialog, {
-		open: blocker?.state === "blocked",
-		handleOk: () => {
-			dirty.current = false;
-			blocker?.proceed?.();
-		},
-		handleCancel: () => blocker?.reset?.(),
-		body: /* @__PURE__ */ jsxs(Fragment, { children: [
-			"You have unsaved changes in this ",
-			/* @__PURE__ */ jsx("b", { children: collection.singularName ?? collection.name }),
-			"."
-		] })
-	})] });
+	const openFullScreen = useCallback(() => {
+		if (selectedEntityId === void 0) return;
+		navigate(`${buildUrl(`${path}/${selectedEntityId}${isEditMode ? "/edit" : ""}`)}#full`);
+	}, [
+		navigate,
+		buildUrl,
+		path,
+		selectedEntityId,
+		isEditMode
+	]);
+	return /* @__PURE__ */ jsxs(SplitViewProvider, {
+		value: useMemo(() => ({
+			detailOpen: selectedEntityId !== void 0,
+			openFullScreen
+		}), [selectedEntityId, openFullScreen]),
+		children: [/* @__PURE__ */ jsx(ResizablePanels, {
+			stacked: !largeLayout,
+			firstPanel: listPanel,
+			secondPanel: detailPanel,
+			showSecondPanel: isDetailVisible,
+			panelSizePercent: animationPhase === "entering" ? 100 : panelSize,
+			onPanelSizeChange: setPanelSize,
+			minPanelSizePx: 240
+		}), /* @__PURE__ */ jsx(UnsavedChangesDialog, {
+			open: blocker?.state === "blocked",
+			handleOk: () => {
+				dirty.current = false;
+				blocker?.proceed?.();
+			},
+			handleCancel: () => blocker?.reset?.(),
+			body: /* @__PURE__ */ jsxs(Fragment, { children: [
+				"You have unsaved changes in this ",
+				/* @__PURE__ */ jsx("b", { children: collection.singularName ?? collection.name }),
+				"."
+			] })
+		})]
+	});
 }
 //#endregion
 //#region src/components/CollectionViewBinding/BoardCardBinding.tsx
@@ -9927,6 +10692,12 @@ var BoardCardBinding = memo(BoardCardBindingInner);
 //#region src/components/CollectionViewBinding/useBoardDataController.tsx
 var DEFAULT_PAGE_SIZE$1 = 20;
 /**
+* How long a column waits for its subscription's first payload before reading
+* once over HTTP instead. Long enough that a healthy socket always wins the
+* race, short enough that a dead one does not hold a blank board.
+*/
+var LIVE_FIRST_PAINT_TIMEOUT_MS = 2500;
+/**
 * Shallow equality for entity value records.
 * Handles primitives and reference equality for nested values.
 * Avoids JSON.stringify allocation on every comparison.
@@ -10152,36 +10923,66 @@ function useBoardDataController({ fullPath, collection, columnProperty, columns,
 				};
 			});
 		};
+		const accessor = currentDataClient.collection(currentResolvedPath);
+		const includeParams = getRelationIncludeParams(currentCollection);
+		const fetchOnce = () => accessor.find({
+			where: whereFilter,
+			limit: itemCount,
+			orderBy: orderByParam,
+			include: includeParams
+		});
 		const onError = (error) => {
 			if (isCleaningUpRef.current) return;
 			console.error(`Error loading column ${column}:`, error);
+			fetchOnce().then((res) => onUpdate(res.data)).catch(() => {
+				if (isCleaningUpRef.current) return;
+				setColumnData((prev) => ({
+					...prev,
+					[column]: {
+						...prev[column],
+						entities: prev[column]?.entities ?? [],
+						loading: false,
+						hasMore: false,
+						error
+					}
+				}));
+			});
+		};
+		if (accessor.listen) {
+			let liveDataReceived = false;
+			const unsubscribe = accessor.listen({
+				where: whereFilter,
+				limit: itemCount,
+				orderBy: orderByParam,
+				include: includeParams
+			}, (res) => {
+				liveDataReceived = true;
+				onUpdate(res.data);
+			}, onError);
+			const firstPaintFallback = setTimeout(() => {
+				if (liveDataReceived || isCleaningUpRef.current) return;
+				fetchOnce().then((res) => {
+					if (liveDataReceived || isCleaningUpRef.current) return;
+					onUpdate(res.data);
+				}).catch(() => void 0);
+			}, LIVE_FIRST_PAINT_TIMEOUT_MS);
+			unsubscribersRef.current[column] = () => {
+				clearTimeout(firstPaintFallback);
+				unsubscribe?.();
+			};
+		} else fetchOnce().then((res) => onUpdate(res.data)).catch((error) => {
+			if (isCleaningUpRef.current) return;
 			setColumnData((prev) => ({
 				...prev,
 				[column]: {
 					...prev[column],
-					entities: [],
+					entities: prev[column]?.entities ?? [],
 					loading: false,
 					hasMore: false,
 					error
 				}
 			}));
-		};
-		const accessor = currentDataClient.collection(currentResolvedPath);
-		const includeParams = getRelationIncludeParams(currentCollection);
-		if (accessor.listen) {
-			const unsubscribe = accessor.listen({
-				where: whereFilter,
-				limit: itemCount,
-				orderBy: orderByParam,
-				include: includeParams
-			}, (res) => onUpdate(res.data), onError);
-			unsubscribersRef.current[column] = unsubscribe;
-		} else accessor.find({
-			where: whereFilter,
-			limit: itemCount,
-			orderBy: orderByParam,
-			include: includeParams
-		}).then((res) => onUpdate(res.data)).catch(onError);
+		});
 	}, []);
 	useEffect(() => {
 		isCleaningUpRef.current = false;
@@ -10203,7 +11004,8 @@ function useBoardDataController({ fullPath, collection, columnProperty, columns,
 		const timeoutId = setTimeout(() => {
 			if (isCleaningUpRef.current) return;
 			currentColumns.forEach((column) => {
-				subscribeToColumn(column, currentColumnItemCounts[column] ?? pageSize);
+				const itemCount = currentColumnItemCounts[column] ?? pageSize;
+				subscribeToColumn(column, itemCount);
 				if (isColumnExcludedByFilter(column, currentFilterValues, currentColumnProperty)) return;
 				const accessor = currentDataClient.collection(currentResolvedPath);
 				if (accessor.count) {
@@ -10395,6 +11197,40 @@ function useBoardDataController({ fullPath, collection, columnProperty, columns,
 }
 //#endregion
 //#region src/components/CollectionViewBinding/hooks/useKanbanDragAndDrop.ts
+/**
+* The digits a board order key is built from: base36, lower case only.
+*
+* The library's default alphabet is base62, and its keys only sort correctly
+* under byte ordering. The column is sorted by the *database*, and Postgres'
+* default collation is not byte ordering — under `en_US.UTF-8`, `"aa"` sorts
+* before `"aC"`, so as soon as a board had been dragged around enough to reach
+* the upper-case digits its order stopped matching the keys. One case has no
+* such ambiguity: digits before letters is true of every collation in use.
+*
+* A key written with the old alphabet no longer validates, which is what makes
+* the board offer to initialise the column — one click, and the order is
+* rewritten in a form the database can sort.
+*/
+var ORDER_KEY_DIGITS = "0123456789abcdefghijklmnopqrstuvwxyz";
+/**
+* Whether a stored order value is a key `fractional-indexing` can interpolate
+* against.
+*
+* Anything else — a plain `"12"` from a seed or a migration, an empty string —
+* makes `generateKeyBetween` throw, and the fallback below then hands out the
+* same first key to every card, so each drag lands at the bottom of the column
+* on top of the last one that did. Asking the library itself is the only
+* definition of "valid" worth trusting.
+*/
+function isValidOrderKey(value) {
+	if (typeof value !== "string" || value.length === 0) return false;
+	try {
+		generateKeyBetween(value, null, ORDER_KEY_DIGITS);
+		return true;
+	} catch {
+		return false;
+	}
+}
 function useKanbanDragAndDrop({ collection, fullPath, columnProperty, orderProperty, dataClient, context, boardDataController, analyticsController }) {
 	const handleItemsReorder = useCallback(async (items, moveInfo) => {
 		const entity = items.find((item) => item.id === moveInfo?.itemId)?.data;
@@ -10411,17 +11247,21 @@ function useKanbanDragAndDrop({ collection, fullPath, columnProperty, orderPrope
 		if (orderProperty) {
 			const targetColumnItems = items;
 			const movedIndex = targetColumnItems.findIndex((item) => item.id === moveInfo.itemId);
-			const prevKey = movedIndex > 0 ? targetColumnItems[movedIndex - 1].data.values?.[orderProperty] ?? null : null;
-			const nextKey = movedIndex < targetColumnItems.length - 1 ? targetColumnItems[movedIndex + 1].data.values?.[orderProperty] ?? null : null;
+			const keyAt = (index) => {
+				const value = targetColumnItems[index]?.data.values?.[orderProperty];
+				return isValidOrderKey(value) ? value : null;
+			};
+			const prevKey = movedIndex > 0 ? keyAt(movedIndex - 1) : null;
+			const nextKey = movedIndex < targetColumnItems.length - 1 ? keyAt(movedIndex + 1) : null;
 			try {
 				const a = prevKey;
 				let b = nextKey;
 				if (a !== null && b !== null && a >= b) b = null;
-				const newKey = generateKeyBetween(a, b);
+				const newKey = generateKeyBetween(a, b, ORDER_KEY_DIGITS);
 				updatedValues = setIn(updatedValues, orderProperty, newKey);
 			} catch (e) {
 				console.warn("fractional-indexing error, falling back:", e);
-				const newKey = generateKeyBetween(null, null);
+				const newKey = generateKeyBetween(null, null, ORDER_KEY_DIGITS);
 				updatedValues = setIn(updatedValues, orderProperty, newKey);
 			}
 		}
@@ -10628,10 +11468,7 @@ function CollectionBoardViewBinding({ collection, tableController, fullPath, par
 	const itemsNeedBackfill = useMemo(() => {
 		if (!orderProperty || dataLoading) return false;
 		if (missingOrderCount > 0) return true;
-		return allEntities.some((entity) => {
-			const orderValue = entity.values?.[orderProperty];
-			return orderValue === void 0 || orderValue === null;
-		});
+		return allEntities.some((entity) => !isValidOrderKey(entity.values?.[orderProperty]));
 	}, [
 		allEntities,
 		orderProperty,
@@ -10662,7 +11499,8 @@ function CollectionBoardViewBinding({ collection, tableController, fullPath, par
 				loading: colData?.loading ?? true,
 				hasMore: colData?.hasMore ?? false,
 				itemCount: colData?.entities?.length ?? 0,
-				totalCount: colData?.totalCount
+				totalCount: colData?.totalCount,
+				error: colData?.error
 			};
 		});
 		return state;
@@ -10693,11 +11531,8 @@ function CollectionBoardViewBinding({ collection, tableController, fullPath, par
 		analyticsController.onAnalyticsEvent?.("kanban_backfill_order", { path: fullPath });
 		setBackfillLoading(true);
 		try {
-			const entitiesToUpdate = (await dataClient.collection(fullPath).find({ limit: 1e4 })).data.filter((entity) => {
-				const orderValue = entity.values?.[orderProperty];
-				return orderValue === void 0 || orderValue === null;
-			});
-			const keys = generateNKeysBetween(null, null, entitiesToUpdate.length);
+			const entitiesToUpdate = (await dataClient.collection(fullPath).find({ limit: 1e4 })).data.filter((entity) => !isValidOrderKey(entity.values?.[orderProperty]));
+			const keys = generateNKeysBetween(null, null, entitiesToUpdate.length, ORDER_KEY_DIGITS);
 			const updates = [];
 			entitiesToUpdate.forEach((entity, index) => {
 				const updatedValues = setIn({ ...entity.values }, orderProperty, keys[index]);
@@ -10865,7 +11700,7 @@ function CollectionBoardViewBinding({ collection, tableController, fullPath, par
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "flex-1 overflow-auto no-scrollbar",
+				className: "flex-1 min-h-0 overflow-hidden",
 				children: /* @__PURE__ */ jsx(KanbanView, {
 					data: boardItems,
 					columns,
@@ -11472,9 +12307,9 @@ function ResetPasswordActionDialog({ user, open, onClose }) {
 		setLoading(true);
 		setError(null);
 		try {
-			const baseUrl = client?.baseUrl || "";
+			const apiBase = apiBaseOf(client) ?? "";
 			const token = await getAuthToken?.();
-			const response = await fetch(`${baseUrl}/api/admin/users/${user.uid}/reset-password`, {
+			const response = await fetch(`${apiBase}/admin/users/${user.uid}/reset-password`, {
 				method: "POST",
 				headers: {
 					"Content-Type": "application/json",
@@ -11786,7 +12621,8 @@ function PopupFormFieldInternal({ tableKey, entityId, customFieldValidator, prop
 	const updatePopupLocation = useCallback((newPositionCandidate) => {
 		const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
 		if (!cellRect || !draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) return;
-		const newNormalizedPosition = normalizePosition(newPositionCandidate ?? getInitialLocation(), draggableBoundingRect, windowSize);
+		const basePosition = newPositionCandidate ?? getInitialLocation();
+		const newNormalizedPosition = normalizePosition(basePosition, draggableBoundingRect, windowSize);
 		if (!popupLocation || newNormalizedPosition.x !== popupLocation.x || newNormalizedPosition.y !== popupLocation.y) setPopupLocation(newNormalizedPosition);
 	}, [
 		cellRect,
@@ -12341,13 +13177,120 @@ function FilterPresetsButton({ filterPresets, tableController, compact }) {
 	});
 }
 //#endregion
+//#region src/components/CollectionViewBinding/SortButton.tsx
+/**
+* Toolbar control that orders the collection by one property.
+*
+* The table orders by clicking a column header, which leaves every other view
+* mode — list, cards, and either of them inside a split view — with no way to
+* order at all, even though the controller has always carried `sortBy` and the
+* query has always honoured it. This binds a control to it.
+*
+* Clicking the active property flips its direction, so ascending → descending
+* is one click rather than a trip through a direction selector; clicking a
+* different one starts it ascending. The popover stays open through both.
+*/
+function SortButton({ tableController, properties }) {
+	const { t } = useTranslation();
+	const [open, setOpen] = useState(false);
+	const options = useMemo(() => getSortablePropertyOptions(properties), [properties]);
+	const { sortBy, setSortBy, setItemCount, pageSize, filterValues, checkFilterCombination } = tableController;
+	const activeKey = sortBy?.[0];
+	const activeDirection = sortBy?.[1];
+	const applySort = useCallback((next) => {
+		setSortBy?.(next);
+		if (pageSize !== void 0) setItemCount?.(pageSize);
+	}, [
+		setSortBy,
+		setItemCount,
+		pageSize
+	]);
+	const onOptionClick = useCallback((key) => {
+		if (key === activeKey) applySort([key, activeDirection === "asc" ? "desc" : "asc"]);
+		else applySort([key, "asc"]);
+	}, [
+		activeKey,
+		activeDirection,
+		applySort
+	]);
+	if (!setSortBy || options.length === 0) return null;
+	const activeOption = options.find((option) => option.key === activeKey);
+	const label = activeOption ? `${t("sort_by")}: ${activeOption.title}` : t("sort");
+	return /* @__PURE__ */ jsx(Popover, {
+		open,
+		onOpenChange: setOpen,
+		modal: false,
+		side: "bottom",
+		align: "start",
+		trigger: /* @__PURE__ */ jsx(IconButton, {
+			size: "small",
+			"aria-label": label,
+			title: label,
+			className: cls(activeOption && "text-primary"),
+			children: activeDirection === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, { size: iconSize.smallest }) : activeDirection === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, { size: iconSize.smallest }) : /* @__PURE__ */ jsx(ArrowUpDownIcon, { size: iconSize.smallest })
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "py-2 min-w-[240px] flex flex-col",
+			children: [
+				/* @__PURE__ */ jsx(Typography, {
+					variant: "caption",
+					color: "secondary",
+					className: "font-medium uppercase tracking-wider px-3 pb-1",
+					children: t("sort_by")
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "max-h-[320px] overflow-y-auto flex flex-col",
+					children: options.map(({ key, title, property }) => {
+						const active = key === activeKey;
+						const disabled = checkFilterCombination ? !checkFilterCombination(filterValues ?? {}, [key, active && activeDirection === "asc" ? "desc" : "asc"]) : false;
+						return /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							role: "menuitemradio",
+							"aria-checked": active,
+							disabled,
+							onClick: () => onOptionClick(key),
+							className: cls("flex items-center gap-2 px-3 py-1.5 text-sm text-left w-full", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900", active && "text-primary"),
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "flex-shrink-0 flex items-center",
+									children: getIconForProperty(property, "smallest")
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "flex-grow truncate",
+									children: title
+								}),
+								active && /* @__PURE__ */ jsx("span", {
+									className: "flex-shrink-0 flex items-center",
+									children: activeDirection === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, { size: iconSize.smallest }) : /* @__PURE__ */ jsx(ArrowUpIcon, { size: iconSize.smallest })
+								})
+							]
+						}, key);
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "px-3 pt-2",
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						size: "small",
+						className: "w-full",
+						disabled: !activeOption,
+						onClick: () => applySort(void 0),
+						children: t("clear_sort")
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
 //#region src/components/CollectionViewBinding/CollectionViewStartActions.tsx
-function CollectionViewStartActions({ collection, relativePath, parentCollectionSlugs, parentEntityIds, path, selectionController, tableController, collectionEntitiesCount, resolvedProperties, compact, openNewDocument }) {
+function CollectionViewStartActions({ collection, relativePath, parentCollectionSlugs, parentEntityIds, path, selectionController, tableController, collectionEntitiesCount, resolvedProperties, viewMode, compact, openNewDocument }) {
 	const context = useAdminContext();
 	const largeLayout = useLargeLayout();
 	const { t } = useTranslation();
 	const navigate = useNavigate();
 	const urlController = useUrlController();
+	const splitView = useSplitView();
 	const [filtersDialogOpen, setFiltersDialogOpen] = useState(false);
 	const filterValues = tableController.filterValues;
 	const fixedFilter = collection.fixedFilter;
@@ -12371,15 +13314,16 @@ function CollectionViewStartActions({ collection, relativePath, parentCollection
 		urlController,
 		path
 	]);
-	const backButton = compact && /* @__PURE__ */ jsx(Tooltip, {
-		title: t("back"),
+	const backButton = compact && !splitView?.detailOpen && /* @__PURE__ */ jsx(Tooltip, {
+		title: t("close"),
 		children: /* @__PURE__ */ jsx(IconButton, {
 			size: "small",
 			onClick: handleBackClick,
+			"aria-label": t("close"),
 			className: "mr-1",
-			children: /* @__PURE__ */ jsx(ArrowLeftIcon, { size: iconSize.small })
+			children: /* @__PURE__ */ jsx(XIcon, { size: iconSize.smallest })
 		})
-	}, "back_tooltip");
+	}, "close_tooltip");
 	const filtersButton = resolvedProperties && tableController.setFilterValues && /* @__PURE__ */ jsx(Tooltip, {
 		title: t("filters"),
 		children: /* @__PURE__ */ jsx(Badge, {
@@ -12392,16 +13336,19 @@ function CollectionViewStartActions({ collection, relativePath, parentCollection
 				startIcon: /* @__PURE__ */ jsx(FilterIcon, { size: iconSize.small }),
 				className: cls(activeFilterCount > 0 && "text-primary"),
 				children: activeFilterCount > 0 ? `(${activeFilterCount})` : t("filters")
-			}) : /* @__PURE__ */ jsx(Button, {
-				variant: "text",
+			}) : /* @__PURE__ */ jsx(IconButton, {
 				size: "small",
 				onClick: () => setFiltersDialogOpen(true),
 				className: cls(activeFilterCount > 0 && "text-primary"),
-				children: /* @__PURE__ */ jsx(FilterIcon, { size: iconSize.small })
+				children: /* @__PURE__ */ jsx(FilterIcon, { size: iconSize.smallest })
 			})
 		})
 	}, "filters_tooltip");
-	const filterPresetsButton = collection.filterPresets?.length ? /* @__PURE__ */ jsx(FilterPresetsButton, {
+	const sortButton = resolvedProperties && (viewMode === "list" || viewMode === "cards") && /* @__PURE__ */ jsx(SortButton, {
+		tableController,
+		properties: resolvedProperties
+	}, "sort_button");
+	const filterPresetsButton = !compact && collection.filterPresets?.length ? /* @__PURE__ */ jsx(FilterPresetsButton, {
 		filterPresets: collection.filterPresets,
 		tableController,
 		compact
@@ -12410,6 +13357,7 @@ function CollectionViewStartActions({ collection, relativePath, parentCollection
 		[
 			backButton,
 			filtersButton,
+			sortButton,
 			/* @__PURE__ */ jsx(ClearFilterSortButton, {
 				tableController,
 				enabled: !collection.fixedFilter
@@ -12587,7 +13535,10 @@ var CollectionViewBindingInner = React.memo(function CollectionViewBindingInner(
 	}, [defaultViewMode, setSearchParams]);
 	useEffect(() => {
 		if (urlView) setViewModeState(urlView);
-		else setViewModeState(getSavedView() ?? defaultViewMode);
+		else {
+			const savedView = getSavedView();
+			setViewModeState(savedView ?? defaultViewMode);
+		}
 	}, [
 		urlView,
 		getSavedView,
@@ -12619,9 +13570,10 @@ var CollectionViewBindingInner = React.memo(function CollectionViewBindingInner(
 			entityId: clickedEntity.id
 		});
 		if (collection) addRecentId(collection.slug, clickedEntity.id);
+		const entityPath = path ?? clickedEntity.path;
 		navigateToEntity({
 			navigation: urlController,
-			path: path ?? clickedEntity.path,
+			path: entityPath,
 			sidePanelController,
 			openEntityMode,
 			collection,
@@ -12765,7 +13717,8 @@ var CollectionViewBindingInner = React.memo(function CollectionViewBindingInner(
 	const onColumnResize = useCallback(({ width, key }) => {
 		const collection = collectionRef.current;
 		if (!getPropertyInPath(collection.properties, key)) return;
-		onCollectionModifiedForUser(path, buildPropertyWidthOverwrite(key, width));
+		const localCollection = buildPropertyWidthOverwrite(key, width);
+		onCollectionModifiedForUser(path, localCollection);
 	}, [onCollectionModifiedForUser, path]);
 	const onListSizeChanged = useCallback((size) => {
 		setListSize(size);
@@ -12947,21 +13900,24 @@ var CollectionViewBindingInner = React.memo(function CollectionViewBindingInner(
 		return (largeLayout ? 80 + actionsWidth : 70 + actionsWidth) + (collapsedActions.length > 0 ? largeLayout ? 40 : 30 : 0);
 	}, [getActionsForEntity, largeLayout]);
 	const tableRowActionsBuilder = useCallback(({ entity, size, width, frozen }) => {
+		const isSelected = Boolean(usedSelectionController.selectedEntities.find((e) => e.id == entity.id && e.path == entity.path));
+		const customEntityActions = (collection.entityActions ?? EMPTY_ARRAY).map((action) => resolveEntityAction(action, customizationController.entityActions)).filter(Boolean);
+		const actions = getActionsForEntity({
+			entity,
+			customEntityActions
+		});
 		return /* @__PURE__ */ jsx(CollectionRowActions, {
 			entity,
 			width,
 			frozen,
-			isSelected: Boolean(usedSelectionController.selectedEntities.find((e) => e.id == entity.id && e.path == entity.path)),
+			isSelected,
 			selectionEnabled: activeSelectionEnabled,
 			size,
 			highlightEntity: setHighlightedEntity,
 			unhighlightEntity: unselectNavigatedEntity,
 			collection,
 			path,
-			actions: getActionsForEntity({
-				entity,
-				customEntityActions: (collection.entityActions ?? EMPTY_ARRAY).map((action) => resolveEntityAction(action, customizationController.entityActions)).filter(Boolean)
-			}),
+			actions,
 			hideId: collection?.hideIdFromCollection,
 			onCollectionChange: updateLastDeleteTimestamp,
 			selectionController: usedSelectionController,
@@ -12983,12 +13939,13 @@ var CollectionViewBindingInner = React.memo(function CollectionViewBindingInner(
 	const { resolvedSlots } = customizationController;
 	const headerActionContributions = useMemo(() => resolvedSlots.filter((s) => s.slot === "collection.header.action").sort((a, b) => (a.order ?? 50) - (b.order ?? 50)), [resolvedSlots]);
 	const buildAdditionalHeaderWidget = useCallback(({ property, propertyKey, onHover }) => {
+		const collection = collectionRef.current;
 		const headerSlotProps = {
 			property,
 			propertyKey,
 			onHover,
 			path,
-			collection: collectionRef.current,
+			collection,
 			tableController,
 			parentCollectionSlugs: parentCollectionSlugs ?? EMPTY_ARRAY,
 			parentEntityIds: parentEntityIds ?? EMPTY_ARRAY
@@ -13084,6 +14041,7 @@ var CollectionViewBindingInner = React.memo(function CollectionViewBindingInner(
 			selectionController: usedSelectionController,
 			collectionEntitiesCount: docsCount ?? void 0,
 			resolvedProperties: resolvedCollection.properties,
+			viewMode,
 			openNewDocument,
 			compact: isCompact
 		}),
@@ -13242,7 +14200,7 @@ var CollectionViewBindingInner = React.memo(function CollectionViewBindingInner(
 			}, `split-list-view-${path}`) : /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col w-full h-full",
 				children: [toolbarNode, /* @__PURE__ */ jsx("div", {
-					className: cls("flex-1 flex flex-col", (viewMode === "list" || viewMode === "cards") && "overflow-y-auto"),
+					className: cls("flex-1 min-h-0 flex flex-col", (viewMode === "list" || viewMode === "cards") && "overflow-y-auto"),
 					children: collectionSurface
 				})]
 			}),
@@ -13455,7 +14413,18 @@ function EntityIdHeaderWidget({ collection, path, idPath, openEntityMode }) {
 }
 //#endregion
 //#region src/components/EditFormActions.tsx
-function EditFormActions({ collection, path, entity, layout, savingError, formex, disabled, status, pluginActions, openEntityMode, showDefaultActions = true, navigateBack, formContext }) {
+/**
+* The entity form's footer.
+*
+* It used to render in two shapes: this footer, and a `w-80 2xl:w-96` sticky
+* side rail carrying the same Save and Discard above several hundred pixels of
+* nothing. The rail is gone, and Save/Discard have moved to the identity bar
+* where they stay visible while the form scrolls — so with
+* `showDefaultActions={false}` this renders only what the bar cannot host:
+* record actions (copy, delete, custom), plugin actions, the saving error, and
+* the side-panel-only "save and close".
+*/
+function EditFormActions({ collection, path, entity, savingError, formex, disabled, status, pluginActions, openEntityMode, showDefaultActions = true, navigateBack, formContext }) {
 	const { canCreate, canDelete } = usePermissions();
 	const context = useAdminContext();
 	const sidePanelController = context.sidePanelController;
@@ -13464,31 +14433,29 @@ function EditFormActions({ collection, path, entity, layout, savingError, formex
 	const { t } = useTranslation();
 	const childViewSource = useChildViewSource(path);
 	const isLinkedChildView = childViewSource?.kind === "relation" && childViewSource.mode === "linked";
-	const entityActions = useMemo(() => {
-		const customEntityActions = (collection.entityActions ?? []).map((action) => resolveEntityAction(action, customizationController.entityActions)).filter(Boolean);
-		const createEnabled = canCreate(collection, path);
-		const deleteEnabled = entity ? canDelete(collection, path, entity) : false;
-		const disableActions = collection.disableDefaultActions ?? [];
-		const actions = [];
-		if (createEnabled && !disableActions.includes("copy")) actions.push(copyEntityAction);
-		if (deleteEnabled && !disableActions.includes("delete")) actions.push(isLinkedChildView ? unlinkEntityAction : deleteEntityAction);
-		if (customEntityActions) return mergeEntityActions(actions, customEntityActions);
-		return actions;
-	}, [
-		canCreate,
-		canDelete,
-		collection,
-		path,
-		customizationController.entityActions?.length,
-		entity,
-		collection.disableDefaultActions,
-		isLinkedChildView
-	]);
-	const formActions = showDefaultActions ? entityActions.filter((a) => a.includeInForm === void 0 || a.includeInForm) : [];
-	const bottomActions = buildBottomActions$1({
+	return buildBottomActions$1({
 		savingError,
 		entity,
-		formActions,
+		formActions: useMemo(() => {
+			const customEntityActions = (collection.entityActions ?? []).map((action) => resolveEntityAction(action, customizationController.entityActions)).filter(Boolean);
+			const createEnabled = canCreate(collection, path);
+			const deleteEnabled = entity ? canDelete(collection, path, entity) : false;
+			const disableActions = collection.disableDefaultActions ?? [];
+			const actions = [];
+			if (createEnabled && !disableActions.includes("copy")) actions.push(copyEntityAction);
+			if (deleteEnabled && !disableActions.includes("delete")) actions.push(isLinkedChildView ? unlinkEntityAction : deleteEntityAction);
+			if (customEntityActions) return mergeEntityActions(actions, customEntityActions);
+			return actions;
+		}, [
+			canCreate,
+			canDelete,
+			collection,
+			path,
+			customizationController.entityActions?.length,
+			entity,
+			collection.disableDefaultActions,
+			isLinkedChildView
+		]).filter((a) => a.includeInForm === void 0 || a.includeInForm),
 		collection,
 		context,
 		sidePanelController,
@@ -13501,35 +14468,17 @@ function EditFormActions({ collection, path, entity, layout, savingError, formex
 		formContext,
 		formex,
 		t,
-		className: layout === "responsive" ? "@6xl:hidden" : void 0
-	});
-	const sideActions = buildSideActions$1({
-		savingError,
-		entity,
-		formActions,
-		collection,
-		context,
-		sidePanelController,
-		sideDialogContext,
-		disabled,
-		status,
-		pluginActions,
-		openEntityMode,
-		navigateBack,
-		formContext,
-		formex,
-		t,
-		className: layout === "responsive" ? "hidden @6xl:flex" : void 0
+		showDefaultActions
 	});
-	if (layout === "responsive") return /* @__PURE__ */ jsxs(Fragment, { children: [bottomActions, sideActions] });
-	return layout === "bottom" ? bottomActions : sideActions;
 }
-function buildBottomActions$1({ savingError, entity, formActions, collection, context, sidePanelController, disabled, status, sideDialogContext, pluginActions, openEntityMode, navigateBack, formContext, formex, t, className }) {
+function buildBottomActions$1({ savingError, entity, formActions, collection, context, sidePanelController, disabled, status, sideDialogContext, pluginActions, openEntityMode, navigateBack, formContext, formex, t, showDefaultActions, className }) {
 	const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
 	const canClose = openEntityMode === "side_panel" || openEntityMode === "dialog";
+	const showBackToDetail = collection.defaultEntityAction === "view" && status === "existing";
+	if (!(showDefaultActions || Boolean(savingError))) return null;
 	return /* @__PURE__ */ jsxs(DialogActions, {
 		className,
-		position: "absolute",
+		position: "sticky",
 		children: [
 			savingError && /* @__PURE__ */ jsx("div", {
 				className: "text-right",
@@ -13567,21 +14516,20 @@ function buildBottomActions$1({ savingError, entity, formActions, collection, co
 					size: iconSize.smallest
 				})
 			}) : null,
-			/* @__PURE__ */ jsx(Button, {
-				variant: "text",
-				color: "primary",
-				disabled: disabled || formex.isSubmitting,
-				type: "reset",
-				children: status === "existing" ? t("discard") : t("clear")
-			}),
-			collection.defaultEntityAction === "view" && status === "existing" && /* @__PURE__ */ jsx(Button, {
+			showBackToDetail && /* @__PURE__ */ jsx(Button, {
 				variant: "text",
 				color: "primary",
 				disabled,
 				onClick: navigateBack,
 				children: t("back_to_detail") ?? "Back to details"
 			}),
-			/* @__PURE__ */ jsx(Tooltip, {
+			showDefaultActions && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				color: "primary",
+				disabled: disabled || formex.isSubmitting,
+				type: "reset",
+				children: status === "existing" ? t("discard") : t("clear")
+			}), /* @__PURE__ */ jsx(Tooltip, {
 				title: hasErrors ? t("fix_errors_before_saving") ?? "Fix highlighted errors before saving" : void 0,
 				children: /* @__PURE__ */ jsxs(Button, {
 					variant: canClose ? "text" : "filled",
@@ -13597,7 +14545,7 @@ function buildBottomActions$1({ savingError, entity, formActions, collection, co
 						status === "new" && t("create")
 					]
 				})
-			}),
+			})] }),
 			canClose && /* @__PURE__ */ jsxs(LoadingButton, {
 				variant: "filled",
 				color: "primary",
@@ -13616,77 +14564,6 @@ function buildBottomActions$1({ savingError, entity, formActions, collection, co
 		]
 	});
 }
-function buildSideActions$1({ savingError, entity, formActions, collection, context, sidePanelController, disabled, status, sideDialogContext, pluginActions, openEntityMode, navigateBack, formContext, formex, t, className }) {
-	const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin, className),
-		children: [
-			/* @__PURE__ */ jsx(Tooltip, {
-				title: hasErrors ? t("fix_errors_before_saving") ?? "Fix highlighted errors before saving" : void 0,
-				children: /* @__PURE__ */ jsxs(LoadingButton, {
-					fullWidth: true,
-					variant: "filled",
-					color: "primary",
-					type: "submit",
-					loading: formex.isSubmitting,
-					startIcon: hasErrors ? /* @__PURE__ */ jsx(AlertCircleIcon, {}) : void 0,
-					disabled: disabled || formex.isSubmitting,
-					onClick: () => {
-						sideDialogContext.setPendingClose?.(false);
-					},
-					children: [
-						status === "existing" && t("save"),
-						status === "copy" && t("create_copy"),
-						status === "new" && t("create")
-					]
-				})
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				fullWidth: true,
-				variant: "text",
-				disabled: disabled || formex.isSubmitting,
-				type: "reset",
-				children: status === "existing" ? t("discard") : t("clear")
-			}),
-			collection.defaultEntityAction === "view" && status === "existing" && /* @__PURE__ */ jsx(Button, {
-				fullWidth: true,
-				variant: "text",
-				disabled,
-				onClick: navigateBack,
-				children: t("back_to_detail") ?? "Back to details"
-			}),
-			pluginActions,
-			formActions.length > 0 && /* @__PURE__ */ jsx("div", {
-				className: "flex flex-row flex-wrap mt-2",
-				children: formActions.map((action, index) => {
-					const props = {
-						view: "form",
-						entity,
-						path: getCollectionDataPath(collection),
-						collection,
-						context,
-						sidePanelController,
-						openEntityMode,
-						navigateBack,
-						formContext
-					};
-					return /* @__PURE__ */ jsx(EntityActionButton, {
-						action,
-						enabled: !action.isEnabled || action.isEnabled(props),
-						props
-					}, action.key ?? action.name ?? index);
-				})
-			}),
-			savingError && /* @__PURE__ */ jsx("div", {
-				className: "text-right",
-				children: /* @__PURE__ */ jsx(Typography, {
-					color: "error",
-					children: savingError.message
-				})
-			})
-		]
-	});
-}
 function EntityActionButton({ action, enabled, props }) {
 	const snackbarController = useSnackbarController();
 	const [loading, setLoading] = React.useState(false);
@@ -13728,8 +14605,68 @@ function EntityActionButton({ action, enabled, props }) {
 	});
 }
 //#endregion
+//#region src/hooks/useRecordActions.tsx
+/**
+* The actions you can perform *on* a record — copy, delete, and whatever the
+* collection adds — resolved against the current user's permissions.
+*
+* Extracted from the form's footer so the identity bar can own them. They are
+* not ways to leave the form, so they never belonged next to Save; putting them
+* in the bar's overflow menu is what let the footer disappear instead of
+* becoming a full-width strip holding two icon buttons.
+*/
+function useRecordActions({ collection, path, entity }) {
+	const { canCreate, canDelete } = usePermissions();
+	const customizationController = useCustomizationController();
+	const childViewSource = useChildViewSource(path);
+	const isLinkedChildView = childViewSource?.kind === "relation" && childViewSource.mode === "linked";
+	return useMemo(() => {
+		const customEntityActions = (collection.entityActions ?? []).map((action) => resolveEntityAction(action, customizationController.entityActions)).filter(Boolean);
+		const createEnabled = canCreate(collection, path);
+		const deleteEnabled = entity ? canDelete(collection, path, entity) : false;
+		const disableActions = collection.disableDefaultActions ?? [];
+		const actions = [];
+		if (createEnabled && !disableActions.includes("copy")) actions.push(copyEntityAction);
+		if (deleteEnabled && !disableActions.includes("delete")) actions.push(isLinkedChildView ? unlinkEntityAction : deleteEntityAction);
+		return (customEntityActions.length ? mergeEntityActions(actions, customEntityActions) : actions).filter((a) => a.includeInForm === void 0 || a.includeInForm);
+	}, [
+		canCreate,
+		canDelete,
+		collection,
+		path,
+		customizationController.entityActions?.length,
+		entity,
+		collection.disableDefaultActions,
+		isLinkedChildView
+	]);
+}
+//#endregion
+//#region src/hooks/useEntityDisplayTitle.tsx
+/**
+* The human name for a record, for the identity bar and the breadcrumb.
+*
+* The guard on `status` is the point. The title resolver walks candidate
+* properties and returns the first non-empty one, and on a brand new entity the
+* only populated values are the property defaults — so creating a blog post
+* opened a page headed **draft**, the default of its `status` enum. A record
+* that does not exist yet has no name; it has an intent.
+*/
+function useEntityDisplayTitle({ collection, values, entityId, status }) {
+	const isNew = status === "new";
+	const titlePropertyKey = getEntityTitlePropertyKeyForEntity(collection, values, entityId);
+	const rawTitle = !isNew && values && titlePropertyKey ? getValueInPath(values, titlePropertyKey) : void 0;
+	const titleUser = useResolvedUser(isUserSelectProperty(collection, titlePropertyKey) && typeof rawTitle === "string" ? rawTitle : void 0);
+	const singular = collection.singularName ?? collection.name;
+	if (isNew) return `New ${singular.toLowerCase()}`;
+	if (titleUser) return getUserLabel(titleUser);
+	if (rawTitle !== void 0 && rawTitle !== null) {
+		const resolved = resolveTitleToString(rawTitle);
+		if (resolved) return resolved;
+	}
+	return singular;
+}
+//#endregion
 //#region src/components/EditViewBinding.tsx
-var EntityHistoryView = lazy(() => import("./history-g9688IaK.js").then((m) => ({ default: m.EntityHistoryView })));
 /**
 * This is the default view that is used as the content of a side panel when
 * a record is opened.
@@ -13778,11 +14715,12 @@ function EditViewBinding({ entityId, ...props }) {
 		children: content
 	});
 }
-function EditViewBindingInner({ path, entityId, selectedTab: selectedTabProp, collection, parentCollectionSlugs, parentEntityIds, onValuesModified, onSaved, onTabChange, navigateBack, entity, initialDirtyValues, dataLoading, layout = "side_panel", barActions, status, setStatus, formProps, canEdit }) {
+function EditViewBindingInner({ path, entityId, selectedTab: selectedTabProp, collection, parentCollectionSlugs, parentEntityIds, onValuesModified, onSaved, onTabChange, navigateBack, entity, initialDirtyValues, dataLoading, layout = "side_panel", barActions, barActionsStart, status, setStatus, formProps, canEdit }) {
 	const ResolvedFormActions = useComponentOverride("EditView.FormActions", EditFormActions);
 	const ResolvedEntityForm = useComponentOverride("Entity.Form", EntityFormBinding);
 	const ResolvedCollectionView = useComponentOverride("Collection.View", CollectionViewBinding);
 	const context = useRebaseContext();
+	const adminContext = useAdminContext();
 	const urlController = useUrlController();
 	const navigate = useNavigate();
 	const [usedEntity, setUsedEntity] = useState(entity);
@@ -13793,7 +14731,7 @@ function EditViewBindingInner({ path, entityId, selectedTab: selectedTabProp, co
 	useLargeLayout();
 	const customizationController = useCustomizationController();
 	const plugins = customizationController.plugins;
-	const pluginActionsTop = useSlot("form.actions.top", useMemo(() => ({
+	const formActionTopProps = useMemo(() => ({
 		entityId,
 		parentCollectionSlugs,
 		parentEntityIds,
@@ -13814,7 +14752,8 @@ function EditViewBindingInner({ path, entityId, selectedTab: selectedTabProp, co
 		context,
 		formContext,
 		layout
-	]));
+	]);
+	const pluginActionsTop = useSlot("form.actions.top", formActionTopProps);
 	const defaultSelectedView = useMemo(() => resolveDefaultSelectedView(collection ? collection.defaultSelectedView : void 0, {
 		status,
 		entityId
@@ -13840,24 +14779,17 @@ function EditViewBindingInner({ path, entityId, selectedTab: selectedTabProp, co
 	const customViewsCount = customViews?.length ?? 0;
 	const includeJsonView = collection.includeJsonView === void 0 ? true : collection.includeJsonView;
 	const includeHistoryView = Boolean(collection.history);
-	const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView || includeHistoryView;
+	const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
 	const { resolvedEntityViews } = resolvedSelectedEntityView(customViews, customizationController, void 0, canEdit);
+	const legacyInspectorTab = selectedTab === "__json" ? "json" : selectedTab === "__rebase_history" ? "history" : void 0;
 	const activeTab = useMemo(() => {
-		return new Set([
+		return /* @__PURE__ */ new Set([
 			"__main_##Q$SC^#S6",
-			...includeJsonView ? ["__json"] : [],
-			...includeHistoryView ? ["__rebase_history"] : [],
 			...resolvedEntityViews.map((v) => v.key),
 			...subcollections.map((s) => s.slug)
 		]);
-	}, [
-		includeJsonView,
-		includeHistoryView,
-		resolvedEntityViews,
-		subcollections
-	]).has(selectedTab) ? selectedTab : MAIN_TAB_VALUE;
+	}, [resolvedEntityViews, subcollections]).has(selectedTab) ? selectedTab : MAIN_TAB_VALUE;
 	const { selectedEntityView, selectedSecondaryForm } = resolvedSelectedEntityView(customViews, customizationController, activeTab, canEdit);
-	const actionsAtTheBottom = layout === "side_panel" || layout === "dialog" || selectedEntityView?.includeActions === "bottom";
 	const mainViewVisible = activeTab === "__main_##Q$SC^#S6" || Boolean(selectedSecondaryForm);
 	const mountedTabsRef = useRef(/* @__PURE__ */ new Set());
 	if (activeTab) mountedTabsRef.current.add(activeTab);
@@ -13926,25 +14858,46 @@ function EditViewBindingInner({ path, entityId, selectedTab: selectedTabProp, co
 		}, `custom_view_${customView.key}`);
 	}).filter(Boolean);
 	const globalLoading = dataLoading && !usedEntity || canEdit === void 0 && (status === "existing" || status === "copy");
-	const jsonTabMounted = mountedTabsRef.current.has(JSON_TAB_VALUE);
-	const jsonView = activeTab === "__json" || jsonTabMounted ? /* @__PURE__ */ jsx("div", {
-		className: cls("relative flex-1 h-full overflow-auto w-full", { "hidden": activeTab !== JSON_TAB_VALUE }),
-		role: "tabpanel",
-		children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(JsonPreviewBinding, { values: formContext?.values ?? entity?.values ?? {} }) })
-	}, "json_view") : null;
-	const historyView = includeHistoryView && activeTab === "__rebase_history" ? /* @__PURE__ */ jsx("div", {
-		className: "relative flex-1 h-full overflow-auto w-full",
-		role: "tabpanel",
-		children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Suspense, {
-			fallback: /* @__PURE__ */ jsx(CircularProgressCenter, {}),
-			children: /* @__PURE__ */ jsx(EntityHistoryView, {
-				collection,
-				entity: usedEntity,
-				formContext,
-				modifiedValues: formContext?.values ?? usedEntity?.values
-			})
-		}) })
-	}, "history_view") : null;
+	const displayTitle = useEntityDisplayTitle({
+		collection,
+		values: formContext?.values ?? usedEntity?.values,
+		entityId,
+		status
+	});
+	const formex = formContext?.formex;
+	const hasFormErrors = Boolean(formex && Object.keys(formex.errors).length > 0 && formex.submitCount > 0);
+	const saveDisabled = Boolean(!formContext || formContext.disabled || formex?.isSubmitting || status === "existing" && !formex?.dirty);
+	const [inspectorTab, setInspectorTab] = useState(null);
+	const [savedCount, setSavedCount] = useState(0);
+	const sideDialogContext = useSideDialogContext();
+	const canCloseAfterSave = layout === "side_panel" || layout === "dialog";
+	const recordActions = useRecordActions({
+		collection,
+		path,
+		entity: usedEntity
+	});
+	const recordActionItems = usedEntity && recordActions.length ? recordActions.map((action, index) => {
+		const clickProps = {
+			view: "form",
+			entity: usedEntity,
+			path,
+			collection,
+			context,
+			sidePanelController: adminContext.sidePanelController,
+			openEntityMode: layout,
+			navigateBack: navigateBack ?? (() => void 0),
+			formContext
+		};
+		return /* @__PURE__ */ jsxs(MenuItem, {
+			disabled: !(!action.isEnabled || action.isEnabled(clickProps)),
+			onClick: () => action.onClick(clickProps),
+			children: [getIcon(action.icon, void 0, void 0, "smallest"), action.name]
+		}, action.key ?? action.name ?? index);
+	}) : null;
+	const formPluginActions = useSlot("form.actions", formActionTopProps);
+	useEffect(() => {
+		if (legacyInspectorTab) setInspectorTab(legacyInspectorTab);
+	}, [legacyInspectorTab]);
 	const subCollectionsViews = childViews && childViews.map(({ collection: subcollection }) => {
 		const subcollectionId = subcollection.slug;
 		const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(getCollectionDataPath(subcollection))}` : void 0;
@@ -14038,7 +14991,7 @@ function EditViewBindingInner({ path, entityId, selectedTab: selectedTabProp, co
 		entity,
 		initialDirtyValues,
 		openEntityMode: layout,
-		forceActionsAtTheBottom: actionsAtTheBottom,
+		showDefaultActions: false,
 		initialStatus: status,
 		className: cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className),
 		EntityFormActionsComponent: ResolvedFormActions,
@@ -14058,6 +15011,7 @@ function EditViewBindingInner({ path, entityId, selectedTab: selectedTabProp, co
 			formProps?.onFormContextReady?.(formContext);
 		},
 		onSaved: (params) => {
+			setSavedCount((count) => count + 1);
 			const res = {
 				...params,
 				selectedTab: "__main_##Q$SC^#S6" === activeTab ? void 0 : activeTab
@@ -14100,14 +15054,14 @@ function EditViewBindingInner({ path, entityId, selectedTab: selectedTabProp, co
 			})
 		}, `entity_detail_collection_tab_${view.name}`);
 	});
-	const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews || layout === "side_panel" || layout === "dialog";
-	const fullScreenButton = !barActions && (layout === "side_panel" || layout === "split" || layout === "dialog") && entityId ? /* @__PURE__ */ jsx(Tooltip, {
+	const fullScreenButton = !barActions && (layout === "side_panel" || layout === "dialog") && entityId ? /* @__PURE__ */ jsx(Tooltip, {
 		title: "Open full screen",
 		children: /* @__PURE__ */ jsx(IconButton, {
 			size: "small",
 			onClick: () => {
 				const editSuffix = collection.defaultEntityAction === "view" ? "/edit" : "";
-				navigate(`${urlController.buildUrlCollectionPath(`${path}/${entityId}${editSuffix}`)}#full`);
+				const entityUrl = urlController.buildUrlCollectionPath(`${path}/${entityId}${editSuffix}`);
+				navigate(`${entityUrl}#full`);
 			},
 			children: /* @__PURE__ */ jsx(Maximize2Icon, { size: iconSize.smallest })
 		})
@@ -14115,60 +15069,86 @@ function EditViewBindingInner({ path, entityId, selectedTab: selectedTabProp, co
 	let result = /* @__PURE__ */ jsxs("div", {
 		className: "relative flex flex-col h-full w-full bg-white dark:bg-surface-800",
 		children: [
-			shouldShowTopBar && /* @__PURE__ */ jsxs("div", {
-				className: cls("h-[52px] items-center flex overflow-hidden w-full border-b pl-2 pr-2 flex bg-surface-50 dark:bg-surface-900", defaultBorderMixin),
-				children: [
+			/* @__PURE__ */ jsx(EntityIdentityBar, {
+				collection,
+				title: displayTitle,
+				entityId: status === "existing" ? entityId : void 0,
+				status,
+				dirty: Boolean(formContext?.formex?.dirty),
+				saving: Boolean(formContext?.isSaving),
+				hasErrors: hasFormErrors,
+				saveDisabled: !canEdit || saveDisabled,
+				onBack: layout === "full_screen" ? () => navigate(withViewMode(urlController.buildUrlCollectionPath(path))) : void 0,
+				onSave: canEdit && formContext ? () => {
+					sideDialogContext.setPendingClose?.(false);
+					formContext.submit();
+				} : void 0,
+				onSaveAndClose: canEdit && formContext && canCloseAfterSave ? () => {
+					sideDialogContext.setPendingClose?.(true);
+					formContext.submit();
+				} : void 0,
+				onDiscard: canEdit && formContext ? () => formContext.formex.resetForm() : void 0,
+				onInspect: includeJsonView ? () => setInspectorTab("json") : void 0,
+				onViewHistory: includeHistoryView ? () => setInspectorTab("history") : void 0,
+				recordActions: recordActionItems,
+				pluginActions: formPluginActions,
+				leading: /* @__PURE__ */ jsxs(Fragment, { children: [barActionsStart, layout === "split" && /* @__PURE__ */ jsx(SplitListCloseButton, {})] }),
+				trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+					pluginActionsTop,
 					fullScreenButton,
 					barActions?.({
 						path,
 						entityId,
 						values: formContext?.values ?? usedEntity?.values ?? {},
 						status
-					}),
-					pluginActionsTop,
-					hasAdditionalViews && /* @__PURE__ */ jsx("div", {
-						className: "flex-1 flex justify-end min-w-0 shrink-0",
-						children: /* @__PURE__ */ jsxs(Tabs, {
-							className: "!w-fit max-w-full",
-							value: activeTab,
-							onValueChange: (value) => {
-								onSideTabClick(value);
-							},
-							children: [
-								includeJsonView && /* @__PURE__ */ jsx(Tab, {
-									disabled: !hasAdditionalViews,
-									value: "__json",
-									className: "text-sm",
-									children: /* @__PURE__ */ jsx(CodeIcon, { size: iconSize.smallest })
-								}),
-								includeHistoryView && /* @__PURE__ */ jsx(Tab, {
-									disabled: !hasAdditionalViews,
-									value: "__rebase_history",
-									className: "text-sm",
-									children: /* @__PURE__ */ jsx(HistoryIcon, { size: iconSize.smallest })
-								}),
-								/* @__PURE__ */ jsx(Tab, {
-									disabled: !hasAdditionalViews,
-									value: "__main_##Q$SC^#S6",
-									className: "text-sm min-w-[90px]",
-									children: /* @__PURE__ */ jsxs("span", {
-										className: "flex items-center gap-1.5",
-										children: [getIcon(collection.icon, void 0, void 0, "smallest"), collection.singularName ?? collection.name]
-									})
-								}),
-								customViewTabsStart,
-								customViewTabsEnd,
-								subcollectionTabs
-							]
-						})
 					})
-				]
+				] })
+			}),
+			hasAdditionalViews && /* @__PURE__ */ jsx("div", {
+				className: cls("h-10 shrink-0 flex items-stretch border-b px-2 min-w-0", defaultBorderMixin),
+				children: /* @__PURE__ */ jsxs(Tabs, {
+					className: "!w-full",
+					innerClassName: "h-full",
+					variant: "boxy",
+					value: activeTab,
+					onValueChange: (value) => {
+						onSideTabClick(value);
+					},
+					children: [
+						/* @__PURE__ */ jsx(Tab, {
+							value: "__main_##Q$SC^#S6",
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-1.5",
+								children: [getIcon(collection.icon, void 0, void 0, "smallest"), collection.singularName ?? collection.name]
+							})
+						}),
+						customViewTabsStart,
+						customViewTabsEnd,
+						subcollectionTabs
+					]
+				})
 			}),
-			globalLoading ? /* @__PURE__ */ jsx(EntityFormSkeleton, { collection }) : /* @__PURE__ */ jsxs(Fragment, { children: [entityReadOnlyView, entityView] }),
-			jsonView,
-			historyView,
-			customViewsView,
-			subCollectionsViews
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-h-0 flex",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex-1 min-w-0 flex flex-col",
+					children: [
+						globalLoading ? /* @__PURE__ */ jsx(EntityFormSkeleton, { collection }) : /* @__PURE__ */ jsxs(Fragment, { children: [entityReadOnlyView, entityView] }),
+						customViewsView,
+						subCollectionsViews
+					]
+				}), /* @__PURE__ */ jsx(EntityInspector, {
+					tab: inspectorTab,
+					onTabChange: setInspectorTab,
+					onClose: () => setInspectorTab(null),
+					collection,
+					entity: usedEntity,
+					formContext,
+					values: formContext?.values ?? usedEntity?.values,
+					refreshToken: savedCount,
+					includeHistory: includeHistoryView
+				})]
+			})
 		]
 	});
 	if (plugins && plugins.length > 0) result = /* @__PURE__ */ jsx(PluginProviderStack, {
@@ -14397,21 +15377,25 @@ function SidePanelBinding(props) {
 		parentCollectionSlugs,
 		parentEntityIds,
 		onEditClick: openEditView,
-		barActions: ({ status, values }) => /* @__PURE__ */ jsxs("div", {
+		barActionsStart: /* @__PURE__ */ jsx(IconButton, {
+			className: "self-center",
+			size: "small",
+			onClick: onClose,
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		}),
+		barActions: ({ status, values }) => /* @__PURE__ */ jsx("div", {
 			className: "flex gap-1",
-			children: [/* @__PURE__ */ jsx(IconButton, {
-				className: "self-center",
-				size: "small",
-				onClick: onClose,
-				children: /* @__PURE__ */ jsx(XIcon, {})
-			}), allowFullScreen && /* @__PURE__ */ jsx(IconButton, {
+			children: allowFullScreen && /* @__PURE__ */ jsx(IconButton, {
 				className: "self-center",
 				size: "small",
 				onClick: () => {
-					if (entityId) navigate(urlController.buildUrlCollectionPath(`${path}/${entityId}`), { state: null });
+					if (entityId) {
+						const fullScreenUrl = urlController.buildUrlCollectionPath(`${path}/${entityId}`);
+						navigate(fullScreenUrl, { state: null });
+					}
 				},
 				children: /* @__PURE__ */ jsx(Maximize2Icon, {})
-			})]
+			})
 		}),
 		onTabChange: ({ entityId: tabEntityId, selectedTab, collection: paramCollection }) => {
 			if (collection?.openEntityMode === "dialog" || paramCollection?.openEntityMode === "dialog") return;
@@ -14432,25 +15416,31 @@ function SidePanelBinding(props) {
 		onValuesModified,
 		onSaved: onUpdate,
 		navigateBack: closeEditView,
-		barActions: ({ status, values }) => /* @__PURE__ */ jsxs("div", {
+		barActionsStart: /* @__PURE__ */ jsx(IconButton, {
+			className: "self-center",
+			size: "small",
+			onClick: onClose,
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		}),
+		barActions: ({ status, values }) => /* @__PURE__ */ jsx("div", {
 			className: "flex gap-1",
-			children: [/* @__PURE__ */ jsx(IconButton, {
-				className: "self-center",
-				size: "small",
-				onClick: onClose,
-				children: /* @__PURE__ */ jsx(XIcon, {})
-			}), allowFullScreen && /* @__PURE__ */ jsx(IconButton, {
+			children: allowFullScreen && /* @__PURE__ */ jsx(IconButton, {
 				className: "self-center",
 				size: "small",
 				onClick: () => {
 					saveEntityToMemoryCache(status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId, values);
 					setBlocked(false);
 					setBlockedNavigationMessage(void 0);
-					if (entityId) navigate(urlController.buildUrlCollectionPath(`${path}/${entityId}`), { state: null });
-					else navigate(urlController.buildUrlCollectionPath(path) + "#new", { state: null });
+					if (entityId) {
+						const fullScreenUrl = urlController.buildUrlCollectionPath(`${path}/${entityId}`);
+						navigate(fullScreenUrl, { state: null });
+					} else {
+						const fullScreenUrl = urlController.buildUrlCollectionPath(path);
+						navigate(fullScreenUrl + "#new", { state: null });
+					}
 				},
 				children: /* @__PURE__ */ jsx(Maximize2Icon, {})
-			})]
+			})
 		}),
 		onTabChange: ({ entityId: tabEntityId, selectedTab, collection: paramCollection }) => {
 			if (collection?.openEntityMode === "dialog" || paramCollection?.openEntityMode === "dialog") return;
@@ -14485,39 +15475,25 @@ function ResolvedSidePanelBinding(props) {
 }
 var NEW_URL_HASH = "new_side";
 var SIDE_URL_HASH = "side";
+/**
+* How wide the side panel opens.
+*
+* One width for the whole panel, whatever tab is showing. It used to depend on
+* the selected tab — the form got one width and a subcollection or custom view
+* got `calc(55vw + 768px)` — so the panel physically resized under the cursor
+* every time you switched tabs. And the "form" width was derived from how
+* deeply nested the collection's *properties* were, which is not a thing anyone
+* can predict from looking at the panel.
+*
+* Now: `width` prop, then the collection's `sideDialogWidth`, then a default
+* sized for the content the panel actually has to hold — the form column plus
+* its metadata rail — capped so it never eats the whole window.
+*/
 function getEntityViewWidth(props, small, customizationController) {
 	if (small) return CONTAINER_FULL_WIDTH;
-	const { selectedSecondaryForm } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
-	const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === "edit" || props.selectedTab === "__json" || props.selectedTab === "__rebase_history" || Boolean(selectedSecondaryForm);
-	let resolvedWidth;
-	if (props.width) resolvedWidth = typeof props.width === "number" ? `${props.width}px` : props.width;
-	else if (props.collection?.sideDialogWidth) resolvedWidth = typeof props.collection.sideDialogWidth === "number" ? `${props.collection.sideDialogWidth}px` : props.collection.sideDialogWidth;
-	if (!shouldUseSmallLayout) return `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})`;
-	else if (resolvedWidth) return resolvedWidth;
-	else if (!props.collection) return FORM_CONTAINER_WIDTH;
-	else return calculateCollectionDesiredWidth(props.collection);
-}
-var collectionViewWidthCache = {};
-function calculateCollectionDesiredWidth(collection) {
-	if (collectionViewWidthCache[collection.slug]) return collectionViewWidthCache[collection.slug];
-	let result = FORM_CONTAINER_WIDTH;
-	if (collection?.properties) {
-		const values = Object.values(collection.properties).map((p) => getNestedPropertiesDepth(p));
-		const maxDepth = Math.max(...values);
-		if (maxDepth < 3) result = FORM_CONTAINER_WIDTH;
-		else result = 768 + 32 * (maxDepth - 2) + "px";
-	}
-	collectionViewWidthCache[collection.slug] = result;
-	return result;
-}
-function getNestedPropertiesDepth(property, accumulator = 0) {
-	if (property.type === "map" && property.properties) {
-		const values = Object.values(property.properties).flatMap((childProperty) => getNestedPropertiesDepth(childProperty, accumulator + 1));
-		return Math.max(...values);
-	} else if (property.type === "array" && property.oneOf) return accumulator + 3;
-	else if (property.type === "array" && property.of) if (Array.isArray(property.of)) return Math.max(...property.of.map((p) => getNestedPropertiesDepth(p, accumulator + 1)));
-	else return getNestedPropertiesDepth(property.of, accumulator + 1);
-	else return accumulator + 1;
+	if (props.width) return typeof props.width === "number" ? `${props.width}px` : props.width;
+	if (props.collection?.sideDialogWidth) return typeof props.collection.sideDialogWidth === "number" ? `${props.collection.sideDialogWidth}px` : props.collection.sideDialogWidth;
+	return SIDE_PANEL_DEFAULT_WIDTH;
 }
 var useBuildSidePanel = (collectionRegistryController, urlController, navigationStateController, sideDialogsController, authController) => {
 	const location = useLocation();
@@ -14759,8 +15735,9 @@ function useResolvedNavigationFrom({ path }) {
 * Replaces the old subcollection-based approach with a proper API call.
 */
 function useHistory(params) {
-	const { slug, entityId, enabled = true, pageSize = 10 } = params;
+	const { slug, entityId, enabled = true, pageSize = 10, refreshToken } = params;
 	const apiConfig = useApiConfig();
+	const apiBase = useApiBase();
 	const [entries, setEntries] = useState([]);
 	const [total, setTotal] = useState(0);
 	const [isLoading, setIsLoading] = useState(false);
@@ -14768,6 +15745,7 @@ function useHistory(params) {
 	const [error, setError] = useState();
 	const [offset, setOffset] = useState(0);
 	const [refreshTrigger, setRefreshTrigger] = useState(0);
+	const entityKey = `${slug}/${entityId}/${refreshToken ?? 0}`;
 	const currentEntityRef = useRef(void 0);
 	const fetchEntries = useCallback(async (currentOffset, signal) => {
 		if (!apiConfig?.apiUrl || !entityId || !enabled) return;
@@ -14777,13 +15755,12 @@ function useHistory(params) {
 			const token = await apiConfig.getAuthToken?.();
 			const headers = { "Content-Type": "application/json" };
 			if (token) headers["Authorization"] = `Bearer ${token}`;
-			const url = `${apiConfig.apiUrl}/api/data/${slug}/${entityId}/history?limit=${pageSize}&offset=${currentOffset}`;
+			const url = `${apiBase}/data/${slug}/${entityId}/history?limit=${pageSize}&offset=${currentOffset}`;
 			const response = await fetch(url, {
 				headers,
 				signal
 			});
 			if (signal?.aborted) return;
-			const entityKey = `${slug}/${entityId}`;
 			if (currentEntityRef.current !== entityKey) return;
 			if (!response.ok) {
 				const errorData = await response.json().catch(() => ({ error: { message: response.statusText } }));
@@ -14802,13 +15779,14 @@ function useHistory(params) {
 		}
 	}, [
 		apiConfig,
+		apiBase,
 		slug,
 		entityId,
+		entityKey,
 		enabled,
 		pageSize
 	]);
 	useEffect(() => {
-		const entityKey = `${slug}/${entityId}`;
 		const isNewEntity = currentEntityRef.current !== entityKey;
 		if (isNewEntity) {
 			currentEntityRef.current = entityKey;
@@ -14828,7 +15806,7 @@ function useHistory(params) {
 		offset,
 		enabled,
 		entityId,
-		slug,
+		entityKey,
 		refreshTrigger
 	]);
 	const loadMore = useCallback(() => {
@@ -14846,7 +15824,7 @@ function useHistory(params) {
 		const token = await apiConfig.getAuthToken?.();
 		const headers = { "Content-Type": "application/json" };
 		if (token) headers["Authorization"] = `Bearer ${token}`;
-		const url = `${apiConfig.apiUrl}/api/data/${slug}/${entityId}/history/${historyId}/revert`;
+		const url = `${apiBase}/data/${slug}/${entityId}/history/${historyId}/revert`;
 		const response = await fetch(url, {
 			method: "POST",
 			headers
@@ -14861,6 +15839,7 @@ function useHistory(params) {
 		return result.data;
 	}, [
 		apiConfig,
+		apiBase,
 		slug,
 		entityId
 	]);
@@ -15161,6 +16140,24 @@ function filterViewsByRole(views, authController) {
 //#endregion
 //#region src/hooks/navigation/utils.ts
 var NAVIGATION_DEFAULT_GROUP_NAME = "Views";
+/**
+* Group names that sink to the bottom of the drawer on their name alone.
+*
+* A magic string, and it stays one for compatibility: apps have been relying on
+* `group: "Settings"` landing last since before there was a flag, and taking it
+* away would silently reshuffle their navigation.
+*
+* It is a bad way to ask for the behaviour, though — it is invisible from the
+* `group?: string` type, and it is defeated by the most ordinary edit there is:
+* translating the label. `group: "Ajustes"` is the same group to a reader and a
+* different one to this comparison, so the ordering just quietly stops
+* happening. Set {@link AppView.pinToBottom} instead, which says so.
+*/
+var NAVIGATION_BOTTOM_GROUP_NAMES = ["Admin", "Settings"];
+/** Whether a group sinks to the bottom by virtue of its name. @see NAVIGATION_BOTTOM_GROUP_NAMES */
+function isBottomPinnedGroupName(groupName) {
+	return groupName !== void 0 && NAVIGATION_BOTTOM_GROUP_NAMES.includes(groupName);
+}
 function getGroup(collectionOrView) {
 	const trimmed = collectionOrView.group?.trim();
 	if (!trimmed || trimmed === "") return NAVIGATION_DEFAULT_GROUP_NAME;
@@ -15562,10 +16559,9 @@ function useTopLevelNavigation(props) {
 				return acc;
 			}, [])
 		];
-		const groupOrderValue = (groupName) => {
-			if (groupName === "Admin" || groupName === "Settings" || groupName === "Admin") return 1;
-			return 0;
-		};
+		const pinnedGroups = /* @__PURE__ */ new Set();
+		for (const view of [...views ?? [], ...adminViews ?? []]) if (view.pinToBottom) pinnedGroups.add(getGroup(view));
+		const groupOrderValue = (groupName) => isBottomPinnedGroupName(groupName) || groupName !== void 0 && pinnedGroups.has(groupName) ? 1 : 0;
 		const usedViewsOrder = viewsOrder ?? navigationEntriesOrder;
 		navigationEntries = navigationEntries.sort((a, b) => {
 			const groupDiff = groupOrderValue(a.group) - groupOrderValue(b.group);
@@ -15591,8 +16587,8 @@ function useTopLevelNavigation(props) {
 			...additionalGroups
 		];
 		const uniqueGroupsArray = [...new Set(allDefinedGroups)];
-		const lastGroups = uniqueGroupsArray.filter((g) => g === "Admin" || g === "Settings" || g === "Admin");
-		const uniqueGroups = [...uniqueGroupsArray.filter((g) => g !== "Admin" && g !== "Settings" && g !== "Admin"), ...lastGroups];
+		const lastGroups = uniqueGroupsArray.filter((g) => groupOrderValue(g) === 1);
+		const uniqueGroups = [...uniqueGroupsArray.filter((g) => groupOrderValue(g) === 0), ...lastGroups];
 		const computedTopLevelNav = {
 			allowDragAndDrop: plugins?.some((plugin) => plugin.hooks?.allowDragAndDrop) ?? false,
 			navigationEntries,
@@ -16401,7 +17397,7 @@ function BlockEntry({ name, index, value, typeField, valueField, properties, aut
 * and tables to the specified properties.
 * @group Form fields
 */
-function DateTimeFieldBinding({ propertyKey, value, setValue, autoFocus, error, showError, disabled, touched, property, includeDescription }) {
+function DateTimeFieldBinding({ propertyKey, value, setValue, autoFocus, error, showError, disabled, touched, property, includeDescription, hideLabel }) {
 	const { locale } = useCustomizationController();
 	const internalValue = value || null;
 	useClearRestoreValue({
@@ -16419,7 +17415,7 @@ function DateTimeFieldBinding({ propertyKey, value, setValue, autoFocus, error,
 			locale,
 			error: showError,
 			disabled,
-			label: /* @__PURE__ */ jsx(LabelWithIcon, {
+			label: hideLabel ? void 0 : /* @__PURE__ */ jsx(LabelWithIcon, {
 				icon: getIconForProperty(property, "small"),
 				required: property.validation?.required,
 				className: showError ? "text-red-500 dark:text-red-500" : "text-text-secondary dark:text-text-secondary-dark",
@@ -16884,7 +17880,7 @@ function MapFieldBinding({ propertyKey, value, showError, error, disabled, prope
 	if (!property.properties) throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property '${propertyKey}'${property.name ? ` ("${property.name}")` : ""}`);
 	const mapProperties = property.properties;
 	const mapFormView = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
-		className: cls("py-1 flex flex-col space-y-2", minimalistView && property.admin?.widthPercentage !== void 0 ? "mt-8" : void 0),
+		className: "py-1 flex flex-col space-y-2",
 		children: Object.entries(mapProperties).filter(([_, property]) => !isHidden(property)).map(([entryKey, childProperty], index) => {
 			const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.admin?.disabled);
 			return /* @__PURE__ */ jsx("div", {
@@ -16914,7 +17910,6 @@ function MapFieldBinding({ propertyKey, value, showError, error, disabled, prope
 					expanded
 				} });
 			},
-			className: property.admin?.widthPercentage !== void 0 ? "mt-8" : void 0,
 			innerClassName: "px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900",
 			title: /* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
 				propertyKey,
@@ -16971,7 +17966,7 @@ function canonicalizeMarkdown(md) {
 		return normalizeMarkdown(md);
 	}
 }
-function MarkdownEditorFieldBinding({ property, propertyKey, value, setValue, includeDescription, showError, error, minimalistView, disabled: disabledProp, isSubmitting, context, customProps }) {
+function MarkdownEditorFieldBinding({ property, propertyKey, value, setValue, includeDescription, hideLabel, showError, error, minimalistView, disabled: disabledProp, isSubmitting, context, customProps }) {
 	useAuthController();
 	const disabled = disabledProp || isSubmitting;
 	const highlight = customProps?.highlight;
@@ -17086,7 +18081,7 @@ function MarkdownEditorFieldBinding({ property, propertyKey, value, setValue, in
 		/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center w-full",
 			children: [
-				/* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
+				!hideLabel && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
 					propertyKey,
 					icon: getIconForProperty(property, "small"),
 					required: property.validation?.required,
@@ -17126,7 +18121,7 @@ function MarkdownEditorFieldBinding({ property, propertyKey, value, setValue, in
 * and tables to the specified properties.
 * @group Form fields
 */
-function MultiSelectFieldBinding({ propertyKey, value, setValue, error, showError, disabled, property, includeDescription, size = "large", autoFocus }) {
+function MultiSelectFieldBinding({ propertyKey, value, setValue, error, showError, disabled, property, includeDescription, hideLabel, size = "large", autoFocus }) {
 	const of = property.of;
 	if (!of) throw Error("Using wrong component ArrayEnumSelect");
 	if (Array.isArray(of)) throw Error("Using array properties instead of single one in `of` in ArrayProperty");
@@ -17143,11 +18138,12 @@ function MultiSelectFieldBinding({ propertyKey, value, setValue, error, showErro
 	});
 	const validValue = !!value && Array.isArray(value);
 	const renderValue = useCallback((enumKey, list) => {
+		const enumValue = enumKey !== void 0 ? getLabelOrConfigFrom(enumValues, enumKey) : void 0;
 		return /* @__PURE__ */ jsxs(EnumValuesChip, {
 			enumKey,
 			enumValues,
 			size: "medium",
-			children: [(enumKey !== void 0 ? getLabelOrConfigFrom(enumValues, enumKey) : void 0)?.label ?? enumKey, !list && /* @__PURE__ */ jsx("button", {
+			children: [enumValue?.label ?? enumKey, !list && /* @__PURE__ */ jsx("button", {
 				className: "ml-1 ring-offset-background rounded-full outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
 				onMouseDown: (e) => {
 					e.preventDefault();
@@ -17172,7 +18168,7 @@ function MultiSelectFieldBinding({ propertyKey, value, setValue, error, showErro
 		value: validValue ? value.map((v) => v?.toString()) : [],
 		disabled,
 		modalPopover: true,
-		label: /* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
+		label: hideLabel ? void 0 : /* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
 			propertyKey,
 			icon: getIconForProperty(property, "small"),
 			required: property.validation?.required,
@@ -17210,7 +18206,7 @@ function ReferenceFieldBinding(props) {
 	if (typeof props.property.path !== "string") return /* @__PURE__ */ jsx(ReadOnlyFieldBinding, { ...props });
 	return /* @__PURE__ */ jsx(ReferenceFieldBindingInternal, { ...props });
 }
-function ReferenceFieldBindingInternal({ propertyKey, value, setValue, error, showError, isSubmitting, disabled, minimalistView, touched, autoFocus, property, includeDescription, size = "medium" }) {
+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 refValue = value;
 	useClearRestoreValue({
@@ -17240,7 +18236,7 @@ function ReferenceFieldBindingInternal({ propertyKey, value, setValue, error, sh
 		referenceDialogController.open();
 	};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		!minimalistView && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
+		!minimalistView && !hideLabel && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
 			propertyKey,
 			icon: getIconForProperty(property, "small"),
 			required: property.validation?.required,
@@ -17321,6 +18317,7 @@ function RepeatFieldBinding({ propertyKey, value, error, showError, isSubmitting
 			context,
 			partOfArray: true,
 			minimalistView: false,
+			hideLabel: true,
 			autoFocus: internalId === lastAddedId,
 			index
 		}) });
@@ -17337,8 +18334,7 @@ function RepeatFieldBinding({ propertyKey, value, error, showError, isSubmitting
 		canAddElements,
 		sortable,
 		newDefaultEntry: getDefaultValueFor(property.of),
-		onValueChange: (value) => setFieldValue(propertyKey, value),
-		className: property.admin?.widthPercentage !== void 0 ? "mt-8" : void 0
+		onValueChange: (value) => setFieldValue(propertyKey, value)
 	});
 	const title = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
 		propertyKey,
@@ -17382,7 +18378,7 @@ function RepeatFieldBinding({ propertyKey, value, error, showError, isSubmitting
 * and tables to the specified properties.
 * @group Form fields
 */
-function SelectFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, touched, property, includeDescription, size = "large" }) {
+function SelectFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, touched, property, includeDescription, hideLabel, size = "large" }) {
 	const enumValues = resolveEnumValues(property.enum ?? []);
 	useClearRestoreValue({
 		property,
@@ -17401,7 +18397,7 @@ function SelectFieldBinding({ propertyKey, value, setValue, error, showError, di
 		fullWidth: true,
 		position: "item-aligned",
 		inputClassName: cls("w-full"),
-		label: /* @__PURE__ */ jsx(PropertyIdCopyTooltip, {
+		label: hideLabel ? void 0 : /* @__PURE__ */ jsx(PropertyIdCopyTooltip, {
 			propertyKey,
 			children: /* @__PURE__ */ jsx(LabelWithIcon, {
 				icon: getIconForProperty(property, "small"),
@@ -17482,13 +18478,13 @@ function StorageItemPreview({ name, property, value, onRemove, disabled, size, p
 }
 //#endregion
 //#region src/form/field_bindings/StorageUploadFieldBinding.tsx
-var dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
+var dropZoneClasses = "box-border relative pt-[2px] h-[172px] items-center border border-transparent outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
 var disabledClasses = fieldBackgroundDisabledMixin;
 var nonActiveDropClasses = fieldBackgroundHoverMixin;
 var activeDropClasses = "pt-0 border-2 border-solid";
 var acceptDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-green-500";
 var rejectDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-red-500";
-function StorageUploadFieldBinding({ propertyKey, value, setValue, error, showError, autoFocus, minimalistView, property, includeDescription, context, isSubmitting }) {
+function StorageUploadFieldBinding({ propertyKey, value, setValue, error, showError, autoFocus, minimalistView, property, includeDescription, hideLabel, context, isSubmitting }) {
 	useAuthController();
 	const storageSource = useStorageSource();
 	const disabled = isReadOnly(property) || !!property.admin?.disabled || isSubmitting || context.disabled;
@@ -17509,7 +18505,7 @@ function StorageUploadFieldBinding({ propertyKey, value, setValue, error, showEr
 		setValue
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		!minimalistView && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
+		!minimalistView && !hideLabel && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
 			propertyKey,
 			icon: getIconForProperty(property, "small"),
 			required: property.validation?.required,
@@ -17579,7 +18575,7 @@ function SortableStorageItem({ id, entry, property, metadata, storagePathBuilder
 		style,
 		...attributes,
 		...listeners,
-		className: cls("rounded-md m-1"),
+		className: cls("rounded-md shrink-0"),
 		tabIndex: -1,
 		children: child
 	});
@@ -17619,7 +18615,7 @@ function FileDropComponent({ storage, disabled, onFilesAdded, multipleFilesSuppo
 			[disabledClasses]: disabled || isDndItemDragging
 		}),
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cls("flex items-center p-1 px-4 no-scrollbar", multipleFilesSupported && internalValue.length ? "overflow-auto" : "", multipleFilesSupported && internalValue.length ? "min-h-[180px]" : "min-h-[250px]"),
+			className: cls("flex items-center gap-2 p-1 px-3 no-scrollbar", multipleFilesSupported && internalValue.length ? "overflow-x-auto overflow-y-hidden" : "", "h-[126px]"),
 			children: [/* @__PURE__ */ jsx("input", {
 				autoFocus,
 				...getInputProps()
@@ -17636,10 +18632,10 @@ function FileDropComponent({ storage, disabled, onFilesAdded, multipleFilesSuppo
 				isSortable: multipleFilesSupported
 			}, entry.id))]
 		}), /* @__PURE__ */ jsx("div", {
-			className: "flex-grow min-h-[38px] box-border m-2 text-center",
+			className: "box-border mx-3 mb-2.5 h-[34px] flex items-center justify-center text-center",
 			children: /* @__PURE__ */ jsx(Typography, {
 				align: "center",
-				variant: "label",
+				variant: "caption",
 				className: disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "",
 				children: helpText
 			})
@@ -17742,7 +18738,7 @@ function StorageUpload({ property, name, value, setInternalValue, onChange, mult
 * and tables to the specified properties.
 * @group Form fields
 */
-var SwitchFieldBinding = function SwitchFieldBinding({ propertyKey, value, setValue, error, showError, autoFocus, disabled, size = "large", property, includeDescription }) {
+var SwitchFieldBinding = function SwitchFieldBinding({ propertyKey, value, setValue, error, showError, autoFocus, disabled, size = "large", property, includeDescription, hideLabel }) {
 	useClearRestoreValue({
 		property,
 		value,
@@ -17754,8 +18750,8 @@ var SwitchFieldBinding = function SwitchFieldBinding({ propertyKey, value, setVa
 			value,
 			onValueChange: (v) => setValue(v),
 			error: showError,
-			className: property.admin?.widthPercentage !== void 0 ? "mt-8" : void 0,
-			label: /* @__PURE__ */ jsx(LabelWithIcon, {
+			position: hideLabel ? "start" : void 0,
+			label: hideLabel ? void 0 : /* @__PURE__ */ jsx(LabelWithIcon, {
 				icon: getIconForProperty(property, "small"),
 				required: property.validation?.required,
 				title: property.name ?? propertyKey
@@ -17780,7 +18776,7 @@ var SwitchFieldBinding = function SwitchFieldBinding({ propertyKey, value, setVa
 * and tables to the specified properties.
 * @group Form fields
 */
-function TextFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, size = "large" }) {
+function TextFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, hideLabel, size = "large" }) {
 	let multiline;
 	let url;
 	if (property.type === "string") {
@@ -17813,7 +18809,7 @@ function TextFieldBinding({ propertyKey, value, setValue, error, showError, disa
 		if (property.email) inputType = "email";
 		else if (property.admin?.urlPreview) inputType = "url";
 	}
-	const label = /* @__PURE__ */ jsx(LabelWithIcon, {
+	const label = hideLabel ? void 0 : /* @__PURE__ */ jsx(LabelWithIcon, {
 		icon: getIconForProperty(property, "small"),
 		required: property.validation?.required || property.isId === true,
 		title: property.name ?? propertyKey
@@ -17822,9 +18818,9 @@ function TextFieldBinding({ propertyKey, value, setValue, error, showError, disa
 		/* @__PURE__ */ jsx(PropertyIdCopyTooltip, {
 			propertyKey,
 			children: isMultiline ? /* @__PURE__ */ jsxs("div", {
-				className: cls("rounded-md relative max-w-full min-h-[64px]", fieldBackgroundMixin, fieldBackgroundHoverMixin, showError && error ? "border border-red-500 dark:border-red-600" : "", property.admin?.widthPercentage !== void 0 ? "mt-8" : void 0),
+				className: cls("rounded-md relative max-w-full min-h-[64px]", fieldBackgroundMixin, fieldBackgroundHoverMixin, showError && error ? "border border-red-500 dark:border-red-600" : ""),
 				children: [
-					/* @__PURE__ */ jsx("div", {
+					label && /* @__PURE__ */ jsx("div", {
 						className: "pointer-events-none absolute top-1 text-xs font-medium px-3 text-text-secondary dark:text-text-secondary-dark",
 						children: label
 					}),
@@ -17833,7 +18829,7 @@ function TextFieldBinding({ propertyKey, value, setValue, error, showError, disa
 						onChange,
 						autoFocus,
 						disabled,
-						className: cls("rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", showError && error ? "text-red-500 dark:text-red-600" : "")
+						className: cls("rounded-md resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3", label ? "pt-8 pb-2" : "py-2", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", showError && error ? "text-red-500 dark:text-red-600" : "")
 					}),
 					property.admin?.clearable && /* @__PURE__ */ jsx("div", {
 						className: "flex flex-row justify-center items-center absolute h-full right-0 top-0 mr-4",
@@ -17848,12 +18844,7 @@ function TextFieldBinding({ propertyKey, value, setValue, error, showError, disa
 				value: displayValue,
 				onChange,
 				autoFocus,
-				className: property.admin?.widthPercentage !== void 0 ? "mt-8" : void 0,
-				label: /* @__PURE__ */ jsx(LabelWithIcon, {
-					icon: getIconForProperty(property, "small"),
-					required: property.validation?.required || property.isId === true,
-					title: property.name ?? propertyKey
-				}),
+				label,
 				type: inputType,
 				disabled,
 				endAdornment: property.admin?.clearable && /* @__PURE__ */ jsx(IconButton, {
@@ -17892,7 +18883,7 @@ function TextFieldBinding({ propertyKey, value, setValue, error, showError, disa
 * Vector object structure expected by Rebase driver.
 * @group Form fields
 */
-function VectorFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, size = "large" }) {
+function VectorFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, hideLabel, size = "large" }) {
 	const isVectorObject = (val) => {
 		return typeof val === "object" && val !== null && "value" in val;
 	};
@@ -17922,7 +18913,7 @@ function VectorFieldBinding({ propertyKey, value, setValue, error, showError, di
 			value: raw.split(",").map((str) => str.trim()).filter((str) => str !== "").map(Number)
 		});
 	};
-	const label = /* @__PURE__ */ jsx(LabelWithIcon, {
+	const label = hideLabel ? null : /* @__PURE__ */ jsx(LabelWithIcon, {
 		icon: getIconForProperty(property, "small"),
 		required: property.validation?.required,
 		title: property.name ?? propertyKey
@@ -18065,7 +19056,7 @@ var inRange = (n, [min, max]) => n >= min && n <= max;
 *
 * @group Form fields
 */
-function GeopointFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, size = "large" }) {
+function GeopointFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, hideLabel, size = "large" }) {
 	const coordinates = readCoordinates(value);
 	const [latText, setLatText] = useState(() => coordinates ? String(coordinates.latitude) : "");
 	const [lngText, setLngText] = useState(() => coordinates ? String(coordinates.longitude) : "");
@@ -18111,7 +19102,7 @@ function GeopointFieldBinding({ propertyKey, value, setValue, error, showError,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center justify-between mb-1",
-				children: [/* @__PURE__ */ jsx(LabelWithIcon, {
+				children: [!hideLabel && /* @__PURE__ */ jsx(LabelWithIcon, {
 					icon: getIconForProperty(property, "small"),
 					required: property.validation?.required,
 					title: property.name ?? propertyKey
@@ -18199,7 +19190,7 @@ function humanSize(bytes) {
 *
 * @group Form fields
 */
-function BinaryFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, size = "large" }) {
+function BinaryFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, hideLabel, size = "large" }) {
 	const [text, setText] = useState(typeof value === "string" ? value : "");
 	const [isEditing, setIsEditing] = useState(false);
 	useEffect(() => {
@@ -18230,7 +19221,7 @@ function BinaryFieldBinding({ propertyKey, value, setValue, error, showError, di
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "flex items-center justify-between mb-1",
-				children: /* @__PURE__ */ jsx(LabelWithIcon, {
+				children: !hideLabel && /* @__PURE__ */ jsx(LabelWithIcon, {
 					icon: getIconForProperty(property, "small"),
 					required: property.validation?.required,
 					title: property.name ?? propertyKey
@@ -18426,14 +19417,14 @@ function RelationFieldBinding(props) {
 		relation
 	});
 }
-function RelationSelectorBinding({ propertyKey, value, size, error, showError, disabled, isSubmitting, property, includeDescription, setValue, relation, manyRelation }) {
+function RelationSelectorBinding({ propertyKey, value, size, error, showError, disabled, isSubmitting, property, includeDescription, hideLabel, setValue, relation, manyRelation }) {
 	const singleValue = (!manyRelation && value && !Array.isArray(value) ? normalizeToEntityRelation(value) : null) ?? null;
 	const multipleValue = manyRelation && Array.isArray(value) ? value : [];
 	const selectorSize = size === "large" ? "medium" : size;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "",
 		children: [
-			/* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
+			!hideLabel && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
 				propertyKey,
 				icon: getIconForProperty(property, "small"),
 				required: property.validation?.required,
@@ -18461,7 +19452,7 @@ function RelationSelectorBinding({ propertyKey, value, size, error, showError, d
 		]
 	});
 }
-function SingleRelationFieldBinding({ propertyKey, value, size, error, showError, disabled, isSubmitting, property, includeDescription, setValue, relation }) {
+function SingleRelationFieldBinding({ propertyKey, value, size, error, showError, disabled, isSubmitting, property, includeDescription, hideLabel, setValue, relation }) {
 	const normalizedValue = value && !Array.isArray(value) ? normalizeToEntityRelation(value) : null;
 	const validValue = !!normalizedValue;
 	const collection = relation?.target();
@@ -18483,7 +19474,7 @@ function SingleRelationFieldBinding({ propertyKey, value, size, error, showError
 	};
 	const usedRelation = Array.isArray(value) ? void 0 : normalizedValue ?? void 0;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
+		!hideLabel && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
 			propertyKey,
 			icon: getIconForProperty(property, "small"),
 			required: property.validation?.required,
@@ -18532,10 +19523,10 @@ function SingleRelationFieldBinding({ propertyKey, value, size, error, showError
 * and tables to the specified properties.
 * @group Form fields
 */
-function UserSelectFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, touched, property, includeDescription, size = "large" }) {
+function UserSelectFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, touched, property, includeDescription, hideLabel, size = "large" }) {
 	const selectorSize = size === "large" ? "medium" : size;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(PropertyIdCopyTooltip, {
+		!hideLabel && /* @__PURE__ */ jsx(PropertyIdCopyTooltip, {
 			propertyKey,
 			children: /* @__PURE__ */ jsx(LabelWithIcon, {
 				icon: getIconForProperty(property, "small"),
@@ -19047,7 +20038,7 @@ var PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a, b) => {
 	if (shouldPropertyReRender(b.property)) return false;
 	return false;
 });
-function PropertyFieldBindingInternal({ propertyKey, property, context, includeDescription, underlyingValueHasChanged, disabled: disabledProp, partOfArray, partOfBlock, minimalistView, autoFocus, index, size, onPropertyChange }) {
+function PropertyFieldBindingInternal({ propertyKey, property, context, includeDescription, hideLabel, underlyingValueHasChanged, disabled: disabledProp, partOfArray, partOfBlock, minimalistView, autoFocus, index, size, onPropertyChange }) {
 	const authController = useAuthController();
 	const customizationController = useCustomizationController();
 	return /* @__PURE__ */ jsx(Field, {
@@ -19099,6 +20090,7 @@ function PropertyFieldBindingInternal({ propertyKey, property, context, includeD
 					propertyKey,
 					property: resolvedProperty,
 					includeDescription,
+					hideLabel,
 					underlyingValueHasChanged,
 					context,
 					disabled,
@@ -19114,7 +20106,7 @@ function PropertyFieldBindingInternal({ propertyKey, property, context, includeD
 		}
 	}, propertyKey);
 }
-function FieldInternal({ Component, componentProps: { propertyKey, property, includeDescription, underlyingValueHasChanged, partOfArray, partOfBlock, minimalistView, autoFocus, context, disabled, size, onPropertyChange }, formexFieldProps }) {
+function FieldInternal({ Component, componentProps: { propertyKey, property, includeDescription, hideLabel, underlyingValueHasChanged, partOfArray, partOfBlock, minimalistView, autoFocus, context, disabled, size, onPropertyChange }, formexFieldProps }) {
 	const { plugins } = useCustomizationController();
 	const customFieldProps = property.admin?.customProps;
 	const value = formexFieldProps.field.value;
@@ -19148,6 +20140,7 @@ function FieldInternal({ Component, componentProps: { propertyKey, property, inc
 			showError,
 			isSubmitting,
 			includeDescription: includeDescription ?? true,
+			hideLabel: hideLabel ?? false,
 			property,
 			disabled: disabled ?? false,
 			underlyingValueHasChanged: underlyingValueHasChanged ?? false,
@@ -19227,22 +20220,18 @@ var ErrorFocus = ({ containerRef }) => {
 };
 //#endregion
 //#region src/form/EntityFormActions.tsx
-function EntityFormActions({ path, collection, entity, layout, savingError, formex, disabled, status, pluginActions, openEntityMode, navigateBack, formContext }) {
-	const bottomActionsProps = {
-		path,
-		savingError,
-		entity,
-		collection,
-		disabled,
-		status,
-		pluginActions,
-		openEntityMode,
-		navigateBack,
-		formContext,
-		formex,
-		className: layout === "responsive" ? "@6xl:hidden" : void 0
-	};
-	const sideActionsProps = {
+/**
+* The form's own action bar.
+*
+* There used to be two variants: this one, and a `w-80 2xl:w-96` sticky rail
+* holding the same two buttons above several hundred pixels of nothing — a
+* fifth of a 1440px viewport reserved for a Save button. The rail is gone. When
+* the container supplies its own actions (the entity view's identity bar does)
+* it passes `showDefaultActions={false}`, and this renders only what the bar
+* cannot host: the saving error, plugin actions, and collection form actions.
+*/
+function EntityFormActions({ path, collection, entity, savingError, formex, disabled, status, pluginActions, openEntityMode, navigateBack, formContext, showDefaultActions = true }) {
+	return buildBottomActions({
 		path,
 		savingError,
 		entity,
@@ -19254,17 +20243,16 @@ function EntityFormActions({ path, collection, entity, layout, savingError, form
 		navigateBack,
 		formContext,
 		formex,
-		className: layout === "responsive" ? "hidden @6xl:flex" : void 0
-	};
-	const bottomActions = buildBottomActions(bottomActionsProps);
-	const sideActions = buildSideActions(sideActionsProps);
-	if (layout === "responsive") return /* @__PURE__ */ jsxs(Fragment, { children: [bottomActions, sideActions] });
-	return layout === "bottom" ? bottomActions : sideActions;
+		showDefaultActions
+	});
 }
-function buildBottomActions({ savingError, entity, path, formActions, collection, disabled, status, pluginActions, openEntityMode, navigateBack, formContext, formex, className }) {
+function buildBottomActions({ savingError, entity, path, formActions, collection, disabled, status, pluginActions, openEntityMode, navigateBack, formContext, formex, showDefaultActions, className }) {
 	const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
+	const entityActions = entity ? formActions ?? [] : [];
+	const hasPluginActions = Boolean(pluginActions && pluginActions.length > 0);
+	if (!showDefaultActions && !savingError && !entityActions.length && !hasPluginActions) return null;
 	return /* @__PURE__ */ jsxs(DialogActions, {
-		position: "absolute",
+		position: "sticky",
 		className,
 		children: [
 			savingError && /* @__PURE__ */ jsx("div", {
@@ -19274,9 +20262,9 @@ function buildBottomActions({ savingError, entity, path, formActions, collection
 					children: savingError.message
 				})
 			}),
-			entity && (formActions ?? []).length > 0 && /* @__PURE__ */ jsx("div", {
+			entityActions.length > 0 && /* @__PURE__ */ jsx("div", {
 				className: "grow flex overflow-auto no-scrollbar",
-				children: (formActions ?? []).map((action) => /* @__PURE__ */ jsx(IconButton, {
+				children: entityActions.map((action) => /* @__PURE__ */ jsx(IconButton, {
 					color: "primary",
 					onClick: (event) => {
 						event.stopPropagation();
@@ -19296,14 +20284,13 @@ function buildBottomActions({ savingError, entity, path, formActions, collection
 				}, action.name))
 			}),
 			pluginActions,
-			/* @__PURE__ */ jsx(Button, {
+			showDefaultActions && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
 				variant: "text",
 				disabled: disabled || formex.isSubmitting,
 				color: "primary",
 				type: "reset",
 				children: status === "existing" ? "Discard" : "Clear"
-			}),
-			/* @__PURE__ */ jsx(Tooltip, {
+			}), /* @__PURE__ */ jsx(Tooltip, {
 				title: hasErrors ? "Fix highlighted errors before saving" : void 0,
 				children: /* @__PURE__ */ jsxs(LoadingButton, {
 					variant: "filled",
@@ -19318,47 +20305,7 @@ function buildBottomActions({ savingError, entity, path, formActions, collection
 						status === "new" && "Create"
 					]
 				})
-			})
-		]
-	});
-}
-function buildSideActions({ savingError, entity, formActions, path, openEntityMode, collection, disabled, status, pluginActions, formex, className }) {
-	const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin, className),
-		children: [
-			/* @__PURE__ */ jsx(Tooltip, {
-				title: hasErrors ? "Fix highlighted errors before saving" : void 0,
-				children: /* @__PURE__ */ jsxs(LoadingButton, {
-					fullWidth: true,
-					variant: "filled",
-					color: "primary",
-					type: "submit",
-					loading: formex.isSubmitting,
-					startIcon: hasErrors ? /* @__PURE__ */ jsx(AlertCircleIcon, {}) : void 0,
-					disabled: disabled || formex.isSubmitting,
-					children: [
-						status === "existing" && "Save",
-						status === "copy" && "Create copy",
-						status === "new" && "Create"
-					]
-				})
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				fullWidth: true,
-				variant: "text",
-				disabled: disabled || formex.isSubmitting,
-				type: "reset",
-				children: status === "existing" ? "Discard" : "Clear"
-			}),
-			pluginActions,
-			savingError && /* @__PURE__ */ jsx("div", {
-				className: "text-right",
-				children: /* @__PURE__ */ jsx(Typography, {
-					color: "error",
-					children: savingError.message
-				})
-			})
+			})] })
 		]
 	});
 }
@@ -19520,7 +20467,7 @@ function getChanges(source, comparison) {
 	const changes = {};
 	if (!source) return {};
 	if (!comparison) return source;
-	const allKeys = Array.from(new Set([...Object.keys(source), ...Object.keys(comparison)]));
+	const allKeys = Array.from(/* @__PURE__ */ new Set([...Object.keys(source), ...Object.keys(comparison)]));
 	for (const key of allKeys) {
 		const sourceValue = source[key];
 		const comparisonValue = comparison[key];
@@ -19581,8 +20528,7 @@ function zodToFormErrors(zodError) {
 *
 * @group Components
 */
-function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified, onIdChange, onSaved, entity, initialDirtyValues, onFormContextReady, forceActionsAtTheBottom, initialStatus, className, onStatusChange, onEntityChange, openEntityMode = "full_screen", formex: formexProp, disabled: disabledProp, Builder, EntityFormActionsComponent = EntityFormActions, showDefaultActions = true, showEntityPath = true, navigateBack: navigateBackProp, children, onSubmit: onSubmitProp, onValuesChangeDeferred: onValuesChangeDeferredProp, onReset: onResetProp, uniqueFieldValidator: uniqueFieldValidatorProp, beforeFields, afterFields, pluginActions: pluginActionsProp, computedInitialValues, hasLocalChanges: hasLocalChangesProp, localChangesData, manualApplyLocalChanges, localChangesCacheKey, onClearLocalChanges }) {
-	useCustomizationController();
+function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified, onIdChange, onSaved, entity, initialDirtyValues, onFormContextReady, initialStatus, className, onStatusChange, onEntityChange, openEntityMode = "full_screen", formex: formexProp, disabled: disabledProp, Builder, EntityFormActionsComponent = EntityFormActions, showDefaultActions = true, navigateBack: navigateBackProp, children, onSubmit: onSubmitProp, onValuesChangeDeferred: onValuesChangeDeferredProp, onReset: onResetProp, uniqueFieldValidator: uniqueFieldValidatorProp, beforeFields, afterFields, pluginActions: pluginActionsProp, computedInitialValues, hasLocalChanges: hasLocalChangesProp, localChangesData, manualApplyLocalChanges, localChangesCacheKey, onClearLocalChanges }) {
 	const navigateBack = useCallback(() => {
 		if (navigateBackProp) navigateBackProp();
 	}, [navigateBackProp]);
@@ -19604,7 +20550,6 @@ function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified
 		else return entityIdProp;
 	}, [entityIdProp, status]);
 	const [entityId, setEntityId] = useState(initialEntityId);
-	const [entityIdError, setEntityIdError] = useState(false);
 	const [savingError, setSavingError] = useState();
 	const [isSavingAutoSave, setIsSavingAutoSave] = useState(false);
 	const [discardDialogOpen, setDiscardDialogOpen] = useState(false);
@@ -19623,7 +20568,6 @@ function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified
 	const hasLocalChanges = hasLocalChangesProp !== void 0 ? hasLocalChangesProp && !localChangesCleared : false;
 	const onSubmit = (values, formexController) => {
 		setSavingError(void 0);
-		setEntityIdError(false);
 		if (status === "existing") {
 			if (!entity?.id) throw Error("Form misconfiguration when saving, no id for existing entity");
 		} else if (status !== "new" && status !== "copy") throw Error("New FormType added, check EntityForm");
@@ -19731,7 +20675,8 @@ function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified
 		savingError,
 		status,
 		openEntityMode,
-		disabled
+		disabled,
+		isSaving: formex.isSubmitting || isSavingAutoSave
 	};
 	useEffect(() => {
 		onFormContextReady?.(formContext);
@@ -19739,13 +20684,13 @@ function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified
 		formex.version,
 		collection,
 		entityId,
-		path
+		path,
+		formex.dirty,
+		formex.isSubmitting,
+		formex.submitCount,
+		isSavingAutoSave
 	]);
 	const actionsDisabled = disabled || formex.isSubmitting || status === "existing" && !formex.dirty || Boolean(disabledProp);
-	const titlePropertyKey = getEntityTitlePropertyKeyForEntity(collection, formex.values, entityId);
-	const rawTitle = formex.values && titlePropertyKey ? getValueInPath(formex.values, titlePropertyKey) : void 0;
-	const titleUser = useResolvedUser(isUserSelectProperty(collection, titlePropertyKey) && typeof rawTitle === "string" ? rawTitle : void 0);
-	const title = titleUser ? getUserLabel(titleUser) : rawTitle !== void 0 && rawTitle !== null ? resolveTitleToString(rawTitle) : collection.singularName ?? collection.name;
 	const modified = formex.dirty;
 	useEffect(() => {
 		if (!autoSave) onValuesModified?.(modified, formex.values);
@@ -19779,6 +20724,106 @@ function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified
 		formex.setFieldValue
 	]);
 	const formFieldKeys = getFormFieldKeys(collection);
+	const layout = useMemo(() => resolveFormLayout({
+		collection,
+		fieldKeys: formFieldKeys,
+		status
+	}), [
+		collection,
+		formFieldKeys.join(","),
+		status
+	]);
+	const formElementRef = useRef(null);
+	const railVisible = useRailVisible(formElementRef);
+	const showRail = !Builder && layout.hasRail && railVisible;
+	const [collapsedSections, setCollapsedSections] = useState(() => new Set(layout.sections.filter((s) => s.collapsed).map((s) => s.key)));
+	const toggleSection = useCallback((key) => {
+		setCollapsedSections((prev) => {
+			const next = new Set(prev);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			return next;
+		});
+	}, []);
+	const errorKeys = useMemo(() => new Set(formex.submitCount > 0 ? Object.keys(formex.errors) : []), [formex.errors, formex.submitCount]);
+	const autoFocusKey = useMemo(() => {
+		if (status !== "new" && status !== "copy") return void 0;
+		return [...layout.sections.flatMap((s) => s.fields), ...layout.sidebar].find((field) => {
+			const property = collection.properties?.[field.key];
+			return property ? !isFieldDisabled(property) : false;
+		})?.key;
+	}, [
+		layout,
+		collection,
+		status,
+		disabledProp
+	]);
+	function isFieldDisabled(property) {
+		const isNew = status === "new" || status === "copy";
+		const isIdAndAuto = (property.type === "string" || property.type === "number") && "isId" in property && typeof property.isId === "string" && property.isId !== "manual";
+		return Boolean(disabledProp || !autoSave && formex.isSubmitting || isReadOnly(property) || Boolean(property.admin?.disabled) || !isNew && "isId" in property && Boolean(property.isId) || isNew && isIdAndAuto);
+	}
+	const renderField = (field) => {
+		if (field.additional) {
+			const additionalField = collection.additionalFields?.find((f) => f.key === field.key);
+			if (!additionalField || !entity) return null;
+			const AdditionalFieldBuilder = additionalField.Builder;
+			if (!AdditionalFieldBuilder && !additionalField.value) throw new Error("When using additional fields you need to provide a Builder or a value");
+			const additionalFieldContext = formContext;
+			const child = AdditionalFieldBuilder ? /* @__PURE__ */ jsx(AdditionalFieldBuilder, {
+				entity,
+				context: additionalFieldContext
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "w-full",
+				children: additionalField.value?.({
+					entity,
+					context: additionalFieldContext
+				})?.toString()
+			});
+			return /* @__PURE__ */ jsxs("div", {
+				className: spanClass(field.span),
+				children: [/* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
+					propertyKey: field.key,
+					icon: /* @__PURE__ */ jsx(AlignLeftIcon, { size: iconSize.small }),
+					title: additionalField.name,
+					className: "text-text-secondary dark:text-text-secondary-dark"
+				}), /* @__PURE__ */ jsx("div", {
+					className: cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-auto no-scrollbar"),
+					children: /* @__PURE__ */ jsx(ErrorBoundary, { children: child })
+				})]
+			}, `additional_${field.key}`);
+		}
+		const property = collection.properties?.[field.key];
+		if (!property) {
+			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 disabled = isFieldDisabled(property);
+		const selfLabelling = isSelfLabellingProperty(property);
+		const cmsFormFieldProps = {
+			propertyKey: field.key,
+			disabled,
+			property,
+			includeDescription: false,
+			hideLabel: !selfLabelling,
+			underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
+			context: formContext,
+			partOfArray: false,
+			minimalistView: false,
+			size: "large",
+			autoFocus: autoFocusKey === field.key
+		};
+		return /* @__PURE__ */ jsx("div", {
+			className: spanClass(field.span),
+			children: /* @__PURE__ */ jsx(FieldBlock, {
+				propertyKey: field.key,
+				property,
+				showLabel: !selfLabelling,
+				children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...cmsFormFieldProps })
+			})
+		}, `field_${field.key}`);
+	};
 	const formFields = () => {
 		if (Builder) return /* @__PURE__ */ jsx(Builder, {
 			collection,
@@ -19786,99 +20831,29 @@ function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified
 			modifiedValues: formex.values,
 			formContext
 		});
-		const isNewEntity = status === "new" || status === "copy";
-		let firstFocusableIndex = -1;
-		return /* @__PURE__ */ jsx(FormLayout, { children: formFieldKeys.map((key) => {
-			const property = collection.properties?.[key];
-			if (property) {
-				const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key) && formex.touched[key];
-				const isNew = status === "new" || status === "copy";
-				const isIdAndAuto = (property.type === "string" || property.type === "number") && "isId" in property && typeof property.isId === "string" && property.isId !== "manual";
-				const disabled = disabledProp || !autoSave && formex.isSubmitting || isReadOnly(property) || Boolean(property.admin?.disabled) || !isNew && "isId" in property && Boolean(property.isId) || isNew && isIdAndAuto;
-				if (isHidden(property)) return null;
-				const widthPercentage = property.admin?.widthPercentage ?? 100;
-				const shouldAutoFocus = isNewEntity && !disabled && firstFocusableIndex === -1;
-				if (shouldAutoFocus) firstFocusableIndex = 0;
-				return /* @__PURE__ */ jsx(FormEntry, {
-					propertyKey: key,
-					widthPercentage,
-					children: /* @__PURE__ */ jsx(PropertyFieldBinding, {
-						propertyKey: key,
-						disabled,
-						property,
-						includeDescription: Boolean(property.description),
-						underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
-						context: formContext,
-						partOfArray: false,
-						minimalistView: false,
-						autoFocus: shouldAutoFocus
-					})
-				}, `field_${key}`);
-			}
-			const additionalField = collection.additionalFields?.find((f) => f.key === key);
-			if (additionalField && entity) {
-				const AdditionalFieldBuilder = additionalField.Builder;
-				if (!AdditionalFieldBuilder && !additionalField.value) throw new Error("When using additional fields you need to provide a Builder or a value");
-				const additionalFieldContext = formContext;
-				const child = AdditionalFieldBuilder ? /* @__PURE__ */ jsx(AdditionalFieldBuilder, {
-					entity,
-					context: additionalFieldContext
-				}) : /* @__PURE__ */ jsx("div", {
-					className: "w-full",
-					children: additionalField.value?.({
-						entity,
-						context: additionalFieldContext
-					})?.toString()
-				});
-				return /* @__PURE__ */ jsxs("div", {
-					className: "w-full",
-					children: [/* @__PURE__ */ jsx(LabelWithIconAndTooltip, {
-						propertyKey: key,
-						icon: /* @__PURE__ */ jsx(AlignLeftIcon, { size: iconSize.small }),
-						title: additionalField.name,
-						className: "text-text-secondary dark:text-text-secondary-dark ml-3.5"
-					}), /* @__PURE__ */ jsx("div", {
-						className: cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar"),
-						children: /* @__PURE__ */ jsx(ErrorBoundary, { children: child })
-					})]
-				}, `additional_${key}`);
-			}
-			console.warn(`Property ${key} not found in collection ${collection.name} in properties or additional fields. Skipping.`);
-			return null;
-		}).filter(Boolean) });
+		return /* @__PURE__ */ jsx(FormSections, {
+			sections: showRail || !layout.sidebar.length ? layout.sections : [...layout.sections, {
+				key: "__rail",
+				title: "Settings",
+				collapsible: false,
+				collapsed: false,
+				fields: layout.sidebar
+			}],
+			collapsed: collapsedSections,
+			onToggle: toggleSection,
+			errorKeys,
+			renderField
+		});
 	};
 	const formRef = useRef(null);
 	const hasFormErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
 	const formView = /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
 		beforeFields,
-		!Builder && /* @__PURE__ */ jsxs("div", {
-			className: "w-full flex flex-col items-start my-4 lg:my-6",
-			children: [
-				/* @__PURE__ */ jsx(Typography, {
-					className: "my-4 grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-6" : ""),
-					variant: "h4",
-					children: title ?? collection.singularName ?? collection.name
-				}),
-				!entity?.values && initialStatus === "existing" && /* @__PURE__ */ jsx(Alert, {
-					color: "warning",
-					size: "small",
-					outerClassName: "w-full mb-4 text-xs",
-					children: "This entity does not exist yet"
-				}),
-				showEntityPath && /* @__PURE__ */ jsx(Alert, {
-					color: "base",
-					outerClassName: "w-full",
-					size: "small",
-					children: /* @__PURE__ */ jsxs("code", {
-						className: "text-xs select-all text-text-secondary dark:text-text-secondary-dark",
-						children: [
-							entity?.path ?? path,
-							"/",
-							entityId
-						]
-					})
-				})
-			]
+		!entity?.values && initialStatus === "existing" && /* @__PURE__ */ jsx(Alert, {
+			color: "warning",
+			size: "small",
+			outerClassName: "w-full mb-4 text-xs",
+			children: "This entity does not exist yet"
 		}),
 		children,
 		initialEntityId && !entity && initialStatus !== "new" && /* @__PURE__ */ jsx(Alert, {
@@ -19893,12 +20868,10 @@ function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified
 			children: "Please fix the highlighted errors before saving."
 		}),
 		formContext && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
-			className: "mt-12 flex flex-col gap-8",
 			ref: formRef,
 			children: [formFields(), /* @__PURE__ */ jsx(ErrorFocus, { containerRef: formRef })]
 		}) }),
 		afterFields,
-		forceActionsAtTheBottom && /* @__PURE__ */ jsx("div", { className: "h-16" }),
 		/* @__PURE__ */ jsxs(Dialog, {
 			open: discardDialogOpen,
 			onOpenChange: setDiscardDialogOpen,
@@ -19930,7 +20903,6 @@ function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified
 		collection,
 		path,
 		entity,
-		layout: forceActionsAtTheBottom ? "bottom" : "responsive",
 		savingError,
 		formex,
 		disabled: actionsDisabled,
@@ -19944,6 +20916,7 @@ function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified
 	return /* @__PURE__ */ jsx(Formex, {
 		value: formex,
 		children: /* @__PURE__ */ jsxs("form", {
+			ref: formElementRef,
 			onSubmit: formex.handleSubmit,
 			onReset: (e) => {
 				e.preventDefault();
@@ -19951,56 +20924,56 @@ function EntityForm({ path, entityId: entityIdProp, collection, onValuesModified
 				else formex.resetForm({ values: baseInitialValues });
 			},
 			noValidate: true,
-			className: cls("@container flex-1 flex flex-row w-full overflow-y-auto justify-center", className),
-			children: [/* @__PURE__ */ jsx("div", {
-				id: `form_${path}`,
-				className: cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit"),
-				children: /* @__PURE__ */ jsxs("div", {
-					className: cls("flex flex-col w-full", openEntityMode === "dialog" ? "pt-4 pb-12 px-6 sm:px-8" : "pt-12 pb-16 px-4 sm:px-8 md:px-10"),
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex flex-row gap-4 justify-end h-0 overflow-visible sticky top-4 z-10",
-						children: [manualApplyLocalChanges && hasLocalChanges && localChangesCacheKey && /* @__PURE__ */ jsx(LocalChangesMenu, {
-							cacheKey: localChangesCacheKey,
-							properties: collection.properties,
-							cachedData: localChangesData,
-							formex,
-							onClearLocalChanges: () => {
-								setLocalChangesCleared(true);
-								onClearLocalChanges?.();
-							}
-						}), isSavingAutoSave ? /* @__PURE__ */ jsx(Tooltip, {
-							title: "Saving…",
-							children: /* @__PURE__ */ jsx(Chip, {
-								size: "small",
-								className: "py-1",
-								colorScheme: "blueDarker",
-								children: /* @__PURE__ */ jsx(LoaderIcon, {
-									size: iconSize.smallest,
-									className: "animate-spin"
-								})
-							})
-						}) : formex.dirty ? /* @__PURE__ */ jsx(Tooltip, {
-							title: "Form has been modified",
-							children: /* @__PURE__ */ jsx(Chip, {
-								size: "small",
-								className: "py-1",
-								colorScheme: "orangeDarker",
-								children: /* @__PURE__ */ jsx(PencilIcon, { size: iconSize.smallest })
-							})
-						}) : /* @__PURE__ */ jsx(Tooltip, {
-							title: "Form is in sync",
-							children: /* @__PURE__ */ jsx(Chip, {
-								size: "small",
-								className: "py-1",
-								children: /* @__PURE__ */ jsx(CheckIcon, { size: iconSize.smallest })
+			className: cls("@container/form flex-1 flex flex-col w-full min-h-0", className),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-h-0 flex flex-row w-full",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1 min-w-0 overflow-y-auto flex justify-center items-start",
+					children: /* @__PURE__ */ jsxs("div", {
+						id: `form_${path}`,
+						className: cls("@container/col w-full max-w-3xl 2xl:max-w-4xl flex flex-col", openEntityMode === "dialog" ? "pt-5 pb-8 px-6 sm:px-8" : "pt-6 pb-12 px-5 sm:px-8"),
+						children: [manualApplyLocalChanges && hasLocalChanges && localChangesCacheKey && /* @__PURE__ */ jsx("div", {
+							className: "flex justify-end mb-3",
+							children: /* @__PURE__ */ jsx(LocalChangesMenu, {
+								cacheKey: localChangesCacheKey,
+								properties: collection.properties,
+								cachedData: localChangesData,
+								formex,
+								onClearLocalChanges: () => {
+									setLocalChangesCleared(true);
+									onClearLocalChanges?.();
+								}
 							})
-						})]
-					}), formView]
-				})
+						}), formView]
+					})
+				}), showRail && /* @__PURE__ */ jsx(FormRail, {
+					fields: layout.sidebar,
+					showRecordMeta: layout.showRecordMeta && status === "existing",
+					entity,
+					renderField
+				})]
 			}), dialogActions]
 		})
 	});
 }
+/**
+* Grid placement for a span.
+*
+* Written out as literal class strings rather than composed, because Tailwind
+* scans source text: a template literal would produce classes that exist at
+* runtime and were never generated into the stylesheet.
+*
+* Below the column breakpoint every field takes the single available column, so
+* the side panel, the dialog and mobile all get a plain stack.
+*/
+function spanClass(span) {
+	switch (span) {
+		case 1: return "@2xl/col:col-span-1";
+		case 2: return "@2xl/col:col-span-2";
+		case 3: return "@2xl/col:col-span-3";
+		case 4: return "@2xl/col:col-span-4";
+	}
+}
 function useOnAutoSave(autoSave, formex, lastSavedValues, save) {
 	useEffect(() => {
 		if (!autoSave) return;
@@ -20219,7 +21192,6 @@ function EntityFormBinding({ path, entityId: entityIdProp, collection, entity, i
 		context,
 		openEntityMode
 	]);
-	const pluginFormActions = useSlot("form.actions", formActionProps);
 	const pluginFormBefore = useSlot("form.before", formActionProps);
 	const pluginFormAfter = useSlot("form.after", formActionProps);
 	return /* @__PURE__ */ jsx(EntityForm, {
@@ -20242,7 +21214,7 @@ function EntityFormBinding({ path, entityId: entityIdProp, collection, entity, i
 		uniqueFieldValidator,
 		beforeFields: pluginFormBefore,
 		afterFields: pluginFormAfter,
-		pluginActions: pluginFormActions ?? [],
+		pluginActions: [],
 		computedInitialValues,
 		hasLocalChanges,
 		localChangesData,
@@ -20270,6 +21242,30 @@ var useCollectionsConfigController = () => useContext(ConfigControllerContext);
 * @module
 */
 /**
+* Rebuild a serialized relation's `target` slug into the thunk consumers call.
+*
+* Shared by the relation *property* and the collection-level `relations` array.
+* They are the same shape on the wire and they need the same treatment coming
+* back, but only the property path had it — so a collection imported from an
+* existing table came off disk with `relations[n].target` still a string, which
+* typechecks (the serializable shape erases the difference) and throws "target
+* is not a function" at the first consumer.
+*
+* The lookup is consulted lazily, inside the thunk, so collections may
+* reference each other in any order, including circularly.
+*/
+function fromSerializableRelation(relation, label, lookup) {
+	const slug = relation.target;
+	return {
+		...relation,
+		target: () => {
+			const found = slug ? lookup?.(slug) : void 0;
+			if (!found) throw new Error(`Relation "${relation.relationName ?? label}" targets collection "${slug ?? "(none)"}", which is not among the collections it was deserialized with. Pass the whole set to \`fromSerializableCollectionConfigs\` so slugs can be resolved against each other.`);
+			return found;
+		}
+	};
+}
+/**
 * Strip non-serializable fields from a `AdminPropertyOptions`.
 * Removes `Field` and `Preview` (ComponentRef).
 */
@@ -20365,7 +21361,8 @@ function toSerializableRelation(link) {
 		case "hasMany": return {
 			kind: link.kind,
 			...common,
-			...link.foreignKeyOnTarget ? { foreignKeyOnTarget: link.foreignKeyOnTarget } : {}
+			...link.foreignKeyOnTarget ? { foreignKeyOnTarget: link.foreignKeyOnTarget } : {},
+			...link.sourceKey ? { sourceKey: link.sourceKey } : {}
 		};
 		case "manyToMany": return {
 			kind: "manyToMany",
@@ -20676,17 +21673,7 @@ function fromSerializableProperty(serialized, lookup) {
 				...rest,
 				type: "relation"
 			};
-			if (relation) {
-				const slug = relation.target;
-				result.relation = {
-					...relation,
-					target: () => {
-						const found = slug ? lookup?.(slug) : void 0;
-						if (!found) throw new Error(`Relation "${relation.relationName ?? sp.name}" targets collection "${slug ?? "(none)"}", which is not among the collections it was deserialized with. Pass the whole set to \`fromSerializableCollectionConfigs\` so slugs can be resolved against each other.`);
-						return found;
-					}
-				};
-			}
+			if (relation) result.relation = fromSerializableRelation(relation, sp.name ?? "", lookup);
 			return result;
 		}
 		default: return serialized;
@@ -20708,9 +21695,10 @@ function fromSerializableProperties(serialized, lookup) {
 * consumer if needed.
 */
 function fromSerializableCollectionConfig(serialized, lookup) {
-	const { properties, ...rest } = serialized;
+	const { properties, relations, ...rest } = serialized;
 	return {
 		...rest,
+		...relations ? { relations: relations.map((relation, index) => fromSerializableRelation(relation, `relations[${index}]`, lookup)) } : {},
 		properties: fromSerializableProperties(properties, lookup)
 	};
 }
@@ -20814,14 +21802,15 @@ function validateProperty(property, path, errors) {
 			});
 			const allowedByKind = {
 				belongsTo: ["localKey"],
-				hasOne: ["foreignKeyOnTarget"],
-				hasMany: ["foreignKeyOnTarget"],
+				hasOne: ["foreignKeyOnTarget", "sourceKey"],
+				hasMany: ["foreignKeyOnTarget", "sourceKey"],
 				manyToMany: ["through"],
 				via: ["joinPath", "cardinality"]
 			};
 			const linkFields = [
 				"localKey",
 				"foreignKeyOnTarget",
+				"sourceKey",
 				"through",
 				"joinPath",
 				"cardinality"
@@ -21098,6 +22087,6 @@ function getFullIdPath(propertyKey, propertyNamespace) {
 	return idToPropertiesPath(propertyNamespace ? `${propertyNamespace}.${propertyKey}` : propertyKey);
 }
 //#endregion
-export { useBuildCollectionRegistryController as $, StorageThumbnailInternal as $n, CollectionTableBinding as $t, getFieldId as A, ArrayOfReferencesPreview as An, convertFileToJson as At, MapFieldBinding as B, getBracketNotation as Bn, getCollectionBySlugWithin as Bt, removeEmptyContainers as C, MapPropertyPreview as Cn, convertDataToEntity as Ct, getDefaultFieldConfig as D, ArrayEnumPreview as Dn, useImportConfig as Dt, DEFAULT_FIELD_CONFIGS as E, ArrayPropertyEnumPreview as En, getInferenceType as Et, SelectFieldBinding as F, CollectionRegistryContext as Fn, FieldCaption as Ft, useSelectionDialog as G, getPropertyInPath as Gn, removeTrailingSlash$1 as Gt, DateTimeFieldBinding as H, getIconForProperty as Hn, getLastSegment$1 as Ht, RepeatFieldBinding as I, useCollectionRegistryController as In, useBreadcrumbsController as It, useBuildUrlController as J, isRelationProperty as Jn, resolveViewMode as Jt, SelectionTableBinding as K, getResolvedPropertyInPath as Kn, resolveCollectionPathIds$1 as Kt, ReferenceFieldBinding as L, getEntityPreviewKeys as Ln, BreadcrumbsProvider as Lt, TextFieldBinding as M, EntityPreviewBinding as Mn, ArrayContainer as Mt, SwitchFieldBinding as N, SidePanelControllerContext as Nn, PropertyConfigBadge as Nt, getDefaultFieldId as O, ArrayOfStorageComponentsPreview as On, ImportSaveInProgress as Ot, StorageUploadFieldBinding as P, useSidePanel as Pn, SearchIconsView as Pt, useResolvedCollections as Q, StorageThumbnail as Qn, VirtualTableInput$1 as Qt, MultiSelectFieldBinding as R, getEntityTitlePropertyKey as Rn, mergeEntityActions as Rt, getInitialEntityValues as S, KeyValuePreview as Sn, DataNewPropertiesMapping as St, PropertyFieldBinding as T, ArrayOfStringsPreview as Tn, processValueMapping as Tt, BlockFieldBinding as U, getIconForWidget as Un, removeInitialAndTrailingSlashes$1 as Ut, KeyValueFieldBinding as V, getDefaultPropertiesOrder as Vn, getCollectionPathsCombinations as Vt, ArrayOfReferencesFieldBinding as W, getPropertiesWithPropertiesOrder as Wn, removeInitialSlash as Wt, useTopLevelNavigation as X, StringPropertyPreview as Xn, resolveEntityView as Xt, useBuildNavigationStateController as Y, ArrayPropertyPreview as Yn, resolveEntityAction as Yt, useResolvedViews as Z, EnumValuesChip as Zn, useSelectionController as Zt, useCollectionsConfigController as _, getUserLabel as _n, CollectionViewActions as _t, namespaceToPropertiesPath as a, NavigationStateContext as an, UrlComponentPreview as ar, useBuildSidePanel as at, extractTouchedValues as b, BooleanPreview as bn, useCollectionEditorDialogsState as bt, buildCollectionGenerationCallback as c, SideDialogsControllerContext as cn, EmptyValue as cr, copyEntityAction as ct, fromSerializableCollectionConfigs as d, useClearRestoreValue as dn, LabelWithIcon as dr, resetPasswordAction as dt, SelectableTable as en, SkeletonPropertyComponent as er, useHistory as et, fromSerializableProperties as f, ReadOnlyFieldBinding as fn, FormLayout as fr, CreationResultDialog as ft, toSerializableProperty as g, UserPreview as gn, EntityCardBinding as gt, toSerializableProperties as h, PropertyPreview as hn, CollectionCardViewBinding as ht, namespaceToPropertiesOrderPath as i, useUrlController as in, renderSkeletonText as ir, getEntityViewWidth as it, VectorFieldBinding as j, ReferencePreview as jn, unflattenObject as jt, getFieldConfig as k, RelationPreview as kn, ImportFileUpload as kt, validateCollectionJson as l, SelectableTableContext as ln, LabelWithIconAndTooltip as lr, deleteEntityAction as lt, toSerializableCollectionConfig as m, ArrayOfMapsPreview as mn, EntityViewBinding as mt, getFullIdPath as n, useAdminContext as nn, renderSkeletonIcon as nr, useResolvedNavigationFrom as nt, CollectionGenerationApiError as o, useNavigationStateController as on, ImagePreview as or, EditViewBinding as ot, fromSerializableProperty as p, FieldHelperText as pn, FormEntry as pr, DetailViewBinding as pt, SideDialogs as q, isReferenceProperty as qn, resolveOpenEntityMode as qt, idToPropertiesPath as r, UrlContext as rn, renderSkeletonImageThumbnail as rr, buildSidePanelsFromUrl as rt, DEFAULT_COLLECTION_GENERATION_ENDPOINT as s, useSideDialogsController as sn, sanitizeUrl as sr, CollectionViewBinding as st, getFullId as t, CollectionRowActions as tn, renderSkeletonCaptionText as tr, resolveNavigationFrom as tt, fromSerializableCollectionConfig as u, ArrayCustomShapedFieldBinding as un, PropertyIdCopyTooltip as ur, editEntityAction as ut, EntityFormBinding as v, useResolvedUser as vn, useCollectionEditorController as vt, zodToFormErrors as w, ArrayOneOfPreview as wn, flattenEntry as wt, getChanges as x, DatePreview as xn, ImportNewPropertyFieldPreview as xt, EntityForm as y, NumberPropertyPreview as yn, ConfigControllerProvider as yt, MarkdownEditorFieldBinding as z, getEntityTitlePropertyKeyForEntity as zn, addInitialSlash as zt };
+export { useBuildCollectionRegistryController as $, sanitizeUrl as $n, CollectionTableBinding as $t, getFieldId as A, ArrayOfReferencesPreview as An, convertFileToJson as At, MapFieldBinding as B, getEntityTitlePropertyKeyForEntity as Bn, mergeEntityActions as Bt, removeEmptyContainers as C, MapPropertyPreview as Cn, convertDataToEntity as Ct, getDefaultFieldConfig as D, ArrayEnumPreview as Dn, useImportConfig as Dt, DEFAULT_FIELD_CONFIGS as E, ArrayPropertyEnumPreview as En, getInferenceType as Et, SelectFieldBinding as F, useSidePanel as Fn, FieldCaption as Ft, useSelectionDialog as G, StorageThumbnailInternal as Gn, removeInitialAndTrailingSlashes$1 as Gt, DateTimeFieldBinding as H, StringPropertyPreview as Hn, getCollectionBySlugWithin as Ht, RepeatFieldBinding as I, CollectionRegistryContext as In, useBreadcrumbsController as It, useBuildUrlController as J, renderSkeletonIcon as Jn, resolveCollectionPathIds$1 as Jt, SelectionTableBinding as K, SkeletonPropertyComponent as Kn, removeInitialSlash as Kt, ReferenceFieldBinding as L, useCollectionRegistryController as Ln, BreadcrumbsProvider as Lt, TextFieldBinding as M, ReferencePreview as Mn, ArrayContainer as Mt, SwitchFieldBinding as N, EntityPreviewBinding as Nn, PropertyConfigBadge as Nt, getDefaultFieldId as O, ArrayOfStorageComponentsPreview as On, ImportSaveInProgress as Ot, StorageUploadFieldBinding as P, SidePanelControllerContext as Pn, SearchIconsView as Pt, useResolvedCollections as Q, ImagePreview as Qn, VirtualTableInput$1 as Qt, MultiSelectFieldBinding as R, getEntityPreviewKeys as Rn, resolveEntityAction as Rt, getInitialEntityValues as S, KeyValuePreview as Sn, DataNewPropertiesMapping as St, PropertyFieldBinding as T, ArrayOfStringsPreview as Tn, processValueMapping as Tt, BlockFieldBinding as U, EnumValuesChip as Un, getCollectionPathsCombinations as Ut, KeyValueFieldBinding as V, ArrayPropertyPreview as Vn, addInitialSlash as Vt, ArrayOfReferencesFieldBinding as W, StorageThumbnail as Wn, getLastSegment$1 as Wt, useTopLevelNavigation as X, renderSkeletonText as Xn, resolveViewMode as Xt, useBuildNavigationStateController as Y, renderSkeletonImageThumbnail as Yn, resolveOpenEntityMode as Yt, useResolvedViews as Z, UrlComponentPreview as Zn, useSelectionController as Zt, useCollectionsConfigController as _, getUserLabel as _n, CollectionViewActions as _t, namespaceToPropertiesPath as a, NavigationStateContext as an, FieldBlock as ar, useBuildSidePanel as at, extractTouchedValues as b, BooleanPreview as bn, useCollectionEditorDialogsState as bt, buildCollectionGenerationCallback as c, SideDialogsControllerContext as cn, getBracketNotation as cr, copyEntityAction as ct, fromSerializableCollectionConfigs as d, useClearRestoreValue as dn, getIconForWidget as dr, resetPasswordAction as dt, SelectableTable as en, EmptyValue as er, useHistory as et, fromSerializableProperties as f, ReadOnlyFieldBinding as fn, getPropertiesWithPropertiesOrder as fr, CreationResultDialog as ft, toSerializableProperty as g, UserPreview as gn, isRelationProperty as gr, EntityCardBinding as gt, toSerializableProperties as h, PropertyPreview as hn, isReferenceProperty as hr, CollectionCardViewBinding as ht, namespaceToPropertiesOrderPath as i, useUrlController as in, FormRail as ir, getEntityViewWidth as it, VectorFieldBinding as j, InlineEntityListPreview as jn, unflattenObject as jt, getFieldConfig as k, RelationPreview as kn, ImportFileUpload as kt, validateCollectionJson as l, SelectableTableContext as ln, getDefaultPropertiesOrder as lr, deleteEntityAction as lt, toSerializableCollectionConfig as m, ArrayOfMapsPreview as mn, getResolvedPropertyInPath as mr, EntityViewBinding as mt, getFullIdPath as n, useAdminContext as nn, LabelWithIcon as nr, useResolvedNavigationFrom as nt, CollectionGenerationApiError as o, useNavigationStateController as on, isSelfLabellingProperty as or, EditViewBinding as ot, fromSerializableProperty as p, FieldHelperText as pn, getPropertyInPath as pr, DetailViewBinding as pt, SideDialogs as q, renderSkeletonCaptionText as qn, removeTrailingSlash$1 as qt, idToPropertiesPath as r, UrlContext as rn, FormSections as rr, buildSidePanelsFromUrl as rt, DEFAULT_COLLECTION_GENERATION_ENDPOINT as s, useSideDialogsController as sn, PropertyIdCopyTooltip as sr, CollectionViewBinding as st, getFullId as t, CollectionRowActions as tn, LabelWithIconAndTooltip as tr, resolveNavigationFrom as tt, fromSerializableCollectionConfig as u, ArrayCustomShapedFieldBinding as un, getIconForProperty as ur, editEntityAction as ut, EntityFormBinding as v, useResolvedUser as vn, useCollectionEditorController as vt, zodToFormErrors as w, ArrayOneOfPreview as wn, flattenEntry as wt, getChanges as x, DatePreview as xn, ImportNewPropertyFieldPreview as xt, EntityForm as y, NumberPropertyPreview as yn, ConfigControllerProvider as yt, MarkdownEditorFieldBinding as z, getEntityTitlePropertyKey as zn, resolveEntityView as zt };
 
-//# sourceMappingURL=util-B5fJm1FA.js.map
+//# sourceMappingURL=util-GiwPgxnL.js.map