canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/components/EditorHeader.d.ts

@@ -1,130 +1,82 @@
+import { type Ref } from 'react';
 import type { OperatingMode } from '../../operating-mode/index.js';
 import type { BranchStatus } from '../../types.js';
 import type { EditorEntry } from '../Editor.js';
 import type { LogicalPath } from '../../paths/types.js';
+import type { BreadcrumbSegment } from '../editor-utils.js';
+import type { SaveAllProgress } from '../hooks/save-all.js';
 export interface EditorHeaderProps {
-    /**
-     * Site title displayed in the top-left.
-     */
-    siteTitle: string;
-    /**
-     * Optional site subtitle displayed below the title.
-     */
-    siteSubtitle?: string;
-    /**
-     * Main header title displayed in the center.
-     */
-    headerTitle: string;
-    /**
-     * Currently selected entry.
-     */
     currentEntry: EditorEntry | undefined;
-    /**
-     * Current branch name.
-     */
     branchName: string;
-    /**
-     * Operating mode.
-     */
     operatingMode: OperatingMode;
-    /**
-     * Whether operations are currently in progress.
-     */
+    /** Whether operations are currently in progress. */
     busy: boolean;
-    /**
-     * Breadcrumb segments to display.
-     */
-    breadcrumbSegments: string[];
-    /**
-     * List of edited files.
-     */
+    /** The crumbs before the open entry's own. */
+    breadcrumbSegments: BreadcrumbSegment[];
+    /** The listed entries with unsaved changes on the branch. */
     editedFiles: Array<{
         path: LogicalPath;
         label: string;
     }>;
-    /**
-     * Number of modified files.
-     */
+    /** Entries with unsaved changes on the branch. */
     modifiedCount: number;
-    /**
-     * Number of unresolved comments.
-     */
-    unresolvedCommentCount: number;
-    /**
-     * Unresolved comments (for filtering).
-     */
-    comments: Array<{
-        resolved: boolean;
-    }>;
-    /**
-     * Callback to open the entry navigator.
-     */
+    /** Opens the content panel. */
     onNavigatorOpen: () => void;
-    /**
-     * Callback to reload the current file.
-     */
+    /** Opens the content panel on a collection. */
+    onCollectionOpen: (collectionPath: string) => void;
+    /** The entry menu's trigger. */
+    navigatorToggleRef?: Ref<HTMLButtonElement>;
+    /** The branch pill. */
+    branchToggleRef?: Ref<HTMLButtonElement>;
+    /** Replaces the open entry with the server's copy. */
     onFileReload: () => void;
-    /**
-     * Callback to discard the current file draft.
-     */
     onFileDiscardDraft: () => void;
-    /**
-     * Callback when an entry is selected.
-     */
-    onEntrySelect: (id: string) => void;
-    /**
-     * Callback to reload all branch data.
-     */
+    /** Opens the open entry's rename dialog. */
+    onEntryRename: () => void;
+    /** Asks to delete the open entry. */
+    onEntryDelete: () => void;
+    /** The "All content" crumb. */
+    allContentRef?: Ref<HTMLButtonElement>;
+    onEntrySelect: (path: LogicalPath) => void;
+    /** Re-reads the branch and its entry list, keeping drafts. */
     onBranchReloadData: () => void;
-    /**
-     * Callback to discard all drafts.
-     */
     onBranchDiscardDrafts: () => void;
-    /**
-     * Callback to open the branch manager.
-     */
     onBranchManagerOpen: () => void;
-    /**
-     * Callback to open the comments panel.
-     */
-    onCommentsPanelOpen: () => void;
-    /**
-     * Callback to save the current file.
-     */
     onSave: () => void;
-    /**
-     * Callback to submit/publish the branch.
-     */
+    onSaveAll: () => void;
+    saveAllProgress: SaveAllProgress | null;
+    /** A Save of the open entry is in flight. */
+    saving?: boolean;
+    /** Rises each time a single Save lands, whichever entry it saved. */
+    savedSignal?: number;
+    /** The last Save that landed saved the open entry. */
+    savedHere?: boolean;
+    /** The branch's entry list failed to load and none is held. */
+    entryListFailed?: boolean;
     onSubmit: () => void;
-    /**
-     * Whether the current entry has unsaved changes.
-     */
+    onWithdraw: () => void;
+    /** The open entry has unsaved changes it could save. */
     hasUnsavedChanges: boolean;
-    /**
-     * Current branch status (undefined if unknown).
-     */
+    /** The open entry has a draft, savable or not (a read-only branch's still discards). */
+    entryHasDraft?: boolean;
+    /** Writing drafts to localStorage failed, so they live only in this tab. */
+    draftStorageFailed?: boolean;
+    /** The open entry can't be edited by this user (a path rule). */
+    entryReadOnly?: boolean;
+    /** The open entry's type has no schema in the running code. */
+    entryUnavailable?: boolean;
+    /** Current branch status (undefined if unknown). */
     branchStatus: BranchStatus | undefined;
-    /**
-     * Callback to withdraw the branch.
-     */
-    onWithdraw: () => void;
-    /**
-     * Current user context for permission checks.
-     */
+    /** Current user context for permission checks. */
     userContext?: {
         userId: string;
         groups?: string[];
     };
-    /**
-     * Branch creator user ID.
-     */
     branchCreatedBy?: string;
-    /**
-     * Branch access control lists.
-     */
     branchAccess?: {
         allowedUsers?: string[];
         allowedGroups?: string[];
+        managerOrAdminAllowed?: boolean;
     };
     /**
      * Whether the current branch is the protected base branch (see
@@ -132,20 +84,18 @@ export interface EditorHeaderProps {
      * stays, as the recovery path). Default false.
      */
     branchIsProtected?: boolean;
-    /**
-     * Whether the current branch is read-only (protected base branch in prod).
-     * Disables Save and shows the "create a branch" banner below. Default false.
-     */
+    /** Whether the current branch is read-only (protected base branch in prod); disables Save. */
     branchReadOnly?: boolean;
+    /** Server-computed: content writes are rejected on this branch; see `branchLockState`. */
+    branchWriteBlocked?: boolean;
     /**
-     * Server-computed: content writes are rejected on this branch, for either
-     * reason (base-branch read-only, or a status past 'editing'). Combined with
-     * `branchReadOnly` to pick which of the two banners to show. Default false.
+     * No branch details yet (loading, or the list failed and the banner says so): the fail-closed
+     * lock defaults are guesses, so neither the chip nor the status names them.
      */
-    branchWriteBlocked?: boolean;
+    branchLoading?: boolean;
 }
 /**
- * Header component for the Editor.
- * Contains site info, file navigation, breadcrumbs, branch selector, comments button, and action buttons.
+ * The top bar's contents: the breadcrumb with the entry menu and "Read-only" chip, then the branch
+ * pill, Submit or Withdraw, and Save with Save all.
  */
-export declare const EditorHeader: import("react").ForwardRefExoticComponent<EditorHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function EditorHeader({ currentEntry, branchName, operatingMode, busy, breadcrumbSegments, editedFiles, modifiedCount, onNavigatorOpen, onCollectionOpen, navigatorToggleRef, branchToggleRef, onFileReload, onFileDiscardDraft, onEntryRename, onEntryDelete, allContentRef, onEntrySelect, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onSave, onSaveAll, saveAllProgress, saving, savedSignal, savedHere, entryListFailed, onSubmit, onWithdraw, hasUnsavedChanges, entryHasDraft, draftStorageFailed, entryReadOnly, entryUnavailable, branchStatus, userContext, branchCreatedBy, branchAccess, branchIsProtected, branchReadOnly, branchWriteBlocked, branchLoading, }: EditorHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/EditorHeader.js

@@ -1,134 +1,133 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { Alert, Badge, Box, Button, Group, Menu, Paper, Stack, Text, Title, Tooltip, } from '@mantine/core';
-import { IconFolderOpen, IconChevronDown, IconGitBranch, IconLock } from '@tabler/icons-react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Tooltip } from '@mantine/core';
 import { clientOperatingStrategy } from '../../operating-mode/client.js';
-import { isAdmin, isReviewer } from '../../authorization/helpers.js';
+import { isAdmin, isLockedOutOfBranch, isReviewer } from '../../authorization/helpers.js';
+import { branchStatusPresentation } from '../branch-status.js';
+import { EDITOR_ACTIONS } from '../copy.js';
+import { SYSTEM_USER_ID } from '../../system-users.js';
+import { TopBar } from '../shell/TopBar.js';
+import { branchLockState } from './BranchLockBanner.js';
+import { BranchPill } from './BranchPill.js';
+import { EntryBreadcrumb } from './EntryBreadcrumb.js';
+import { SaveSplitButton } from './SaveSplitButton.js';
 /**
- * Status color map matching BranchManager.tsx pattern.
- * Returns the Mantine color string for a given branch status.
+ * The top bar's contents: the breadcrumb with the entry menu and "Read-only" chip, then the branch
+ * pill, Submit or Withdraw, and Save with Save all.
  */
-const getStatusColor = (status) => {
-    const statusColorMap = {
-        editing: 'brand',
-        submitted: 'green',
-        approved: 'teal',
-        archived: 'gray',
-    };
-    return statusColorMap[status] ?? 'gray';
-};
-/**
- * Header component for the Editor.
- * Contains site info, file navigation, breadcrumbs, branch selector, comments button, and action buttons.
- */
-export const EditorHeader = forwardRef(function EditorHeader({ siteTitle, siteSubtitle, headerTitle, currentEntry, branchName, operatingMode, busy, breadcrumbSegments, editedFiles, modifiedCount, unresolvedCommentCount: _, comments, onNavigatorOpen, onFileReload, onFileDiscardDraft, onEntrySelect, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onCommentsPanelOpen, onSave, onSubmit, hasUnsavedChanges, branchStatus, onWithdraw, userContext, branchCreatedBy, branchAccess, branchIsProtected = false, branchReadOnly = false, branchWriteBlocked = false, }, ref) {
-    // `branchWriteBlocked` is the server's own answer (getBranchProtection), so
-    // Save is never enabled for a write the API would reject; a client-side
-    // derivation could drift from it. `branchReadOnly` only picks which banner
-    // to show -- base-branch read-only takes precedence over a workflow status
-    // lock.
-    const statusLocked = branchWriteBlocked && !branchReadOnly;
-    // Covers two cases where `branchStatus` can't be trusted to describe the lock
-    // honestly: branch data still loading (`branchStatus` is undefined, so the
-    // banner would otherwise interpolate "Branch is undefined...") and version
-    // skew (an old server omits `branchWriteBlocked` while still reporting
-    // status: 'editing', which would otherwise assert a lock the status
-    // contradicts). In both cases the banner says data is unavailable instead.
-    const branchDataUnavailable = statusLocked && (branchStatus === undefined || branchStatus === 'editing');
-    return (_jsx(Paper, { ref: ref, shadow: "md", withBorder: true, radius: 0, px: 0, py: 0, style: {
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            zIndex: 70,
-        }, children: _jsxs(Box, { px: "md", py: "sm", children: [_jsxs(Group, { justify: "space-between", align: "center", wrap: "nowrap", children: [_jsxs(Stack, { gap: 2, style: { minWidth: 0 }, children: [_jsx(Title, { order: 5, style: { lineHeight: 1.1 }, children: siteTitle }), siteSubtitle && (_jsx(Text, { size: "xs", c: "dimmed", children: siteSubtitle }))] }), _jsxs(Stack, { gap: 6, style: { minWidth: 0, flex: 1, alignItems: 'center' }, children: [_jsx(Title, { order: 4, style: { lineHeight: 1.1 }, children: headerTitle }), _jsxs(Group, { gap: "sm", wrap: "wrap", align: "center", style: { minWidth: 0, justifyContent: 'center' }, children: [_jsxs(Menu, { withinPortal: true, shadow: "sm", children: [_jsx(Menu.Target, { children: _jsx(Button, { "data-testid": "file-dropdown-button", variant: "outline", color: "gray", size: "xs", leftSection: _jsx(IconFolderOpen, { size: 16 }), rightSection: _jsx(IconChevronDown, { size: 14 }), children: currentEntry?.label ?? 'No file selected' }) }), _jsxs(Menu.Dropdown, { children: [_jsx(Menu.Item, { onClick: onFileReload, disabled: !branchName || !currentEntry, children: "Reload File" }), _jsx(Menu.Item, { "data-testid": "discard-file-draft-menu-item", onClick: onFileDiscardDraft, disabled: !currentEntry, children: "Discard File Draft" }), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { "data-testid": "all-files-menu-item", onClick: onNavigatorOpen, children: "All Files" }), _jsx(Menu.Divider, {}), _jsx(Menu.Label, { children: "Recently modified" }), editedFiles.slice(0, 3).length === 0 ? (_jsx(Menu.Item, { disabled: true, children: "<none>" })) : (editedFiles.slice(0, 3).map((file) => (_jsx(Menu.Item, { onClick: () => {
-                                                                onEntrySelect(file.path);
-                                                                onNavigatorOpen();
-                                                            }, children: file.label }, file.path))))] })] }), _jsx(Group, { gap: 4, wrap: "wrap", align: "center", style: { minWidth: 0 }, children: breadcrumbSegments.map((segment, idx) => (_jsxs(Group, { gap: 4, align: "center", wrap: "nowrap", children: [idx > 0 && (_jsx(Text, { size: "xs", c: "dimmed", children: "/" })), _jsx(Button, { variant: "subtle", size: "xs", px: "xs", onClick: onNavigatorOpen, children: segment })] }, `${segment}-${idx}`))) }), _jsxs(Menu, { withinPortal: true, shadow: "sm", children: [_jsx(Menu.Target, { children: _jsx(Button, { variant: "outline", color: "gray", size: "xs", leftSection: _jsx(IconGitBranch, { size: 16 }), rightSection: _jsx(IconChevronDown, { size: 14 }), loading: !branchName && busy, "data-testid": "branch-dropdown-button", children: branchName || (busy ? 'Loading branches…' : 'No branch selected') }) }), _jsxs(Menu.Dropdown, { "data-testid": "branch-menu", children: [_jsx(Menu.Item, { onClick: onBranchReloadData, disabled: !branchName, children: "Reload All Files" }), _jsx(Menu.Item, { onClick: onBranchDiscardDrafts, disabled: !branchName, children: "Discard All File Drafts" }), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { onClick: onBranchManagerOpen, "data-testid": "manage-branches-menu-item", children: "Change / Manage Branches" }), _jsx(Menu.Divider, {}), _jsx(Menu.Label, { children: `${modifiedCount} file${modifiedCount === 1 ? '' : 's'} modified` }), editedFiles.length === 0 ? (_jsx(Menu.Item, { disabled: true, children: "No edited files yet" })) : (editedFiles.map((file) => (_jsx(Menu.Item, { onClick: () => {
-                                                                onEntrySelect(file.path);
-                                                                onNavigatorOpen();
-                                                            }, children: file.label }, `branch-mod-${file.path}`))))] })] }), clientOperatingStrategy(operatingMode ?? 'prod').supportsStatusBadge() &&
-                                            branchName &&
-                                            branchStatus && (_jsx(Badge, { color: getStatusColor(branchStatus), variant: "light", size: "sm", "data-testid": `header-status-badge-${branchStatus}`, children: branchStatus })), clientOperatingStrategy(operatingMode ?? 'prod').supportsComments() &&
-                                            branchName && (_jsxs(Button, { variant: "outline", color: "gray", size: "xs", onClick: onCommentsPanelOpen, style: { position: 'relative' }, "data-testid": "comments-button", children: ["Comments", comments.filter((t) => !t.resolved).length > 0 && (_jsx("span", { style: {
-                                                        position: 'absolute',
-                                                        top: -6,
-                                                        right: -6,
-                                                        background: 'var(--mantine-color-grape-6)',
-                                                        color: 'white',
-                                                        borderRadius: '50%',
-                                                        width: 18,
-                                                        height: 18,
-                                                        fontSize: 10,
-                                                        display: 'flex',
-                                                        alignItems: 'center',
-                                                        justifyContent: 'center',
-                                                        fontWeight: 600,
-                                                    }, children: comments.filter((t) => !t.resolved).length }))] }))] })] }), _jsxs(Group, { gap: "xs", wrap: "nowrap", children: [_jsx(Tooltip, { label: branchReadOnly
-                                        ? 'The base branch is read-only'
-                                        : branchDataUnavailable
-                                            ? 'Branch details are still loading — saving is disabled until they arrive'
-                                            : statusLocked
-                                                ? branchStatus === 'submitted'
-                                                    ? 'This branch is submitted for review — withdraw it to make changes'
-                                                    : `This branch is ${branchStatus} — content is read-only`
-                                                : !hasUnsavedChanges && currentEntry
-                                                    ? 'No changes to save'
-                                                    : '', disabled: !branchReadOnly && !statusLocked && (hasUnsavedChanges || !currentEntry), children: _jsx(Button, { "data-testid": "save-button", variant: "light", size: "sm", onClick: onSave, disabled: !branchName ||
-                                            !currentEntry ||
-                                            busy ||
-                                            !hasUnsavedChanges ||
-                                            branchReadOnly ||
-                                            statusLocked, children: "Save File" }) }), (() => {
-                                    const isSubmitted = branchStatus === 'submitted';
-                                    const isEditing = branchStatus === 'editing';
-                                    // 'approved' withdraws too -- it is that status's only
-                                    // non-destructive exit now that the submit status gate refuses a
-                                    // non-editing branch (api/branch-status.ts, api/branch-withdraw.ts).
-                                    // This button is a two-state toggle, so every withdrawable status
-                                    // has to drive the withdraw side of it, not just 'submitted'.
-                                    const isWithdrawable = isSubmitted || branchStatus === 'approved';
-                                    // The protected base branch can never be submitted for review (both
-                                    // modes); hide the button entirely rather than showing it disabled.
-                                    // Withdraw stays available as the recovery path for a base branch
-                                    // wrongly stuck in 'submitted'.
-                                    if (branchIsProtected && !isWithdrawable)
-                                        return null;
-                                    // Who may submit/withdraw: creator, ACL access, the system branch, or an
-                                    // admin/reviewer -- Admins/Reviewers must be able to withdraw a protected
-                                    // base branch stuck in 'submitted' even without ACL access. Mirrors the
-                                    // server's canPerformWorkflowAction (BranchManager.tsx), which is the
-                                    // actual enforcer; this only decides whether to show the control disabled.
-                                    const userIsCreator = userContext?.userId === branchCreatedBy;
-                                    const isSystemBranch = branchCreatedBy === 'canopycms-system' && !branchIsProtected;
-                                    const userInACL = userContext &&
-                                        branchAccess &&
-                                        (branchAccess.allowedUsers?.includes(userContext.userId) ||
-                                            userContext.groups?.some((g) => branchAccess.allowedGroups?.includes(g)));
-                                    const userIsPrivileged = !!userContext &&
-                                        (isAdmin(userContext.groups ?? []) || isReviewer(userContext.groups ?? []));
-                                    const userHasPermission = userIsCreator || userInACL || isSystemBranch || userIsPrivileged;
-                                    // A status with no available transition (today: 'archived') is a
-                                    // separate condition from lacking permission, and conflating them
-                                    // sent people to an admin to fix a non-permissions problem.
-                                    const statusHasAction = isEditing || isWithdrawable;
-                                    const canPerformAction = userHasPermission && statusHasAction;
-                                    return (_jsx(Tooltip, { label: 
-                                        // No branch data (`branchStatus === undefined`) must not be
-                                        // interpolated raw into this label. Guarded explicitly here rather
-                                        // than left to the early return above, which hides this button
-                                        // today only as a side effect of `branchIsProtected`'s `?? true`
-                                        // default -- not a guarantee this arm stays unreachable.
-                                        branchStatus === undefined
-                                            ? 'Branch data could not be loaded, so no submit or withdraw action is available'
-                                            : !statusHasAction
-                                                ? `This branch is ${branchStatus} and has no submit or withdraw action available`
-                                                : !userHasPermission
-                                                    ? 'You do not have permission to submit or withdraw this branch'
-                                                    : '', disabled: canPerformAction, children: _jsx(Button, { size: "sm", color: isWithdrawable ? 'orange' : 'brand', onClick: isWithdrawable ? onWithdraw : onSubmit, disabled: !branchName || busy || !canPerformAction, "data-testid": isWithdrawable ? 'withdraw-button' : 'submit-button', children: isWithdrawable ? 'Withdraw Branch...' : 'Submit Branch...' }) }));
-                                })()] })] }), branchReadOnly && (_jsx(Alert, { icon: _jsx(IconLock, { size: 16 }), color: "yellow", variant: "light", mt: "sm", "data-testid": "protected-branch-banner", children: _jsxs(Group, { justify: "space-between", align: "center", gap: "sm", wrap: "wrap", children: [_jsx(Text, { size: "sm", children: `You are viewing the protected base branch "${branchName}". Content is read-only — create a branch to make changes.` }), _jsx(Button, { size: "xs", variant: "light", color: "yellow", onClick: onBranchManagerOpen, children: "Create a branch" })] }) })), statusLocked && (_jsx(Alert, { icon: _jsx(IconLock, { size: 16 }), color: "yellow", variant: "light", mt: "sm", "data-testid": "status-locked-banner", children: _jsxs(Group, { justify: "space-between", align: "center", gap: "sm", wrap: "wrap", children: [_jsx(Text, { size: "sm", children: branchDataUnavailable
-                                    ? `Branch details for "${branchName}" could not be loaded, so content is locked until they arrive. Use Manage Branches to retry.`
-                                    : branchStatus === 'submitted'
-                                        ? `Branch "${branchName}" is submitted for review and locked for edits. Use Withdraw Branch above to resume editing.`
-                                        : `Branch "${branchName}" is ${branchStatus} — content is read-only.` }), _jsx(Button, { size: "xs", variant: "light", color: "yellow", onClick: onBranchManagerOpen, children: "Manage Branches" })] }) }))] }) }));
-});
+export function EditorHeader({ currentEntry, branchName, operatingMode, busy, breadcrumbSegments, editedFiles, modifiedCount, onNavigatorOpen, onCollectionOpen, navigatorToggleRef, branchToggleRef, onFileReload, onFileDiscardDraft, onEntryRename, onEntryDelete, allContentRef, onEntrySelect, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onSave, onSaveAll, saveAllProgress, saving = false, savedSignal, savedHere = false, entryListFailed = false, onSubmit, onWithdraw, hasUnsavedChanges, entryHasDraft = hasUnsavedChanges, draftStorageFailed = false, entryReadOnly = false, entryUnavailable = false, branchStatus, userContext, branchCreatedBy, branchAccess, branchIsProtected = false, branchReadOnly = false, branchWriteBlocked = false, branchLoading = false, }) {
+    const { statusLocked, branchDataUnavailable } = branchLockState({
+        branchStatus,
+        branchReadOnly,
+        branchWriteBlocked,
+    });
+    // Why the branch takes no writes, with the way forward; shared by Save, Save all and the chip.
+    const branchLockReason = branchReadOnly
+        ? 'The base branch is read-only. Create a branch to make changes.'
+        : branchDataUnavailable
+            ? 'Branch details could not be loaded. Use "Switch branch…" to retry.'
+            : statusLocked
+                ? branchStatus === 'submitted'
+                    ? 'This branch is in review. Withdraw it to make changes.'
+                    : branchStatus === 'approved'
+                        ? 'This branch is approved. Withdraw it to make changes.'
+                        : `This branch is ${branchStatus}. Its content is read-only.`
+                : undefined;
+    const entryLockReason = entryReadOnly
+        ? "You don't have edit access to this entry. Ask a CanopyCMS admin to grant it."
+        : undefined;
+    // The Tooltip hides it while the editor is busy.
+    const saveBlockedReason = branchLockReason ??
+        (!branchName
+            ? 'Open a branch first.'
+            : !currentEntry
+                ? 'Open an entry to save it.'
+                : (entryLockReason ?? (!hasUnsavedChanges ? 'No changes to save.' : '')));
+    const presentation = branchStatusPresentation(branchStatus, branchIsProtected);
+    const status = !branchLoading &&
+        clientOperatingStrategy(operatingMode ?? 'prod').supportsStatusBadge() &&
+        presentation
+        ? {
+            label: presentation.label,
+            value: branchIsProtected ? 'protected' : String(branchStatus),
+            testId: `header-status-badge-${branchIsProtected ? 'protected' : branchStatus}`,
+        }
+        : undefined;
+    return (_jsx(TopBar, { leading: _jsx(EntryBreadcrumb, { segments: breadcrumbSegments, entryLabel: currentEntry ? (currentEntry.label ?? currentEntry.slug) : undefined, entryDirty: hasUnsavedChanges, readOnlyReason: branchLoading
+                ? undefined
+                : currentEntry || branchName
+                    ? (branchLockReason ?? entryLockReason)
+                    : undefined, onAllContent: onNavigatorOpen, onCollection: onCollectionOpen, onRefresh: onFileReload, onDiscard: onFileDiscardDraft, 
+            // A path rule's refusal hides them, as the content tree hides that entry's "…" menu.
+            onRename: entryReadOnly ? undefined : onEntryRename, onDelete: entryReadOnly ? undefined : onEntryDelete, refreshBlockedReason: branchName ? undefined : 'Open a branch first.', discardBlockedReason: entryHasDraft ? undefined : 'This entry has no unsaved changes.', changeBlockedReason: branchLockReason ??
+                (entryUnavailable
+                    ? "This entry's content type isn't known to this editor version yet. Reload in a few minutes."
+                    : undefined), entryMenuRef: navigatorToggleRef, allContentRef: allContentRef }), trailing: _jsxs(_Fragment, { children: [_jsx(BranchPill, { branchName: branchName, loading: busy, status: status, unsavedCount: modifiedCount, unsavedEntries: editedFiles, onSwitchBranch: onBranchManagerOpen, onRefreshBranch: onBranchReloadData, onDiscardAll: onBranchDiscardDrafts, onEntrySelect: onEntrySelect, pillRef: branchToggleRef }), _jsx(WorkflowButton, { branchName: branchName, busy: busy, branchStatus: branchStatus, userContext: userContext, branchCreatedBy: branchCreatedBy, branchAccess: branchAccess, branchIsProtected: branchIsProtected, onSubmit: onSubmit, onWithdraw: onWithdraw, savingAll: !!saveAllProgress }), _jsx(SaveSplitButton, { onSave: onSave, saveBlockedReason: saveBlockedReason, busy: busy, onSaveAll: onSaveAll, unsavedCount: modifiedCount, saveAllBlockedReason: branchLockReason ??
+                        (!branchName
+                            ? 'Open a branch first.'
+                            : entryListFailed && modifiedCount > 0
+                                ? 'The list of entries couldn\'t be loaded, so these changes can\'t be saved yet. Choose "Refresh branch" in the branch menu to try again.'
+                                : undefined), saveAllProgress: saveAllProgress, saving: saving, savedSignal: savedSignal, savedHere: savedHere, entryDirty: hasUnsavedChanges, draftStorageFailed: draftStorageFailed })] }) }));
+}
+/** Submit for review, or Withdraw from review once submitted or approved. */
+function WorkflowButton({ branchName, busy, branchStatus, userContext, branchCreatedBy, branchAccess, branchIsProtected, onSubmit, onWithdraw, savingAll, }) {
+    const isSubmitted = branchStatus === 'submitted';
+    const isEditing = branchStatus === 'editing';
+    // 'approved' withdraws too -- it is that status's only
+    // non-destructive exit now that the submit status gate refuses a
+    // non-editing branch (api/branch-status.ts, api/branch-withdraw.ts).
+    // This button is a two-state toggle, so every withdrawable status
+    // has to drive the withdraw side of it, not just 'submitted'.
+    const isWithdrawable = isSubmitted || branchStatus === 'approved';
+    // The protected base branch can never be submitted for review (both
+    // modes); hide the button entirely rather than showing it disabled.
+    // Withdraw stays available as the recovery path for a base branch
+    // wrongly stuck in 'submitted'.
+    if (branchIsProtected && !isWithdrawable)
+        return null;
+    // Who may submit/withdraw: creator, ACL access, the system branch, or an
+    // admin/reviewer (alone on a locked-down branch, and even without ACL access
+    // on a protected base branch stuck in 'submitted'). Mirrors the server's
+    // canPerformWorkflowAction (BranchManager.tsx), which is the actual
+    // enforcer; this only decides whether to show the control disabled.
+    const userIsCreator = userContext?.userId === branchCreatedBy;
+    const isSystemBranch = branchCreatedBy === SYSTEM_USER_ID && !branchIsProtected;
+    const userInACL = userContext &&
+        branchAccess &&
+        (branchAccess.allowedUsers?.includes(userContext.userId) ||
+            userContext.groups?.some((g) => branchAccess.allowedGroups?.includes(g)));
+    const userIsPrivileged = !!userContext && (isAdmin(userContext.groups ?? []) || isReviewer(userContext.groups ?? []));
+    const userHasPermission = !isLockedOutOfBranch(branchAccess, userContext?.groups) &&
+        (userIsCreator || userInACL || isSystemBranch || userIsPrivileged);
+    // A status with no available transition (today: 'archived') is a
+    // separate condition from lacking permission, and conflating them
+    // sent people to an admin to fix a non-permissions problem.
+    const statusHasAction = isEditing || isWithdrawable;
+    const canPerformAction = userHasPermission && statusHasAction;
+    // Blocked, it stays focusable (`aria-disabled`), so its reason opens on focus.
+    // `busy` alone can't hold it: an entry load clears that shared flag mid-run.
+    const actionBlocked = !branchName || busy || savingAll || !canPerformAction;
+    const waitReason = savingAll ? 'Wait for Save all to finish.' : undefined;
+    return (_jsx(Tooltip, { label: 
+        // No branch data (`branchStatus === undefined`) must not be
+        // interpolated raw into this label. Guarded explicitly here rather
+        // than left to the early return above, which hides this button
+        // today only as a side effect of `branchIsProtected`'s `?? true`
+        // default -- not a guarantee this arm stays unreachable.
+        waitReason ??
+            (branchStatus === undefined
+                ? 'Branch details could not be loaded. Use "Switch branch…" to retry.'
+                : !statusHasAction
+                    ? `This branch is ${branchStatus}, so it can't be submitted for review or withdrawn from review.`
+                    : !userHasPermission
+                        ? 'You do not have permission to submit this branch for review or withdraw it from review. Ask an admin for access.'
+                        : ''), disabled: canPerformAction && !waitReason, multiline: true, maw: 320, children: _jsx(Button, { size: "sm", 
+            // Save is the top bar's one filled primary; the rest take their colour's light variant.
+            variant: "light", color: isWithdrawable ? 'orange' : undefined, style: { flexShrink: 0 }, onClick: () => {
+                if (actionBlocked)
+                    return;
+                if (isWithdrawable)
+                    onWithdraw();
+                else
+                    onSubmit();
+            }, "data-disabled": actionBlocked ? true : undefined, "aria-disabled": actionBlocked ? true : undefined, "data-testid": isWithdrawable ? 'withdraw-button' : 'submit-button', children: isWithdrawable ? EDITOR_ACTIONS.withdrawFromReview : EDITOR_ACTIONS.submitForReview }) }));
+}

package/dist/editor/components/EditorRail.d.ts

@@ -0,0 +1,49 @@
+import { type ReactElement, type Ref } from 'react';
+import type { PaneArrangement } from '../shell/PaneLayout.js';
+export interface EditorRailProps {
+    siteTitle: string;
+    /** Opens the site's first entry, which is also what the editor opens with no entry asked for. */
+    onHomeOpen: () => void;
+    contentPanelOpen: boolean;
+    /** The content panel's element id, for `aria-controls`. */
+    contentPanelId: string;
+    onContentToggle: () => void;
+    onQuickOpen: () => void;
+    /** The quick open shortcut as the platform writes it, such as "⌘P". */
+    quickOpenShortcut: string;
+    /** The same shortcut for `aria-keyshortcuts`, such as "Meta+P". */
+    quickOpenKeys: string;
+    branchesOpen: boolean;
+    onBranchesOpen: () => void;
+    /** Without it, the Comments button is not offered (no branch, or a mode without comments). */
+    onCommentsOpen?: () => void;
+    commentsOpen: boolean;
+    unresolvedCommentCount: number;
+    mediaLibraryOpen: boolean;
+    onMediaLibraryOpen: () => void;
+    mediaButtonRef?: Ref<HTMLButtonElement>;
+    layout: PaneArrangement;
+    onLayoutChange: (layout: PaneArrangement) => void;
+    /** The preview is maximized, so the layout has nothing to arrange. */
+    layoutBlocked?: boolean;
+    /** Admin-only, like the other two below: each Settings item renders only when given. */
+    onPermissionManagerOpen?: () => void;
+    onGroupManagerOpen?: () => void;
+    onSystemHealthOpen?: () => void;
+    /** Takes focus back when a panel opened from the Settings menu closes. */
+    settingsToggleRef?: Ref<HTMLButtonElement>;
+    /** The adopter's account control, such as Clerk's UserButton; replaces the default buttons. */
+    AccountComponent?: React.ComponentType;
+    onAccountClick?: () => void;
+    onLogoutClick?: () => void;
+}
+/**
+ * @internal Exported for tests. The Settings button and its menu of `items`; with none, no
+ * button, since a menu that opens empty offers nothing.
+ */
+export declare function SettingsMenu({ items, toggleRef, }: {
+    items: readonly ReactElement[];
+    toggleRef?: Ref<HTMLButtonElement>;
+}): import("react/jsx-runtime").JSX.Element | null;
+/** The editor's activity rail: what `ActivityRail` lays out, wired to the editor's surfaces. */
+export declare function EditorRail({ siteTitle, onHomeOpen, contentPanelOpen, contentPanelId, onContentToggle, onQuickOpen, quickOpenShortcut, quickOpenKeys, branchesOpen, onBranchesOpen, onCommentsOpen, commentsOpen, unresolvedCommentCount, mediaLibraryOpen, onMediaLibraryOpen, mediaButtonRef, layout, onLayoutChange, layoutBlocked, onPermissionManagerOpen, onGroupManagerOpen, onSystemHealthOpen, settingsToggleRef, AccountComponent, onAccountClick, onLogoutClick, }: EditorRailProps): import("react/jsx-runtime").JSX.Element;