@byline/admin 3.12.1 → 3.13.0

package/dist/forms/form-renderer.js

@@ -1,146 +1,27 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "@byline/i18n/react";
-import { Alert, Button, CloseIcon, ComboButton, IconButton, Modal } from "@byline/ui/react";
+import { Alert, Button, ComboButton } 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 { AvailableLocalesWidget } from "./available-locales-widget.js";
 import { DocumentActions } from "./document-actions.js";
 import { FormProvider, useFieldValue, useFormContext } from "./form-context.js";
+import { NavigationGuardModal, SystemFieldsConfirmModal, UnsavedChangesModal } from "./form-modals.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 { computeStatusTransitions } from "./status-transitions.js";
+import { TreePlacementWidget } from "./tree-placement-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, onDeleteLocale, contentLocales, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, advertiseLocales, headingLabel, headerSlot, collectionPath, initialLocale, onLocaleChange, defaultLocale = 'en', useNavigationGuard: useNavigationGuardProp, restoreWarnings, _activeTabBySet, _onTabChange })=>{
+import { useFormLayout } from "./use-form-layout.js";
+const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpublish, onDelete, onDuplicate, onCopyToLocale, onDeleteLocale, contentLocales, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, 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 { t } = useTranslation('byline-admin');
     const [errors, setErrors] = useState(initialErrors);
@@ -156,69 +37,7 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
     }, [
         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 { fieldByName, tabSetByName, rowByName, groupByName, layout, fieldToTabPath } = useFormLayout(adminConfig, fields);
     const tabSets = adminConfig?.tabSets ?? [];
     const initialActiveTabBySet = useMemo(()=>{
         const result = {};
@@ -528,6 +347,11 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
                                 activeLocale: contentLocale,
                                 mode: mode
                             }),
+                            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 ?? []
@@ -537,187 +361,28 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
                     })
                 ]
             }),
-            showUnsavedModal && /*#__PURE__*/ jsx(Modal, {
-                isOpen: true,
-                closeOnOverlayClick: true,
-                onDismiss: ()=>setShowUnsavedModal(false),
-                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.unsavedChanges.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.unsavedChanges.message')
-                            })
-                        }),
-                        /*#__PURE__*/ jsx(Modal.Actions, {
-                            children: /*#__PURE__*/ jsx(Button, {
-                                size: "sm",
-                                style: {
-                                    minWidth: '60px'
-                                },
-                                intent: "primary",
-                                type: "button",
-                                onClick: ()=>setShowUnsavedModal(false),
-                                children: t('forms.unsavedChanges.okButton')
-                            })
-                        })
-                    ]
-                })
+            showUnsavedModal && /*#__PURE__*/ jsx(UnsavedChangesModal, {
+                onClose: ()=>setShowUnsavedModal(false)
             }),
-            null != pendingSystemFieldsSubmit && /*#__PURE__*/ jsx(Modal, {
-                isOpen: true,
-                closeOnOverlayClick: true,
-                onDismiss: ()=>setPendingSystemFieldsSubmit(null),
-                children: /*#__PURE__*/ jsxs(Modal.Container, {
-                    style: {
-                        maxWidth: '520px'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsxs(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: pendingSystemFieldsSubmit.contentDirty ? t('forms.systemFieldsConfirm.bothTitle') : t('forms.systemFieldsConfirm.title')
-                                }),
-                                /*#__PURE__*/ jsx(IconButton, {
-                                    "aria-label": t('common.actions.close'),
-                                    size: "xs",
-                                    onClick: ()=>setPendingSystemFieldsSubmit(null),
-                                    children: /*#__PURE__*/ jsx(CloseIcon, {
-                                        width: "16px",
-                                        height: "16px",
-                                        svgClassName: "white-icon"
-                                    })
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ jsxs(Modal.Content, {
-                            className: "prose",
-                            children: [
-                                pendingSystemFieldsSubmit.contentDirty && /*#__PURE__*/ jsx("p", {
-                                    className: classnames('byline-form-system-fields-content-note', 'm-0 mt-2'),
-                                    children: t('forms.systemFieldsConfirm.contentNote')
-                                }),
-                                /*#__PURE__*/ jsx("p", {
-                                    className: "m-0 mt-2",
-                                    style: pendingSystemFieldsSubmit.contentDirty ? {
-                                        marginTop: 'var(--spacing-8)',
-                                        paddingTop: 'var(--spacing-12)',
-                                        borderTop: '1px solid var(--border-color)'
-                                    } : void 0,
-                                    children: t('forms.systemFieldsConfirm.intro')
-                                }),
-                                /*#__PURE__*/ jsxs("ul", {
-                                    className: classnames('byline-form-system-fields-list', form_renderer_module["guard-modal-text"], 'm-0'),
-                                    children: [
-                                        pendingSystemFieldsSubmit.pathDirty && /*#__PURE__*/ jsx("li", {
-                                            children: t('forms.systemFieldsConfirm.bulletPath')
-                                        }),
-                                        pendingSystemFieldsSubmit.availableLocalesDirty && /*#__PURE__*/ jsx("li", {
-                                            children: t('forms.systemFieldsConfirm.bulletLocales')
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsx("p", {
-                                    className: classnames('byline-form-system-fields-effect', form_renderer_module["guard-modal-text"]),
-                                    style: {
-                                        marginTop: 'var(--spacing-4)',
-                                        marginBottom: 0,
-                                        color: 'var(--text-subtle)'
-                                    },
-                                    children: t('forms.systemFieldsConfirm.effectLine')
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ jsxs(Modal.Actions, {
-                            children: [
-                                /*#__PURE__*/ jsx(Button, {
-                                    size: "sm",
-                                    style: {
-                                        minWidth: '80px'
-                                    },
-                                    intent: "noeffect",
-                                    type: "button",
-                                    onClick: ()=>setPendingSystemFieldsSubmit(null),
-                                    children: t('common.actions.cancel')
-                                }),
-                                /*#__PURE__*/ jsx(Button, {
-                                    size: "sm",
-                                    style: {
-                                        minWidth: '80px'
-                                    },
-                                    intent: "primary",
-                                    type: "button",
-                                    onClick: ()=>{
-                                        const payload = pendingSystemFieldsSubmit;
-                                        setPendingSystemFieldsSubmit(null);
-                                        submitPayload(payload);
-                                    },
-                                    children: t('forms.systemFieldsConfirm.confirmButton')
-                                })
-                            ]
-                        })
-                    ]
-                })
+            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(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')
-                                })
-                            ]
-                        })
-                    ]
-                })
+            guard.isBlocked && /*#__PURE__*/ jsx(NavigationGuardModal, {
+                onStay: guard.stay,
+                onProceed: guard.proceed
             })
         ]
     });
 };
-const FormRenderer = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpublish, onDelete, onDuplicate, onCopyToLocale, onDeleteLocale, contentLocales, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, advertiseLocales, headingLabel, headerSlot, collectionPath, initialLocale, onLocaleChange, defaultLocale, useNavigationGuard, restoreWarnings })=>{
+const FormRenderer = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpublish, onDelete, onDuplicate, onCopyToLocale, onDeleteLocale, contentLocales, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, advertiseLocales, tree, headingLabel, headerSlot, collectionPath, initialLocale, onLocaleChange, defaultLocale, useNavigationGuard, restoreWarnings })=>{
     const savedTabsRef = useRef({});
     return /*#__PURE__*/ jsx(FormProvider, {
         initialData: initialData,
@@ -741,6 +406,7 @@ const FormRenderer = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpu
             useAsTitle: useAsTitle,
             useAsPath: useAsPath,
             advertiseLocales: advertiseLocales,
+            tree: tree,
             headingLabel: headingLabel,
             headerSlot: headerSlot,
             collectionPath: collectionPath,

package/dist/forms/form-status-display.d.ts

@@ -0,0 +1,21 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { WorkflowStatus } from '@byline/core';
+import type { PublishedVersionInfo } from './form-renderer';
+/**
+ * The status / metadata strip at the top of a document form — current
+ * workflow status (suppressed for single-status workflows), last-modified and
+ * created timestamps, and a "published live" indicator with an inline
+ * Unpublish action when a previously-published version is still live.
+ */
+export declare const FormStatusDisplay: ({ initialData, workflowStatuses, publishedVersion, onUnpublish, }: {
+    initialData?: Record<string, any>;
+    workflowStatuses?: WorkflowStatus[];
+    publishedVersion?: PublishedVersionInfo | null;
+    onUnpublish?: () => Promise<void>;
+}) => import("react").JSX.Element;

package/dist/forms/form-status-display.js

@@ -0,0 +1,94 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "@byline/i18n/react";
+import classnames from "classnames";
+import { LocalDateTime } from "../fields/local-date-time.js";
+import form_renderer_module from "./form-renderer.module.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')
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { FormStatusDisplay };

package/dist/forms/status-transitions.d.ts

@@ -0,0 +1,23 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { WorkflowStatus } from '@byline/core';
+export interface StatusTransitions {
+    primaryStatus: WorkflowStatus | undefined;
+    secondaryStatuses: WorkflowStatus[];
+    isTerminal: boolean;
+}
+/**
+ * Compute the primary and secondary status transitions for the ComboButton.
+ * - Primary: the main action (forward step), or the current status itself
+ *   when the document has reached the final workflow step (terminal state).
+ * - Secondary: other available transitions to show as dropdown options.
+ * - isTerminal: true when the document is at the final workflow status —
+ *   the primary button renders as a non-actionable indicator and all
+ *   back-steps move into the dropdown.
+ */
+export declare function computeStatusTransitions(currentStatus: string | undefined, workflowStatuses: WorkflowStatus[] | undefined, nextStatus: WorkflowStatus | undefined): StatusTransitions;

package/dist/forms/status-transitions.js

@@ -0,0 +1,37 @@
+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
+    };
+}
+export { computeStatusTransitions };

package/dist/forms/status-transitions.test.node.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+export {};