@byline/admin 4.18.0 → 4.19.0

package/dist/forms/form-renderer.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getAdminConfig } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
-import { Alert, Button, ComboButton } from "@byline/ui/react";
+import { Alert, Button, ComboButton, LoaderEllipsis } from "@byline/ui/react";
 import clsx from "clsx";
 import { sliceFieldAdmin } from "../fields/field-admin.js";
 import { FieldRenderer } from "../fields/field-renderer.js";
@@ -33,6 +33,10 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
     const [isUploading, setIsUploading] = useState(false);
     const submittingRef = useRef(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
+    const isBusy = isUploading || isSubmitting;
+    const formRef = useRef(null);
+    const focusBeforeBusyRef = useRef(null);
+    const restoreFocusAfterBusyRef = useRef(false);
     const [showUnsavedModal, setShowUnsavedModal] = useState(false);
     const [pendingSystemFieldsSubmit, setPendingSystemFieldsSubmit] = useState(null);
     const [contentLocale, setContentLocale] = useState(initialLocale ?? defaultLocale);
@@ -106,6 +110,26 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
         subscribeMeta,
         getFieldValues
     ]);
+    useEffect(()=>{
+        if (isBusy || !restoreFocusAfterBusyRef.current) return;
+        restoreFocusAfterBusyRef.current = false;
+        const original = focusBeforeBusyRef.current;
+        focusBeforeBusyRef.current = null;
+        const originalCanReceiveFocus = original?.isConnected === true && !original.matches(':disabled, [aria-disabled="true"]');
+        const target = originalCanReceiveFocus ? original : formRef.current?.querySelector('input:not(:disabled), textarea:not(:disabled), select:not(:disabled), button:not(:disabled), [tabindex]:not([tabindex="-1"])');
+        target?.focus({
+            preventScroll: true
+        });
+    }, [
+        isBusy
+    ]);
+    const captureFocusBeforeBusy = useCallback(()=>{
+        if (null != focusBeforeBusyRef.current) return;
+        const activeElement = document.activeElement;
+        if (!(activeElement instanceof HTMLElement) || !formRef.current?.contains(activeElement)) return;
+        focusBeforeBusyRef.current = activeElement;
+        restoreFocusAfterBusyRef.current = true;
+    }, []);
     const handleCancel = ()=>{
         if (onCancel && 'function' == typeof onCancel) onCancel();
     };
@@ -113,6 +137,7 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
         if ('function' != typeof onSubmit) return;
         if (submittingRef.current) return;
         submittingRef.current = true;
+        captureFocusBeforeBusy();
         setIsSubmitting(true);
         try {
             await onSubmit(payload);
@@ -122,6 +147,7 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
             setIsSubmitting(false);
         }
     }, [
+        captureFocusBeforeBusy,
         onSubmit,
         resetHasChanges
     ]);
@@ -137,6 +163,7 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
             if (allErrors.length > 0) return void console.error('Form validation failed:', allErrors);
             const pendingUploads = getPendingUploads();
             if (pendingUploads.size > 0) {
+                captureFocusBeforeBusy();
                 setIsUploading(true);
                 try {
                     const uploadResult = await executeUploadsWithProgress(pendingUploads, uploadField, ({ fieldPath, status })=>{
@@ -245,196 +272,226 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
             ]
         }, `tabset:${set.name}`);
     };
-    return /*#__PURE__*/ jsxs("form", {
-        method: "post",
-        noValidate: true,
-        onSubmit: handleSubmit,
-        className: clsx('byline-form', form_renderer_module.form),
-        inert: isUploading ? true : void 0,
-        "aria-busy": isUploading,
+    const busyAnnouncement = isUploading ? t('forms.actions.uploading') : isSubmitting ? t('forms.actions.saving') : '';
+    return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: clsx('byline-form-heading-row', form_renderer_module["heading-row"]),
-                children: [
-                    /*#__PURE__*/ jsx("h1", {
-                        className: clsx('byline-form-heading', form_renderer_module.heading),
-                        children: computedHeading
-                    }),
-                    headerSlot
-                ]
+            /*#__PURE__*/ jsx("span", {
+                className: clsx('byline-form-busy-status', form_renderer_module["busy-status"]),
+                role: "status",
+                "aria-live": "polite",
+                children: busyAnnouncement
             }),
-            /*#__PURE__*/ jsxs("div", {
-                className: clsx('byline-form-status-bar', form_renderer_module["status-bar"]),
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: clsx('byline-form-status-details', form_renderer_module["status-details"]),
-                        children: /*#__PURE__*/ jsx(FormStatusDisplay, {
-                            initialData: initialData,
-                            workflowStatuses: workflowStatuses,
-                            publishedVersion: publishedVersion,
-                            onUnpublish: onUnpublish,
-                            afterStatusCells: /*#__PURE__*/ jsx(ScheduledPublicationCell, {
-                                state: scheduling.state,
-                                timeZone: scheduling.timeZone
-                            })
-                        })
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        className: clsx('byline-form-actions', form_renderer_module.actions),
-                        children: [
-                            /*#__PURE__*/ jsx(Button, {
-                                className: clsx('byline-form-actions-button', form_renderer_module["actions-button"]),
-                                size: "sm",
-                                intent: "noeffect",
-                                type: "button",
-                                onClick: handleCancel,
-                                children: false === hasChanges ? t('common.actions.close') : t('common.actions.cancel')
-                            }),
-                            /*#__PURE__*/ jsx(Button, {
-                                className: clsx('byline-form-actions-button', form_renderer_module["actions-button"]),
-                                size: "sm",
-                                type: "submit",
-                                disabled: false === hasChanges || isUploading || isSubmitting,
-                                children: isUploading ? t('forms.actions.uploading') : t('common.actions.save')
-                            }),
-                            primaryStatus && onStatusChange && /*#__PURE__*/ jsx("div", {
-                                className: clsx('byline-form-actions-status-wrap', form_renderer_module["actions-status-wrap"]),
-                                children: /*#__PURE__*/ jsx(ComboButton, {
-                                    buttonClassName: clsx('byline-form-actions-combo-button', form_renderer_module["actions-combo-button"]),
-                                    triggerClassName: clsx('byline-form-actions-combo-trigger', form_renderer_module["actions-combo-trigger"]),
-                                    options: secondaryStatuses.map((s)=>({
-                                            label: isTerminal ? t('forms.actions.revertTo', {
-                                                label: s.label ?? s.name
-                                            }) : s.verb ?? s.label ?? s.name,
-                                            value: s.name
-                                        })),
-                                    sideOffset: 5,
-                                    size: "sm",
-                                    type: "button",
-                                    intent: isTerminal ? 'info' : 'success',
-                                    disabled: statusBusy,
-                                    onOptionSelect: async (value)=>{
-                                        if (hasChanges) return void setShowUnsavedModal(true);
-                                        setStatusBusy(true);
-                                        try {
-                                            await onStatusChange(value);
-                                        } finally{
-                                            setStatusBusy(false);
-                                        }
-                                    },
-                                    onButtonClick: isTerminal ? void 0 : async ()=>{
-                                        if (hasChanges) return void setShowUnsavedModal(true);
-                                        setStatusBusy(true);
-                                        try {
-                                            await onStatusChange(primaryStatus.name);
-                                        } finally{
-                                            setStatusBusy(false);
-                                        }
-                                    },
-                                    children: statusBusy ? '...' : isTerminal ? primaryStatus.label ?? primaryStatus.name : primaryStatus.verb ?? primaryStatus.label ?? primaryStatus.name
+            /*#__PURE__*/ jsx("div", {
+                "aria-busy": isBusy,
+                children: /*#__PURE__*/ jsxs("form", {
+                    ref: formRef,
+                    method: "post",
+                    noValidate: true,
+                    onSubmit: handleSubmit,
+                    className: clsx('byline-form', form_renderer_module.form),
+                    inert: isBusy ? true : void 0,
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: clsx('byline-form-heading-row', form_renderer_module["heading-row"]),
+                            children: [
+                                /*#__PURE__*/ jsx("h1", {
+                                    className: clsx('byline-form-heading', form_renderer_module.heading),
+                                    children: computedHeading
+                                }),
+                                headerSlot
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: clsx('byline-form-status-bar', form_renderer_module["status-bar"]),
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    className: clsx('byline-form-status-details', form_renderer_module["status-details"]),
+                                    children: /*#__PURE__*/ jsx(FormStatusDisplay, {
+                                        initialData: initialData,
+                                        workflowStatuses: workflowStatuses,
+                                        publishedVersion: publishedVersion,
+                                        onUnpublish: onUnpublish,
+                                        afterStatusCells: /*#__PURE__*/ jsx(ScheduledPublicationCell, {
+                                            state: scheduling.state,
+                                            timeZone: scheduling.timeZone
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: clsx('byline-form-actions', form_renderer_module.actions),
+                                    children: [
+                                        /*#__PURE__*/ jsx(Button, {
+                                            className: clsx('byline-form-actions-button', form_renderer_module["actions-button"]),
+                                            size: "sm",
+                                            intent: "noeffect",
+                                            type: "button",
+                                            onClick: handleCancel,
+                                            children: false === hasChanges ? t('common.actions.close') : t('common.actions.cancel')
+                                        }),
+                                        /*#__PURE__*/ jsx(Button, {
+                                            className: clsx('byline-form-actions-button', form_renderer_module["actions-button"]),
+                                            size: "sm",
+                                            type: "submit",
+                                            disabled: false === hasChanges || isUploading || isSubmitting,
+                                            "aria-label": isSubmitting ? t('common.actions.save') : void 0,
+                                            children: isUploading ? t('forms.actions.uploading') : /*#__PURE__*/ jsxs("span", {
+                                                className: clsx('byline-form-save-content', form_renderer_module["save-content"]),
+                                                children: [
+                                                    /*#__PURE__*/ jsx("span", {
+                                                        className: clsx('byline-form-save-label', form_renderer_module["save-label"], isSubmitting && form_renderer_module["save-label-hidden"]),
+                                                        children: t('common.actions.save')
+                                                    }),
+                                                    isSubmitting ? /*#__PURE__*/ jsx("span", {
+                                                        className: clsx('byline-form-save-loader', form_renderer_module["save-loader"]),
+                                                        children: /*#__PURE__*/ jsx(LoaderEllipsis, {
+                                                            size: 28,
+                                                            "aria-hidden": "true"
+                                                        })
+                                                    }) : null
+                                                ]
+                                            })
+                                        }),
+                                        primaryStatus && onStatusChange && /*#__PURE__*/ jsx("div", {
+                                            className: clsx('byline-form-actions-status-wrap', form_renderer_module["actions-status-wrap"]),
+                                            children: /*#__PURE__*/ jsx(ComboButton, {
+                                                buttonClassName: clsx('byline-form-actions-combo-button', form_renderer_module["actions-combo-button"]),
+                                                triggerClassName: clsx('byline-form-actions-combo-trigger', form_renderer_module["actions-combo-trigger"]),
+                                                options: secondaryStatuses.map((s)=>({
+                                                        label: isTerminal ? t('forms.actions.revertTo', {
+                                                            label: s.label ?? s.name
+                                                        }) : s.verb ?? s.label ?? s.name,
+                                                        value: s.name
+                                                    })),
+                                                sideOffset: 5,
+                                                size: "sm",
+                                                type: "button",
+                                                intent: isTerminal ? 'info' : 'success',
+                                                disabled: statusBusy,
+                                                onOptionSelect: async (value)=>{
+                                                    if (hasChanges) return void setShowUnsavedModal(true);
+                                                    setStatusBusy(true);
+                                                    try {
+                                                        await onStatusChange(value);
+                                                    } finally{
+                                                        setStatusBusy(false);
+                                                    }
+                                                },
+                                                onButtonClick: isTerminal ? void 0 : async ()=>{
+                                                    if (hasChanges) return void setShowUnsavedModal(true);
+                                                    setStatusBusy(true);
+                                                    try {
+                                                        await onStatusChange(primaryStatus.name);
+                                                    } finally{
+                                                        setStatusBusy(false);
+                                                    }
+                                                },
+                                                children: statusBusy ? '...' : isTerminal ? primaryStatus.label ?? primaryStatus.name : primaryStatus.verb ?? primaryStatus.label ?? primaryStatus.name
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsx(DocumentActions, {
+                                            publishedVersion: publishedVersion,
+                                            onUnpublish: onUnpublish,
+                                            onDelete: onDelete,
+                                            onDuplicate: onDuplicate,
+                                            sourceTitle: null != useAsTitle && null != initialData ? initialData[useAsTitle] : null,
+                                            onCopyToLocale: onCopyToLocale,
+                                            sourceLocale: contentLocale,
+                                            contentLocales: contentLocales,
+                                            hasUnsavedChanges: hasChanges,
+                                            onUnsavedChanges: ()=>setShowUnsavedModal(true),
+                                            onDeleteLocale: onDeleteLocale,
+                                            defaultLocale: defaultLocale,
+                                            availableLocales: initialData?._availableVersionLocales,
+                                            scheduledPublicationState: scheduling.state,
+                                            onSchedulePublication: scheduling.openSchedule,
+                                            onConfirmScheduledPublication: scheduling.confirm,
+                                            onCancelScheduledPublication: scheduling.cancel
+                                        })
+                                    ]
                                 })
-                            }),
-                            /*#__PURE__*/ jsx(DocumentActions, {
-                                publishedVersion: publishedVersion,
-                                onUnpublish: onUnpublish,
-                                onDelete: onDelete,
-                                onDuplicate: onDuplicate,
-                                sourceTitle: null != useAsTitle && null != initialData ? initialData[useAsTitle] : null,
-                                onCopyToLocale: onCopyToLocale,
-                                sourceLocale: contentLocale,
-                                contentLocales: contentLocales,
-                                hasUnsavedChanges: hasChanges,
-                                onUnsavedChanges: ()=>setShowUnsavedModal(true),
-                                onDeleteLocale: onDeleteLocale,
-                                defaultLocale: defaultLocale,
-                                availableLocales: initialData?._availableVersionLocales,
-                                scheduledPublicationState: scheduling.state,
-                                onSchedulePublication: scheduling.openSchedule,
-                                onConfirmScheduledPublication: scheduling.confirm,
-                                onCancelScheduledPublication: scheduling.cancel
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(ScheduledPublicationNotice, {
-                state: scheduling.state,
-                timeZone: scheduling.timeZone,
-                busy: scheduling.busy,
-                onConfirm: scheduling.confirm,
-                onReschedule: scheduling.openSchedule,
-                onCancel: scheduling.cancel
-            }),
-            scheduling.modal,
-            restoreWarnings && restoreWarnings.length > 0 && /*#__PURE__*/ jsxs(Alert, {
-                className: "m-0 mt-4",
-                intent: "warning",
-                icon: true,
-                close: false,
-                title: t('forms.restoreWarnings.title'),
-                children: [
-                    /*#__PURE__*/ jsx("p", {
-                        children: t('forms.restoreWarnings.body', {
-                            count: restoreWarnings.length
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(ScheduledPublicationNotice, {
+                            state: scheduling.state,
+                            timeZone: scheduling.timeZone,
+                            busy: scheduling.busy,
+                            onConfirm: scheduling.confirm,
+                            onReschedule: scheduling.openSchedule,
+                            onCancel: scheduling.cancel
+                        }),
+                        scheduling.modal,
+                        restoreWarnings && restoreWarnings.length > 0 && /*#__PURE__*/ jsxs(Alert, {
+                            className: "m-0 mt-4",
+                            intent: "warning",
+                            icon: true,
+                            close: false,
+                            title: t('forms.restoreWarnings.title'),
+                            children: [
+                                /*#__PURE__*/ jsx("p", {
+                                    children: t('forms.restoreWarnings.body', {
+                                        count: restoreWarnings.length
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx("ul", {
+                                    children: restoreWarnings.map((w)=>/*#__PURE__*/ jsx("li", {
+                                            children: w
+                                        }, w))
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: clsx('byline-form-layout', form_renderer_module.layout),
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    className: clsx('byline-form-content', form_renderer_module.content),
+                                    children: layout.main.map((name)=>renderItem(name))
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: clsx('byline-form-sidebar', form_renderer_module.sidebar),
+                                    children: [
+                                        showPath && (useAsPath || 'string' == typeof initialData?.path && initialData.path.length > 0) && /*#__PURE__*/ jsx(PathWidget, {
+                                            useAsPath: useAsPath,
+                                            collectionPath: collectionPath ?? '',
+                                            defaultLocale: defaultLocale,
+                                            activeLocale: contentLocale,
+                                            mode: mode,
+                                            slugifier: pathSlugifier,
+                                            sourceLocked: pathSourceLocked
+                                        }),
+                                        tree && 'edit' === mode && 'string' == typeof initialData?.id && /*#__PURE__*/ jsx(TreePlacementWidget, {
+                                            collectionPath: collectionPath ?? '',
+                                            documentId: initialData.id,
+                                            useAsTitle: useAsTitle
+                                        }),
+                                        advertiseLocales && /*#__PURE__*/ jsx(AvailableLocalesWidget, {
+                                            contentLocales: contentLocales ?? [],
+                                            availableVersionLocales: initialData?._availableVersionLocales ?? []
+                                        }),
+                                        (layout.sidebar ?? []).map((name)=>renderItem(name))
+                                    ]
+                                })
+                            ]
+                        }),
+                        showUnsavedModal && /*#__PURE__*/ jsx(UnsavedChangesModal, {
+                            onClose: ()=>setShowUnsavedModal(false)
+                        }),
+                        null != pendingSystemFieldsSubmit && /*#__PURE__*/ jsx(SystemFieldsConfirmModal, {
+                            contentDirty: pendingSystemFieldsSubmit.contentDirty,
+                            pathDirty: pendingSystemFieldsSubmit.pathDirty,
+                            availableLocalesDirty: pendingSystemFieldsSubmit.availableLocalesDirty,
+                            onCancel: ()=>setPendingSystemFieldsSubmit(null),
+                            onConfirm: ()=>{
+                                const payload = pendingSystemFieldsSubmit;
+                                setPendingSystemFieldsSubmit(null);
+                                submitPayload(payload);
+                            }
+                        }),
+                        guard.isBlocked && /*#__PURE__*/ jsx(NavigationGuardModal, {
+                            onStay: guard.stay,
+                            onProceed: guard.proceed
                         })
-                    }),
-                    /*#__PURE__*/ jsx("ul", {
-                        children: restoreWarnings.map((w)=>/*#__PURE__*/ jsx("li", {
-                                children: w
-                            }, w))
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: clsx('byline-form-layout', form_renderer_module.layout),
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: clsx('byline-form-content', form_renderer_module.content),
-                        children: layout.main.map((name)=>renderItem(name))
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        className: clsx('byline-form-sidebar', form_renderer_module.sidebar),
-                        children: [
-                            showPath && (useAsPath || 'string' == typeof initialData?.path && initialData.path.length > 0) && /*#__PURE__*/ jsx(PathWidget, {
-                                useAsPath: useAsPath,
-                                collectionPath: collectionPath ?? '',
-                                defaultLocale: defaultLocale,
-                                activeLocale: contentLocale,
-                                mode: mode,
-                                slugifier: pathSlugifier,
-                                sourceLocked: pathSourceLocked
-                            }),
-                            tree && 'edit' === mode && 'string' == typeof initialData?.id && /*#__PURE__*/ jsx(TreePlacementWidget, {
-                                collectionPath: collectionPath ?? '',
-                                documentId: initialData.id,
-                                useAsTitle: useAsTitle
-                            }),
-                            advertiseLocales && /*#__PURE__*/ jsx(AvailableLocalesWidget, {
-                                contentLocales: contentLocales ?? [],
-                                availableVersionLocales: initialData?._availableVersionLocales ?? []
-                            }),
-                            (layout.sidebar ?? []).map((name)=>renderItem(name))
-                        ]
-                    })
-                ]
-            }),
-            showUnsavedModal && /*#__PURE__*/ jsx(UnsavedChangesModal, {
-                onClose: ()=>setShowUnsavedModal(false)
-            }),
-            null != pendingSystemFieldsSubmit && /*#__PURE__*/ jsx(SystemFieldsConfirmModal, {
-                contentDirty: pendingSystemFieldsSubmit.contentDirty,
-                pathDirty: pendingSystemFieldsSubmit.pathDirty,
-                availableLocalesDirty: pendingSystemFieldsSubmit.availableLocalesDirty,
-                onCancel: ()=>setPendingSystemFieldsSubmit(null),
-                onConfirm: ()=>{
-                    const payload = pendingSystemFieldsSubmit;
-                    setPendingSystemFieldsSubmit(null);
-                    submitPayload(payload);
-                }
-            }),
-            guard.isBlocked && /*#__PURE__*/ jsx(NavigationGuardModal, {
-                onStay: guard.stay,
-                onProceed: guard.proceed
+                    ]
+                })
             })
         ]
     });

package/dist/forms/form-renderer.module.js

@@ -24,6 +24,16 @@ const form_renderer_module = {
     actions: "actions-AZBIdR",
     "actions-button": "actions-button-VIwbST",
     actionsButton: "actions-button-VIwbST",
+    "busy-status": "busy-status-kzSMVH",
+    busyStatus: "busy-status-kzSMVH",
+    "save-content": "save-content-bc8XeC",
+    saveContent: "save-content-bc8XeC",
+    "save-label": "save-label-iJw9DA",
+    saveLabel: "save-label-iJw9DA",
+    "save-label-hidden": "save-label-hidden-Wct46I",
+    saveLabelHidden: "save-label-hidden-Wct46I",
+    "save-loader": "save-loader-g2wcnV",
+    saveLoader: "save-loader-g2wcnV",
     "actions-status-wrap": "actions-status-wrap-hSvlps",
     actionsStatusWrap: "actions-status-wrap-hSvlps",
     "actions-combo-button": "actions-combo-button-XvqHCC",

package/dist/forms/form-renderer_module.css

@@ -141,6 +141,40 @@
   min-height: 28px;
 }
 
+:is(.busy-status-kzSMVH, .byline-form-busy-status) {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+:is(.save-content-bc8XeC, .byline-form-save-content) {
+  display: inline-block;
+  position: relative;
+}
+
+:is(.save-label-iJw9DA, .byline-form-save-label) {
+  display: inline-block;
+}
+
+.save-label-hidden-Wct46I {
+  visibility: hidden;
+}
+
+:is(.save-loader-g2wcnV, .byline-form-save-loader) {
+  display: inline-flex;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 :is(.actions-status-wrap-hSvlps, .byline-form-actions-status-wrap) {
   z-index: 10;
   position: relative;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "4.18.0",
+  "version": "4.19.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -183,12 +183,12 @@
     "react-diff-viewer-continued": "^4.4.0",
     "uuid": "^14.0.2",
     "zod": "^4.4.3",
-    "@byline/analytics": "4.18.0",
-    "@byline/core": "4.18.0",
-    "@byline/analytics-agent": "4.18.0",
-    "@byline/auth": "4.18.0",
-    "@byline/ui": "4.18.0",
-    "@byline/i18n": "4.18.0"
+    "@byline/analytics": "4.19.0",
+    "@byline/analytics-agent": "4.19.0",
+    "@byline/auth": "4.19.0",
+    "@byline/ui": "4.19.0",
+    "@byline/i18n": "4.19.0",
+    "@byline/core": "4.19.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/forms/form-renderer-submit.test.tsx

@@ -129,6 +129,16 @@ const submitForm = () => {
   })
 }
 
+const deferred = () => {
+  let resolve: () => void = () => {}
+  let reject: (reason?: unknown) => void = () => {}
+  const promise = new Promise<void>((resolvePromise, rejectPromise) => {
+    resolve = resolvePromise
+    reject = rejectPromise
+  })
+  return { promise, resolve, reject }
+}
+
 describe('FormRenderer submit contract', () => {
   const render = (props: Record<string, unknown>) =>
     renderInProvider(<FormRenderer {...(props as any)} />)
@@ -169,13 +179,97 @@ describe('FormRenderer submit contract', () => {
     expect(container.textContent).toContain('Cancel')
   })
 
-  it('ignores a second submit while the first is still in flight', async () => {
-    let release: () => void = () => {}
-    const gate = new Promise<void>((resolve) => {
-      release = resolve
+  it('shows a named busy indicator until onSubmit resolves', async () => {
+    const submission = deferred()
+    render({ ...baseProps, onSubmit: () => submission.promise })
+    typeIntoTitle('Hello')
+    submitForm()
+    await act(async () => {})
+
+    const form = container.querySelector('form')
+    const busyRegion = form?.parentElement
+    const liveStatus = container.querySelector('[role="status"]')
+    const saveButton = container.querySelector<HTMLButtonElement>('button[type="submit"]')
+    expect(busyRegion?.getAttribute('aria-busy')).toBe('true')
+    expect(form?.getAttribute('aria-busy')).toBeNull()
+    expect(form?.hasAttribute('inert')).toBe(true)
+    expect(liveStatus?.textContent).toBe('Saving…')
+    expect(busyRegion?.contains(liveStatus)).toBe(false)
+    expect(saveButton?.getAttribute('aria-label')).toBe('Save')
+    expect(saveButton?.querySelector('.byline-loader-ellipsis')).not.toBeNull()
+    expect(saveButton?.querySelector('.byline-form-save-label')?.textContent).toBe('Save')
+
+    await act(async () => {
+      submission.resolve()
+      await submission.promise
     })
+
+    expect(busyRegion?.getAttribute('aria-busy')).toBe('false')
+    expect(form?.hasAttribute('inert')).toBe(false)
+    expect(liveStatus?.textContent).toBe('')
+    expect(saveButton?.getAttribute('aria-label')).toBeNull()
+    expect(saveButton?.querySelector('.byline-loader-ellipsis')).toBeNull()
+  })
+
+  it('hides the busy indicator when onSubmit rejects', async () => {
+    const submission = deferred()
+    render({ ...baseProps, onSubmit: () => submission.promise })
+    typeIntoTitle('Hello')
+    submitForm()
+    await act(async () => {})
+
+    const form = container.querySelector('form')
+    const busyRegion = form?.parentElement
+    const saveButton = container.querySelector<HTMLButtonElement>('button[type="submit"]')
+    expect(busyRegion?.getAttribute('aria-busy')).toBe('true')
+    expect(form?.getAttribute('aria-busy')).toBeNull()
+    expect(saveButton?.querySelector('.byline-loader-ellipsis')).not.toBeNull()
+
+    await act(async () => {
+      submission.reject(new Error('save failed'))
+      try {
+        await submission.promise
+      } catch {
+        // FormRenderer intentionally handles host-reported submission failures.
+      }
+    })
+
+    expect(form?.getAttribute('aria-busy')).toBeNull()
+    expect(busyRegion?.getAttribute('aria-busy')).toBe('false')
+    expect(form?.hasAttribute('inert')).toBe(false)
+    expect(saveButton?.getAttribute('aria-label')).toBeNull()
+    expect(saveButton?.querySelector('.byline-loader-ellipsis')).toBeNull()
+  })
+
+  it('restores keyboard focus after the inert submitting window closes', async () => {
+    const submission = deferred()
+    render({ ...baseProps, onSubmit: () => submission.promise })
+    typeIntoTitle('Hello')
+    const input = container.querySelector<HTMLInputElement>('input[name="title"]')
+    if (input == null) throw new Error('title input not found')
+    input.focus()
+    expect(document.activeElement).toBe(input)
+
+    submitForm()
+    await act(async () => {})
+
+    document.body.tabIndex = -1
+    document.body.focus()
+    expect(document.activeElement).toBe(document.body)
+
+    await act(async () => {
+      submission.resolve()
+      await submission.promise
+    })
+
+    expect(document.activeElement).toBe(input)
+    document.body.removeAttribute('tabindex')
+  })
+
+  it('ignores a second submit while the first is still in flight', async () => {
+    const submission = deferred()
     const onSubmit = vi.fn(async () => {
-      await gate
+      await submission.promise
     })
     render({ ...baseProps, onSubmit })
     typeIntoTitle('Hello')
@@ -187,7 +281,7 @@ describe('FormRenderer submit contract', () => {
     await act(async () => {})
     expect(onSubmit).toHaveBeenCalledTimes(1)
     await act(async () => {
-      release()
+      submission.resolve()
     })
     expect(onSubmit).toHaveBeenCalledTimes(1)
   })

package/src/forms/form-renderer.module.css

@@ -20,6 +20,10 @@
  *   .byline-form-actions-status-wrap    — relative positioned wrapper around the ComboButton
  *   .byline-form-actions-combo-button   — ComboButton's main button minimums
  *   .byline-form-actions-combo-trigger  — ComboButton's trigger button minimums
+ *   .byline-form-busy-status            — visually-hidden save/upload announcement
+ *   .byline-form-save-content           — stable-width Save label/loader wrapper
+ *   .byline-form-save-label             — visible label that determines button width
+ *   .byline-form-save-loader            — centered progress overlay
  *
  *   .byline-form-layout                 — main + sidebar grid wrapper
  *   .byline-form-content                — main column
@@ -206,6 +210,44 @@
   min-height: 28px;
 }
 
+.busy-status,
+:global(.byline-form-busy-status) {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.save-content,
+:global(.byline-form-save-content) {
+  position: relative;
+  display: inline-block;
+}
+
+.save-label,
+:global(.byline-form-save-label) {
+  display: inline-block;
+}
+
+.save-label-hidden {
+  visibility: hidden;
+}
+
+.save-loader,
+:global(.byline-form-save-loader) {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: inline-flex;
+  transform: translate(-50%, -50%);
+}
+
 .actions-status-wrap,
 :global(.byline-form-actions-status-wrap) {
   position: relative;

package/src/forms/form-renderer.tsx

@@ -21,7 +21,7 @@ import type {
 import { getAdminConfig } from '@byline/core'
 import type { DocumentPatch } from '@byline/core/patches'
 import { useTranslation } from '@byline/i18n/react'
-import { Alert, Button, ComboButton } from '@byline/ui/react'
+import { Alert, Button, ComboButton, LoaderEllipsis } from '@byline/ui/react'
 import cx from 'clsx'
 
 import { sliceFieldAdmin } from '../fields/field-admin'
@@ -263,6 +263,10 @@ const FormContent = ({
   const [isUploading, setIsUploading] = useState(false)
   const submittingRef = useRef(false)
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const isBusy = isUploading || isSubmitting
+  const formRef = useRef<HTMLFormElement>(null)
+  const focusBeforeBusyRef = useRef<HTMLElement | null>(null)
+  const restoreFocusAfterBusyRef = useRef(false)
   // Block-only "save first" guard. Set true when the editor triggers a
   // guarded action (status change, duplicate, copy-to-locale) while the form
   // is dirty — those actions operate on the saved version, so unsaved edits
@@ -392,6 +396,34 @@ const FormContent = ({
     return subscribeMeta(() => setFormData(getFieldValues()))
   }, [subscribeMeta, getFieldValues])
 
+  // `inert` removes the active control from the tab order while a save is in
+  // flight. Restore the editor's position after React has removed `inert`;
+  // when the original control became disabled, fall back to the first usable
+  // form control instead of leaving focus on <body>.
+  useEffect(() => {
+    if (isBusy || !restoreFocusAfterBusyRef.current) return
+    restoreFocusAfterBusyRef.current = false
+
+    const original = focusBeforeBusyRef.current
+    focusBeforeBusyRef.current = null
+    const originalCanReceiveFocus =
+      original?.isConnected === true && !original.matches(':disabled, [aria-disabled="true"]')
+    const target = originalCanReceiveFocus
+      ? original
+      : formRef.current?.querySelector<HTMLElement>(
+          'input:not(:disabled), textarea:not(:disabled), select:not(:disabled), button:not(:disabled), [tabindex]:not([tabindex="-1"])'
+        )
+    target?.focus({ preventScroll: true })
+  }, [isBusy])
+
+  const captureFocusBeforeBusy = useCallback(() => {
+    if (focusBeforeBusyRef.current != null) return
+    const activeElement = document.activeElement
+    if (!(activeElement instanceof HTMLElement) || !formRef.current?.contains(activeElement)) return
+    focusBeforeBusyRef.current = activeElement
+    restoreFocusAfterBusyRef.current = true
+  }, [])
+
   const handleCancel = () => {
     if (onCancel && typeof onCancel === 'function') {
       onCancel()
@@ -409,6 +441,7 @@ const FormContent = ({
       if (typeof onSubmit !== 'function') return
       if (submittingRef.current) return
       submittingRef.current = true
+      captureFocusBeforeBusy()
       setIsSubmitting(true)
       try {
         await onSubmit(payload)
@@ -421,7 +454,7 @@ const FormContent = ({
         setIsSubmitting(false)
       }
     },
-    [onSubmit, resetHasChanges]
+    [captureFocusBeforeBusy, onSubmit, resetHasChanges]
   )
 
   const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
@@ -441,6 +474,7 @@ const FormContent = ({
       // Execute any pending uploads before submitting
       const pendingUploads = getPendingUploads()
       if (pendingUploads.size > 0) {
+        captureFocusBeforeBusy()
         setIsUploading(true)
         try {
           const uploadResult = await executeUploadsWithProgress(
@@ -605,217 +639,261 @@ const FormContent = ({
     )
   }
 
+  const busyAnnouncement = isUploading
+    ? t('forms.actions.uploading')
+    : isSubmitting
+      ? t('forms.actions.saving')
+      : ''
+
   return (
-    <form
-      method="post"
-      noValidate
-      onSubmit={handleSubmit}
-      className={cx('byline-form', styles.form)}
-      inert={isUploading ? true : undefined}
-      aria-busy={isUploading}
-    >
-      <div className={cx('byline-form-heading-row', styles['heading-row'])}>
-        <h1 className={cx('byline-form-heading', styles.heading)}>{computedHeading}</h1>
-        {/* Source-locale anchor indicator removed pending heading-layout work.
+    <>
+      <span
+        className={cx('byline-form-busy-status', styles['busy-status'])}
+        role="status"
+        aria-live="polite"
+      >
+        {busyAnnouncement}
+      </span>
+      <div aria-busy={isBusy}>
+        <form
+          ref={formRef}
+          method="post"
+          noValidate
+          onSubmit={handleSubmit}
+          className={cx('byline-form', styles.form)}
+          inert={isBusy ? true : undefined}
+        >
+          <div className={cx('byline-form-heading-row', styles['heading-row'])}>
+            <h1 className={cx('byline-form-heading', styles.heading)}>{computedHeading}</h1>
+            {/* Source-locale anchor indicator removed pending heading-layout work.
             To re-enable: render `<SourceLocaleBadge locale={sourceLocale} />`
             here from `initialData.sourceLocale` (mismatch-only is the intended
             end state). See docs/08-internationalization/index.md. */}
-        {headerSlot}
-      </div>
-      <div className={cx('byline-form-status-bar', styles['status-bar'])}>
-        <div className={cx('byline-form-status-details', styles['status-details'])}>
-          <FormStatusDisplay
-            initialData={initialData}
-            workflowStatuses={workflowStatuses}
-            publishedVersion={publishedVersion}
-            onUnpublish={onUnpublish}
-            afterStatusCells={
-              <ScheduledPublicationCell state={scheduling.state} timeZone={scheduling.timeZone} />
-            }
-          />
-        </div>
-        <div className={cx('byline-form-actions', styles.actions)}>
-          <Button
-            className={cx('byline-form-actions-button', styles['actions-button'])}
-            size="sm"
-            intent="noeffect"
-            type="button"
-            onClick={handleCancel}
-          >
-            {hasChanges === false ? t('common.actions.close') : t('common.actions.cancel')}
-          </Button>
-          <Button
-            className={cx('byline-form-actions-button', styles['actions-button'])}
-            size="sm"
-            type="submit"
-            disabled={hasChanges === false || isUploading || isSubmitting}
-          >
-            {isUploading ? t('forms.actions.uploading') : t('common.actions.save')}
-          </Button>
-          {primaryStatus && onStatusChange && (
-            <div className={cx('byline-form-actions-status-wrap', styles['actions-status-wrap'])}>
-              <ComboButton
-                buttonClassName={cx(
-                  'byline-form-actions-combo-button',
-                  styles['actions-combo-button']
-                )}
-                triggerClassName={cx(
-                  'byline-form-actions-combo-trigger',
-                  styles['actions-combo-trigger']
-                )}
-                options={secondaryStatuses.map((s) => ({
-                  label: isTerminal
-                    ? t('forms.actions.revertTo', { label: s.label ?? s.name })
-                    : (s.verb ?? s.label ?? s.name),
-                  value: s.name,
-                }))}
-                sideOffset={5}
+            {headerSlot}
+          </div>
+          <div className={cx('byline-form-status-bar', styles['status-bar'])}>
+            <div className={cx('byline-form-status-details', styles['status-details'])}>
+              <FormStatusDisplay
+                initialData={initialData}
+                workflowStatuses={workflowStatuses}
+                publishedVersion={publishedVersion}
+                onUnpublish={onUnpublish}
+                afterStatusCells={
+                  <ScheduledPublicationCell
+                    state={scheduling.state}
+                    timeZone={scheduling.timeZone}
+                  />
+                }
+              />
+            </div>
+            <div className={cx('byline-form-actions', styles.actions)}>
+              <Button
+                className={cx('byline-form-actions-button', styles['actions-button'])}
                 size="sm"
+                intent="noeffect"
                 type="button"
-                intent={isTerminal ? 'info' : 'success'}
-                disabled={statusBusy}
-                onOptionSelect={async (value: string) => {
-                  if (hasChanges) {
-                    setShowUnsavedModal(true)
-                    return
-                  }
-                  setStatusBusy(true)
-                  try {
-                    await onStatusChange(value)
-                  } finally {
-                    setStatusBusy(false)
-                  }
-                }}
-                onButtonClick={
-                  isTerminal
-                    ? undefined
-                    : async () => {
-                        if (hasChanges) {
-                          setShowUnsavedModal(true)
-                          return
-                        }
-                        setStatusBusy(true)
-                        try {
-                          await onStatusChange(primaryStatus.name)
-                        } finally {
-                          setStatusBusy(false)
-                        }
+                onClick={handleCancel}
+              >
+                {hasChanges === false ? t('common.actions.close') : t('common.actions.cancel')}
+              </Button>
+              <Button
+                className={cx('byline-form-actions-button', styles['actions-button'])}
+                size="sm"
+                type="submit"
+                disabled={hasChanges === false || isUploading || isSubmitting}
+                aria-label={isSubmitting ? t('common.actions.save') : undefined}
+              >
+                {isUploading ? (
+                  t('forms.actions.uploading')
+                ) : (
+                  <span className={cx('byline-form-save-content', styles['save-content'])}>
+                    <span
+                      className={cx(
+                        'byline-form-save-label',
+                        styles['save-label'],
+                        isSubmitting && styles['save-label-hidden']
+                      )}
+                    >
+                      {t('common.actions.save')}
+                    </span>
+                    {isSubmitting ? (
+                      <span className={cx('byline-form-save-loader', styles['save-loader'])}>
+                        <LoaderEllipsis size={28} aria-hidden="true" />
+                      </span>
+                    ) : null}
+                  </span>
+                )}
+              </Button>
+              {primaryStatus && onStatusChange && (
+                <div
+                  className={cx('byline-form-actions-status-wrap', styles['actions-status-wrap'])}
+                >
+                  <ComboButton
+                    buttonClassName={cx(
+                      'byline-form-actions-combo-button',
+                      styles['actions-combo-button']
+                    )}
+                    triggerClassName={cx(
+                      'byline-form-actions-combo-trigger',
+                      styles['actions-combo-trigger']
+                    )}
+                    options={secondaryStatuses.map((s) => ({
+                      label: isTerminal
+                        ? t('forms.actions.revertTo', { label: s.label ?? s.name })
+                        : (s.verb ?? s.label ?? s.name),
+                      value: s.name,
+                    }))}
+                    sideOffset={5}
+                    size="sm"
+                    type="button"
+                    intent={isTerminal ? 'info' : 'success'}
+                    disabled={statusBusy}
+                    onOptionSelect={async (value: string) => {
+                      if (hasChanges) {
+                        setShowUnsavedModal(true)
+                        return
                       }
+                      setStatusBusy(true)
+                      try {
+                        await onStatusChange(value)
+                      } finally {
+                        setStatusBusy(false)
+                      }
+                    }}
+                    onButtonClick={
+                      isTerminal
+                        ? undefined
+                        : async () => {
+                            if (hasChanges) {
+                              setShowUnsavedModal(true)
+                              return
+                            }
+                            setStatusBusy(true)
+                            try {
+                              await onStatusChange(primaryStatus.name)
+                            } finally {
+                              setStatusBusy(false)
+                            }
+                          }
+                    }
+                  >
+                    {statusBusy
+                      ? '...'
+                      : isTerminal
+                        ? (primaryStatus.label ?? primaryStatus.name)
+                        : (primaryStatus.verb ?? primaryStatus.label ?? primaryStatus.name)}
+                  </ComboButton>
+                </div>
+              )}
+              <DocumentActions
+                publishedVersion={publishedVersion}
+                onUnpublish={onUnpublish}
+                onDelete={onDelete}
+                onDuplicate={onDuplicate}
+                sourceTitle={
+                  useAsTitle != null && initialData != null
+                    ? ((initialData as Record<string, unknown>)[useAsTitle] as
+                        | string
+                        | null
+                        | undefined)
+                    : null
                 }
-              >
-                {statusBusy
-                  ? '...'
-                  : isTerminal
-                    ? (primaryStatus.label ?? primaryStatus.name)
-                    : (primaryStatus.verb ?? primaryStatus.label ?? primaryStatus.name)}
-              </ComboButton>
-            </div>
-          )}
-          <DocumentActions
-            publishedVersion={publishedVersion}
-            onUnpublish={onUnpublish}
-            onDelete={onDelete}
-            onDuplicate={onDuplicate}
-            sourceTitle={
-              useAsTitle != null && initialData != null
-                ? ((initialData as Record<string, unknown>)[useAsTitle] as
-                    | string
-                    | null
-                    | undefined)
-                : null
-            }
-            onCopyToLocale={onCopyToLocale}
-            sourceLocale={contentLocale}
-            contentLocales={contentLocales}
-            hasUnsavedChanges={hasChanges}
-            onUnsavedChanges={() => setShowUnsavedModal(true)}
-            onDeleteLocale={onDeleteLocale}
-            defaultLocale={defaultLocale}
-            availableLocales={initialData?._availableVersionLocales as string[] | undefined}
-            scheduledPublicationState={scheduling.state}
-            onSchedulePublication={scheduling.openSchedule}
-            onConfirmScheduledPublication={scheduling.confirm}
-            onCancelScheduledPublication={scheduling.cancel}
-          />
-        </div>
-      </div>
-      <ScheduledPublicationNotice
-        state={scheduling.state}
-        timeZone={scheduling.timeZone}
-        busy={scheduling.busy}
-        onConfirm={scheduling.confirm}
-        onReschedule={scheduling.openSchedule}
-        onCancel={scheduling.cancel}
-      />
-      {scheduling.modal}
-      {restoreWarnings && restoreWarnings.length > 0 && (
-        <Alert
-          className="m-0 mt-4"
-          intent="warning"
-          icon={true}
-          close={false}
-          title={t('forms.restoreWarnings.title')}
-        >
-          <p>{t('forms.restoreWarnings.body', { count: restoreWarnings.length })}</p>
-          <ul>
-            {restoreWarnings.map((w) => (
-              <li key={w}>{w}</li>
-            ))}
-          </ul>
-        </Alert>
-      )}
-      <div className={cx('byline-form-layout', styles.layout)}>
-        <div className={cx('byline-form-content', styles.content)}>
-          {layout.main.map((name) => renderItem(name))}
-        </div>
-        <div className={cx('byline-form-sidebar', styles.sidebar)}>
-          {showPath &&
-            (useAsPath ||
-              (typeof initialData?.path === 'string' && initialData.path.length > 0)) && (
-              <PathWidget
-                useAsPath={useAsPath}
-                collectionPath={collectionPath ?? ''}
+                onCopyToLocale={onCopyToLocale}
+                sourceLocale={contentLocale}
+                contentLocales={contentLocales}
+                hasUnsavedChanges={hasChanges}
+                onUnsavedChanges={() => setShowUnsavedModal(true)}
+                onDeleteLocale={onDeleteLocale}
                 defaultLocale={defaultLocale}
-                activeLocale={contentLocale}
-                mode={mode}
-                slugifier={pathSlugifier}
-                sourceLocked={pathSourceLocked}
+                availableLocales={initialData?._availableVersionLocales as string[] | undefined}
+                scheduledPublicationState={scheduling.state}
+                onSchedulePublication={scheduling.openSchedule}
+                onConfirmScheduledPublication={scheduling.confirm}
+                onCancelScheduledPublication={scheduling.cancel}
               />
-            )}
-          {tree && mode === 'edit' && typeof initialData?.id === 'string' && (
-            <TreePlacementWidget
-              collectionPath={collectionPath ?? ''}
-              documentId={initialData.id as string}
-              useAsTitle={useAsTitle}
-            />
+            </div>
+          </div>
+          <ScheduledPublicationNotice
+            state={scheduling.state}
+            timeZone={scheduling.timeZone}
+            busy={scheduling.busy}
+            onConfirm={scheduling.confirm}
+            onReschedule={scheduling.openSchedule}
+            onCancel={scheduling.cancel}
+          />
+          {scheduling.modal}
+          {restoreWarnings && restoreWarnings.length > 0 && (
+            <Alert
+              className="m-0 mt-4"
+              intent="warning"
+              icon={true}
+              close={false}
+              title={t('forms.restoreWarnings.title')}
+            >
+              <p>{t('forms.restoreWarnings.body', { count: restoreWarnings.length })}</p>
+              <ul>
+                {restoreWarnings.map((w) => (
+                  <li key={w}>{w}</li>
+                ))}
+              </ul>
+            </Alert>
           )}
-          {advertiseLocales && (
-            <AvailableLocalesWidget
-              contentLocales={contentLocales ?? []}
-              availableVersionLocales={
-                (initialData?._availableVersionLocales as string[] | undefined) ?? []
-              }
+          <div className={cx('byline-form-layout', styles.layout)}>
+            <div className={cx('byline-form-content', styles.content)}>
+              {layout.main.map((name) => renderItem(name))}
+            </div>
+            <div className={cx('byline-form-sidebar', styles.sidebar)}>
+              {showPath &&
+                (useAsPath ||
+                  (typeof initialData?.path === 'string' && initialData.path.length > 0)) && (
+                  <PathWidget
+                    useAsPath={useAsPath}
+                    collectionPath={collectionPath ?? ''}
+                    defaultLocale={defaultLocale}
+                    activeLocale={contentLocale}
+                    mode={mode}
+                    slugifier={pathSlugifier}
+                    sourceLocked={pathSourceLocked}
+                  />
+                )}
+              {tree && mode === 'edit' && typeof initialData?.id === 'string' && (
+                <TreePlacementWidget
+                  collectionPath={collectionPath ?? ''}
+                  documentId={initialData.id as string}
+                  useAsTitle={useAsTitle}
+                />
+              )}
+              {advertiseLocales && (
+                <AvailableLocalesWidget
+                  contentLocales={contentLocales ?? []}
+                  availableVersionLocales={
+                    (initialData?._availableVersionLocales as string[] | undefined) ?? []
+                  }
+                />
+              )}
+              {(layout.sidebar ?? []).map((name) => renderItem(name))}
+            </div>
+          </div>
+          {showUnsavedModal && <UnsavedChangesModal onClose={() => setShowUnsavedModal(false)} />}
+          {pendingSystemFieldsSubmit != null && (
+            <SystemFieldsConfirmModal
+              contentDirty={pendingSystemFieldsSubmit.contentDirty}
+              pathDirty={pendingSystemFieldsSubmit.pathDirty}
+              availableLocalesDirty={pendingSystemFieldsSubmit.availableLocalesDirty}
+              onCancel={() => setPendingSystemFieldsSubmit(null)}
+              onConfirm={() => {
+                const payload = pendingSystemFieldsSubmit
+                setPendingSystemFieldsSubmit(null)
+                void submitPayload(payload)
+              }}
             />
           )}
-          {(layout.sidebar ?? []).map((name) => renderItem(name))}
-        </div>
+          {guard.isBlocked && (
+            <NavigationGuardModal onStay={guard.stay} onProceed={guard.proceed} />
+          )}
+        </form>
       </div>
-      {showUnsavedModal && <UnsavedChangesModal onClose={() => setShowUnsavedModal(false)} />}
-      {pendingSystemFieldsSubmit != null && (
-        <SystemFieldsConfirmModal
-          contentDirty={pendingSystemFieldsSubmit.contentDirty}
-          pathDirty={pendingSystemFieldsSubmit.pathDirty}
-          availableLocalesDirty={pendingSystemFieldsSubmit.availableLocalesDirty}
-          onCancel={() => setPendingSystemFieldsSubmit(null)}
-          onConfirm={() => {
-            const payload = pendingSystemFieldsSubmit
-            setPendingSystemFieldsSubmit(null)
-            void submitPayload(payload)
-          }}
-        />
-      )}
-      {guard.isBlocked && <NavigationGuardModal onStay={guard.stay} onProceed={guard.proceed} />}
-    </form>
+    </>
   )
 }