@byline/admin 6.2.0 → 6.2.1

package/dist/forms/form-renderer.js

@@ -3,42 +3,26 @@ 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, LoaderEllipsis } from "@byline/ui/react";
 import clsx from "clsx";
-import { sliceFieldAdmin } from "../fields/field-admin.js";
-import { FieldRenderer } from "../fields/field-renderer.js";
 import { useBylineFieldServices } from "../fields/field-services-context.js";
-import { AdminGroup } from "../presentation/group.js";
-import { AdminRow } from "../presentation/row.js";
-import { AdminTabs, tabPanelId, tabTriggerId } from "../presentation/tabs.js";
-import { AvailableLocalesWidget } from "./available-locales-widget.js";
-import { DocumentActions } from "./document-actions.js";
 import { FormProvider, useFieldValue, useFormContext } from "./form-context.js";
+import { FormLayout } from "./form-layout.js";
 import { NavigationGuardModal, SystemFieldsConfirmModal, UnsavedChangesModal } from "./form-modals.js";
+import { FormConcurrencyNotices, FormHeadingRow, FormSidebarWidgets, FormStatusBar } from "./form-page-chrome.js";
 import form_renderer_module from "./form-renderer.module.js";
-import { FormStatusDisplay } from "./form-status-display.js";
 import { useNavigationGuardAdapter } from "./navigation-guard.js";
-import { PathWidget } from "./path-widget.js";
-import { ScheduledPublicationCell, ScheduledPublicationNotice, useScheduledPublication } from "./scheduled-publication-control.js";
+import { useScheduledPublication } from "./scheduled-publication-control.js";
 import { computeStatusTransitions } from "./status-transitions.js";
-import { TreePlacementWidget } from "./tree-placement-widget.js";
-import { executeUploadsWithProgress } from "./upload-executor.js";
-import { useFormLayout } from "./use-form-layout.js";
+import { useFormSubmission } from "./use-form-submission.js";
 const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRevision, onMutationError, onTreeMutationCommitted, scheduledPublicationsNeedReconfirmation = false, scheduledPublicationsHref, onReloadDocument, fields, onSubmit, onCancel, onStatusChange, onUnpublish, scheduledPublication, onSchedulePublication, onConfirmScheduledPublication, onCancelScheduledPublication, onDelete, onDuplicate, onCopyToLocale, onDeleteLocale, contentLocales, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, showPath = true, heading, advertiseLocales, tree, headingLabel, headerSlot, collectionPath, initialLocale, onLocaleChange, defaultLocale = 'en', useNavigationGuard: useNavigationGuardProp, restoreWarnings, _activeTabBySet, _onTabChange })=>{
-    const { getFieldValues, runFieldHooks, validateForm, errors: initialErrors, hasChanges: hasChangesFn, resetHasChanges, getPatches, getDirtyBreakdown, getSystemPath, getSystemAvailableLocales, subscribeErrors, subscribeMeta, setFieldValue, setFieldError, getPendingUploads, clearPendingUploads, setFieldUploading } = useFormContext();
+    const { hasChanges: hasChangesFn, subscribeMeta } = useFormContext();
     const { t } = useTranslation('byline-admin');
-    const [errors, setErrors] = useState(initialErrors);
     const [hasChanges, setHasChanges] = useState(hasChangesFn());
     const [statusBusy, setStatusBusy] = useState(false);
-    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);
     const scheduling = useScheduledPublication({
         disabled: mutationsBlocked,
@@ -64,7 +48,6 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
     }, [
         initialLocale
     ]);
-    const { fieldByName, tabSetByName, rowByName, groupByName, layout, fieldToTabPath } = useFormLayout(adminConfig, fields);
     const tabSets = adminConfig?.tabSets ?? [];
     const initialActiveTabBySet = useMemo(()=>{
         const result = {};
@@ -88,7 +71,6 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
     }, [
         _onTabChange
     ]);
-    const [formData, setFormData] = useState(()=>getFieldValues());
     const liveTitle = useFieldValue(useAsTitle ?? '');
     const computedHeading = heading || liveTitle || (headingLabel ? 'create' === mode ? t('forms.heading.createLabel', {
         label: headingLabel
@@ -120,17 +102,30 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
     ]);
     const currentStatus = initialData?.status;
     const { primaryStatus, secondaryStatuses, isTerminal } = computeStatusTransitions(currentStatus, workflowStatuses, nextStatus);
-    useEffect(()=>subscribeErrors((newErrors)=>setErrors(newErrors)), [
-        subscribeErrors
-    ]);
     useEffect(()=>subscribeMeta(()=>setHasChanges(hasChangesFn())), [
         subscribeMeta,
         hasChangesFn
     ]);
-    useEffect(()=>subscribeMeta(()=>setFormData(getFieldValues())), [
-        subscribeMeta,
-        getFieldValues
-    ]);
+    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 submission = useFormSubmission({
+        mode,
+        fields,
+        documentId: 'edit' === mode && 'string' == typeof initialData?.id ? initialData.id : void 0,
+        advertiseLocales,
+        onSubmit,
+        isBlocked: ()=>mutationBlockedRef.current,
+        onBeforeBusy: captureFocusBeforeBusy
+    });
+    const isUploading = 'uploading' === submission.phase.kind;
+    const isSubmitting = 'submitting' === submission.phase.kind;
+    const isBusy = submission.isBusy;
+    const pendingSystemFieldsSubmit = 'confirmingSystemFields' === submission.phase.kind ? submission.phase.payload : null;
     useEffect(()=>{
         if (isBusy || !restoreFocusAfterBusyRef.current) return;
         restoreFocusAfterBusyRef.current = false;
@@ -150,161 +145,13 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
         isBusy,
         mutationIssue
     ]);
-    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();
     };
-    const submitPayload = useCallback(async (payload)=>{
-        if (mutationBlockedRef.current || 'function' != typeof onSubmit) return;
-        if (submittingRef.current) return;
-        submittingRef.current = true;
-        captureFocusBeforeBusy();
-        setIsSubmitting(true);
-        try {
-            await onSubmit(payload);
-            resetHasChanges();
-        } catch  {} finally{
-            submittingRef.current = false;
-            setIsSubmitting(false);
-        }
-    }, [
-        captureFocusBeforeBusy,
-        onSubmit,
-        resetHasChanges
-    ]);
     const handleSubmit = (e)=>{
-        if (mutationBlockedRef.current) return void e.preventDefault();
         e.preventDefault();
-        (async ()=>{
-            const hookErrors = await runFieldHooks(fields);
-            const formErrors = validateForm(fields);
-            const allErrors = [
-                ...hookErrors,
-                ...formErrors
-            ];
-            if (allErrors.length > 0) return void console.error('Form validation failed:', allErrors);
-            if (mutationBlockedRef.current) return;
-            const pendingUploads = getPendingUploads();
-            if (pendingUploads.size > 0) {
-                captureFocusBeforeBusy();
-                setIsUploading(true);
-                try {
-                    const uploadResult = await executeUploadsWithProgress(pendingUploads, uploadField, ({ fieldPath, status })=>{
-                        setFieldUploading(fieldPath, 'uploading' === status);
-                    }, {
-                        documentId: 'edit' === mode && 'string' == typeof initialData?.id ? initialData.id : void 0,
-                        fields,
-                        getFormValues: getFieldValues
-                    });
-                    if (!uploadResult.allSucceeded) {
-                        for (const [fieldPath, errorMessage] of uploadResult.errors.entries())setFieldError(fieldPath, t('forms.uploadFailedFieldError', {
-                            message: errorMessage
-                        }));
-                        console.error('One or more uploads failed:', uploadResult.errors);
-                        setIsUploading(false);
-                        return;
-                    }
-                    for (const [fieldPath, storedFile] of uploadResult.successful.entries())setFieldValue(fieldPath, storedFile);
-                    clearPendingUploads();
-                } catch (err) {
-                    console.error('Upload execution error:', err);
-                    setIsUploading(false);
-                    return;
-                }
-                setIsUploading(false);
-            }
-            const data = getFieldValues();
-            const patches = getPatches();
-            const { contentDirty, pathDirty, availableLocalesDirty, reason } = getDirtyBreakdown();
-            const systemPath = getSystemPath();
-            const systemAvailableLocales = advertiseLocales ? getSystemAvailableLocales() : void 0;
-            const payload = {
-                data,
-                patches,
-                contentDirty,
-                pathDirty,
-                systemPath,
-                availableLocalesDirty,
-                systemAvailableLocales
-            };
-            if ('edit' === mode && ('direct-write' === reason || 'both' === reason)) return void setPendingSystemFieldsSubmit(payload);
-            await submitPayload(payload);
-        })();
-    };
-    const tabErrorCountsBySet = useMemo(()=>{
-        const result = {};
-        for (const err of errors){
-            const path = fieldToTabPath.get(err.field);
-            if (path) {
-                result[path.tabSetName] ??= {};
-                result[path.tabSetName][path.tabName] = (result[path.tabSetName]?.[path.tabName] ?? 0) + 1;
-            }
-        }
-        return result;
-    }, [
-        errors,
-        fieldToTabPath
-    ]);
-    const renderField = (fieldName)=>{
-        const field = fieldByName.get(fieldName);
-        if (!field) return null;
-        return /*#__PURE__*/ jsx(FieldRenderer, {
-            field: field,
-            defaultValue: initialData?.fields?.[field.name],
-            contentLocale: contentLocale,
-            components: adminConfig?.fields?.[field.name]?.components,
-            editor: adminConfig?.fields?.[field.name]?.editor,
-            fieldAdmin: sliceFieldAdmin(adminConfig?.fields, field.name)
-        }, field.name);
-    };
-    const renderItem = (name)=>{
-        const tabSet = tabSetByName.get(name);
-        if (tabSet) return renderTabSet(tabSet);
-        const group = groupByName.get(name);
-        if (group) return renderGroup(group);
-        const row = rowByName.get(name);
-        if (row) return renderRow(row);
-        return renderField(name);
-    };
-    const renderRow = (row)=>/*#__PURE__*/ jsx(AdminRow, {
-            children: row.fields.map((name)=>renderField(name))
-        }, `row:${row.name}`);
-    const renderGroup = (group)=>/*#__PURE__*/ jsx(AdminGroup, {
-            label: group.label,
-            children: group.fields.map((name)=>renderItem(name))
-        }, `group:${group.name}`);
-    const renderTabSet = (set)=>{
-        const visibleTabs = set.tabs.filter((tab)=>!tab.condition || tab.condition(formData));
-        const requested = activeTabBySet[set.name] ?? '';
-        const resolvedActive = visibleTabs.length > 0 && !visibleTabs.some((t)=>t.name === requested) ? visibleTabs[0]?.name ?? requested : requested;
-        const activeTab = visibleTabs.find((t)=>t.name === resolvedActive);
-        const idBase = `tabset:${set.name}`;
-        return /*#__PURE__*/ jsxs("div", {
-            className: clsx('byline-form-tabset', form_renderer_module.tabset),
-            children: [
-                visibleTabs.length > 0 && /*#__PURE__*/ jsx(AdminTabs, {
-                    idBase: idBase,
-                    tabs: visibleTabs,
-                    activeTab: resolvedActive,
-                    onChange: (tabName)=>handleTabChange(set.name, tabName),
-                    errorCounts: tabErrorCountsBySet[set.name],
-                    className: clsx('byline-form-tabset-tabs', form_renderer_module["tabset-tabs"])
-                }),
-                activeTab && /*#__PURE__*/ jsx("div", {
-                    role: "tabpanel",
-                    id: tabPanelId(idBase, activeTab.name),
-                    "aria-labelledby": tabTriggerId(idBase, activeTab.name),
-                    className: clsx('byline-form-tabset-fields', form_renderer_module["tabset-fields"]),
-                    children: activeTab.fields.map((name)=>renderItem(name))
-                })
-            ]
-        }, idBase);
+        if (mutationBlockedRef.current) return;
+        submission.submit();
     };
     const busyAnnouncement = isUploading ? t('forms.actions.uploading') : isSubmitting ? t('forms.actions.saving') : '';
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -325,248 +172,84 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
                     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, {
-                                        disabled: mutationsBlocked || discarding,
-                                        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: mutationsBlocked || discarding || 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: mutationsBlocked || discarding || statusBusy,
-                                                onOptionSelect: async (value)=>{
-                                                    if (mutationBlockedRef.current) return;
-                                                    if (hasChanges) return void setShowUnsavedModal(true);
-                                                    setStatusBusy(true);
-                                                    try {
-                                                        await onStatusChange(value);
-                                                    } catch (error) {
-                                                        onMutationError?.(error);
-                                                    } finally{
-                                                        setStatusBusy(false);
-                                                    }
-                                                },
-                                                onButtonClick: isTerminal ? void 0 : async ()=>{
-                                                    if (mutationBlockedRef.current) return;
-                                                    if (hasChanges) return void setShowUnsavedModal(true);
-                                                    setStatusBusy(true);
-                                                    try {
-                                                        await onStatusChange(primaryStatus.name);
-                                                    } catch (error) {
-                                                        onMutationError?.(error);
-                                                    } finally{
-                                                        setStatusBusy(false);
-                                                    }
-                                                },
-                                                children: statusBusy ? '...' : isTerminal ? primaryStatus.label ?? primaryStatus.name : primaryStatus.verb ?? primaryStatus.label ?? primaryStatus.name
-                                            })
-                                        }),
-                                        /*#__PURE__*/ jsx(DocumentActions, {
-                                            disabled: mutationsBlocked || discarding,
-                                            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
-                                        })
-                                    ]
-                                })
-                            ]
-                        }),
-                        (mutationIssue || scheduledPublicationsNeedReconfirmation) && /*#__PURE__*/ jsxs("div", {
-                            ref: warningRef,
-                            tabIndex: -1,
-                            role: "alert",
-                            "aria-live": "assertive",
-                            className: clsx('byline-document-concurrency', form_renderer_module.concurrency),
-                            children: [
-                                mutationIssue && /*#__PURE__*/ jsxs(Alert, {
-                                    intent: "warning",
-                                    icon: true,
-                                    close: false,
-                                    title: t(`documentConcurrency.${mutationIssue}Title`),
-                                    children: [
-                                        /*#__PURE__*/ jsx("p", {
-                                            children: t(`documentConcurrency.${mutationIssue}`)
-                                        }),
-                                        'committed' !== mutationIssue && /*#__PURE__*/ jsx(Button, {
-                                            type: "button",
-                                            disabled: discarding,
-                                            onClick: ()=>{
-                                                setReloadFailed(false);
-                                                setDiscarding(true);
-                                            },
-                                            children: t('documentConcurrency.reloadAction')
-                                        }),
-                                        reloadFailed && /*#__PURE__*/ jsx("p", {
-                                            children: t('documentConcurrency.reloadFailed')
-                                        })
-                                    ]
-                                }),
-                                scheduledPublicationsNeedReconfirmation && /*#__PURE__*/ jsxs(Alert, {
-                                    intent: "warning",
-                                    icon: true,
-                                    close: false,
-                                    title: t('documentConcurrency.schedulesTitle'),
-                                    children: [
-                                        /*#__PURE__*/ jsx("p", {
-                                            children: t('documentConcurrency.schedules')
-                                        }),
-                                        scheduledPublicationsHref && /*#__PURE__*/ jsx("a", {
-                                            href: scheduledPublicationsHref,
-                                            children: t('documentConcurrency.reviewSchedules')
-                                        })
-                                    ]
-                                })
-                            ]
+                        /*#__PURE__*/ jsx(FormHeadingRow, {
+                            heading: computedHeading,
+                            headerSlot: headerSlot
                         }),
-                        /*#__PURE__*/ jsx(ScheduledPublicationNotice, {
-                            state: scheduling.state,
-                            timeZone: scheduling.timeZone,
-                            busy: mutationsBlocked || discarding || scheduling.busy,
-                            onConfirm: scheduling.confirm,
-                            onReschedule: scheduling.openSchedule,
-                            onCancel: scheduling.cancel
+                        /*#__PURE__*/ jsx(FormStatusBar, {
+                            disabled: mutationsBlocked || discarding,
+                            initialData: initialData,
+                            workflowStatuses: workflowStatuses,
+                            publishedVersion: publishedVersion,
+                            scheduling: scheduling,
+                            hasChanges: hasChanges,
+                            isUploading: isUploading,
+                            isSubmitting: isSubmitting,
+                            onCancel: handleCancel,
+                            transitions: {
+                                primaryStatus,
+                                secondaryStatuses,
+                                isTerminal
+                            },
+                            statusBusy: statusBusy,
+                            onStatusBusyChange: setStatusBusy,
+                            onStatusChange: onStatusChange,
+                            onMutationError: onMutationError,
+                            isBlocked: ()=>mutationBlockedRef.current,
+                            onUnsavedChanges: ()=>setShowUnsavedModal(true),
+                            onUnpublish: onUnpublish,
+                            onDelete: onDelete,
+                            onDuplicate: onDuplicate,
+                            onCopyToLocale: onCopyToLocale,
+                            onDeleteLocale: onDeleteLocale,
+                            useAsTitle: useAsTitle,
+                            contentLocale: contentLocale,
+                            contentLocales: contentLocales,
+                            defaultLocale: defaultLocale
                         }),
-                        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__*/ jsx(FormConcurrencyNotices, {
+                            disabled: mutationsBlocked || discarding,
+                            mutationIssue: mutationIssue,
+                            scheduledPublicationsNeedReconfirmation: scheduledPublicationsNeedReconfirmation,
+                            scheduledPublicationsHref: scheduledPublicationsHref,
+                            warningRef: warningRef,
+                            discarding: discarding,
+                            reloadFailed: reloadFailed,
+                            onDiscardRequested: ()=>{
+                                setReloadFailed(false);
+                                setDiscarding(true);
+                            },
+                            scheduling: scheduling,
+                            restoreWarnings: restoreWarnings
                         }),
-                        /*#__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 || adminConfig?.lockPath === true || 'string' == typeof initialData?.path && initialData.path.length > 0) && /*#__PURE__*/ jsx(PathWidget, {
-                                            disabled: mutationsBlocked || discarding,
-                                            useAsPath: useAsPath,
-                                            collectionPath: collectionPath ?? '',
-                                            defaultLocale: defaultLocale,
-                                            activeLocale: contentLocale,
-                                            mode: mode,
-                                            slugifier: pathSlugifier,
-                                            sourceLocked: pathSourceLocked,
-                                            lockPath: adminConfig?.lockPath
-                                        }),
-                                        tree && 'edit' === mode && 'string' == typeof initialData?.id && /*#__PURE__*/ jsx(TreePlacementWidget, {
-                                            disabled: mutationsBlocked || discarding,
-                                            onMutationError: onMutationError,
-                                            onCommitted: onTreeMutationCommitted,
-                                            expectedRevision: observedRevision ?? initialData.revision,
-                                            collectionPath: collectionPath ?? '',
-                                            documentId: initialData.id,
-                                            useAsTitle: useAsTitle
-                                        }),
-                                        advertiseLocales && /*#__PURE__*/ jsx(AvailableLocalesWidget, {
-                                            disabled: mutationsBlocked || discarding,
-                                            contentLocales: contentLocales ?? [],
-                                            availableVersionLocales: initialData?._availableVersionLocales ?? []
-                                        }),
-                                        (layout.sidebar ?? []).map((name)=>renderItem(name))
-                                    ]
-                                })
-                            ]
+                        /*#__PURE__*/ jsx(FormLayout, {
+                            fields: fields,
+                            adminConfig: adminConfig,
+                            initialData: initialData,
+                            activeLocale: contentLocale,
+                            collectionPath: collectionPath ?? void 0,
+                            activeTabBySet: activeTabBySet,
+                            onTabChange: handleTabChange,
+                            sidebarSlot: /*#__PURE__*/ jsx(FormSidebarWidgets, {
+                                disabled: mutationsBlocked || discarding,
+                                mode: mode,
+                                initialData: initialData,
+                                collectionPath: collectionPath ?? '',
+                                defaultLocale: defaultLocale,
+                                contentLocale: contentLocale,
+                                contentLocales: contentLocales,
+                                showPath: showPath,
+                                useAsPath: useAsPath,
+                                lockPath: adminConfig?.lockPath,
+                                pathSlugifier: pathSlugifier,
+                                pathSourceLocked: pathSourceLocked,
+                                tree: tree,
+                                useAsTitle: useAsTitle,
+                                advertiseLocales: advertiseLocales,
+                                observedRevision: observedRevision,
+                                onMutationError: onMutationError,
+                                onTreeMutationCommitted: onTreeMutationCommitted
+                            })
                         }),
                         showUnsavedModal && /*#__PURE__*/ jsx(UnsavedChangesModal, {
                             onClose: ()=>setShowUnsavedModal(false)
@@ -575,11 +258,9 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
                             contentDirty: pendingSystemFieldsSubmit.contentDirty,
                             pathDirty: pendingSystemFieldsSubmit.pathDirty,
                             availableLocalesDirty: pendingSystemFieldsSubmit.availableLocalesDirty,
-                            onCancel: ()=>setPendingSystemFieldsSubmit(null),
+                            onCancel: submission.cancelSystemFields,
                             onConfirm: ()=>{
-                                const payload = pendingSystemFieldsSubmit;
-                                setPendingSystemFieldsSubmit(null);
-                                submitPayload(payload);
+                                submission.confirmSystemFields();
                             }
                         }),
                         guard.isBlocked && /*#__PURE__*/ jsx(NavigationGuardModal, {

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

@@ -42,6 +42,8 @@ const form_renderer_module = {
     actionsComboTrigger: "actions-combo-trigger-bmXUzc",
     concurrency: "concurrency-UT6bX5",
     layout: "layout-WTbLYr",
+    "layout-stacked": "layout-stacked-yNPTOa",
+    layoutStacked: "layout-stacked-yNPTOa",
     content: "content-_P5cdJ",
     sidebar: "sidebar-WsxX88",
     tabset: "tabset-xfaMkP",

package/dist/forms/form-renderer_module.css

@@ -218,6 +218,19 @@
   }
 }
 
+:is(.layout-stacked-yNPTOa, .byline-form-layout-stacked) {
+  gap: var(--spacing-12);
+  padding-top: var(--spacing-32);
+  flex-direction: column;
+  display: flex;
+}
+
+@media (min-width: 60rem) {
+  :is(.layout-stacked-yNPTOa, .byline-form-layout-stacked) {
+    gap: var(--spacing-32);
+  }
+}
+
 :is(.content-_P5cdJ, .byline-form-content) {
   gap: var(--spacing-20);
   flex-direction: column;