@byline/admin 2.5.2 → 2.6.0

package/dist/forms/form-renderer.js

@@ -0,0 +1,597 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "@byline/i18n/react";
+import { Alert, Button, ComboButton, Modal } from "@byline/ui/react";
+import classnames from "classnames";
+import { FieldRenderer } from "../fields/field-renderer.js";
+import { useBylineFieldServices } from "../fields/field-services-context.js";
+import { LocalDateTime } from "../fields/local-date-time.js";
+import { AdminGroup } from "../presentation/group.js";
+import { AdminRow } from "../presentation/row.js";
+import { AdminTabs } from "../presentation/tabs.js";
+import { DocumentActions } from "./document-actions.js";
+import { FormProvider, useFieldValue, useFormContext } from "./form-context.js";
+import form_renderer_module from "./form-renderer.module.js";
+import { useNavigationGuardAdapter } from "./navigation-guard.js";
+import { PathWidget } from "./path-widget.js";
+import { executeUploadsWithProgress } from "./upload-executor.js";
+const FormStatusDisplay = ({ initialData, workflowStatuses, publishedVersion, onUnpublish })=>{
+    const { t } = useTranslation('byline-admin');
+    const statusCode = initialData?.status;
+    const statusLabel = workflowStatuses?.find((s)=>s.name === statusCode)?.label ?? statusCode;
+    const showStatusCell = (workflowStatuses?.length ?? 0) > 1;
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('byline-form-status', form_renderer_module.status),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames('byline-form-status-meta', form_renderer_module["status-meta"]),
+                children: [
+                    showStatusCell && /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-form-status-cell', form_renderer_module["status-cell"]),
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: classnames('byline-form-status-muted', form_renderer_module["status-muted"]),
+                                children: t('forms.status.label')
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: classnames('byline-form-status-trunc', form_renderer_module["status-trunc"]),
+                                children: statusLabel
+                            })
+                        ]
+                    }),
+                    initialData?.updatedAt != null && /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-form-status-cell', form_renderer_module["status-cell"]),
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: classnames('byline-form-status-muted', form_renderer_module["status-muted"]),
+                                children: t('forms.status.lastModified')
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: classnames('byline-form-status-trunc', form_renderer_module["status-trunc"]),
+                                children: /*#__PURE__*/ jsx(LocalDateTime, {
+                                    value: initialData.updatedAt
+                                })
+                            })
+                        ]
+                    }),
+                    initialData?.createdAt != null && /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-form-status-cell', form_renderer_module["status-cell"]),
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: classnames('byline-form-status-muted', form_renderer_module["status-muted"]),
+                                children: t('forms.status.created')
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: classnames('byline-form-status-trunc', form_renderer_module["status-trunc"]),
+                                children: /*#__PURE__*/ jsx(LocalDateTime, {
+                                    value: initialData.createdAt
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            null != publishedVersion && /*#__PURE__*/ jsxs("div", {
+                className: classnames('byline-form-status-published', form_renderer_module["status-published"]),
+                children: [
+                    /*#__PURE__*/ jsxs("span", {
+                        className: classnames('byline-form-status-muted', form_renderer_module["status-muted"]),
+                        children: [
+                            t('forms.status.publishedLive'),
+                            ' ',
+                            publishedVersion.updatedAt ? /*#__PURE__*/ jsx("span", {
+                                children: t('forms.status.publishedOn', {
+                                    date: new Date(publishedVersion.updatedAt)
+                                })
+                            }) : ''
+                        ]
+                    }),
+                    onUnpublish && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            ' ',
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                onClick: onUnpublish,
+                                className: classnames('byline-form-status-unpublish', form_renderer_module["status-unpublish"]),
+                                children: t('common.actions.unpublish')
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+function computeStatusTransitions(currentStatus, workflowStatuses, nextStatus) {
+    if (!workflowStatuses || 0 === workflowStatuses.length || !currentStatus) return {
+        primaryStatus: nextStatus,
+        secondaryStatuses: [],
+        isTerminal: false
+    };
+    if (workflowStatuses.length <= 1) return {
+        primaryStatus: void 0,
+        secondaryStatuses: [],
+        isTerminal: false
+    };
+    const currentIndex = workflowStatuses.findIndex((s)=>s.name === currentStatus);
+    if (-1 === currentIndex) return {
+        primaryStatus: nextStatus,
+        secondaryStatuses: [],
+        isTerminal: false
+    };
+    const isAtEnd = currentIndex === workflowStatuses.length - 1;
+    const isAtStart = 0 === currentIndex;
+    const availableTargets = [];
+    if (!isAtStart && workflowStatuses[0]) availableTargets.push(workflowStatuses[0]);
+    const prev = workflowStatuses[currentIndex - 1];
+    if (currentIndex > 1 && prev) availableTargets.push(prev);
+    const next = workflowStatuses[currentIndex + 1];
+    if (!isAtEnd && next) availableTargets.push(next);
+    if (isAtEnd) return {
+        primaryStatus: workflowStatuses[currentIndex],
+        secondaryStatuses: availableTargets,
+        isTerminal: true
+    };
+    return {
+        primaryStatus: nextStatus,
+        secondaryStatuses: availableTargets.filter((s)=>s.name !== nextStatus?.name),
+        isTerminal: false
+    };
+}
+const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpublish, onDelete, onDuplicate, onCopyToLocale, contentLocales, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, headingLabel, headerSlot, collectionPath, initialLocale, onLocaleChange, defaultLocale = 'en', useNavigationGuard: useNavigationGuardProp, restoreWarnings, _activeTabBySet, _onTabChange })=>{
+    const { getFieldValues, runFieldHooks, validateForm, errors: initialErrors, hasChanges: hasChangesFn, resetHasChanges, getPatches, getSystemPath, subscribeErrors, subscribeMeta, setFieldValue, setFieldError, getPendingUploads, clearPendingUploads, setFieldUploading } = 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 [contentLocale, setContentLocale] = useState(initialLocale ?? defaultLocale);
+    const { uploadField } = useBylineFieldServices();
+    useEffect(()=>{
+        if (initialLocale) setContentLocale(initialLocale);
+    }, [
+        initialLocale
+    ]);
+    const fieldByName = useMemo(()=>{
+        const map = new Map();
+        for (const field of fields)if ('name' in field) map.set(field.name, field);
+        return map;
+    }, [
+        fields
+    ]);
+    const tabSetByName = useMemo(()=>{
+        const map = new Map();
+        for (const set of adminConfig?.tabSets ?? [])map.set(set.name, set);
+        return map;
+    }, [
+        adminConfig
+    ]);
+    const rowByName = useMemo(()=>{
+        const map = new Map();
+        for (const row of adminConfig?.rows ?? [])map.set(row.name, row);
+        return map;
+    }, [
+        adminConfig
+    ]);
+    const groupByName = useMemo(()=>{
+        const map = new Map();
+        for (const group of adminConfig?.groups ?? [])map.set(group.name, group);
+        return map;
+    }, [
+        adminConfig
+    ]);
+    const layout = useMemo(()=>{
+        if (adminConfig?.layout) return adminConfig.layout;
+        return {
+            main: fields.filter((f)=>'name' in f).map((f)=>f.name)
+        };
+    }, [
+        adminConfig,
+        fields
+    ]);
+    const fieldToTabPath = useMemo(()=>{
+        const map = new Map();
+        const visit = (names, tabSetName, tabName, seen)=>{
+            for (const name of names)if (fieldByName.has(name)) map.set(name, {
+                tabSetName,
+                tabName
+            });
+            else if (seen.has(name)) ;
+            else if (rowByName.has(name)) {
+                const row = rowByName.get(name);
+                const next = new Set(seen).add(name);
+                visit(row.fields, tabSetName, tabName, next);
+            } else if (groupByName.has(name)) {
+                const group = groupByName.get(name);
+                const next = new Set(seen).add(name);
+                visit(group.fields, tabSetName, tabName, next);
+            }
+        };
+        for (const set of adminConfig?.tabSets ?? [])for (const tab of set.tabs)visit(tab.fields, set.name, tab.name, new Set());
+        return map;
+    }, [
+        adminConfig,
+        fieldByName,
+        rowByName,
+        groupByName
+    ]);
+    const tabSets = adminConfig?.tabSets ?? [];
+    const initialActiveTabBySet = useMemo(()=>{
+        const result = {};
+        for (const set of tabSets){
+            const saved = _activeTabBySet?.[set.name];
+            if (saved && set.tabs.some((t)=>t.name === saved)) result[set.name] = saved;
+            else result[set.name] = set.tabs[0]?.name ?? '';
+        }
+        return result;
+    }, [
+        tabSets,
+        _activeTabBySet
+    ]);
+    const [activeTabBySet, setActiveTabBySet] = useState(initialActiveTabBySet);
+    const handleTabChange = useCallback((tabSetName, tabName)=>{
+        setActiveTabBySet((prev)=>({
+                ...prev,
+                [tabSetName]: tabName
+            }));
+        _onTabChange?.(tabSetName, tabName);
+    }, [
+        _onTabChange
+    ]);
+    const [formData, setFormData] = useState(()=>getFieldValues());
+    const liveTitle = useFieldValue(useAsTitle ?? '');
+    const heading = liveTitle || (headingLabel ? 'create' === mode ? t('forms.heading.createLabel', {
+        label: headingLabel
+    }) : t('forms.heading.editLabel', {
+        label: headingLabel
+    }) : 'create' === mode ? t('forms.heading.create') : t('forms.heading.edit'));
+    const guardFromContext = useNavigationGuardAdapter();
+    const useGuard = useNavigationGuardProp ?? guardFromContext;
+    const guard = useGuard(hasChanges);
+    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 handleCancel = ()=>{
+        if (onCancel && 'function' == typeof onCancel) onCancel();
+    };
+    const handleSubmit = (e)=>{
+        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);
+            const pendingUploads = getPendingUploads();
+            if (pendingUploads.size > 0) {
+                setIsUploading(true);
+                try {
+                    const uploadResult = await executeUploadsWithProgress(pendingUploads, uploadField, ({ fieldPath, status })=>{
+                        setFieldUploading(fieldPath, 'uploading' === status);
+                    });
+                    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 systemPath = getSystemPath();
+            if (onSubmit && 'function' == typeof onSubmit) {
+                onSubmit({
+                    data,
+                    patches,
+                    systemPath
+                });
+                resetHasChanges();
+            }
+        })();
+    };
+    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],
+            collectionPath: collectionPath,
+            contentLocale: contentLocale,
+            components: adminConfig?.fields?.[field.name]?.components,
+            editor: adminConfig?.fields?.[field.name]?.editor
+        }, 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);
+        return /*#__PURE__*/ jsxs("div", {
+            className: classnames('byline-form-tabset', form_renderer_module.tabset),
+            children: [
+                visibleTabs.length > 0 && /*#__PURE__*/ jsx(AdminTabs, {
+                    tabs: visibleTabs,
+                    activeTab: resolvedActive,
+                    onChange: (tabName)=>handleTabChange(set.name, tabName),
+                    errorCounts: tabErrorCountsBySet[set.name],
+                    className: classnames('byline-form-tabset-tabs', form_renderer_module["tabset-tabs"])
+                }),
+                activeTab && /*#__PURE__*/ jsx("div", {
+                    className: classnames('byline-form-tabset-fields', form_renderer_module["tabset-fields"]),
+                    children: activeTab.fields.map((name)=>renderItem(name))
+                })
+            ]
+        }, `tabset:${set.name}`);
+    };
+    return /*#__PURE__*/ jsxs("form", {
+        noValidate: true,
+        onSubmit: handleSubmit,
+        className: classnames('byline-form', form_renderer_module.form),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames('byline-form-heading-row', form_renderer_module["heading-row"]),
+                children: [
+                    /*#__PURE__*/ jsx("h1", {
+                        className: classnames('byline-form-heading', form_renderer_module.heading),
+                        children: heading
+                    }),
+                    headerSlot
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames('byline-form-status-bar', form_renderer_module["status-bar"]),
+                children: [
+                    /*#__PURE__*/ jsx(FormStatusDisplay, {
+                        initialData: initialData,
+                        workflowStatuses: workflowStatuses,
+                        publishedVersion: publishedVersion,
+                        onUnpublish: onUnpublish
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-form-actions', form_renderer_module.actions),
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                className: classnames('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: classnames('byline-form-actions-button', form_renderer_module["actions-button"]),
+                                size: "sm",
+                                type: "submit",
+                                disabled: false === hasChanges || isUploading,
+                                children: isUploading ? t('forms.actions.uploading') : t('common.actions.save')
+                            }),
+                            primaryStatus && onStatusChange && /*#__PURE__*/ jsx("div", {
+                                className: classnames('byline-form-actions-status-wrap', form_renderer_module["actions-status-wrap"]),
+                                children: /*#__PURE__*/ jsx(ComboButton, {
+                                    buttonClassName: classnames('byline-form-actions-combo-button', form_renderer_module["actions-combo-button"]),
+                                    triggerClassName: classnames('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)=>{
+                                        setStatusBusy(true);
+                                        try {
+                                            await onStatusChange(value);
+                                        } finally{
+                                            setStatusBusy(false);
+                                        }
+                                    },
+                                    onButtonClick: isTerminal ? void 0 : async ()=>{
+                                        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
+                            })
+                        ]
+                    })
+                ]
+            }),
+            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: classnames('byline-form-layout', form_renderer_module.layout),
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: classnames('byline-form-content', form_renderer_module.content),
+                        children: layout.main.map((name)=>renderItem(name))
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-form-sidebar', form_renderer_module.sidebar),
+                        children: [
+                            (useAsPath || 'string' == typeof initialData?.path && initialData.path.length > 0) && /*#__PURE__*/ jsx(PathWidget, {
+                                useAsPath: useAsPath,
+                                collectionPath: collectionPath ?? '',
+                                defaultLocale: defaultLocale,
+                                activeLocale: contentLocale,
+                                mode: mode
+                            }),
+                            (layout.sidebar ?? []).map((name)=>renderItem(name))
+                        ]
+                    })
+                ]
+            }),
+            guard.isBlocked && /*#__PURE__*/ jsx(Modal, {
+                isOpen: true,
+                closeOnOverlayClick: false,
+                onDismiss: guard.stay,
+                children: /*#__PURE__*/ jsxs(Modal.Container, {
+                    style: {
+                        maxWidth: '460px'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(Modal.Header, {
+                            className: classnames('byline-form-guard-modal-head', form_renderer_module["guard-modal-head"]),
+                            children: /*#__PURE__*/ jsx("h3", {
+                                className: classnames('byline-form-guard-modal-title', form_renderer_module["guard-modal-title"]),
+                                children: t('forms.navigationGuard.title')
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Modal.Content, {
+                            children: /*#__PURE__*/ jsx("p", {
+                                className: classnames('byline-form-guard-modal-text', form_renderer_module["guard-modal-text"]),
+                                children: t('forms.navigationGuard.message')
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs(Modal.Actions, {
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    size: "sm",
+                                    intent: "noeffect",
+                                    type: "button",
+                                    onClick: guard.stay,
+                                    children: t('forms.navigationGuard.stayButton')
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    size: "sm",
+                                    intent: "danger",
+                                    type: "button",
+                                    onClick: guard.proceed,
+                                    children: t('forms.navigationGuard.leaveButton')
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const FormRenderer = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpublish, onDelete, onDuplicate, onCopyToLocale, contentLocales, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, headingLabel, headerSlot, collectionPath, initialLocale, onLocaleChange, defaultLocale, useNavigationGuard, restoreWarnings })=>{
+    const savedTabsRef = useRef({});
+    return /*#__PURE__*/ jsx(FormProvider, {
+        initialData: initialData,
+        children: /*#__PURE__*/ jsx(FormContent, {
+            mode: mode,
+            fields: fields,
+            onSubmit: onSubmit,
+            onCancel: onCancel,
+            onStatusChange: onStatusChange,
+            onUnpublish: onUnpublish,
+            onDelete: onDelete,
+            onDuplicate: onDuplicate,
+            onCopyToLocale: onCopyToLocale,
+            contentLocales: contentLocales,
+            nextStatus: nextStatus,
+            workflowStatuses: workflowStatuses,
+            publishedVersion: publishedVersion,
+            initialData: initialData,
+            adminConfig: adminConfig,
+            useAsTitle: useAsTitle,
+            useAsPath: useAsPath,
+            headingLabel: headingLabel,
+            headerSlot: headerSlot,
+            collectionPath: collectionPath,
+            initialLocale: initialLocale,
+            onLocaleChange: onLocaleChange,
+            defaultLocale: defaultLocale,
+            useNavigationGuard: useNavigationGuard,
+            restoreWarnings: restoreWarnings,
+            _activeTabBySet: savedTabsRef.current,
+            _onTabChange: (tabSetName, tabName)=>{
+                savedTabsRef.current = {
+                    ...savedTabsRef.current,
+                    [tabSetName]: tabName
+                };
+            }
+        })
+    }, `${initialLocale ?? 'default'}-${initialData?.versionId ?? ''}`);
+};
+export { FormRenderer };

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

@@ -0,0 +1,46 @@
+import "./form-renderer_module.css";
+const form_renderer_module = {
+    form: "form-MVxxVb",
+    "heading-row": "heading-row-qw_UYh",
+    headingRow: "heading-row-qw_UYh",
+    heading: "heading-wnLlb_",
+    "status-bar": "status-bar-kQCXLT",
+    statusBar: "status-bar-kQCXLT",
+    status: "status-XbhkJR",
+    "status-meta": "status-meta-gppNXX",
+    statusMeta: "status-meta-gppNXX",
+    "status-cell": "status-cell-Tr3QHl",
+    statusCell: "status-cell-Tr3QHl",
+    "status-muted": "status-muted-vHn34O",
+    statusMuted: "status-muted-vHn34O",
+    "status-trunc": "status-trunc-jGiHWf",
+    statusTrunc: "status-trunc-jGiHWf",
+    "status-published": "status-published-hqosWb",
+    statusPublished: "status-published-hqosWb",
+    "status-unpublish": "status-unpublish-DiCNI0",
+    statusUnpublish: "status-unpublish-DiCNI0",
+    actions: "actions-AZBIdR",
+    "actions-button": "actions-button-VIwbST",
+    actionsButton: "actions-button-VIwbST",
+    "actions-status-wrap": "actions-status-wrap-hSvlps",
+    actionsStatusWrap: "actions-status-wrap-hSvlps",
+    "actions-combo-button": "actions-combo-button-XvqHCC",
+    actionsComboButton: "actions-combo-button-XvqHCC",
+    "actions-combo-trigger": "actions-combo-trigger-bmXUzc",
+    actionsComboTrigger: "actions-combo-trigger-bmXUzc",
+    layout: "layout-WTbLYr",
+    content: "content-_P5cdJ",
+    sidebar: "sidebar-WsxX88",
+    tabset: "tabset-xfaMkP",
+    "tabset-tabs": "tabset-tabs-jZpqd_",
+    tabsetTabs: "tabset-tabs-jZpqd_",
+    "tabset-fields": "tabset-fields-JJefdw",
+    tabsetFields: "tabset-fields-JJefdw",
+    "guard-modal-head": "guard-modal-head-r2TApi",
+    guardModalHead: "guard-modal-head-r2TApi",
+    "guard-modal-title": "guard-modal-title-p9dFJ9",
+    guardModalTitle: "guard-modal-title-p9dFJ9",
+    "guard-modal-text": "guard-modal-text-uW56HS",
+    guardModalText: "guard-modal-text-uW56HS"
+};
+export default form_renderer_module;