@rebasepro/admin 0.12.1-canary.gf5f1d39 → 0.13.0

package/src/components/history/LastEditedByIndicator.tsx

@@ -1,7 +1,7 @@
 
 import React, { useEffect, useState, useCallback } from "react";
 ;
-import { useApiConfig } from "@rebasepro/app";
+import { useApiBase, useApiConfig } from "@rebasepro/app";
 import { useAuthController } from "@rebasepro/app";
 import { HistoryEntryData } from "../../hooks";
 import type { AdminCollection } from "@rebasepro/admin-types";
@@ -35,6 +35,7 @@ export function LastEditedByIndicator({
     collection: AdminCollection;
 }) {
     const apiConfig = useApiConfig();
+    const apiBase = useApiBase();
     const authController = useAuthController();
     const [latestEntry, setLatestEntry] = useState<HistoryEntryData | undefined>();
 
@@ -46,7 +47,7 @@ export function LastEditedByIndicator({
             const headers: Record<string, string> = {};
             if (token) headers["Authorization"] = `Bearer ${token}`;
 
-            const url = `${apiConfig.apiUrl}/api/data/${collection.slug}/${entityId}/history?limit=1&offset=0`;
+            const url = `${apiBase}/data/${collection.slug}/${entityId}/history?limit=1&offset=0`;
             const response = await fetch(url, { headers });
 
             if (response.ok) {
@@ -59,7 +60,7 @@ export function LastEditedByIndicator({
             // Silently fail — this is a non-critical UI indicator
             console.debug("Failed to fetch latest history entry:", error);
         }
-    }, [apiConfig, entityId, collection.slug]);
+    }, [apiConfig, apiBase, entityId, collection.slug]);
 
     useEffect(() => {
         fetchLatest();

package/src/components/index.ts

@@ -25,6 +25,8 @@ export * from "./ReferenceWidget";
 export * from "./SearchIconsView";
 export * from "./FieldCaption";
 export * from "./EntityPreviewBinding";
+export * from "./EntityPreviewNesting";
+export * from "./InlineEntityPreview";
 
 // history is lazy-loaded by EditViewBinding and resolutions.ts
 // export * from "./history";

package/src/data_import/utils/get_import_inference_type.ts

@@ -1,6 +1,12 @@
 import { DataType } from "@rebasepro/types";
 
 export function getInferenceType(value: any): DataType {
+    // `typeof null === "object"`, so a null or empty CSV cell used to fall past
+    // every check and land on "map" — an empty cell described as a nested object.
+    // `inferTypeFromValue` in @rebasepro/inference already answers "string" here;
+    // the two entry points into inference have to agree.
+    if (value === null || value === undefined)
+        return "string";
     if (typeof value === "number")
         return "number";
     else if (typeof value === "string")

package/src/form/EntityForm.tsx

@@ -1,24 +1,25 @@
 
-import type { EntityCustomViewParams, AdditionalFieldDelegateProps, AdminCollection } from "@rebasepro/admin-types";
+import type { AdditionalFieldDelegateProps } from "@rebasepro/admin-types";
 import type { FormContext, PropertyFieldBindingProps } from "../types/fields";
-import type { PropertyConfig } from "@rebasepro/admin-types";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Entity, EntityStatus, EntityValues } from "@rebasepro/types";
-import type { EntityFormProps, OnUpdateParams } from "../types/components/EntityFormProps";
+import type { EntityFormProps } from "../types/components/EntityFormProps";
 import { deepEqual as equal } from "fast-equals";
 
 import { ErrorBoundary } from "@rebasepro/ui";
-import { AlignLeftIcon, CheckIcon, LoaderIcon, PencilIcon, useDebouncedCallback } from "@rebasepro/ui";
+import { AlignLeftIcon, useDebouncedCallback } from "@rebasepro/ui";
 import { getDefaultValuesFor } from "@rebasepro/common";
-import { isHidden, isReadOnly } from "@rebasepro/app";
+import { isReadOnly } from "@rebasepro/app";
 
-import { useCustomizationController } from "@rebasepro/app";
-import { getFormFieldKeys } from "@rebasepro/app";
-import { Alert, Button, Chip, cls, Dialog, DialogActions, DialogContent, DialogTitle, iconSize, paperMixin, Tooltip, Typography } from "@rebasepro/ui";
+import { getFormFieldKeys, resolveFormLayout } from "@rebasepro/app";
+import type { ResolvedFormField } from "@rebasepro/app";
+import { Alert, Button, cls, Dialog, DialogActions, DialogContent, DialogTitle, iconSize, paperMixin, Typography } from "@rebasepro/ui";
 import { Formex, FormexController, useCreateFormex } from "@rebasepro/forms";
 
-import { FormEntry } from "./components/FormEntry";
-import { FormLayout } from "./components/FormLayout";
+import { FieldBlock, isSelfLabellingProperty } from "./components/FieldBlock";
+import { FormRail } from "./components/FormRail";
+import { FormSections } from "./components/FormSections";
+import { useRailVisible } from "./components/useRailVisible";
 import { LabelWithIconAndTooltip } from "./components/LabelWithIconAndTooltip";
 import { PropertyFieldBinding } from "./PropertyFieldBinding";
 import { flattenKeys } from "@rebasepro/app";
@@ -28,9 +29,7 @@ import { EntityFormActions } from "./EntityFormActions";
 import type { EntityFormActionsProps } from "../types/components/EntityFormActionsProps";
 import { LocalChangesMenu } from "./components/LocalChangesMenu";
 
-import { getEntityTitlePropertyKeyForEntity, isUserSelectProperty, resolveTitleToString } from "../util/previews";
-import { getUserLabel, useResolvedUser } from "../hooks/useResolvedUsers";
-import { getValueInPath, mergeDeep } from "@rebasepro/utils";
+import { mergeDeep } from "@rebasepro/utils";
 import {
     getChanges,
     zodToFormErrors
@@ -55,7 +54,6 @@ export function EntityForm<M extends Record<string, unknown>>({
     entity,
     initialDirtyValues,
     onFormContextReady,
-    forceActionsAtTheBottom,
     initialStatus,
     className,
     onStatusChange,
@@ -66,7 +64,6 @@ export function EntityForm<M extends Record<string, unknown>>({
     Builder,
     EntityFormActionsComponent = EntityFormActions,
     showDefaultActions = true,
-    showEntityPath = true,
     navigateBack: navigateBackProp,
     children,
     // Headless callback props
@@ -87,8 +84,6 @@ export function EntityForm<M extends Record<string, unknown>>({
     onClearLocalChanges
 }: EntityFormProps<M>) {
 
-    const customizationController = useCustomizationController();
-
     const navigateBack = useCallback(() => {
         if (navigateBackProp) {
             navigateBackProp();
@@ -122,7 +117,6 @@ export function EntityForm<M extends Record<string, unknown>>({
     }, [entityIdProp, status]);
 
     const [entityId, setEntityId] = useState<string | number | undefined>(initialEntityId);
-    const [entityIdError, setEntityIdError] = useState<boolean>(false);
     const [savingError, setSavingError] = useState<Error | undefined>();
     const [isSavingAutoSave, setIsSavingAutoSave] = useState<boolean>(false);
     const [discardDialogOpen, setDiscardDialogOpen] = useState<boolean>(false);
@@ -151,7 +145,6 @@ export function EntityForm<M extends Record<string, unknown>>({
     const onSubmit = (values: EntityValues<M>, formexController: FormexController<EntityValues<M>>) => {
 
         setSavingError(undefined);
-        setEntityIdError(false);
 
         if (status === "existing") {
             if (!entity?.id) throw Error("Form misconfiguration when saving, no id for existing entity");
@@ -307,26 +300,33 @@ export function EntityForm<M extends Record<string, unknown>>({
         savingError,
         status,
         openEntityMode,
-        disabled
+        disabled,
+        isSaving: formex.isSubmitting || isSavingAutoSave
     };
 
     useEffect(() => {
         onFormContextReady?.(formContext);
-    }, [formex.version, collection, entityId, path]);
+        // `formex.version` only moves on `resetForm`, so these deps used to hand
+        // the container one snapshot at mount and never another. That was
+        // invisible while Save lived inside the form and read `formex` directly;
+        // once the identity bar owned Save, its `dirty` was frozen false and the
+        // button never enabled — for any field, not just the one that exposed
+        // it. Custom entity views read `formContext.values` through the same
+        // channel and were reading a stale copy too.
+        //
+        // Deps are the state *transitions* a container cares about, not
+        // `formex.values`: re-publishing on every keystroke would re-render the
+        // whole entity view per character.
+    }, [
+        formex.version, collection, entityId, 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 as Record<string, unknown> | undefined, entityId);
-    const rawTitle = formex.values && titlePropertyKey ? getValueInPath(formex.values, titlePropertyKey) : undefined;
-    // A user picker stores an id: resolve it to the person, like a relation.
-    const titleUser = useResolvedUser(isUserSelectProperty(collection, titlePropertyKey) && typeof rawTitle === "string"
-        ? rawTitle
-        : undefined);
-    const title = titleUser
-        ? getUserLabel(titleUser)
-        : (rawTitle !== undefined && rawTitle !== null
-            ? resolveTitleToString(rawTitle)
-            : (collection.singularName ?? collection.name));
+    // The record's title is resolved by the container that renders the identity
+    // bar (see `useEntityDisplayTitle`), not here — the form no longer draws a
+    // heading of its own.
 
     const modified = formex.dirty;
 
@@ -370,6 +370,145 @@ export function EntityForm<M extends Record<string, unknown>>({
 
     const formFieldKeys = getFormFieldKeys(collection);
 
+    const layout = useMemo(() => resolveFormLayout({
+        collection,
+        fieldKeys: formFieldKeys,
+        status
+    }), [collection, formFieldKeys.join(","), status]);
+
+    const formElementRef = useRef<HTMLFormElement>(null);
+    // Measured, not a breakpoint: the rail holds fields the resolver moved
+    // out of the column, so when it cannot be shown they have to come back.
+    const railVisible = useRailVisible(formElementRef);
+    const showRail = !Builder && layout.hasRail && railVisible;
+
+    // Collapsed sections are per-section-key so a renamed title keeps its state,
+    // and initial state comes from the config rather than being forced open.
+    const [collapsedSections, setCollapsedSections] = useState<Set<string>>(
+        () => new Set(layout.sections.filter(s => s.collapsed).map(s => s.key))
+    );
+    const toggleSection = useCallback((key: string) => {
+        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]
+    );
+
+    // Autofocus lands on the first field the user can actually type into. Tracked
+    // across the whole layout rather than per section, so a collapsed leading
+    // group does not steal it.
+    const autoFocusKey = useMemo(() => {
+        if (status !== "new" && status !== "copy") return undefined;
+        const ordered = [...layout.sections.flatMap(s => s.fields), ...layout.sidebar];
+        return ordered.find(field => {
+            const property = collection.properties?.[field.key];
+            return property ? !isFieldDisabled(property) : false;
+        })?.key;
+    }, [layout, collection, status, disabledProp]);
+
+    function isFieldDisabled(property: NonNullable<typeof collection.properties[string]>): boolean {
+        const isNew = status === "new" || status === "copy";
+        const isStringOrNumber = property.type === "string" || property.type === "number";
+        const isIdAndAuto = isStringOrNumber && "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: ResolvedFormField): React.ReactNode => {
+
+        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 as unknown as AdditionalFieldDelegateProps["context"];
+            const child = AdditionalFieldBuilder
+                ? <AdditionalFieldBuilder entity={entity} context={additionalFieldContext}/>
+                : <div className={"w-full"}>
+                    {additionalField.value?.({
+                        entity,
+                        context: additionalFieldContext
+                    })?.toString()}
+                </div>;
+
+            return (
+                <div key={`additional_${field.key}`}
+                    className={spanClass(field.span)}>
+                    <LabelWithIconAndTooltip
+                        propertyKey={field.key}
+                        icon={<AlignLeftIcon size={iconSize.small}/>}
+                        title={additionalField.name}
+                        className={"text-text-secondary dark:text-text-secondary-dark"}/>
+                    <div className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-auto no-scrollbar")}>
+                        <ErrorBoundary>
+                            {child}
+                        </ErrorBoundary>
+                    </div>
+                </div>
+            );
+        }
+
+        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: boolean =
+            !!underlyingChanges &&
+            Object.keys(underlyingChanges).includes(field.key) &&
+            formex.touched[field.key];
+
+        const disabled = isFieldDisabled(property);
+        // The panel-style editors carry their own header; everything else is
+        // labelled by FieldBlock, which is what puts every label in one place.
+        const selfLabelling = isSelfLabellingProperty(property);
+
+        const cmsFormFieldProps: PropertyFieldBindingProps<M> = {
+            propertyKey: field.key,
+            disabled,
+            property,
+            // FieldBlock owns the description now, so the binding must not
+            // repeat it — it still renders validation errors, which belong
+            // against the control rather than under the label.
+            includeDescription: false,
+            hideLabel: !selfLabelling,
+            underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
+            context: formContext,
+            partOfArray: false,
+            minimalistView: false,
+            // One height for every control in the form. Left to their own
+            // defaults, a text field came out 48px, a select 44 and a switch 64.
+            size: "large",
+            autoFocus: autoFocusKey === field.key
+        };
+
+        return (
+            <div key={`field_${field.key}`} className={spanClass(field.span)}>
+                <FieldBlock propertyKey={field.key}
+                    property={property}
+                    showLabel={!selfLabelling}>
+                    <PropertyFieldBinding {...cmsFormFieldProps}/>
+                </FieldBlock>
+            </div>
+        );
+    };
+
     const formFields = () => {
 
         if (Builder) {
@@ -380,89 +519,30 @@ export function EntityForm<M extends Record<string, unknown>>({
                 formContext={formContext}
             />;
         }
-        const isNewEntity = status === "new" || status === "copy";
-        let firstFocusableIndex = -1;
-
-        return (
-            <FormLayout>
-                {formFieldKeys.map((key) => {
-                    const property = collection.properties?.[key];
-                    if (property) {
-
-                        const underlyingValueHasChanged: boolean =
-                            !!underlyingChanges &&
-                            Object.keys(underlyingChanges).includes(key) &&
-                            formex.touched[key];
-                        const isNew = status === "new" || status === "copy";
-                        const isStringOrNumber = property.type === "string" || property.type === "number";
-                        const isIdAndAuto = isStringOrNumber && "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);
-                        const hidden = isHidden(property);
-                        if (hidden) return null;
-                        const widthPercentage = property.admin?.widthPercentage ?? 100;
-
-                        const shouldAutoFocus = isNewEntity && !disabled && firstFocusableIndex === -1;
-                        if (shouldAutoFocus) firstFocusableIndex = 0;
-
-                        const cmsFormFieldProps: PropertyFieldBindingProps<M> = {
-                            propertyKey: key,
-                            disabled,
-                            property,
-                            includeDescription: Boolean(property.description),
-                            underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
-                            context: formContext,
-                            partOfArray: false,
-                            minimalistView: false,
-                            autoFocus: shouldAutoFocus
-                        };
-
-                        return (
-                            <FormEntry propertyKey={key}
-                                widthPercentage={widthPercentage}
-                                key={`field_${key}`}>
-                                <PropertyFieldBinding {...cmsFormFieldProps}/>
-                            </FormEntry>
-                        );
-                    }
 
-                    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 as unknown as AdditionalFieldDelegateProps['context'];
-                        const child = AdditionalFieldBuilder
-                            ? <AdditionalFieldBuilder entity={entity} context={additionalFieldContext}/>
-                            : <div className={"w-full"}>
-                                {additionalField.value?.({
-                                    entity,
-                                    context: additionalFieldContext
-                                })?.toString()}
-                            </div>;
-
-                        return (
-                            <div key={`additional_${key}`} className={"w-full"}>
-                                <LabelWithIconAndTooltip
-                                    propertyKey={key}
-                                    icon={<AlignLeftIcon size={iconSize.small}/>}
-                                    title={additionalField.name}
-                                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
-                                <div
-                                    className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
-                                    <ErrorBoundary>
-                                        {child}
-                                    </ErrorBoundary>
-                                </div>
-                            </div>
-                        );
-                    }
-
-                    console.warn(`Property ${key} not found in collection ${collection.name} in properties or additional fields. Skipping.`);
-                    return null;
-                }).filter(Boolean)}
-            </FormLayout>
-        );
+        const sections = showRail || !layout.sidebar.length
+            ? layout.sections
+            : [
+                ...layout.sections,
+                // Trailing, not leading. Beside the column these read as
+                // peripheral; stacked above it they pushed the record's own name
+                // below its status, which is the wrong thing to meet first.
+                // Settings come after the content they apply to.
+                {
+                    key: "__rail",
+                    title: "Settings",
+                    collapsible: false,
+                    collapsed: false,
+                    fields: layout.sidebar
+                }
+            ];
+
+        return <FormSections
+            sections={sections}
+            collapsed={collapsedSections}
+            onToggle={toggleSection}
+            errorKeys={errorKeys}
+            renderField={renderField}/>;
     };
 
     const formRef = useRef<HTMLDivElement>(null);
@@ -473,25 +553,15 @@ export function EntityForm<M extends Record<string, unknown>>({
         <>
             {beforeFields}
 
-            {!Builder && <div className={"w-full flex flex-col items-start my-4 lg:my-6"}>
-                <Typography
-                    className={"my-4 grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-6" : "")}
-                    variant={"h4"}>
-                    {title ?? collection.singularName ?? collection.name}
-                </Typography>
-
-                {!entity?.values && initialStatus === "existing" &&
-                    <Alert color={"warning"} size={"small"} outerClassName={"w-full mb-4 text-xs"}>
-                        This entity does not exist yet
-                    </Alert>}
-
-                {showEntityPath && <Alert color={"base"} outerClassName={"w-full"} size={"small"}>
-                    <code
-                        className={"text-xs select-all text-text-secondary dark:text-text-secondary-dark"}>
-                        {entity?.path ?? path}/{entityId}
-                    </code>
+            {/* The title, the `path/id` chip and the 72px gap under them used to
+                live here — 219px above the first field, carrying nothing, and
+                scrolling the record's identity away on the first wheel click.
+                It is now in the persistent bar, where it stays put. */}
+
+            {!entity?.values && initialStatus === "existing" &&
+                <Alert color={"warning"} size={"small"} outerClassName={"w-full mb-4 text-xs"}>
+                    This entity does not exist yet
                 </Alert>}
-            </div>}
 
             {children}
 
@@ -504,7 +574,7 @@ export function EntityForm<M extends Record<string, unknown>>({
             </Alert>}
 
             {formContext && <>
-                <div className="mt-12 flex flex-col gap-8" ref={formRef}>
+                <div ref={formRef}>
                     {formFields()}
                     <ErrorFocus containerRef={formRef}/>
                 </div>
@@ -512,8 +582,6 @@ export function EntityForm<M extends Record<string, unknown>>({
 
             {afterFields}
 
-            {forceActionsAtTheBottom && <div className="h-16"/>}
-
             <Dialog open={discardDialogOpen} onOpenChange={setDiscardDialogOpen} maxWidth={"sm"}>
                 <DialogTitle>{status === "existing" ? "Discard changes?" : "Clear form?"}</DialogTitle>
                 <DialogContent>
@@ -553,7 +621,6 @@ export function EntityForm<M extends Record<string, unknown>>({
         collection={collection}
         path={path}
         entity={entity}
-        layout={forceActionsAtTheBottom ? "bottom" : "responsive"}
         savingError={savingError}
         formex={formex as FormexController<Record<string, unknown>>}
         disabled={actionsDisabled}
@@ -568,6 +635,7 @@ export function EntityForm<M extends Record<string, unknown>>({
     return (
         <Formex value={formex}>
             <form
+                ref={formElementRef}
                 onSubmit={formex.handleSubmit}
                 onReset={(e) => {
                     e.preventDefault();
@@ -578,55 +646,56 @@ export function EntityForm<M extends Record<string, unknown>>({
                     }
                 }}
                 noValidate
-                className={cls("@container flex-1 flex flex-row w-full overflow-y-auto justify-center", className)}>
-                <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")}>
-
-                    <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"
-                    )}>
+                className={cls("@container/form flex-1 flex flex-col w-full min-h-0", className)}>
+
+                {/* The actions bar is a sibling of this row rather than absolutely
+                    positioned over it, so the scroll area ends where the bar
+                    begins. As an overlay it hid the last field, and the bottom
+                    padding that compensated was a guess at its height. */}
+                <div className={"flex-1 min-h-0 flex flex-row w-full"}>
+
+                    {/* Main column. Its own container scope, so a field's span
+                        answers to the column it sits in rather than to the window —
+                        the same form renders at four very different widths. */}
+                    {/* `items-start`: the column is a flex item, so without it the cross-axis
+                        default stretches it to the scroller's height. Its content then
+                        overflows its own box and the bottom padding sits at the bottom of
+                        the *viewport* instead of after the last field — which is why the
+                        form appeared to have no padding however large `pb-*` grew. */}
+                    <div className={"flex-1 min-w-0 overflow-y-auto flex justify-center items-start"}>
                         <div
-                            className={"flex flex-row gap-4 justify-end h-0 overflow-visible sticky top-4 z-10"}>
+                            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"
+                            )}>
 
                             {manualApplyLocalChanges && hasLocalChanges && localChangesCacheKey &&
-                                <LocalChangesMenu<M>
-                                    cacheKey={localChangesCacheKey}
-                                    properties={collection.properties}
-                                    cachedData={localChangesData as Partial<M>}
-                                    formex={formex}
-                                    onClearLocalChanges={() => {
-                                        setLocalChangesCleared(true);
-                                        onClearLocalChanges?.();
-                                    }}
-                                />}
-
-                            {isSavingAutoSave
-                                ? <Tooltip title={"Saving…"}>
-                                    <Chip size={"small"} className={"py-1"} colorScheme={"blueDarker"}>
-                                        <LoaderIcon size={iconSize.smallest} className={"animate-spin"}/>
-                                    </Chip>
-                                </Tooltip>
-                                : formex.dirty
-                                    ? <Tooltip title={"Form has been modified"}>
-                                        <Chip size={"small"} className={"py-1"} colorScheme={"orangeDarker"}>
-                                            <PencilIcon size={iconSize.smallest}/>
-                                        </Chip>
-                                    </Tooltip>
-                                    : <Tooltip title={"Form is in sync"}>
-                                        <Chip size={"small"} className={"py-1"}>
-                                            <CheckIcon size={iconSize.smallest}/>
-                                        </Chip>
-                                    </Tooltip>}
-                        </div>
-
-                        {formView}
+                                <div className={"flex justify-end mb-3"}>
+                                    <LocalChangesMenu<M>
+                                        cacheKey={localChangesCacheKey}
+                                        properties={collection.properties}
+                                        cachedData={localChangesData as Partial<M>}
+                                        formex={formex}
+                                        onClearLocalChanges={() => {
+                                            setLocalChangesCleared(true);
+                                            onClearLocalChanges?.();
+                                        }}
+                                    />
+                                </div>}
+
+                            {formView}
 
+                        </div>
                     </div>
 
+                    {showRail && <FormRail
+                        fields={layout.sidebar}
+                        showRecordMeta={layout.showRecordMeta && status === "existing"}
+                        entity={entity as Entity<Record<string, unknown>> | undefined}
+                        renderField={renderField}/>}
                 </div>
 
                 {dialogActions}
@@ -637,6 +706,25 @@ export function EntityForm<M extends Record<string, unknown>>({
     );
 }
 
+/**
+ * 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: 1 | 2 | 3 | 4): string {
+    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<M extends Record<string, unknown>>(autoSave: undefined | boolean, formex: FormexController<M>, lastSavedValues: React.MutableRefObject<EntityValues<M> | undefined>, save: (values: EntityValues<M>) => Promise<Entity<M> | void>) {
     useEffect(() => {
         if (!autoSave) return;