canopycms 0.1.0-int.115 → 0.1.0

package/dist/editor/components/BranchPill.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Box, Button, Menu, Text, Tooltip, VisuallyHidden } from '@mantine/core';
+import { useMediaQuery, useMergedRef } from '@mantine/hooks';
+import { IconChevronDown, IconGitBranch } from '@tabler/icons-react';
+import { EDITOR_ACTIONS } from '../copy.js';
+import { DestructiveMenuItem } from './DestructiveMenuItem.js';
+import { ReasonedMenuItem } from './ReasonedMenuItem.js';
+import { useMenuItemFocusReturn } from '../utils/focus-return.js';
+const plural = (count, one, many) => `${count} ${count === 1 ? one : many}`;
+/**
+ * The branch's name, status and unsaved count. Its menu holds the branch actions and lists the
+ * unsaved entries, each opening that entry. Below `sm` it is the branch icon and the count, its
+ * name then in its Tooltip, accessible name and menu label: the row's actions must not clip.
+ */
+export function BranchPill({ branchName, loading, status, unsavedCount: unsaved, unsavedEntries, onSwitchBranch, onRefreshBranch, onDiscardAll, onEntrySelect, pillRef, }) {
+    const trigger = useRef(null);
+    const triggerRef = useMergedRef(trigger, pillRef);
+    const menuFocus = useMenuItemFocusReturn(trigger);
+    const noBranch = branchName ? undefined : 'Open a branch first.';
+    const wide = useMediaQuery('(min-width: 48em)');
+    const name = branchName || (loading ? 'Loading branches…' : 'No branch open');
+    return (_jsxs(Menu, { withinPortal: true, shadow: "sm", position: "bottom-end", ...menuFocus.menu, children: [_jsx(Tooltip, { label: status ? `${name} · ${status.label}` : name, disabled: wide, events: { hover: true, focus: true, touch: false }, children: _jsx(Menu.Target, { children: _jsxs(Button, { ref: triggerRef, variant: "default", size: "sm", miw: 0, px: { base: 8, sm: 14 }, 
+                        // The count is the bar's one branch-wide unsaved signal: the row wraps before it clips.
+                        style: { flexShrink: 0 }, leftSection: _jsx(IconGitBranch, { size: 16, "aria-hidden": "true" }), rightSection: wide ? _jsx(IconChevronDown, { size: 14, "aria-hidden": "true" }) : undefined, loading: !branchName && loading, "data-testid": "branch-dropdown-button", styles: { label: { minWidth: 0, gap: 6 } }, children: [_jsx(Text, { span: true, inherit: true, truncate: "end", maw: 200, visibleFrom: "sm", children: name }), _jsx(VisuallyHidden, { component: "span", hiddenFrom: "sm", children: name }), branchName && status && (_jsxs(Text, { span: true, size: "xs", c: "dimmed", visibleFrom: "md", style: { flexShrink: 0 }, children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7 " }), _jsx("span", { "data-testid": status.testId, "data-status": status.value, children: status.label })] })), unsaved > 0 && (_jsxs(Text, { span: true, size: "xs", fw: 600, px: 6, style: {
+                                    flexShrink: 0,
+                                    borderRadius: 'var(--mantine-radius-xl)',
+                                    background: 'var(--canopy-count-bg)',
+                                }, "data-testid": "branch-unsaved-count", children: [unsaved, _jsx(Box, { component: "span", visibleFrom: "sm", children: ' unsaved' }), _jsx(VisuallyHidden, { component: "span", hiddenFrom: "sm", children: ' unsaved' })] }))] }) }) }), _jsxs(Menu.Dropdown, { "data-testid": "branch-menu", ...menuFocus.dropdown, children: [branchName && status && (_jsx(Menu.Label, { hiddenFrom: "md", children: `${branchName} · ${status.label}` })), _jsx(Menu.Item, { onClick: onSwitchBranch, "data-testid": "manage-branches-menu-item", children: `${EDITOR_ACTIONS.switchBranch}…` }), _jsx(ReasonedMenuItem, { onClick: onRefreshBranch, blockedReason: noBranch, "data-testid": "refresh-branch-menu-item", children: "Refresh branch" }), _jsx(Menu.Divider, {}), _jsx(Menu.Label, { children: "Unsaved changes" }), unsavedEntries.length === 0 ? (_jsx(Text, { size: "sm", c: "dimmed", px: "sm", py: 6, "data-testid": "edited-entries-empty", children: unsaved === 0 ? 'No unsaved changes on this branch.' : 'Loading their names…' })) : (unsavedEntries.map((entry) => (_jsx(Menu.Item, { onClick: () => onEntrySelect(entry.path), children: entry.label }, entry.path)))), _jsx(Menu.Divider, {}), _jsx(DestructiveMenuItem, { "data-testid": "discard-all-drafts-menu-item", onClick: onDiscardAll, blockedReason: noBranch ?? (unsaved === 0 ? 'Nothing to discard.' : undefined), children: unsaved > 0
+                            ? `Discard all changes (${plural(unsaved, 'entry', 'entries')})`
+                            : 'Discard all changes' })] })] }));
+}

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

@@ -9,9 +9,11 @@ export interface ConfirmDeleteModalProps {
     loading?: boolean;
     /** Rendered between the message and the buttons. */
     children?: ReactNode;
+    /** Where focus goes once it closes; Mantine's default, the element focused at open, without it. */
+    returnFocusTo?: () => HTMLElement | null;
 }
 /**
  * Confirmation modal for delete operations.
  * Provides a clear warning UI with red/danger theme.
  */
-export declare function ConfirmDeleteModal({ isOpen, title, message, confirmLabel, onConfirm, onClose, loading, children, }: ConfirmDeleteModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmDeleteModal({ isOpen, title, message, confirmLabel, onConfirm, onClose, loading, children, returnFocusTo, }: ConfirmDeleteModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/ConfirmDeleteModal.js

@@ -1,10 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal, Button, Text, Group, Stack } from '@mantine/core';
+import { focusReturnProps } from '../utils/focus-return.js';
 /**
  * Confirmation modal for delete operations.
  * Provides a clear warning UI with red/danger theme.
  */
-export function ConfirmDeleteModal({ isOpen, title, message, confirmLabel = 'Delete', onConfirm, onClose, loading = false, children, }) {
-    return (_jsx(Modal, { opened: isOpen, onClose: onClose, title: title, centered: true, size: "md", closeButtonProps: { disabled: loading }, closeOnEscape: !loading, closeOnClickOutside: !loading, children: _jsxs(Stack, { gap: "md", "data-testid": "confirm-delete-modal", children: [_jsx(Text, { size: "sm", children: message }), children, _jsxs(Group, { justify: "flex-end", gap: "sm", children: [_jsx(Button, { size: "sm", variant: "default", onClick: onClose, disabled: loading, children: "Cancel" }), _jsx(Button, { size: "sm", color: "red", onClick: onConfirm, loading: loading, "data-testid": "confirm-delete-submit", children: confirmLabel })] })] }) }));
+export function ConfirmDeleteModal({ isOpen, title, message, confirmLabel = 'Delete', onConfirm, onClose, loading = false, children, returnFocusTo, }) {
+    return (_jsx(Modal, { opened: isOpen, onClose: onClose, title: title, centered: true, size: "md", closeButtonProps: { disabled: loading }, closeOnEscape: !loading, closeOnClickOutside: !loading, ...focusReturnProps(returnFocusTo), children: _jsxs(Stack, { gap: "md", "data-testid": "confirm-delete-modal", children: [_jsx(Text, { size: "sm", children: message }), children, _jsxs(Group, { justify: "flex-end", gap: "sm", children: [_jsx(Button, { size: "sm", variant: "default", onClick: onClose, disabled: loading, children: "Cancel" }), _jsx(Button, { size: "sm", color: "red", onClick: onConfirm, loading: loading, "data-testid": "confirm-delete-submit", children: confirmLabel })] })] }) }));
 }

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

@@ -3,132 +3,76 @@ 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;
-    /** Ref to the button whose menu opens the file navigator. */
+    /** Opens the content panel on a collection. */
+    onCollectionOpen: (collectionPath: string) => void;
+    /** The entry menu's trigger. */
     navigatorToggleRef?: Ref<HTMLButtonElement>;
-    /** Ref to the button whose menu opens the branch manager and discards all drafts. */
+    /** The branch pill. */
     branchToggleRef?: Ref<HTMLButtonElement>;
-    /**
-     * Callback to reload the current file.
-     */
+    /** 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;
+    /** 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;
-    /**
-     * Current branch status (undefined if unknown).
-     */
+    /** 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[];
@@ -140,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,49 +1,27 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef } from 'react';
-import { Alert, Badge, Box, Button, Group, Indicator, Menu, Paper, Stack, Text, Title, Tooltip, VisuallyHidden, } from '@mantine/core';
-import { useMergedRef } from '@mantine/hooks';
-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, 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 { ReasonedMenuItem } from './ReasonedMenuItem.js';
-import { useMenuItemFocusReturn } from '../utils/focus-return.js';
-const EDITED_ENTRIES_HINT = 'Entries you edit on this branch appear here.';
-/** An empty section of a menu with other items: plain text, so arrow keys skip it. */
-function MenuEmptyText({ hint, children, ...rest }) {
-    return (_jsxs(Text, { size: "sm", c: "dimmed", px: "sm", py: 6, ...rest, children: [children, _jsx(Text, { size: "xs", c: "dimmed", component: "span", display: "block", children: hint })] }));
-}
+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';
 /**
- * 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 const EditorHeader = forwardRef(function EditorHeader({ siteTitle, siteSubtitle, headerTitle, currentEntry, branchName, operatingMode, busy, breadcrumbSegments, editedFiles, modifiedCount, unresolvedCommentCount: _, comments, onNavigatorOpen, navigatorToggleRef, branchToggleRef, onFileReload, onFileDiscardDraft, onEntrySelect, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onCommentsPanelOpen, onSave, onSubmit, hasUnsavedChanges, draftStorageFailed = false, 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');
-    const fileToggle = useRef(null);
-    const fileToggleRef = useMergedRef(fileToggle, navigatorToggleRef);
-    const branchToggle = useRef(null);
-    const branchToggleMergedRef = useMergedRef(branchToggle, branchToggleRef);
-    const fileMenuFocus = useMenuItemFocusReturn(fileToggle);
-    const branchMenuFocus = useMenuItemFocusReturn(branchToggle);
-    // Save stays focusable while blocked (`aria-disabled`, not `disabled`), so its reason opens on
-    // keyboard focus and touch as well as hover; the click does nothing.
-    const saveBlocked = !branchName || !currentEntry || busy || !hasUnsavedChanges || branchReadOnly || statusLocked;
-    // Why Save is blocked, with the way forward. The Tooltip hides it while a save is in flight.
-    const saveBlockedReason = branchReadOnly
+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.'
@@ -53,102 +31,103 @@ export const EditorHeader = forwardRef(function EditorHeader({ siteTitle, siteSu
                     : branchStatus === 'approved'
                         ? 'This branch is approved. Withdraw it to make changes.'
                         : `This branch is ${branchStatus}. Its content is read-only.`
-                : !branchName
-                    ? 'Open a branch first.'
-                    : !currentEntry
-                        ? 'Open an entry to save it.'
-                        : !hasUnsavedChanges
-                            ? 'No changes to save.'
-                            : '';
-    const statusPresentation = branchStatusPresentation(branchStatus, branchIsProtected);
-    const unresolvedCount = comments.filter((t) => !t.resolved).length;
-    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", ...fileMenuFocus.menu, children: [_jsx(Menu.Target, { children: _jsx(Button, { ref: fileToggleRef, "data-testid": "file-dropdown-button", variant: "outline", color: "gray", leftSection: _jsx(IconFolderOpen, { size: 16 }), rightSection: _jsx(IconChevronDown, { size: 14 }), children: currentEntry?.label ?? 'No entry selected' }) }), _jsxs(Menu.Dropdown, { ...fileMenuFocus.dropdown, children: [_jsx(ReasonedMenuItem, { onClick: onFileReload, blockedReason: !branchName
-                                                                ? 'Open a branch first.'
-                                                                : !currentEntry
-                                                                    ? 'Open an entry first.'
-                                                                    : undefined, children: "Reload entry" }), _jsx(ReasonedMenuItem, { "data-testid": "discard-file-draft-menu-item", onClick: onFileDiscardDraft, blockedReason: currentEntry ? undefined : 'Open an entry first.', children: "Discard changes" }), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { "data-testid": "all-files-menu-item", onClick: onNavigatorOpen, children: "All content" }), _jsx(Menu.Divider, {}), _jsx(Menu.Label, { children: "Recently modified" }), editedFiles.slice(0, 3).length === 0 ? (_jsx(MenuEmptyText, { "data-testid": "recent-entries-empty", hint: EDITED_ENTRIES_HINT, children: "No edited entries yet" })) : (editedFiles.slice(0, 3).map((file) => (_jsx(Menu.Item, { onClick: () => onEntrySelect(file.path), 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", px: "xs", onClick: onNavigatorOpen, "data-testid": "breadcrumb-segment", children: segment })] }, `${segment}-${idx}`))) }), _jsxs(Menu, { withinPortal: true, shadow: "sm", ...branchMenuFocus.menu, children: [_jsx(Menu.Target, { children: _jsx(Button, { ref: branchToggleMergedRef, variant: "outline", color: "gray", 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", ...branchMenuFocus.dropdown, children: [_jsx(ReasonedMenuItem, { onClick: onBranchReloadData, blockedReason: branchName ? undefined : 'Open a branch first.', children: "Reload all entries" }), _jsx(ReasonedMenuItem, { "data-testid": "discard-all-drafts-menu-item", onClick: onBranchDiscardDrafts, blockedReason: branchName ? undefined : 'Open a branch first.', children: "Discard all changes" }), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { onClick: onBranchManagerOpen, "data-testid": "manage-branches-menu-item", children: `${EDITOR_ACTIONS.switchBranch}…` }), _jsx(Menu.Divider, {}), modifiedCount > 0 && (_jsx(Menu.Label, { children: `${modifiedCount} ${modifiedCount === 1 ? 'entry' : 'entries'} modified` })), editedFiles.length === 0 ? (_jsx(MenuEmptyText, { "data-testid": "edited-entries-empty", hint: EDITED_ENTRIES_HINT, children: "No edited entries yet" })) : (editedFiles.map((file) => (_jsx(Menu.Item, { onClick: () => onEntrySelect(file.path), children: file.label }, `branch-mod-${file.path}`))))] })] }), clientOperatingStrategy(operatingMode ?? 'prod').supportsStatusBadge() &&
-                                            branchName &&
-                                            statusPresentation && (_jsx(Badge, { color: statusPresentation.color, variant: statusPresentation.variant, size: "sm", "data-testid": `header-status-badge-${branchIsProtected ? 'protected' : branchStatus}`, "data-status": branchIsProtected ? 'protected' : branchStatus, children: statusPresentation.label })), clientOperatingStrategy(operatingMode ?? 'prod').supportsComments() &&
-                                            branchName && (_jsx(Indicator, { label: _jsx("span", { "data-testid": "comments-unresolved-count", children: unresolvedCount }), size: 18, withBorder: true, disabled: unresolvedCount === 0, styles: {
-                                                indicator: {
-                                                    pointerEvents: 'none',
-                                                    // Mantine paints the pill again in a ::before, from this variable.
-                                                    '--indicator-color': 'var(--canopy-count-bg)',
-                                                    '--indicator-text-color': 'var(--mantine-color-text)',
-                                                },
-                                            }, children: _jsx(Button, { variant: "outline", color: "gray", onClick: onCommentsPanelOpen, "data-testid": "comments-button", "aria-label": unresolvedCount > 0 ? `Comments, ${unresolvedCount} unresolved` : undefined, children: "Comments" }) }))] })] }), _jsxs(Group, { gap: "xs", wrap: "nowrap", children: [_jsx(Box, { role: "status", w: 112, ta: "right", children: hasUnsavedChanges && (_jsx(Tooltip, { label: "Your browser couldn't store these changes. Save before you leave or reload, or they'll be lost.", disabled: !draftStorageFailed, multiline: true, w: 260, children: _jsxs(Text, { size: "xs", lh: 1.2, c: draftStorageFailed ? 'var(--canopy-danger-text)' : 'dimmed', "data-testid": "unsaved-indicator", children: [draftStorageFailed
-                                                    ? 'Unsaved · not kept on this device'
-                                                    : 'Unsaved · kept on this device', draftStorageFailed && (_jsx(VisuallyHidden, { component: "span", children: ". Save before you leave or reload, or they'll be lost." }))] }) })) }), _jsx(Tooltip, { label: saveBlockedReason, disabled: !saveBlocked || busy, multiline: true, maw: 280, children: _jsx(Button, { "data-testid": "save-button", variant: "light", size: "sm", onClick: () => {
-                                            if (!saveBlocked)
-                                                onSave();
-                                        }, "data-disabled": saveBlocked ? true : undefined, "aria-disabled": saveBlocked ? true : undefined, children: EDITOR_ACTIONS.save }) }), (() => {
-                                    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.
-                                    const actionBlocked = !branchName || busy || !canPerformAction;
-                                    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 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, multiline: true, maw: 320, children: _jsx(Button, { size: "sm", color: isWithdrawable ? 'orange' : 'brand', 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 }) }));
-                                })()] })] }), 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, { variant: "default", onClick: onBranchManagerOpen, children: `${EDITOR_ACTIONS.newBranch}…` })] }) })), 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 Switch branch… to retry.`
-                                    : branchStatus === 'submitted'
-                                        ? `Branch "${branchName}" is submitted for review and locked for edits. Withdraw it from review to make changes.`
-                                        : `Branch "${branchName}" is ${branchStatus} — content is read-only.` }), _jsx(Button, { variant: "default", onClick: onBranchManagerOpen, children: `${EDITOR_ACTIONS.switchBranch}…` })] }) }))] }) }));
-});
+                : 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 }) }));
+}