@rebasepro/admin 0.13.1-canary.gef9608c → 0.14.0

package/src/components/DetailViewBinding.tsx

@@ -49,7 +49,14 @@ import { useNavigate } from "react-router";
 import { useEntityDisplayTitle } from "../hooks/useEntityDisplayTitle";
 
 
-import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/view_constants";
+import {
+    MAIN_TAB_VALUE,
+    JSON_TAB_VALUE,
+    HISTORY_TAB_VALUE,
+    ENTITY_VIEW_TAB_BAR_CLASS,
+    ENTITY_VIEW_TAB_CLASS,
+    ENTITY_VIEW_TAB_LABEL_CLASS
+} from "../util/view_constants";
 
 export type BarActionsParams = {
     values: object,
@@ -76,6 +83,13 @@ export interface DetailViewBindingProps<M extends Record<string, unknown> = Reco
     parentEntityIds: string[];
     onTabChange?: (props: OnTabChangeParams<M>) => void;
     onEditClick?: () => void;
+    /**
+     * Dismiss this record — the ✕ at the identity bar's trailing edge.
+     *
+     * Set by the layouts that own the record's place on screen but are not side
+     * dialogs: the split, where dismissing is navigating back to the collection.
+     */
+    onCloseRequest?: () => void;
     layout?: "side_panel" | "full_screen" | "split" | "dialog";
     barActions?: (params: BarActionsParams) => React.ReactNode;
     /**
@@ -144,6 +158,7 @@ function DetailViewBindingInner<M extends Record<string, unknown>>({
     parentEntityIds,
     onTabChange,
     onEditClick,
+    onCloseRequest,
     entity,
     dataLoading,
     layout = "full_screen",
@@ -197,7 +212,12 @@ entityId }
         }
     }, [selectedTabProp, defaultSelectedView]);
 
-    const childViews = getAdminEntityChildViews(collection).filter(v => !v.collection.hideFromNavigation);
+    // `hideFromEntityViews`, not `hideFromNavigation`: the latter governs the
+    // drawer. Filtering tabs on it defeated the introspection generator, which
+    // sets `hideFromNavigation` on owned-child tables precisely *because* "every
+    // inbound foreign key renders as a tab on the parent" — so the rows it
+    // deliberately kept out of the drawer became reachable from nowhere.
+    const childViews = getAdminEntityChildViews(collection).filter(v => !v.collection.hideFromEntityViews);
     const subcollections = childViews.map(v => v.collection);
     const subcollectionsCount = subcollections?.length ?? 0;
     const customViews = collection.entityViews ?? [];
@@ -387,9 +407,10 @@ entityId }
         // centred column the record used to be given here; the default display
         // now lays itself out, rail included.
         if (FormViewBuilder && usedEntity) {
-            return <div className={"flex-1 min-w-0 overflow-y-auto flex justify-center items-start"}>
+            return <div className={"@container/form flex-1 min-w-0 overflow-y-auto flex justify-center items-start"}>
                 <div className={cls(
-                    "w-full max-w-3xl 2xl:max-w-4xl flex flex-col",
+                    // Same widths as the default form (see EntityForm).
+                    "w-full max-w-3xl @7xl/form:max-w-4xl 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"
@@ -429,7 +450,7 @@ entityId }
         const icon = getIcon(subcollection.icon, undefined, undefined, "smallest");
         return (
             <Tab
-                className="text-sm min-w-[90px]"
+                className={cls(ENTITY_VIEW_TAB_CLASS, ENTITY_VIEW_TAB_LABEL_CLASS)}
                 value={subcollection.slug}
                 key={`entity_detail_collection_tab_${subcollection.name}`}>
                 <span className="flex items-center gap-1.5">
@@ -445,7 +466,7 @@ entityId }
             const icon = getIcon(view.icon, undefined, undefined, "smallest");
             return (
                 <Tab
-                    className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
+                    className={cls(ENTITY_VIEW_TAB_CLASS, !view.tabComponent && ENTITY_VIEW_TAB_LABEL_CLASS)}
                     value={view.key}
                     key={`entity_detail_collection_tab_${view.name}`}>
                     {view.tabComponent ?? (
@@ -462,7 +483,7 @@ entityId }
             const icon = getIcon(view.icon, undefined, undefined, "smallest");
             return (
                 <Tab
-                    className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
+                    className={cls(ENTITY_VIEW_TAB_CLASS, !view.tabComponent && ENTITY_VIEW_TAB_LABEL_CLASS)}
                     value={view.key}
                     key={`entity_detail_collection_tab_${view.name}`}>
                     {view.tabComponent ?? (
@@ -551,6 +572,7 @@ entityId }
             dirty={false}
             saving={false}
             onBack={backToCollection}
+            onClose={onCloseRequest}
             onInspect={includeJsonView ? () => setInspectorTab("json") : undefined}
             onViewHistory={includeHistoryView ? () => setInspectorTab("history") : undefined}
             externalLink={usedEntity
@@ -580,10 +602,11 @@ entityId }
 
         {hasAdditionalViews && <div className={cls(
             "h-10 shrink-0 flex items-stretch border-b px-2 min-w-0",
+            ENTITY_VIEW_TAB_BAR_CLASS,
             defaultBorderMixin
         )}>
             <Tabs
-                className={"!w-full"}
+                className={"!w-full items-stretch"}
                 innerClassName={"h-full"}
                 variant={"boxy"}
                 value={activeTab}
@@ -591,7 +614,8 @@ entityId }
                     onSideTabClick(value);
                 }}>
 
-                <Tab value={MAIN_TAB_VALUE}>
+                <Tab value={MAIN_TAB_VALUE}
+                     className={cls(ENTITY_VIEW_TAB_CLASS, ENTITY_VIEW_TAB_LABEL_CLASS)}>
                     <span className="flex items-center gap-1.5">
                         {getIcon(collection.icon, undefined, undefined, "smallest")}
                         {collection.singularName ?? collection.name}

package/src/components/DrawerNavigationGroup.tsx

@@ -51,8 +51,10 @@ export interface DrawerNavigationGroupProps {
     /**
      * Lucide icon name for the group header, from `NavigationGroupMapping.icon`.
      *
-     * Supplying one moves the visual anchor from the rows to the group: the header
-     * gets the icon, and the entries below trade theirs for an indent.
+     * It decorates the header and nothing else: the entries below are untouched and
+     * keep their own icons. An app that wants the categorised look — rows giving up
+     * their icons to indent under the group — builds it in its own drawer, by
+     * overriding `Shell.DrawerNavigationItem` and passing `indented`.
      */
     icon?: string;
 }
@@ -75,17 +77,13 @@ export function DrawerNavigationGroup({
     const { t } = useTranslation();
     const ResolvedDrawerNavigationItem = useComponentOverride("Shell.DrawerNavigationItem", DrawerNavigationItem);
 
-    // Opt-in, per group: declaring `icon` on a `NavigationGroupMapping` switches
-    // this group to the categorised treatment — icon on the header, entries
-    // indented beneath it without their own. A group that declares no icon renders
-    // exactly as it did before, so an existing project sees no change at all.
-    //
-    // Two cases stay on the flat rendering regardless: with no header there is
-    // nothing to indent under, and collapsed to a rail the entry icons are the only
-    // affordance left to click.
+    // The icon decorates the header, and stops there. It used to also strip the
+    // entries of theirs and indent them, which made a per-app styling choice into
+    // framework behaviour: every project that labelled a group with an icon lost the
+    // icons on its rows, with nothing to turn it off. An app that wants that look
+    // now opts into it in its own drawer — see `indented` on
+    // {@link DrawerNavigationItem}.
     const groupIcon = !hideHeader && drawerOpen ? getIcon(icon, undefined, undefined, "small") : undefined;
-    const categorised = Boolean(groupIcon);
-    const indentEntries = categorised;
     return (
         <div
             className={"my-2 mx-2 flex flex-col"}
@@ -102,10 +100,7 @@ export function DrawerNavigationGroup({
                     <ChevronDownIcon
                         size={iconSize.small}
                         className={cls(
-                            categorised
-                                ? "text-surface-500 dark:text-surface-400"
-                                : "text-surface-400 dark:text-surface-400",
-                            "transition-transform duration-200 mr-1",
+                            "text-surface-400 dark:text-surface-400 transition-transform duration-200 mr-1",
                             collapsed ? "-rotate-90" : "rotate-0"
                         )}
                     />
@@ -117,21 +112,7 @@ export function DrawerNavigationGroup({
                     <Typography
                         variant={"caption"}
                         color={"secondary"}
-                        // Two treatments, and which one applies is decided by the group
-                        // itself. Without an icon this is byte-for-byte the original: the
-                        // drawer is a flat list of same-weight rows, and a louder header
-                        // would just compete with them.
-                        //
-                        // With one, the group becomes the thing you scan — its rows have
-                        // given up their icons to indent beneath it — so the label steps up
-                        // to match. At 11px in surface-400 it sat *below* the contrast of
-                        // the rows it labels, which is backwards once it is the anchor.
-                        className={cls(
-                            "font-semibold uppercase flex-grow line-clamp-1",
-                            categorised
-                                ? "text-[12px] tracking-wide text-surface-600 dark:text-surface-300"
-                                : "text-[11px] tracking-wider text-surface-400 dark:text-surface-400"
-                        )}
+                        className="font-semibold text-[11px] uppercase tracking-wider flex-grow line-clamp-1 text-surface-400 dark:text-surface-400"
                     >
                         {(group || t("views_group"))}
                     </Typography>
@@ -161,7 +142,6 @@ export function DrawerNavigationGroup({
                         onClick={() => onItemClick?.(entry)}
                         url={entry.url}
                         name={entry.name}
-                        indented={indentEntries}
                     />
                 ))}
             </div>

package/src/components/DrawerNavigationItem.tsx

@@ -3,14 +3,11 @@ import React from "react";
 import { NavLink } from "react-router";
 import { cls, Tooltip } from "@rebasepro/ui";
 
-export function DrawerNavigationItem({
-    name,
-    icon,
-    drawerOpen,
-    url,
-    onClick,
-    indented = false
-}: {
+/**
+ * Props of a drawer navigation row, named so an app overriding
+ * `Shell.DrawerNavigationItem` can type its wrapper against them.
+ */
+export type DrawerNavigationItemProps = {
     icon: React.ReactElement,
     name: string,
     /** @deprecated No longer read: the tooltip is uncontrolled. */
@@ -21,12 +18,24 @@ export function DrawerNavigationItem({
     url: string,
     onClick?: () => void,
     /**
-     * Render as a child of an icon-bearing group: no icon of its own, indented to
-     * sit under the group's label. Set by {@link DrawerNavigationGroup} only when
-     * the group actually has an icon and the drawer is expanded.
+     * Drop the row's icon and indent the label into the space it occupied, so the
+     * row reads as a child of the group header above it.
+     *
+     * Nothing in the framework sets this: the stock drawer always passes `false`,
+     * and an app that wants the categorised look opts into it by overriding
+     * `Shell.DrawerNavigationItem` and deciding for itself which rows get it.
      */
     indented?: boolean,
-}) {
+};
+
+export function DrawerNavigationItem({
+    name,
+    icon,
+    drawerOpen,
+    url,
+    onClick,
+    indented = false
+}: DrawerNavigationItemProps) {
 
     // Indented rows give up the icon rather than keeping it *and* indenting: a
     // per-row icon repeated down a group is what flattens the hierarchy, since
@@ -52,6 +61,18 @@ export function DrawerNavigationItem({
     const listItem = <div>
         <NavLink
             onClick={onClick}
+            // The label below is `hidden` (display:none) while the rail is
+            // collapsed, which takes it out of the accessibility tree along with
+            // the row's only text — a collapsed rail was a column of links with no
+            // accessible name at all. The tooltip does not cover this: Radix wires
+            // a trigger to its content with `aria-describedby`, which is a
+            // description rather than a name, and only while the tooltip is open —
+            // and this one is masked shut whenever the drawer is open.
+            //
+            // Named unconditionally rather than only when collapsed: expanded, this
+            // is the same string the row already displays, so the accessible name
+            // stays stable across the transition instead of appearing with it.
+            aria-label={name}
             style={{
                 width: "100%",
                 transition: drawerOpen ? "width 150ms ease-in" : undefined

package/src/components/EditViewBinding.tsx

@@ -38,8 +38,9 @@ import {
     useSlot,
     getIcon
 } from "@rebasepro/app";
-import { getEntityFromMemoryCache } from "@rebasepro/app";
+import { getEntityFromMemoryCache, removeEntityFromMemoryCache, saveEntityToMemoryCache } from "@rebasepro/app";
 import { EntityFormBinding } from "../form";
+import { getEditHandoffValues } from "../form/form_utils";
 import type { EntityFormBindingProps } from "../form";
 import type { OnUpdateParams } from "../types/components/EntityFormProps";
 import { EditFormActions } from "./EditFormActions";
@@ -54,10 +55,17 @@ import { useEntityDisplayTitle } from "../hooks/useEntityDisplayTitle";
 import { createFormexStub, getEntityFromCache } from "@rebasepro/app";
 import { usePermissions } from "@rebasepro/app";
 import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
-import { withViewMode } from "../util/view_mode";
+import { withListState } from "../util/view_mode";
 import { useNavigate } from "react-router";
 
-import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/view_constants";
+import {
+    MAIN_TAB_VALUE,
+    JSON_TAB_VALUE,
+    HISTORY_TAB_VALUE,
+    ENTITY_VIEW_TAB_BAR_CLASS,
+    ENTITY_VIEW_TAB_CLASS,
+    ENTITY_VIEW_TAB_LABEL_CLASS
+} from "../util/view_constants";
 export { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE };
 
 export type BarActionsParams = {
@@ -65,14 +73,19 @@ export type BarActionsParams = {
     status: EntityStatus,
     path: string,
     entityId?: string | number;
+    /** Whether `values` differ from what is stored. */
+    dirty: boolean;
     /**
-     * Whether `values` differ from what is stored. The side panel's "open full
-     * screen" hands the in-flight edit to the full-screen route through the
-     * memory cache, and a record loaded from that cache opens *dirty*: without
-     * this it stashed the values unconditionally, so expanding a record you had
-     * only looked at arrived saying "Unsaved changes" with Save enabled.
+     * Hand the edit in progress to the layout this action is about to open, so
+     * the record arrives showing — and still holding — what the user typed here.
+     * Call it from any action that changes layout without leaving the record;
+     * it decides on its own whether there is anything worth carrying, so a
+     * record nobody edited still arrives clean.
+     *
+     * Only supplied where there is a form to carry: the detail view passes no
+     * such thing.
      */
-    dirty: boolean;
+    carryEdit?: () => void;
 };
 
 export type OnTabChangeParams<M extends Record<string, unknown>> = {
@@ -98,6 +111,16 @@ export interface EditViewBindingProps<M extends Record<string, unknown> = Record
     onSaved?: (params: OnUpdateParams) => void;
     onTabChange?: (props: OnTabChangeParams<M>) => void;
     navigateBack?: () => void;
+    /**
+     * Dismiss this record — the ✕ at the identity bar's trailing edge, and what
+     * "save and close" reaches once the save lands.
+     *
+     * Set by the layouts that own the record's place on screen but are not side
+     * dialogs: the split, where dismissing is navigating back to the collection.
+     * The side panel and the dialog close through {@link useSideDialogContext}
+     * instead, which is what runs their unsaved-changes prompt.
+     */
+    onCloseRequest?: () => void;
     layout?: "side_panel" | "full_screen" | "split" | "dialog";
     barActions?: (params: BarActionsParams) => React.ReactNode;
     /**
@@ -142,9 +165,39 @@ export function EditViewBinding<M extends Record<string, unknown>>({
         useCache: false
     });
 
-    const initialDirtyValues = entityId
-        ? getEntityFromMemoryCache(props.path + "/" + entityId)
-        : (props.defaultValues ?? getEntityFromMemoryCache(props.path + "#new"));
+    // The edit handed over by another layout of this same record — see
+    // {@link carryEdit} below for the sending half.
+    //
+    // Read once per record and consumed: this is a handoff, and an edit left in
+    // the channel after it has been picked up is one that reopens the record
+    // dirty on a later, unrelated visit, carrying values the user walked away
+    // from. Held in a ref rather than re-read each render, because the read has
+    // to survive the clear — {@link EntityFormBinding} measures the
+    // local-changes banner against what the form opens showing, and a prop that
+    // reverted to `undefined` once the cache was cleared would raise the banner
+    // over the very edit that was just carried in.
+    //
+    // A copy is keyed with the new records, not under the record it was copied
+    // from: it is going to be stored as its own row, and both the handoff and
+    // the local-changes backup have always keyed it that way from the writing
+    // side. Reading it under `path/id` meant a copy in progress was written to
+    // one key and looked for under another.
+    const carriesAsNew = props.copy || entityId === undefined;
+    const handoffKey = carriesAsNew ? props.path + "#new" : props.path + "/" + entityId;
+    const handoff = useRef<{ key: string, values: object | undefined } | null>(null);
+    if (handoff.current?.key !== handoffKey) {
+        handoff.current = {
+            key: handoffKey,
+            values: getEntityFromMemoryCache(handoffKey)
+        };
+    }
+    useEffect(() => {
+        removeEntityFromMemoryCache(handoffKey);
+    }, [handoffKey]);
+
+    const initialDirtyValues = carriesAsNew
+        ? (props.defaultValues ?? handoff.current.values)
+        : handoff.current.values;
 
     const { canEdit: canEditHook } = usePermissions();
 
@@ -201,6 +254,7 @@ export function EditViewBindingInner<M extends Record<string, unknown>>({
     onSaved,
     onTabChange,
     navigateBack,
+    onCloseRequest,
     entity,
     initialDirtyValues,
     dataLoading,
@@ -287,7 +341,9 @@ parentEntityIds,
         }
     }, [selectedTabProp, defaultSelectedView]);
 
-    const childViews = getAdminEntityChildViews(collection).filter(v => !v.collection.hideFromNavigation);
+    // See DetailViewBinding: tabs are governed by `hideFromEntityViews`, the
+    // drawer by `hideFromNavigation`. They are separate roles.
+    const childViews = getAdminEntityChildViews(collection).filter(v => !v.collection.hideFromEntityViews);
     const subcollections = childViews.map(v => v.collection);
     const subcollectionsCount = subcollections?.length ?? 0;
     const customViews = collection.entityViews ?? [];
@@ -436,6 +492,35 @@ parentEntityIds,
         || (status === "existing" && !formex?.dirty)
     );
 
+    /**
+     * Hand this record's edit in progress to the layout about to replace this
+     * one — the split's "hide list", full screen's "show list", the side panel's
+     * "open full screen". None of them is a navigation *away* from the record:
+     * the same record is about to be shown by a different form, and what the
+     * user has typed belongs to the record, not to the pane it was typed in.
+     *
+     * Every control that changes layout has to call this, and none of them is
+     * blocked by the unsaved-changes prompt — the prompt asks about leaving, and
+     * these do not leave. What used to happen instead is that the edit reached
+     * the next layout only as its local-changes backup, which is the channel for
+     * a draft left behind by a closed tab: the record reopened *clean*, with a
+     * banner offering to apply changes the user had never walked away from.
+     */
+    const carryEdit = useCallback(() => {
+        const carried = formex
+            ? getEditHandoffValues<M>({
+                status,
+                dirty: formex.dirty,
+                values: formex.values,
+                touched: formex.touched,
+                storedValues: usedEntity?.values
+            })
+            : undefined;
+        if (!carried) return;
+        const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+        saveEntityToMemoryCache(key, carried);
+    }, [formex, status, path, entityId, usedEntity]);
+
     const [inspectorTab, setInspectorTab] = useState<InspectorTab | null>(null);
     // A save adds a revision, and the inspector can be open while it happens:
     // Save lives in the identity bar, above the panel. Counting saves gives the
@@ -445,7 +530,26 @@ parentEntityIds,
     /* ---- record actions, in the bar's overflow menu ---------------------- */
 
     const sideDialogContext = useSideDialogContext();
-    const canCloseAfterSave = layout === "side_panel" || layout === "dialog";
+
+    /**
+     * Whether the save in flight was asked to dismiss the record afterwards.
+     *
+     * A ref, and for the reason {@link SideDialogs} keeps its own as one: the
+     * flag is raised and the form submitted in a single click handler, and the
+     * `onSaved` that has to act on it was captured before React could re-render.
+     * As state it read one save late — the first "save and close" saved and
+     * stayed open, and the *next* save closed the record.
+     *
+     * The side panel and the dialog use the side-dialog controller's flag,
+     * which their own close path consumes; this one covers the layouts that
+     * close by calling {@link onCloseRequest} instead.
+     */
+    const pendingCloseRef = useRef(false);
+
+    // The split can close after a save the same way the overlays do — through
+    // the callback its layout supplies. Without one there is nothing to close.
+    const canCloseAfterSave = layout === "side_panel" || layout === "dialog"
+        || (layout === "split" && Boolean(onCloseRequest));
 
     const recordActions = useRecordActions({
         collection,
@@ -547,10 +651,11 @@ parentEntityIds,
     const entityReadOnlyView = !canEdit && entity ? (
         FormViewBuilder && readOnlyFormContext
             ? <div className={cls(
-                "flex-1 flex flex-row w-full overflow-y-auto justify-center",
+                "@container/form flex-1 flex flex-row w-full overflow-y-auto justify-center",
                 (canEdit || !mainViewVisible || selectedSecondaryForm) ? "hidden" : ""
             )}>
-                <div className={"w-full max-w-3xl 2xl:max-w-4xl flex flex-col pt-6 pb-16 px-5 sm:px-8"}>
+                {/* Same widths as the default form (see EntityForm). */}
+                <div className={"w-full max-w-3xl @7xl/form:max-w-4xl 2xl:max-w-4xl flex flex-col pt-6 pb-16 px-5 sm:px-8"}>
                     <ErrorBoundary>
                         <Suspense fallback={<CircularProgressCenter />}>
                             <FormViewBuilder
@@ -629,8 +734,32 @@ parentEntityIds,
                     ...params,
                     selectedTab: MAIN_TAB_VALUE === activeTab ? undefined : activeTab
                 };
+                // Two caller-supplied callbacks for one save, and either may
+                // navigate — the layouts' `onSaved` all do. Where both do, the
+                // second one's destination is what survives (docs/bug-classes.md
+                // #28), so `formProps.onSaved` is deliberately last: it belongs
+                // to whoever embedded this view, which outranks the layout.
                 onSaved?.(res);
                 formProps?.onSaved?.(res);
+
+                // After `onSaved`, never instead of it: the layout's own handler
+                // is what lowers its dirty flag, and closing is a navigation the
+                // unsaved-changes blocker would otherwise stop on values that
+                // are already stored.
+                //
+                // And after this handler returns, not inside it. The layouts
+                // that close this way close by navigating, and they have just
+                // navigated themselves — the split leaves `…/edit` for the
+                // record's own URL. Deferring keeps the close unambiguously
+                // last, which is what decides it: of two navigations raised for
+                // one action the final one survives, measured in
+                // `router_two_navigations_one_handler.test.tsx`. It also lets
+                // the state those handlers just set settle before the blocker
+                // reads it. See docs/bug-classes.md #28.
+                if (pendingCloseRef.current) {
+                    pendingCloseRef.current = false;
+                    setTimeout(() => onCloseRequest?.(), 0);
+                }
             }}
             Builder={resolveComponentRef(selectedSecondaryForm?.Builder as ComponentRef<EntityCustomViewParams<M>> | undefined) as React.ComponentType<EntityCustomViewParams<M>> | undefined}
         />
@@ -640,7 +769,7 @@ parentEntityIds,
         const icon = getIcon(subcollection.icon, undefined, undefined, "smallest");
         return (
             <Tab
-                className="text-sm min-w-[90px]"
+                className={cls(ENTITY_VIEW_TAB_CLASS, ENTITY_VIEW_TAB_LABEL_CLASS)}
                 value={subcollection.slug}
                 key={`entity_detail_collection_tab_${subcollection.name}`}>
                 <span className="flex items-center gap-1.5">
@@ -656,7 +785,7 @@ parentEntityIds,
             const icon = getIcon(view.icon, undefined, undefined, "smallest");
             return (
                 <Tab
-                    className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
+                    className={cls(ENTITY_VIEW_TAB_CLASS, !view.tabComponent && ENTITY_VIEW_TAB_LABEL_CLASS)}
                     value={view.key}
                     key={`entity_detail_collection_tab_${view.name}`}>
                     {view.tabComponent ?? (
@@ -673,7 +802,7 @@ parentEntityIds,
             const icon = getIcon(view.icon, undefined, undefined, "smallest");
             return (
                 <Tab
-                    className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
+                    className={cls(ENTITY_VIEW_TAB_CLASS, !view.tabComponent && ENTITY_VIEW_TAB_LABEL_CLASS)}
                     value={view.key}
                     key={`entity_detail_collection_tab_${view.name}`}>
                     {view.tabComponent ?? (
@@ -693,6 +822,7 @@ parentEntityIds,
             <IconButton
                 size="small"
                 onClick={() => {
+                    carryEdit();
                     const editSuffix = collection.defaultEntityAction === "view" ? "/edit" : "";
                     const entityUrl = urlController.buildUrlCollectionPath(`${path}/${entityId}${editSuffix}`);
                     navigate(`${entityUrl}#full`);
@@ -708,7 +838,7 @@ parentEntityIds,
         <EntityIdentityBar
             collection={collection as AdminCollection}
             collectionUrl={layout === "full_screen" || layout === "split"
-                ? withViewMode(urlController.buildUrlCollectionPath(path))
+                ? withListState(urlController.buildUrlCollectionPath(path))
                 : undefined}
             title={displayTitle}
             entityId={status === "existing" ? entityId : undefined}
@@ -723,22 +853,32 @@ parentEntityIds,
             // list can be unfolded back beside the record, that chevron reaches
             // the same collection and the arrow beside it is noise.
             onBack={layout === "full_screen" && !onShowList
-                ? () => navigate(withViewMode(urlController.buildUrlCollectionPath(path)))
+                ? () => navigate(withListState(urlController.buildUrlCollectionPath(path)))
                 : undefined}
             onSave={canEdit && formContext ? () => {
                 sideDialogContext.setPendingClose?.(false);
+                pendingCloseRef.current = false;
                 formContext.submit();
             } : undefined}
             onSaveAndClose={canEdit && formContext && canCloseAfterSave ? () => {
-                sideDialogContext.setPendingClose?.(true);
                 // Lowered again once the submit settles. A submit the form
                 // rejects never reaches `onSaved`, so nothing would consume the
                 // flag and the *next* save — a keyboard ⌘S, say — would close
                 // the panel out from under an edit nobody asked to finish. A
                 // save that succeeds has already closed by the time this runs.
+                if (layout === "split") {
+                    pendingCloseRef.current = true;
+                    Promise.resolve(formContext.submit())
+                        .finally(() => { pendingCloseRef.current = false; });
+                    return;
+                }
+                sideDialogContext.setPendingClose?.(true);
                 Promise.resolve(formContext.submit())
                     .finally(() => sideDialogContext.setPendingClose?.(false));
             } : undefined}
+            // Welded to Save in the split, its own button in the overlays.
+            saveAndClosePlacement={layout === "split" ? "menu" : "button"}
+            onClose={onCloseRequest}
             onDiscard={canEdit && formContext ? () => formContext.formex.resetForm() : undefined}
             onInspect={includeJsonView ? () => setInspectorTab("json") : undefined}
             onViewHistory={includeHistoryView ? () => setInspectorTab("history") : undefined}
@@ -751,9 +891,13 @@ parentEntityIds,
                 {barActionsStart}
                 {/* Split view: closing the list is opening this record
                     full screen, and the control for it belongs at this
-                    bar's leading edge. Full screen carries its mirror. */}
-                {layout === "split" && <SplitListCloseButton/>}
-                {layout === "full_screen" && onShowList && <SplitListShowButton onClick={onShowList}/>}
+                    bar's leading edge. Full screen carries its mirror.
+                    Both change layout, so both hand the edit over. */}
+                {layout === "split" && <SplitListCloseButton onBeforeHide={carryEdit}/>}
+                {layout === "full_screen" && onShowList && <SplitListShowButton onClick={() => {
+                    carryEdit();
+                    onShowList();
+                }}/>}
             </>}
             trailing={<>
                 {pluginActionsTop}
@@ -763,7 +907,8 @@ parentEntityIds,
                     entityId,
                     values: formContext?.values ?? usedEntity?.values ?? {},
                     status,
-                    dirty: Boolean(formContext?.formex?.dirty)
+                    dirty: Boolean(formContext?.formex?.dirty),
+                    carryEdit
                 })}
             </>}
         />
@@ -773,10 +918,11 @@ parentEntityIds,
             disappears entirely when there is nowhere else to go. */}
         {hasAdditionalViews && <div className={cls(
             "h-10 shrink-0 flex items-stretch border-b px-2 min-w-0",
+            ENTITY_VIEW_TAB_BAR_CLASS,
             defaultBorderMixin
         )}>
             <Tabs
-                className={"!w-full"}
+                className={"!w-full items-stretch"}
                 innerClassName={"h-full"}
                 variant={"boxy"}
                 value={activeTab}
@@ -784,7 +930,8 @@ parentEntityIds,
                     onSideTabClick(value);
                 }}>
 
-                <Tab value={MAIN_TAB_VALUE}>
+                <Tab value={MAIN_TAB_VALUE}
+                     className={cls(ENTITY_VIEW_TAB_CLASS, ENTITY_VIEW_TAB_LABEL_CLASS)}>
                     <span className="flex items-center gap-1.5">
                         {getIcon(collection.icon, undefined, undefined, "smallest")}
                         {collection.singularName ?? collection.name}